/* John Inniger — base design system.
   Pure black, Inter with Instrument Serif italic accents, dark minimal controls, and the logo red as the accent.
   hero-scene.js draws the hero backdrop; motion.css adds motion and interaction. */
:root{
  --bg:#000;--surface:#0a0a0b;--surface-2:#111113;
  --text:#fff;--text-soft:#d8d8d8;--body-text:#b3b3b3;--muted:#9a9a9a;--faint:#8a8a8f;
  --border:rgba(255,255,255,.16);--border-soft:rgba(255,255,255,.12);--line:rgba(255,255,255,.1);
  /* The logo red. Small red text uses a hair-lighter tint so it keeps 4.5:1 contrast on the dark surfaces. */
  --accent:#e31c1c;--accent-text:#ef2d2d;--accent-deep:#a30f0f;
  --sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  /* Controls: near-black with a hairline edge; hover lifts the fill, brightens the edge, and sweeps a sheen across. */
  --control:#0c0c0d;--control-hot:#161618;--control-edge:rgba(255,255,255,.14);--control-edge-hot:rgba(255,255,255,.42);
  --control-glow:0 0 18px rgba(255,255,255,.06);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --gutter:7%;
  /* Hero tokens (1280–1599px); breakpoints below retune them. */
  --logo:15.5px;--logo-mark:22px;--nav:14px;--nav-h:40px;--btn:13.5px;--btn-h:40px;--hero-btn-h:40px;
  --h1:52px;--lede:15.5px;--badge:12px;
  --header-y:22px;--header-x:48px;
  --badge-mb:20px;--lede-mt:16px;--actions-mt:24px;
  --header-h:calc(var(--header-y) + var(--nav-h) + 10px);
  /* The agent's resting screen: its full 540px wherever the viewport allows (the header and the hero's 44px of padding take the rest). */
  --screen-h:clamp(300px,calc(100svh - var(--header-h) - 44px),540px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{position:relative;margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{padding:0;border:0;background:none;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
a,button{-webkit-tap-highlight-color:transparent}
img{max-width:100%}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:200;padding:12px 16px;border-radius:6px;background:#fff;color:#000;font-weight:500}
.skip-link:focus{top:16px}
.eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--accent-text)}
:is(h1,h2,.section-heading p) em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.03em;color:var(--muted)}

/* Dark pills and controls; silver primary buttons */
.nav-pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:var(--nav-h);padding:0 18px;border:1px solid var(--control-edge);border-radius:7px;background:var(--control);color:#e4e4e4;font-size:var(--nav);font-weight:400;letter-spacing:-.01em;white-space:nowrap;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
.nav-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
.nav-pill:is(:hover,:focus-visible){border-color:var(--control-edge-hot);background:var(--control-hot);color:#fff;box-shadow:var(--control-glow)}
.nav-pill:is(:hover,:focus-visible)::before{transform:translateX(120%)}
.nav-pill[aria-current]{border-color:rgba(255,255,255,.3);color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--btn-h);padding:0 16px;border-radius:6px;font-size:var(--btn);font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;cursor:pointer;transition:background .35s,border-color .35s,box-shadow .35s,color .35s,filter .35s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 76%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none}
.btn:is(:hover,:focus-visible)::after{transform:translateX(130%)}
.btn-solid,.solid-button{background:linear-gradient(180deg,#fff 0%,#e7e7e7 48%,#cfcfcf 100%);color:#111;border:1px solid #fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.btn-solid:is(:hover,:focus-visible),.solid-button:is(:hover,:focus-visible){background:linear-gradient(180deg,#fff 0%,#f3f6ff 42%,#d5def2 100%);border-color:#f2f6ff;box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(186,208,255,.35),0 8px 18px rgba(255,255,255,.12)}
.text-cta{position:relative;display:inline-flex;align-items:center;gap:30px;margin-top:30px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.28);font-size:15px}
.text-cta span{font-size:22px;color:var(--accent)}

/* Header: logo | centered nav | Contact (a dark pill like the nav) */
.site-header{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--header-y) var(--header-x) 10px;border-bottom:1px solid transparent;view-transition-name:site-header}
.logo{position:relative;z-index:80;justify-self:start;display:inline-flex;align-items:center;gap:9px;font-size:var(--logo);font-weight:600;letter-spacing:-.03em;color:#fff}
.logo img{display:block;width:var(--logo-mark);height:var(--logo-mark);border-radius:4px}
.logo-suffix{font-weight:400;color:#d0d0d0}
#site-nav{justify-self:center;display:flex;align-items:center;gap:34px}
/* Center nav: quiet text links. An underline draws in on hover and stays, in red, under the section you're reading. */
.nav-link{position:relative;display:inline-flex;align-items:center;height:var(--nav-h);padding:0 2px;color:#bdbdbd;font-size:var(--nav);font-weight:400;letter-spacing:-.01em;white-space:nowrap;transition:color .3s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - .72em - 1px);height:1px;background:#fff;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-out),background-color .3s}
.nav-link:is(:hover,:focus-visible),.nav-link[aria-current]{color:#fff}
.nav-link:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:0 50%}
.nav-link[aria-current]::after{height:1.5px;background:var(--accent);transform:scaleX(1)}
.header-actions{position:relative;z-index:80;justify-self:end;display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;width:42px;height:42px;place-items:center;align-content:center;gap:5px;border:1px solid var(--control-edge);border-radius:6px;background:var(--control);transition:border-color .35s,background .35s}
.menu-toggle:hover{border-color:var(--control-edge-hot);background:var(--control-hot)}
.menu-toggle i{display:block;width:16px;height:1.5px;border-radius:1px;background:#fff}
.menu-backdrop{display:none}
.inner-page main{padding-top:var(--header-h)}

/* Hero: the voice agent is the star, with minimal copy on its left; the pair is centered over the particle wave. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;padding-top:var(--header-h);background:#000;border-bottom:1px solid var(--border-soft);overflow:hidden}
.hero-main{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:auto minmax(0,600px);justify-content:center;align-items:center;column-gap:clamp(24px,3vw,56px);padding:12px var(--header-x) 32px;pointer-events:none}
.hero-stage{display:flex;align-items:center;justify-content:center}
#scene{position:absolute;inset:0;z-index:0}
#scene canvas{display:block;width:100%;height:100%}
.scene-unavailable{display:none}
/* The agent is transparent and dark-themed in embed mode, so it sits straight on the black hero with no frame.
   Its idle UI (mic ring to helper text) is centered around 300px down its 540px frame; a shorter resting window trims the empty edges.
   The agent's document declares no color-scheme (so it is light); the iframe element must match, or Chrome paints an opaque canvas behind it.
   "normal" would inherit this page's dark scheme, so it has to be light explicitly. */
.voice-stage{--frame-top:max(calc(var(--screen-h) - 540px),min(0px,calc(var(--screen-h) / 2 - 300px)));position:relative;width:min(600px,100%);height:var(--screen-h);overflow:hidden;pointer-events:auto}
.voice-stage.is-engaged{--screen-h:540px}
.voice-frame{position:absolute;left:50%;top:var(--frame-top);width:100%;height:540px;border:0;background:transparent;color-scheme:light;translate:-50% 0}
.hero-copy{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;max-width:400px}
.hero-copy a{pointer-events:auto}
.badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--badge-mb);padding:8px 13px;border:1px solid var(--control-edge);border-radius:6px;background:var(--control);color:#dcdcdc;font-size:var(--badge);font-weight:400;letter-spacing:-.01em;line-height:1}
.badge-star{flex-shrink:0;fill:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.45))}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--h1);font-weight:500;line-height:1.1;letter-spacing:-.04em;color:#fff}
.headline-line{display:block;overflow:hidden;margin:0 -.15em;padding:.05em .15em .12em}
.headline-line>span{display:block}
.hero h1 em{color:#9a9a9a}
.lede{max-width:340px;margin-top:var(--lede-mt);text-wrap:pretty;font-size:var(--lede);font-weight:400;line-height:1.55;letter-spacing:-.015em;color:#9a9a9a}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:var(--actions-mt)}
.hero-actions .btn{height:var(--hero-btn-h);padding:0 16px}
.hero-actions .btn-solid:is(:hover,:focus-visible){box-shadow:inset 0 1px 0 #fff,0 0 26px rgba(186,208,255,.4),0 8px 18px rgba(255,255,255,.14)}
.hero-link{display:inline-flex;align-items:center;gap:7px;font-size:var(--btn);font-weight:500;letter-spacing:-.015em;color:#cfcfcf;transition:color .3s}
.hero-link:is(:hover,:focus-visible){color:#fff}
.hero-link span{color:var(--accent)}

/* Marquee */
.marquee{position:relative;overflow:hidden;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--border-soft);font-size:clamp(44px,7vw,112px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;flex-shrink:0;align-items:center}
.marquee span{padding:0 .34em;font-weight:500;line-height:1.1;letter-spacing:-.045em;white-space:nowrap;color:#fff}
.marquee span.is-outline{padding-right:.38em;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.marquee i{display:block;flex-shrink:0;width:.16em;height:.16em;border-radius:2px;background:var(--accent)}

/* Selected work */
.work-section{padding:110px var(--gutter)}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:80px}
.section-heading p{width:55%;font-size:clamp(30px,3vw,44px);font-weight:500;line-height:1.2;letter-spacing:-.045em}
#projects{counter-reset:project}
.project{display:grid;grid-template-columns:1fr 1.25fr;gap:7vw;align-items:center;padding:56px 0;border-top:1px solid var(--line);counter-increment:project}
.project:nth-child(even){grid-template-columns:1.25fr 1fr}
.project:nth-child(even) .project-image{grid-column:1;grid-row:1}
.project:nth-child(even) .project-info{grid-column:2}
.project-info{position:relative;isolation:isolate}
.project-info::before{content:counter(project,decimal-leading-zero);position:absolute;z-index:-1;top:-.42em;left:-.05em;font-size:clamp(140px,16vw,270px);font-weight:600;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);pointer-events:none;user-select:none}
.project-index{margin-bottom:12px;font-size:12px;letter-spacing:.06em;color:var(--faint)}
.project-meta{margin-bottom:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.project h3{font-size:clamp(38px,4.4vw,64px);font-weight:500;line-height:1.02;letter-spacing:-.045em}
.project-title{max-width:470px;margin:18px 0 12px;font-size:20px;line-height:1.4;letter-spacing:-.02em;color:#e6e6e6}
.project-description{max-width:420px;font-size:16px;line-height:1.7;color:var(--muted)}
.project-recognition{margin-top:20px;padding-left:13px;border-left:2px solid var(--accent);font-size:12.5px;color:var(--text-soft)}
.project-image{position:relative;isolation:isolate;display:block;overflow:hidden;aspect-ratio:1.41;border-radius:6px;background:var(--surface-2)}
.project-image img{display:block;width:100%;height:100%;object-fit:cover}

/* About */
.about-section{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:45px 64px;padding:110px var(--gutter);border-top:1px solid var(--border-soft);background:var(--surface);overflow:hidden}
.about-section>.eyebrow{grid-column:1/-1}
.about-section h2{font-size:clamp(46px,5.2vw,82px);font-weight:500;line-height:1.06;letter-spacing:-.045em}
.about-copy{align-self:end;font-size:19px;line-height:1.6;letter-spacing:-.02em;color:var(--body-text)}
.about-copy p+p{margin-top:24px}
/* The hand-drawn underline is a background on the words themselves, cloned per line, so when "A curious human." wraps
   each line gets its own stroke. (The stroke color is the logo red, written into the SVG.) */
.scribble-wrap{color:var(--muted)}
.scribble-wrap em{padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 28' preserveAspectRatio='none'%3E%3Cpath d='M4 19c42-8 88-12 138-9 40 2 76 9 118 9 52 0 104-8 156-12' fill='none' stroke='%23e31c1c' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100%/100% .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Experience: sticky heading beside a timeline */
.experience-section{padding:96px var(--gutter);border-top:1px solid var(--border-soft)}
.experience-layout{display:grid;grid-template-columns:1fr 1.45fr;gap:7vw;margin-top:50px}
.experience-layout h2{font-size:clamp(36px,3.4vw,48px);font-weight:500;line-height:1.15;letter-spacing:-.045em}
.education{margin-top:48px}
.education h3{margin-top:24px;font-size:16px;font-weight:500;line-height:1.5}
.education p{font-size:14px;color:var(--faint)}
.experience-layout>div:last-child{position:relative;padding-left:44px}
.experience-layout>div:last-child::before,.experience-layout>div:last-child::after{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:var(--line)}
.experience-layout>div:last-child::after{background:linear-gradient(var(--accent),var(--accent-deep));transform-origin:0 0;transform:scaleY(var(--fill,0))}
.experience-row{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.experience-row:first-child{padding-top:0;border-top:0}
.experience-row::before{content:"";position:absolute;z-index:1;left:-44px;top:40px;width:11px;height:11px;border:1px solid #4a4a50;border-radius:50%;background:var(--bg)}
.experience-row:first-child::before{top:14px}
.experience-row h3,.experience-row .role{grid-column:1}
.experience-row h3{font-size:25px;font-weight:500;letter-spacing:-.035em}
.experience-row .role{margin:4px 0;font-size:16px;color:var(--text-soft)}
.experience-row .date{grid-column:2;grid-row:1;align-self:center;font-size:12px;letter-spacing:.04em;text-align:right;color:var(--faint)}
.experience-description{grid-column:1/-1;margin-top:12px;font-size:16px;line-height:1.8;color:var(--body-text)}
.experience-description a,.rich-text a{color:#fff;text-decoration:underline;text-decoration-color:rgba(227,28,28,.7);text-underline-offset:4px}
.experience-description strong,.rich-text strong{color:#fff;font-weight:600}

/* Contact */
.contact-section{position:relative;isolation:isolate;padding:120px var(--gutter);border-top:1px solid var(--border-soft);overflow:hidden}
.contact-section h2{margin:40px 0;font-size:clamp(56px,7.2vw,108px);font-weight:500;line-height:1.02;letter-spacing:-.05em}
.contact-section h2 em{color:var(--accent)}
.contact-section::after{content:"";position:absolute;top:20%;right:8%;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 35px rgba(227,28,28,.55)}
.contact-link{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font-size:clamp(26px,3.2vw,46px);font-weight:500;letter-spacing:-.035em}
.contact-link span{font-size:1.1em;color:var(--accent)}
.contact-tools{display:none;align-items:center;gap:16px;margin-top:22px}
.js .contact-tools{display:flex}
.copy-email{min-height:44px;padding:0 18px;border:1px solid var(--control-edge);border-radius:7px;background:var(--control);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#e8e8e8;transition:border-color .35s,background .35s,box-shadow .35s}
.copy-email:is(:hover,:focus-visible){border-color:var(--control-edge-hot);background:var(--control-hot);color:#fff;box-shadow:var(--control-glow)}
.copy-email.is-done{border-color:rgba(255,255,255,.75);color:#fff}
.copy-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Footer */
footer{padding:0 var(--gutter) 32px;overflow:hidden}
.footer-mark{padding:.26em 0 .2em;margin-left:-.04em;font-size:clamp(56px,15.6vw,290px);font-weight:600;line-height:.8;letter-spacing:-.06em;white-space:nowrap;user-select:none;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);background:radial-gradient(circle at var(--mx,50%) var(--my,260%),#fff 0,rgba(255,255,255,.75) 6%,transparent 22%) no-repeat;-webkit-background-clip:text;background-clip:text}
.footer-bar{display:flex;align-items:center;gap:30px;padding-top:26px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer-bar>span:first-child{margin-right:auto;font-size:11px;letter-spacing:.1em}
.footer-bar a,.motion-toggle{transition:color .3s}
.footer-bar a:hover,.motion-toggle:hover{color:#fff}
.motion-toggle{display:none}
.js .motion-toggle{display:block}
.local-time{display:none;font-size:11px;letter-spacing:.1em}
.js .local-time{display:inline}

/* Case studies */
.case-hero{padding:72px var(--gutter) 50px}
.case-breadcrumb{display:flex;width:fit-content;margin-bottom:48px;font-size:13px;color:var(--muted);transition:color .3s}
.case-breadcrumb:hover{color:#fff}
.case-hero h1{margin:20px 0 28px;font-size:clamp(64px,10vw,150px);font-weight:500;line-height:.98;letter-spacing:-.05em;view-transition-name:case-title}
.case-subtitle{max-width:1000px;font-size:clamp(24px,3vw,42px);line-height:1.22;letter-spacing:-.035em;color:#c4c4c8}
.case-cover-frame{width:86%;margin:0 auto 85px;overflow:hidden;border-radius:8px}
.case-cover{display:block;width:100%;max-height:780px;object-fit:cover;view-transition-name:cover}
.case-block{display:grid;grid-template-columns:1fr 2fr;gap:70px;padding:60px var(--gutter);border-top:1px solid var(--line)}
.case-label{padding-top:5px;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent-text)}
.rich-text{max-width:820px;font-size:18px;line-height:1.85;color:var(--body-text)}
.rich-text p+p{margin-top:24px}
.rich-text h3{position:relative;margin:36px 0 16px;padding-left:22px;font-size:25px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:#fff}
.rich-text h3::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.rich-text ul{margin:16px 0 30px;padding-left:22px}
.rich-text li{margin-bottom:10px;padding-left:5px}
.rich-text li::marker{color:var(--accent)}
.case-cover-frame+.case-block .rich-text>p:first-child{font-size:clamp(19px,1.7vw,23px);line-height:1.65;color:#fff}
.case-image{padding:20px var(--gutter) 75px}
.case-image img{display:block;width:100%;border-radius:8px}
.recognition-row{display:grid;grid-template-columns:1fr 2fr;gap:70px;padding:42px var(--gutter);border-top:1px solid var(--line)}
.recognition-row p{max-width:750px;font-size:16px;color:var(--muted)}
.source-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;font-size:13px}
.source-links a{padding:10px 16px;border:1px solid var(--control-edge);border-radius:7px;background:var(--control);transition:border-color .35s,background .35s,box-shadow .35s}
.source-links a:is(:hover,:focus-visible){border-color:var(--control-edge-hot);background:var(--control-hot);box-shadow:var(--control-glow)}
.next-project{position:relative;isolation:isolate;display:block;overflow:hidden;padding:110px var(--gutter) 120px;border-top:1px solid var(--line)}
.next-project h2{margin-top:20px;font-size:clamp(52px,8.4vw,136px);font-weight:500;line-height:1;letter-spacing:-.05em}
.next-project h2 span{margin-left:20px;color:var(--accent)}
.next-meta{max-width:620px;margin-top:20px;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;color:var(--muted)}
.next-preview{position:absolute;left:0;top:0;z-index:2;width:clamp(240px,24vw,400px);height:auto;aspect-ratio:1.41;object-fit:cover;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85);pointer-events:none;opacity:0}

/* Résumé */
.resume-page{display:grid;grid-template-columns:1fr 1fr;gap:8vw;min-height:calc(100svh - 200px);padding:72px var(--gutter) 100px}
.resume-page h1{margin:28px 0;font-size:clamp(62px,7.6vw,116px);font-weight:500;line-height:1;letter-spacing:-.05em}
.resume-description{max-width:360px;font-size:18px;line-height:1.7;color:var(--muted)}
.resume-form-wrapper{padding-top:25px}
#resume-form label{display:block;margin-bottom:8px;font-size:14px}
#resume-form input{width:100%;margin-bottom:26px;padding:14px 16px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);font-size:16px;color:#fff;transition:border-color .3s,box-shadow .3s,background-color .3s}
#resume-form input:hover{border-color:rgba(255,255,255,.3)}
#resume-form input:focus{outline:1px solid transparent;border-color:rgba(255,255,255,.7);box-shadow:0 0 0 4px rgba(186,208,255,.14);background:#16161a}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.solid-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:48px;padding:0 20px;border-radius:7px;font-size:15px;font-weight:500;letter-spacing:-.015em;transition:background .35s,border-color .35s,box-shadow .35s}
.solid-button span{font-size:18px}
.form-note{margin:22px 0;font-size:12px;line-height:1.7;color:var(--muted)}
.honeypot{display:none!important}
#form-status{margin:20px 0;font-size:14px;color:#ff7b7b}
#resume-success h2{margin-bottom:20px;font-size:38px;font-weight:500;letter-spacing:-.04em}
#resume-success p{margin-bottom:35px;font-size:17px;color:var(--muted)}

/* 404 */
.not-found{position:relative;isolation:isolate;min-height:70svh;padding:100px var(--gutter);overflow:hidden}
.not-found h1{margin:18px 0 20px;font-size:clamp(56px,7vw,96px);font-weight:500;letter-spacing:-.05em}
.not-found p:not(.eyebrow){font-size:18px;color:var(--muted)}
.orbit{position:absolute;z-index:-1;right:6%;top:50%;width:min(40vw,440px);aspect-ratio:1;translate:0 -50%;pointer-events:none}
.orbit i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.orbit i:nth-child(2){inset:22%;border:1px dashed rgba(227,28,28,.45)}
.orbit i:nth-child(3){inset:auto;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:0;background:var(--accent);box-shadow:0 0 28px 4px rgba(227,28,28,.6)}

/* Split titles (case, résumé, 404): words mask the letters that rise into them */
:is(.case-hero,.resume-page,.not-found) h1 .word{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:top;padding:.02em .06em .16em;margin:-.02em -.06em -.16em}
:is(.case-hero,.resume-page,.not-found) h1 .char{display:inline-block}

/* Lightbox */
dialog.lightbox{width:auto;max-width:94vw;max-height:94svh;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;overflow:visible}
dialog.lightbox::backdrop{background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox img{display:block;width:auto;height:auto;max-width:94vw;max-height:88svh;border-radius:8px;cursor:zoom-out}
.lightbox-close{position:fixed;top:18px;right:18px;width:48px;height:48px;border:1px solid var(--control-edge);border-radius:50%;background:var(--control);font-size:26px;line-height:1;transition:border-color .35s,background .35s}
.lightbox-close:is(:hover,:focus-visible){border-color:var(--control-edge-hot);background:var(--control-hot)}

/* Breakpoints (header and hero follow the reference's token scale) */
@media (min-width:1600px){:root{--logo:17px;--logo-mark:24px;--nav:15px;--nav-h:44px;--btn:15px;--btn-h:44px;--hero-btn-h:44px;--h1:60px;--lede:16.5px;--badge:13px;--header-y:28px;--header-x:64px;--badge-mb:22px;--lede-mt:18px;--actions-mt:28px}.nav-pill{padding:0 20px}.hero-copy{max-width:440px}}
@media (min-width:1920px){:root{--logo:18px;--logo-mark:26px;--nav:16px;--nav-h:48px;--btn:16px;--btn-h:48px;--hero-btn-h:48px;--h1:68px;--lede:18px;--badge:14px;--header-y:32px;--header-x:80px}#site-nav{gap:42px}.nav-pill{padding:0 22px}.btn,.hero-actions .btn{padding:0 22px}.badge{padding:10px 15px}.hero-copy{max-width:500px}.lede{max-width:400px}}
@media (min-width:901px) and (max-width:1279px){:root{--logo:15px;--nav:13px;--nav-h:36px;--btn:13px;--btn-h:38px;--hero-btn-h:38px;--h1:44px;--lede:15px;--badge:12px;--header-y:16px;--header-x:28px;--badge-mb:16px;--lede-mt:14px;--actions-mt:20px}.nav-pill{padding:0 14px}}
@media (min-width:901px) and (max-height:850px){:root{--header-y:14px}}
@media (min-width:901px) and (max-height:720px){:root{--nav-h:32px;--btn-h:34px;--hero-btn-h:34px}}
@media (max-width:1000px){.case-block,.recognition-row{gap:35px}.case-cover-frame{margin-bottom:40px}.project{gap:40px}}
@media (max-width:900px){
  :root{--logo:16px;--btn:15px;--btn-h:46px;--hero-btn-h:46px;--h1:44px;--lede:16px;--badge:13px;--header-y:16px;--header-x:18px;--screen-h:380px}
  .site-header{grid-template-columns:1fr auto auto;gap:8px;padding-top:max(var(--header-y),env(safe-area-inset-top))}
  #site-nav{display:none}
  .js .menu-toggle{display:grid}
  .site-header .header-cta{height:42px;padding:0 16px}
  @media (max-width:359px){.site-header .header-cta{padding:0 12px;font-size:13px}.logo{font-size:15px}}
  .hero-main{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px 20px 36px}
  .hero-copy{max-width:none}
  .lede{max-width:100%}
  .experience-layout>div:first-child{position:static}
}
@media (max-width:600px){
  :root{--gutter:6%;--screen-h:340px}
  .work-section{padding:70px var(--gutter)}
  .section-heading{display:block;margin-bottom:35px}
  .section-heading p{width:100%;margin-top:18px;font-size:30px}
  .project,.project:nth-child(even){grid-template-columns:1fr;gap:25px;padding:36px 0 42px}
  .project:nth-child(even) .project-image,.project .project-image{grid-row:1;grid-column:1}
  .project:nth-child(even) .project-info{grid-column:1}
  .project-info::before{top:-.34em;font-size:118px}
  .project h3{font-size:44px}
  .project-title{font-size:18px}
  .about-section{grid-template-columns:1fr;gap:25px;padding:70px var(--gutter)}
  .about-section h2{font-size:48px}
  .about-copy{font-size:17px}
  .experience-section{padding:65px var(--gutter)}
  .experience-layout{grid-template-columns:1fr;gap:45px;margin-top:25px}
  .experience-layout h2{font-size:38px}
  .education{margin-top:25px}
  .experience-layout>div:last-child{padding-left:30px}
  .experience-row{grid-template-columns:1fr}
  .experience-row::before{left:-30px}
  .experience-row .date{grid-column:1;grid-row:auto;margin-top:4px;text-align:left}
  .contact-section{padding:75px var(--gutter)}
  .contact-section h2{margin:28px 0;font-size:60px}
  .contact-section::after{top:12%}
  .contact-link{font-size:clamp(22px,7vw,30px)}
  .footer-bar{flex-wrap:wrap;gap:14px 22px}
  .footer-bar>span:first-child{width:100%}
  .case-hero{padding:40px var(--gutter)}
  .case-breadcrumb{margin-bottom:30px}
  .case-hero h1{margin:18px 0 24px;font-size:60px}
  .case-subtitle{font-size:24px}
  .case-cover-frame{width:88%;margin-bottom:20px}
  .case-cover{max-height:none}
  .case-block{grid-template-columns:1fr;gap:20px;padding:35px var(--gutter)}
  .rich-text{font-size:17px;line-height:1.8}
  .rich-text h3{font-size:22px}
  .case-image{padding:20px var(--gutter) 40px}
  .recognition-row{grid-template-columns:1fr;gap:16px;padding:30px var(--gutter)}
  .next-project{padding:70px var(--gutter) 60px}
  .next-project h2{font-size:48px}
  .resume-page{grid-template-columns:1fr;gap:30px;padding:45px var(--gutter) 70px}
  .resume-page h1{font-size:68px}
  .resume-description{font-size:17px}
  .form-row{grid-template-columns:1fr;gap:0}
  .resume-form-wrapper{padding:0}
  .orbit{top:70px;right:-18vw;width:66vw;translate:none;opacity:.7}
}
@media (max-width:560px){
  :root{--h1:40px;--header-x:16px}
}
@media (hover:none),(max-width:600px){.next-preview{position:relative;display:block;z-index:auto;width:100%;margin-top:30px;opacity:1}}