/* wilfolio · design system v2 · navy / orange / steel — no greens anywhere */
:root{
  color-scheme: dark;
  --ground:#0A1222; --surface:#101B2F; --raised:#16243D; --sunken:#08101E;
  --line:#22334F; --line-soft:#1A2942;
  --ink:#EDF1F7; --ink-2:#AEBBD0; --ink-3:#7F8EA6;
  --orange:#F28A3C; --orange-hi:#FFA35F; --on-orange:#1B0E04;
  --steel:#8FB3E6; --steel-deep:#4F7FC4; --steel-soft:rgba(143,179,230,.14);
  --pass:#7FB2FF; --warn:#F4B740; --fail:#F07167;
  --glass:rgba(16,27,47,.72); --grid:rgba(143,179,230,.055);
  --shadow:0 30px 80px -40px rgba(0,0,0,.75);
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r:14px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --ground:#F2F4F8; --surface:#FFFFFF; --raised:#E9EEF5; --sunken:#E3E9F2;
    --line:#D1DAE7; --line-soft:#E1E7F0;
    --ink:#0E1A2E; --ink-2:#3E4C63; --ink-3:#5F6E86;
    --orange:#C2560F; --orange-hi:#A94A0C; --on-orange:#FFFFFF;
    --steel:#2D5C9F; --steel-deep:#224A83; --steel-soft:rgba(45,92,159,.10);
    --pass:#2459B8; --warn:#935C00; --fail:#B42B22;
    --glass:rgba(255,255,255,.8); --grid:rgba(45,92,159,.06);
    --shadow:0 30px 70px -45px rgba(14,26,46,.35);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --ground:#F2F4F8; --surface:#FFFFFF; --raised:#E9EEF5; --sunken:#E3E9F2;
  --line:#D1DAE7; --line-soft:#E1E7F0;
  --ink:#0E1A2E; --ink-2:#3E4C63; --ink-3:#5F6E86;
  --orange:#C2560F; --orange-hi:#A94A0C; --on-orange:#FFFFFF;
  --steel:#2D5C9F; --steel-deep:#224A83; --steel-soft:rgba(45,92,159,.10);
  --pass:#2459B8; --warn:#935C00; --fail:#B42B22;
  --glass:rgba(255,255,255,.8); --grid:rgba(45,92,159,.06);
  --shadow:0 30px 70px -45px rgba(14,26,46,.35);
}
:root[data-theme="dark"]{ color-scheme: dark; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;background-attachment:fixed}
a{color:var(--steel);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(40px,6vw,74px);line-height:1.02;font-variation-settings:"opsz" 96}
h2{font-size:clamp(30px,3.8vw,46px);line-height:1.06;font-variation-settings:"opsz" 72}
h3{font-size:22px;line-height:1.2;font-variation-settings:"opsz" 28}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-3)}
.small{font-size:13px}
hr.rule{border:0;border-top:1px solid var(--line-soft);margin:0}
em.o{font-style:italic;color:var(--orange)}

/* ── header ── */
.wf-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
.wf-bar .wrap{display:flex;align-items:center;gap:14px;height:64px}
.wf-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.wf-brand .wm{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.015em;line-height:1;font-variation-settings:"opsz" 48}
.wf-mark{flex:none;filter:drop-shadow(0 6px 14px rgba(242,138,60,.28))}
.wf-nav a.nav-model{color:var(--orange);font-weight:600}
.wf-nav{display:flex;gap:2px;margin-left:auto}
.wf-nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:8px 11px;white-space:nowrap;border-radius:9px;transition:color .15s,background .15s}
.wf-nav a:hover{color:var(--ink);background:var(--raised)}
.wf-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange);border-radius:0}
.iconbtn{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;color:var(--ink-2);background:transparent;cursor:pointer;line-height:1}
.iconbtn:hover{border-color:var(--steel);color:var(--ink)}
.wf-menu{display:none}
@media (max-width:1100px){
  .wf-nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px 14px}
  .wf-nav.open{display:flex}
  .wf-nav a[aria-current="page"]{box-shadow:none;color:var(--orange)}
  .wf-menu{display:inline-block;margin-left:auto}
  .wf-bar .cta-sm{display:none}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--body);border-radius:10px;padding:12px 18px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s,border-color .18s;white-space:nowrap}
.btn-o{background:var(--orange);color:var(--on-orange)}
.btn-o:hover{background:var(--orange-hi);transform:translateY(-1px);box-shadow:0 12px 30px -14px var(--orange)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--steel)}
.btn-sm{padding:8px 13px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ── chips / segmented ── */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 13.5px var(--body);padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:all .18s}
.chip:hover{color:var(--ink);border-color:var(--steel)}
.chip[aria-pressed="true"]{background:var(--steel-soft);border-color:var(--steel);color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;background:var(--sunken)}
.seg button{font:600 13.5px var(--body);border:0;background:transparent;color:var(--ink-3);padding:7px 14px;border-radius:7px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line)}

/* ── surfaces ── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap}
.tag.o{border-color:var(--orange);color:var(--orange)}
.pill{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.pill.fit{background:color-mix(in srgb,var(--pass) 16%,transparent);color:var(--pass)}
.pill.maybe{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.no{background:color-mix(in srgb,var(--fail) 14%,transparent);color:var(--fail)}
.pill.info{background:var(--steel-soft);color:var(--steel)}
.pass{color:var(--pass)} .warn{color:var(--warn)} .fail{color:var(--fail)}

/* ── forms ── */
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field label small{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;background:var(--sunken);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:15px var(--body);transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--steel);outline:none}
.field .hint{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.field .emsg{display:none;font-size:12.5px;color:var(--fail);margin-top:5px}
.field.err input,.field.err select{border-color:var(--fail)}
.field.err .emsg{display:block}
input[type=range]{width:100%;accent-color:var(--orange);height:22px;margin:0}
.slider label{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
.slider output{font-family:var(--mono);color:var(--ink);font-size:12.5px}

/* ── tables ── */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.t{border-collapse:collapse;width:100%;font-size:14px}
.t th,.t td{padding:10px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.t thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--raised)}
.t tr:last-child td{border-bottom:0}
.t td.r,.t th.r{text-align:right}
.t td.num{white-space:nowrap}

/* ── footer ── */
.wf-foot{border-top:1px solid var(--line-soft);padding-block:44px 64px;font-size:12.5px;color:var(--ink-3);margin-top:40px}
.wf-foot .cols{display:grid;grid-template-columns:1.2fr 2fr;gap:30px}
@media (max-width:760px){.wf-foot .cols{grid-template-columns:1fr}}
.wf-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.wf-foot nav a{color:var(--ink-2)}
.wf-foot p+p{margin-top:10px}

/* ── command palette ── */
.cmdk{position:fixed;inset:0;z-index:90;background:rgba(5,9,18,.6);backdrop-filter:blur(3px);display:grid;place-items:start center;padding:12vh 16px 0}
.cmdk-box{width:min(620px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);animation:wfpop .16s ease-out}
.cmdk input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-soft);padding:17px 18px;color:var(--ink);font:500 17px var(--body);outline:none}
.cmdk ul{list-style:none;margin:0;padding:6px;max-height:52vh;overflow:auto}
.cmdk li{padding:10px 12px;border-radius:9px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;color:var(--ink-2);font-size:14.5px}
.cmdk li[aria-selected="true"]{background:var(--raised);color:var(--ink)}
.cmdk li small{font-family:var(--mono);color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.cmdk .empty{padding:14px 12px;color:var(--ink-3);font-size:14px}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ground);font:600 14px var(--body);padding:10px 16px;border-radius:10px;z-index:95;animation:wfpop .18s ease-out}

@keyframes wfpop{from{transform:translateY(-6px) scale(.98);opacity:.5}to{transform:none;opacity:1}}
.toast{animation-name:wftoast}
@keyframes wftoast{from{transform:translate(-50%,8px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}
@keyframes wfrise{from{transform:translateY(12px)}to{transform:none}}
.rise{animation:wfrise .7s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ── account menu + sign-in dialog ── */
.wf-auth{position:relative}
.acct-menu{position:absolute;right:0;top:38px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;z-index:60}
.acct-menu a,.acct-menu button{all:unset;cursor:pointer;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--ink)}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a:focus-visible,.acct-menu button:focus-visible{background:var(--raised)}
.signbox{max-width:440px}
.live-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--steel-soft);color:var(--steel)}
.authp-t{font-size:28px}
.authp-links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:14px}
.linkbtn{all:unset;cursor:pointer;color:var(--steel);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:focus-visible{outline:2px solid var(--orange);border-radius:4px}
.acct-menu .live-pill{font-size:9.5px}
/* phone header: keep everything inside 375px */
@media (max-width:560px){
  .wf-bar .wrap{gap:8px}
  .wf-brand{gap:8px}
  .wf-brand .wm{font-size:22px}
  .wf-mark{width:32px;height:32px}
  .wf-auth .iconbtn{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .iconbtn{padding:6px 7px}
}
select.sel{max-width:100%}

/* ── header v3: two rows, animated mark, blue sign-in, search row ── */
.wf-bar .wf-row1{display:flex;align-items:center;gap:14px;height:64px}
.wf-row2{border-top:1px solid var(--line-soft);transition:max-height .28s ease,opacity .2s ease;max-height:48px;overflow:hidden}
.wf-row2 .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.wf-bar.compact .wf-row2{max-height:0;opacity:0;border-top-color:transparent}
.wf-search{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;flex:1;max-width:560px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--sunken);color:var(--ink-3);font:14px var(--body);cursor:text;overflow:hidden}
.wf-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.wf-search kbd{font:500 11px var(--mono);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-3)}
.wf-search:hover,.wf-search:focus-visible{border-color:var(--steel);color:var(--ink-2)}
.wf-row2-right{display:flex;gap:4px;align-items:center;white-space:nowrap}
.wf-mini{all:unset;cursor:pointer;font:500 13px var(--body);color:var(--ink-3);padding:5px 9px;border-radius:7px}
.wf-mini:hover,.wf-mini:focus-visible{color:var(--ink);background:var(--raised)}
@media (max-width:640px){.wf-row2-right a.wf-mini{display:none}.wf-search kbd{display:none}}
.btn-blue{background:#3E78D6;color:#fff;border-color:#3E78D6}
.btn-blue:hover{background:#2F66C2;transform:translateY(-1px);box-shadow:0 10px 26px -14px #3E78D6}
.wf-auth .btn-blue{padding:8px 14px;font-size:14px}
.wf-acct{background:#3E78D6;color:#fff;border:0;font:600 13.5px var(--body);border-radius:9px;padding:8px 12px;cursor:pointer;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-acct:hover{background:#2F66C2}
@media (max-width:1100px){.wf-nav{top:108px}}
/* animated mark: tile pops, arches draw, keystone drops and settles */
.wf-mark.wf-anim .wf-tile{transform-origin:24px 24px;animation:wfTile .55s cubic-bezier(.2,1.4,.4,1) both}
.wf-mark.wf-anim .wf-w{stroke-dasharray:100;animation:wfDraw .9s .25s cubic-bezier(.6,0,.2,1) both}
.wf-mark.wf-anim .wf-key{animation:wfKey .7s 1s cubic-bezier(.3,1.6,.5,1) both}
.wf-mark .wf-key{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.wf-brand:hover .wf-mark .wf-key,.wf-mark.lift .wf-key{transform:translateY(-3px)}
.wf-brand:hover .wf-mark{transform:none}
@keyframes wfTile{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wfDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes wfKey{0%{transform:translateY(-22px);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.slogan{display:inline-flex;align-items:center;gap:10px;font:500 clamp(15px,1.4vw,18px) var(--body);color:var(--ink);letter-spacing:.01em;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.slogan b{color:var(--orange);font-weight:600}
.slogan .wf-mark{filter:none}