:root{
    --bg:#faf7f1; --bg2:#f3efe6; --panel:#ffffff; --panel2:#f3efe6;
    --line:#e7e0d3; --line2:#d3c9b8;
    --ink:#211d18; --muted:#5d564c; --faint:#998f80;
    --acc:#cf4b2e; --acc-glow:rgba(207,75,46,.12);
    --disp:"Newsreader",serif; --body:"Instrument Sans",sans-serif; --mono:"Spline Sans Mono",monospace;
    --max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  section[id], header{scroll-margin-top:86px}
  body{
    background:var(--bg); color:var(--ink); font-family:var(--body);
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(900px 600px at 82% -5%, rgba(207,75,46,.07), transparent 60%),
      radial-gradient(700px 500px at -8% 18%, rgba(232,161,58,.09), transparent 60%);
  }
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px; position:relative; z-index:1}
  a{color:inherit; text-decoration:none}
  .mono{font-family:var(--mono); letter-spacing:.04em}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc)}

  /* NAV */
  nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, border-color .3s;
      border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(250,247,241,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
  .navin{max-width:var(--max); margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between}
  .brand{font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:-.01em}
  .brand i{color:var(--acc); font-style:normal}
  .navlinks{display:flex; align-items:center; gap:30px}
  .navlinks a{font-size:13px; color:var(--muted); letter-spacing:.02em; transition:color .2s}
  .navlinks a:hover{color:var(--ink)}
  .navlinks a.cta{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bg);
    background:var(--acc); padding:9px 16px; border-radius:999px; transition:transform .2s, box-shadow .2s}
  .navlinks a.cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px var(--acc-glow); color:var(--bg)}
  .brand, .navlinks a.cta, .status{white-space:nowrap}
  @media(max-width:1000px){ .navlinks{gap:18px} .navlinks a{font-size:12.5px} .navlinks a.cta{padding:8px 13px} }
  .navtoggle{display:none; background:none; border:1px solid var(--line2); border-radius:9px; padding:9px 10px; cursor:pointer}
  .navtoggle span{display:block; width:18px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px}
  @media(max-width:760px){
    .navtoggle{display:block}
    .navlinks{position:absolute; top:100%; right:32px; left:32px; flex-direction:column; align-items:stretch; gap:0;
      background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; margin-top:8px;
      box-shadow:0 22px 50px -26px rgba(60,45,25,.4); display:none}
    nav.open .navlinks{display:flex}
    .navlinks a{padding:13px 12px; font-size:15px; border-radius:9px}
    .navlinks a:hover{background:var(--bg2)}
    .navlinks a.cta{text-align:center; margin-top:6px}
  }

  /* HERO */
  header{padding:148px 0 64px; position:relative}
  .hero{display:grid; grid-template-columns:1.35fr .9fr; gap:54px; align-items:stretch}
  .status{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--acc); border:1px solid var(--line2); padding:7px 14px; border-radius:999px; margin-bottom:30px;
    background:rgba(207,75,46,.06)}
  .status .pulse{width:7px; height:7px; border-radius:50%; background:var(--acc); animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,75,46,.45)}70%{box-shadow:0 0 0 9px rgba(207,75,46,0)}100%{box-shadow:0 0 0 0 rgba(207,75,46,0)}}
  h1{font-family:var(--disp); font-weight:500; font-size:clamp(44px,6.2vw,82px); line-height:1.04; letter-spacing:-.02em; margin-bottom:28px}
  h1 em{font-style:italic; color:var(--acc)}
  .lede{font-size:clamp(17px,1.9vw,20px); color:var(--muted); max-width:46ch; margin-bottom:34px; text-wrap:pretty}
  .lede strong{color:var(--ink); font-weight:600}
  .role-line{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--faint); margin-bottom:34px}
  .role-line b{color:var(--acc); font-weight:400}
  .ctas{display:flex; gap:14px; flex-wrap:wrap}
  .btn{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--mono); font-size:13px; letter-spacing:.04em;
    padding:13px 22px; border-radius:999px; transition:transform .2s, box-shadow .2s, border-color .2s}
  .btn.primary{background:var(--acc); color:var(--bg); font-weight:700}
  .btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px var(--acc-glow)}
  .btn.ghost{border:1px solid var(--line2); color:var(--ink)}
  .btn.ghost:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-2px)}

  .portrait{position:relative; min-height:480px; border:1px solid var(--line2); overflow:hidden; box-shadow:0 36px 80px -30px rgba(60,45,25,.3)}
  .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:saturate(.96) contrast(1.02)}
  .portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 75%, rgba(33,29,24,.22)); pointer-events:none}
  .portrait .id{position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#faf7f1; background:rgba(33,29,24,.55); border:1px solid rgba(255,255,255,.28); padding:8px 12px; backdrop-filter:blur(6px)}
  .portrait .id b{color:#ffb59e; font-weight:500}
  @media(max-width:860px){
    .hero{grid-template-columns:1fr; gap:40px}
    .portrait{min-height:400px}
    header{padding:120px 0 40px}
  }

  /* TRUSTED */
  .trusted{padding:40px 0 10px; border-top:1px solid var(--line); margin-top:38px}
  .trusted .lab{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:20px}
  .logos{display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px}
  .logos span{font-family:var(--disp); font-weight:600; font-size:18px; color:#8a8070; transition:color .2s}
  .logos span:hover{color:var(--ink)}

  /* SECTION SCAFFOLD */
  section{padding:92px 0; position:relative}
  .shead{display:flex; align-items:baseline; gap:18px; margin-bottom:46px; flex-wrap:wrap}
  .shead .num{font-family:var(--mono); font-size:13px; color:var(--acc)}
  .shead h2{font-family:var(--disp); font-weight:500; font-size:clamp(30px,4.2vw,46px); letter-spacing:-.02em}
  .shead .sub{color:var(--faint); font-size:13px; margin-left:auto; font-family:var(--mono); letter-spacing:.03em}

  /* WORK */
  .work-grid{display:flex; flex-direction:column; gap:22px}
  .case{display:grid; grid-template-columns:1fr 1.1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    background:linear-gradient(180deg,var(--panel),var(--bg2)); transition:border-color .3s, transform .3s}
  .case:hover{border-color:var(--line2); transform:translateY(-3px)}
  .case.flip{grid-template-columns:1.1fr 1fr}
  .case.flip .case-media{order:2}
  .case-body{padding:36px 38px; display:flex; flex-direction:column}
  .case-org{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .case-org .chip{color:var(--faint); border:1px solid var(--line); padding:3px 9px; border-radius:999px; letter-spacing:.08em}
  .case-org a:hover{text-decoration:underline}
  .case h3{font-family:var(--disp); font-weight:500; font-size:27px; letter-spacing:-.015em; margin-bottom:14px; line-height:1.12}
  .case p{color:var(--muted); font-size:15.5px; margin-bottom:20px; text-wrap:pretty}
  .case .metrics{display:flex; gap:28px; margin-top:auto; flex-wrap:wrap}
  .metric .big{font-family:var(--disp); font-weight:500; font-size:32px; color:var(--ink); letter-spacing:-.02em; line-height:1}
  .metric .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:7px}
  .proof{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
  .proof b{color:var(--acc); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:5px; font-weight:400}
  .case-media{position:relative; background:var(--bg); min-height:280px; overflow:hidden}
  .case-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .case-media.logos{background:#fff}
  .case-media.split img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .case-media.split .a{clip-path:polygon(0 0, 100% 0, 0 100%)}
  .case-media.split .b{clip-path:polygon(100% 0, 100% 100%, 0 100%); background:#fff}
  .case-media.split .seam{position:absolute; inset:0; pointer-events:none; background:var(--acc);
    clip-path:polygon(100% 0, 100% 4px, 4px 100%, 0 100%, 0 calc(100% - 4px), calc(100% - 4px) 0)}
  .case-media.logos img{object-fit:contain; padding:26px}
  .case-media.brandpanel{background:radial-gradient(120% 90% at 70% 8%, rgba(207,75,46,.12), transparent 55%), var(--panel2)}
  .bp{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; text-align:center; padding:28px}
  .bp-mark{font-family:var(--disp); font-weight:600; font-size:clamp(34px,4vw,46px); color:var(--ink); letter-spacing:-.025em; line-height:1}
  .bp-mark span{color:var(--acc)}
  .bp-tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
  /* clients band */
  .clients-band{border-top:1px solid var(--line); padding:78px 0}
  .cb-head{text-align:center; max-width:60ch; margin:0 auto 32px}
  .cb-head .lab{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:14px}
  .cb-head p{color:var(--muted); font-size:15.5px; text-wrap:pretty}
  .cb-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3.5vw,42px); box-shadow:0 26px 60px -34px rgba(60,45,25,.3)}
  .cb-card img{display:block; width:100%; height:auto}
  .ph{position:absolute; inset:0; background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.028) 0 10px, transparent 10px 20px), var(--panel2);
    display:flex; align-items:flex-end; padding:20px}
  .ph::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 70% 10%, var(--acc-glow), transparent 55%); opacity:.5}
  .ph .cap{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
    border:1px dashed var(--line2); padding:7px 11px; border-radius:7px; background:rgba(255,255,255,.65)}
  @media(max-width:820px){
    .case, .case.flip{grid-template-columns:1fr}
    .case.flip .case-media{order:0}
    .case-media{min-height:180px}
    .case-body{padding:28px 24px}
  }

  /* MORE BUILDS */
  .sub-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin:8px 0 16px}
  .more{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .mini{border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, transform .3s}
  .mini:hover{border-color:rgba(207,75,46,.45); transform:translateY(-3px)}
  .mini-shot{position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line);
    background:repeating-linear-gradient(135deg, rgba(0,0,0,.028) 0 10px, transparent 10px 20px), var(--panel2); display:flex; align-items:center; justify-content:center}
  .mini-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .mini-shot .cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint); border:1px dashed var(--line2); padding:6px 10px; border-radius:6px; background:rgba(255,255,255,.55)}
  .mini-body{padding:20px 22px}
  .mini h4{font-family:var(--disp); font-weight:600; font-size:17px; margin-bottom:8px; display:flex; align-items:center; gap:8px}
  .mini h4 .arr{margin-left:auto; color:var(--acc); font-family:var(--mono); font-size:13px}
  .mini p{color:var(--muted); font-size:13.5px}
  .mini-shot.split{display:grid; grid-template-columns:2fr 1fr; gap:0; background:#0d1014}
  .mini-shot.split img{position:relative; inset:auto; width:100%; height:100%; object-fit:cover}
  .mini-shot.split img + img{border-left:1px solid rgba(255,255,255,.14)}
  #projects .more{grid-template-columns:repeat(2,1fr); gap:22px}
  @media(max-width:820px){ .more{grid-template-columns:1fr} }

  /* ALSO — compact credit lists */
  .also{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
  .also .col{border:1px solid var(--line); border-radius:14px; padding:24px 26px; background:var(--panel)}
  .also h5{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; font-weight:400}
  .also ul{list-style:none; display:flex; flex-direction:column; gap:10px}
  .also li{font-size:14px; color:var(--muted); line-height:1.5; text-wrap:pretty}
  .also a{color:var(--ink); font-weight:500}
  .also a:hover{color:var(--acc)}
  @media(max-width:820px){ .also{grid-template-columns:1fr} }

  /* ABOUT */
  .about{display:grid; grid-template-columns:1.4fr .85fr; gap:54px; align-items:start}
  .about-copy p{color:var(--muted); margin-bottom:18px; font-size:16.5px; text-wrap:pretty}
  .about-copy p strong{color:var(--ink); font-weight:600}
  .snapshot{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--panel); position:sticky; top:96px}
  .snapshot h4{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
  .snap-row{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
  .snap-row:last-child{border-bottom:0}
  .snap-row .k{color:var(--faint); font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase}
  .snap-row .v{color:var(--ink); text-align:right; font-weight:500}
  @media(max-width:820px){ .about{grid-template-columns:1fr} .snapshot{position:static} }

  /* EXPERIENCE — parallel tracks */
  .g-hint{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); margin:-26px 0 30px}
  .gantt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px}
  .gantt{min-width:920px; position:relative; padding-top:26px}
  .g-years{position:absolute; top:0; left:0; right:0; height:20px}
  .g-years b{position:absolute; transform:translateX(-50%); font:400 11px var(--mono); color:var(--faint); letter-spacing:.04em}
  .g-body{position:relative}
  .g-grid{position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none}
  .g-grid i{position:absolute; top:0; bottom:0; width:1px; background:var(--line); opacity:.65}
  .g-lane{position:relative; padding:16px 0 8px}
  .g-lane + .g-lane{border-top:1px dashed var(--line2)}
  .g-lab{position:relative; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .g-row{position:relative; height:28px; margin-bottom:7px}
  .g-bar{position:absolute; top:0; height:28px; min-width:60px; border:0; border-radius:7px; cursor:pointer; padding:0 7px; font:600 10.5px/28px var(--body); color:#faf7f1; white-space:nowrap; text-align:left; transition:transform .15s, box-shadow .15s; overflow:hidden}
  .g-bar span{pointer-events:none; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .g-bar:hover{transform:translateY(-1px)}
  .g-bar.active, .g-bar:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink); outline:none}
  .g-bar.end{left:auto !important; right:0}
  .mt{background:#cf4b2e}
  .br{background:#4a7370}
  .ed{background:#b9892e}
  .te{background:#71803f}
  .g-detail{border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:28px 32px; margin-top:26px}
  .g-detail .gwhen{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.04em; margin-bottom:6px}
  .g-detail h3{font-family:var(--disp); font-weight:500; font-size:23px; letter-spacing:-.01em; margin-bottom:4px}
  .g-detail .gwhere{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
  .g-detail p{color:var(--muted); font-size:15.5px; max-width:70ch; text-wrap:pretty; margin:0}

  /* key roles timeline + map toggle */
  .kr-list{margin-left:6px}
  .kr{display:grid; grid-template-columns:150px 1fr; gap:30px; padding:0 0 40px 30px; border-left:1px solid var(--line); position:relative}
  .kr:last-of-type{padding-bottom:6px}
  .kr::before{content:""; position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--acc)}
  .kr .when{font-family:var(--mono); font-size:12px; color:var(--acc); padding-top:2px}
  .kr h3{font-family:var(--disp); font-weight:500; font-size:22px; letter-spacing:-.01em; margin-bottom:3px}
  .kr .where{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
  .kr p{color:var(--muted); font-size:15px; max-width:66ch; text-wrap:pretty; margin:0}
  @media(max-width:620px){ .kr{grid-template-columns:1fr; gap:6px} }
  .xp-tabs{display:flex; gap:4px; border:1px solid var(--line2); border-radius:999px; padding:4px; margin-left:auto; align-self:center; background:var(--panel)}
  .xp-tabs button{white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:0; background:none; color:var(--muted); padding:9px 18px; border-radius:999px; cursor:pointer; transition:.2s}
  .xp-tabs button.active{background:var(--ink); color:var(--bg)}
  .xp-tabs button:not(.active):hover{color:var(--acc)}
  #gmap{margin-top:8px}
  #gmap[hidden]{display:none}
  @keyframes viewIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
  .view-in{animation:viewIn .45s cubic-bezier(.2,.7,.2,1)}
  @media(prefers-reduced-motion:reduce){ .view-in{animation:none} }

  /* offer strip */
  .offer{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel)}
  .offer-in{max-width:var(--max); margin:0 auto; padding:36px 32px; display:grid; grid-template-columns:110px repeat(4,1fr); gap:30px; align-items:start}
  .offer .lab{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); padding-top:5px}
  .offer .it .oh{font-family:var(--disp); font-weight:500; font-size:19px; margin-bottom:5px}
  .offer .it p{font-size:13.5px; color:var(--muted); margin:0; text-wrap:pretty}
  @media(max-width:860px){ .offer-in{grid-template-columns:1fr 1fr; gap:24px} .offer .lab{grid-column:1/-1; padding-top:0} }

  /* SKILLS */
  .skills{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
  .skillcard{border:1px solid var(--line); border-radius:16px; padding:28px; background:var(--panel); transition:border-color .3s, transform .3s}
  .skillcard:hover{border-color:var(--line2); transform:translateY(-3px)}
  .skillcard h4{font-family:var(--disp); font-weight:600; font-size:17px; margin-bottom:16px; display:flex; align-items:center; gap:11px}
  .skillcard h4 .ic{width:9px; height:9px; border-radius:2px; background:var(--acc)}
  .tags{display:flex; flex-wrap:wrap; gap:9px}
  .tags span{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted); border:1px solid var(--line);
    padding:7px 12px; border-radius:999px; transition:color .2s, border-color .2s}
  .tags span:hover{color:var(--acc); border-color:rgba(207,75,46,.45)}
  .client-line{display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
  .client-line .cl-lab{flex-basis:100%; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:2px}
  .client-line img{height:26px; width:auto; object-fit:contain; mix-blend-mode:multiply; opacity:.82}
  @media(max-width:680px){ .skills{grid-template-columns:1fr} }

  /* CONTACT */
  .contact{text-align:center; padding:110px 0 80px}
  .contact .eyebrow{margin-bottom:24px; display:block}
  .contact h2{font-family:var(--disp); font-weight:500; font-size:clamp(36px,5.8vw,72px); letter-spacing:-.02em; line-height:1.05; margin-bottom:26px}
  .contact h2 a{color:var(--acc); border-bottom:3px solid transparent; transition:border-color .2s}
  .contact h2 a:hover{border-color:var(--acc)}
  .contact .csub{color:var(--muted); max-width:46ch; margin:0 auto 36px; font-size:17px; text-wrap:pretty}
  .contact .ctas{justify-content:center}
  footer{border-top:1px solid var(--line); padding:30px 0}
  .footin{max-width:var(--max); margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
  footer .mono{font-size:12px; color:var(--faint)}
  footer .social{display:flex; gap:22px}
  footer .social a{font-family:var(--mono); font-size:12px; color:var(--muted); transition:color .2s}
  footer .social a:hover{color:var(--acc)}

  /* reveal */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .status .pulse{animation:none} }

  /* v2 — portfolio-first */
  #projects .more{grid-template-columns:repeat(2,1fr); gap:22px}
  @media(max-width:760px){ #projects .more{grid-template-columns:1fr} }
  #projects .mini h4{font-size:21px}
  #projects .mini p{font-size:14.5px}
  .navlinks a.on{color:var(--ink)}
  .pagehead{padding:150px 0 28px}
  .pagehead .eyebrow{display:block; margin-bottom:14px}
  .pagehead h1{font-family:var(--disp); font-weight:500; font-size:clamp(38px,5.2vw,64px); letter-spacing:-.02em; line-height:1.05; margin:0}
  .pagehead p{color:var(--muted); margin-top:14px; max-width:58ch; text-wrap:pretty}
  @media(max-width:860px){ .pagehead{padding:120px 0 20px} }