/* DeJac Design Co
   One page, two palettes (paper by day, ink at the contact), three faces.
   Motion is tokenised below: change the tokens, not individual rules. */

@font-face{font-family:'Inter Tight';src:url(../fonts/InterTight-normal-300-700.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/InstrumentSerif-italic-400.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/GeistMono-normal-400-500.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --paper:#EDE9E2;
  --ink:#141311;
  --mute:#67625A;            /* 5.0:1 on paper */
  --ember:#C6532E;           /* dots, arrows, rules: never behind text */
  --ember-deep:#B0451F;      /* surfaces that carry text: 4.7:1 with paper */

  --bg:var(--paper);
  --fg:var(--ink);
  --fg-2:var(--mute);
  --rule:rgba(20,19,17,.16);

  --f-sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type: deliberately extreme contrast, 11px labels against 300px names */
  --t-micro:.6875rem;
  --t-small:.875rem;
  --t-body:clamp(1rem,.94rem + .28vw,1.1875rem);
  --t-lead:clamp(1.375rem,.95rem + 1.35vw,2.25rem);
  --t-statement:clamp(2rem,.9rem + 4.2vw,5.25rem);
  --t-row:clamp(2.5rem,1rem + 5.2vw,6.75rem);
  --t-marquee:clamp(3.25rem,1rem + 8.4vw,10.5rem);

  /* Motion tokens */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --dur-xs:.2s;
  --dur-s:.45s;
  --dur-m:.8s;
  --dur-l:1.2s;
  --dur-xl:1.6s;
  --stagger:80ms;

  --pad:clamp(16px,2.4vw,40px);
  --gap:clamp(12px,1.6vw,28px);
  --hdr-h:64px;
}
html.is-dark{
  --bg:var(--ink);
  --fg:var(--paper);
  --fg-2:rgba(237,233,226,.64);
  --rule:rgba(237,233,226,.18);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);transition:background-color var(--dur-l) var(--ease-out)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-body)/1.5 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;transition:background-color var(--dur-l) var(--ease-out),color var(--dur-l) var(--ease-out)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ember-deep);color:var(--paper)}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-nav{position:fixed;left:var(--pad);top:-100px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font:500 var(--t-small)/1 var(--f-sans);text-decoration:none}
.skip-nav:focus{top:12px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Film grain, to sit the type in the same world as the photographs */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .8s steps(4) infinite}
@keyframes grain{0%{background-position:0 0}25%{background-position:-60px 40px}50%{background-position:80px -30px}75%{background-position:-30px -70px}100%{background-position:0 0}}

/* Shared bits */
.mono{font:400 var(--t-micro)/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size var(--dur-m) var(--ease-out);padding-bottom:1px}
.ul:hover{background-size:0 1px;background-position:100% 100%}
.roll{display:inline-flex;overflow:hidden;text-decoration:none;vertical-align:top}
.roll-in{position:relative;display:inline-block;transition:transform var(--dur-s) var(--ease-out)}
.roll-in::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:100%;white-space:nowrap}
.roll:hover .roll-in,.roll:focus-visible .roll-in{transform:translateY(-100%)}

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr-h);padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gap);color:#fff;mix-blend-mode:difference;font:500 var(--t-small)/1 var(--f-sans);letter-spacing:-.01em}
.hdr-logo{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;justify-self:start}
.hdr-mark{width:22px;height:22px}
.hdr-where{display:flex;align-items:center;gap:.7em;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.hdr-dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{50%{opacity:.25}}
.clock{font-variant-numeric:tabular-nums}
.hdr-nav{justify-self:end;display:flex;gap:clamp(16px,2vw,32px)}
.js .hdr>*{opacity:0;transform:translate3d(0,-10px,0)}
.hdr.is-in>*{opacity:1;transform:none;transition:opacity var(--dur-l) var(--ease-out),transform var(--dur-l) var(--ease-out)}
.hdr.is-in>:nth-child(2){transition-delay:calc(var(--stagger) * 1)}
.hdr.is-in>:nth-child(3){transition-delay:calc(var(--stagger) * 2)}

/* ── Reveal system ────────────────────────────────────────────────────── */
/* Lines rise out of a mask. Hidden only when JS is present (.js on <html>). */
.ln{display:block;overflow:hidden;padding:.08em .08em .04em 0;margin:-.08em -.08em -.04em 0}
.li{display:block;transform-origin:0 100%}
.js [data-lines] .li{transform:translate3d(0,112%,0) rotate(5deg)}
[data-lines].is-in .li{transform:none;transition:transform var(--dur-xl) var(--ease-out);transition-delay:calc(var(--d,0) * var(--stagger) + var(--i,0) * 110ms)}
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--dur-l) var(--ease-out),transform var(--dur-l) var(--ease-out);transition-delay:calc(var(--d,0) * var(--stagger))}
/* Failsafe: set if IntersectionObserver never delivers, or main.js never ran */
.reveal-all [data-reveal],.reveal-all [data-lines] .li,.reveal-all .hdr>*,.reveal-all .ftr-mark span{opacity:1!important;transform:none!important}
.reveal-all .hero-frame{clip-path:none!important}
.reveal-all .hero-img{transform:none!important}

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec{padding:clamp(96px,17vh,200px) var(--pad) 0}
.sec-head{display:flex;align-items:center;gap:1.1em;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:clamp(36px,7vh,88px)}
.sec-idx{color:var(--fg-2);transition:color var(--dur-l) var(--ease-out)}
.sec-label{margin:0;font:inherit;letter-spacing:inherit}
.sec-rule{flex:1;height:1px;background:var(--rule);transform-origin:0 50%;transform:scaleX(var(--rule-s,1));transition:transform var(--dur-xl) var(--ease-io) .1s}
.js .sec-head:not(.is-in) .sec-rule{--rule-s:0}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--gap);padding:calc(var(--hdr-h) + clamp(12px,3vh,40px)) var(--pad) clamp(14px,2.6vh,28px);
  grid-template-areas:
    "roles roles roles roles . . . . media media media media"
    "intro intro intro intro intro . cue cue media media media media"
    "name name name name name name name name name name name name"}
.hero-name{grid-area:name;margin:clamp(14px,2.4vh,32px) 0 0;display:flex;align-items:flex-end;gap:.2em;font-weight:500;font-size:calc((100vw - 2 * var(--pad)) / 4.96);line-height:.8;letter-spacing:-.055em;white-space:nowrap;will-change:transform}
.sfx{display:inline-block;vertical-align:top;margin:.07em 0 0 .02em;font-size:.26em;line-height:1;letter-spacing:-.02em}
.hero-intro{grid-area:intro;align-self:end;max-width:22ch;font-size:var(--t-lead);line-height:1.1;letter-spacing:-.025em}
.hero-intro em{font-size:1.1em;line-height:1}
.hero-roles{grid-area:roles;align-self:start;list-style:none;margin:0;padding:0;width:min(100%,360px);font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.hero-roles li{display:flex;justify-content:space-between;gap:1em;padding:.95em 0;border-top:1px solid var(--rule)}
.hero-roles li:last-child{border-bottom:1px solid var(--rule)}
.hero-roles li span:last-child{color:var(--fg-2)}
.hero-media{grid-area:media;justify-self:end;align-self:end;margin:0;aspect-ratio:4/5;
  /* Fills the height the name and gaps leave, so the hero fits one screen: .161 is the name's .8em line box, 8vh the three gaps */
  height:min(44vw,max(300px,calc(100svh - var(--hdr-h) - (100vw - 2 * var(--pad)) * .161 - clamp(40px,8vh,100px))))}
.hero-frame{position:relative;width:100%;height:100%;overflow:hidden;background:#d9d3c9}
.hero-par{position:absolute;inset:-6% 0;will-change:transform}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.js .hero-frame{clip-path:inset(100% 0 0 0)}
.js .hero-img{transform:scale(1.28)}
.hero-media.is-in .hero-frame{clip-path:inset(0 0 0 0);transition:clip-path var(--dur-xl) var(--ease-io) calc(var(--d,0) * var(--stagger))}
.hero-media.is-in .hero-img{transform:none;transition:transform 2.4s var(--ease-out) calc(var(--d,0) * var(--stagger))}
.hero-cue{grid-area:cue;align-self:end;display:inline-flex;align-items:center;gap:.9em;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.hero-cue i{position:relative;width:1px;height:44px;background:var(--rule);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:50% 0;animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* ── About ────────────────────────────────────────────────────────────── */
.statement{max-width:21ch;font-size:var(--t-statement);line-height:1.02;letter-spacing:-.04em;font-weight:450}
.statement em{font-size:1.08em;letter-spacing:-.01em}
.statement .w{transition:opacity .25s linear}
.about-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(56px,11vh,140px)}
.about-cols p{grid-column:span 3;max-width:34ch;color:var(--fg-2);transition:color var(--dur-l) var(--ease-out)}
.about-cols p:first-child{grid-column:7 / span 3}
.about-cols a{color:var(--fg)}

/* ── Now (index rows) ─────────────────────────────────────────────────── */
.rows{list-style:none;margin:0 calc(-1 * var(--pad));padding:0;border-bottom:1px solid var(--rule)}
.row{border-top:1px solid var(--rule)}
.row-link{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(28px,5.2vw,84px) var(--pad);text-decoration:none;color:var(--fg);transition:color var(--dur-m) var(--ease-io)}
.row-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:scaleY(0);transform-origin:50% 0;transition:transform var(--dur-m) var(--ease-io)}
.row-link:hover,.row-link:focus-visible{color:var(--bg)}
.row-link:hover::before,.row-link:focus-visible::before{transform:scaleY(1);transform-origin:50% 100%}
.row-link:focus-visible{outline-offset:-4px}
/* Photos from each site crossfade and drift behind a hovered row (main.js fills these on fine pointers) */
.row-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path var(--dur-m) var(--ease-io)}
.row-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,19,17,.86),rgba(20,19,17,.6) 55%,rgba(20,19,17,.78))}
.row-link:hover .row-media,.row-link:focus-visible .row-media{clip-path:inset(0)}
.row-media img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;opacity:0;transform:translate3d(0,4%,0) scale(1.06);transition:opacity var(--dur-m) var(--ease-out),transform 7s linear}
.row-media img.is-on{opacity:1;transform:translate3d(0,-4%,0) scale(1)}
.row-idx{grid-column:1;align-self:start;padding-top:.9em;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em}
.row-title{grid-column:2 / 9;margin:0;font:500 var(--t-row)/.92 var(--f-sans);letter-spacing:-.05em;text-wrap:balance;transition:transform var(--dur-m) var(--ease-out)}
.row-link:hover .row-title{transform:translateX(clamp(8px,1.4vw,24px))}
.row-meta{grid-column:9 / 12;display:grid;gap:.7em;align-self:center}
.row-role{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.row-desc{font-size:var(--t-small);line-height:1.45;max-width:34ch;opacity:.72;transition:opacity var(--dur-m)}
.row-link:hover .row-desc{opacity:.92}
.row-arrow{grid-column:12;justify-self:end;width:clamp(36px,3.4vw,56px);aspect-ratio:1;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform var(--dur-m) var(--ease-out),background-color var(--dur-m) var(--ease-out),border-color var(--dur-m)}
.row-arrow svg{width:44%;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform var(--dur-m) var(--ease-out)}
.row-link:hover .row-arrow{background:var(--ember);border-color:var(--ember);color:var(--paper)}
.row-link:hover .row-arrow svg{transform:rotate(-45deg)}
.has-cursor [data-cursor]{cursor:none}

/* ── Services ─────────────────────────────────────────────────────────── */
.services-lede{max-width:28ch;font-size:var(--t-lead);line-height:1.12;letter-spacing:-.025em}
.marquee{margin:clamp(44px,8vh,100px) calc(-1 * var(--pad)) 0;padding-block:clamp(14px,2.2vw,34px);border-block:1px solid var(--rule);overflow:hidden}
.mq-inner{display:flex;width:max-content;will-change:transform}
.mq-track{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0 var(--pad)}
.marquee.is-running .mq-track{flex-wrap:nowrap;flex-shrink:0;padding:0}
.mq-track li{display:flex;align-items:center;white-space:nowrap;font:400 var(--t-marquee)/1.05 var(--f-sans);letter-spacing:-.05em}
.mq-track li:nth-child(even){font-family:var(--f-serif);font-style:italic;font-size:calc(var(--t-marquee) * 1.1);letter-spacing:-.015em}
.mq-track li::after{content:"";flex-shrink:0;width:.14em;height:.14em;margin:0 .42em;border-radius:50%;background:var(--ember)}
.services-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);margin-top:clamp(28px,5vh,56px)}
.services-foot p{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pill{display:inline-flex;align-items:center;padding:1.05em 1.6em;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none;font:500 var(--t-small)/1 var(--f-sans);transition:transform var(--dur-m) var(--ease-out),background-color var(--dur-s) var(--ease-out),color var(--dur-s)}
.pill>span{display:inline-flex;align-items:center;gap:.6em;transition:transform var(--dur-m) var(--ease-out)}
.pill svg{width:1em;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--dur-s) var(--ease-out)}
.pill:hover{background:var(--ember-deep);color:var(--paper)}
.pill:hover svg{transform:rotate(45deg)}
.pill:active,.copy:active{scale:.96}

/* ── Full-bleed photograph ────────────────────────────────────────────── */
.bleed{margin:clamp(96px,17vh,200px) 0 0;--p:1}
.bleed-frame{position:relative;width:100%;aspect-ratio:3/2;max-height:100svh;overflow:hidden;background:#d9d3c9;clip-path:inset(calc((1 - var(--p)) * 12%) calc((1 - var(--p)) * 16%) round calc((1 - var(--p)) * 24px))}
.bleed-img{width:100%;height:100%;object-fit:cover;object-position:46% 45%;transform:scale(calc(1 + (1 - var(--p)) * .08))}
.bleed-cap{display:flex;justify-content:space-between;padding:14px var(--pad) 0;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}

/* ── Contact ──────────────────────────────────────────────────────────── */
html:not(.js) .contact,html:not(.js) .ftr{background:var(--ink);color:var(--paper);--fg:var(--paper);--bg:var(--ink);--fg-2:rgba(237,233,226,.64);--rule:rgba(237,233,226,.18)}
.contact{padding-bottom:clamp(72px,12vh,140px)}
.contact-title{display:flex;flex-wrap:wrap;column-gap:.18em;margin:0;font:500 clamp(4.5rem,21.5vw,24rem)/.8 var(--f-sans);letter-spacing:-.055em}
.contact-title em{font-size:1.1em;letter-spacing:-.02em}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-top:clamp(36px,7vh,80px)}
.contact-lede{grid-column:1 / 6;font-size:var(--t-lead);line-height:1.12;letter-spacing:-.025em}
.orb-wrap{grid-column:10 / 13;justify-self:end}
.orb{width:clamp(124px,11vw,176px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--ember-deep);color:var(--paper);text-decoration:none;font:500 var(--t-small)/1 var(--f-sans);transition:transform var(--dur-m) var(--ease-out)}
.orb>span{display:block;transition:transform var(--dur-m) var(--ease-out)}
.email-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px var(--gap);margin-top:clamp(48px,9vh,110px);padding-bottom:clamp(20px,3vh,32px);border-bottom:1px solid var(--rule)}
.email{font:400 clamp(1.5rem,7.6vw,8rem)/1 var(--f-sans);letter-spacing:-.045em;text-decoration:none;background:linear-gradient(var(--ember),var(--ember)) 0 100%/0 .045em no-repeat;padding-bottom:.08em;transition:background-size var(--dur-m) var(--ease-out)}
.email:hover{background-size:100% .045em}
.copy{padding:.95em 1.4em;border:1px solid var(--rule);border-radius:999px;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transition:background-color var(--dur-s) var(--ease-out),color var(--dur-s),border-color var(--dur-s)}
.copy:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.contact-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin:clamp(32px,6vh,64px) 0 0}
.contact-meta>div{grid-column:span 3}
.contact-meta>div:first-child{grid-column:1 / span 3}
.contact-meta>div:nth-child(2){grid-column:7 / span 3}
.contact-meta dt{margin-bottom:1em;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);transition:color var(--dur-l) var(--ease-out)}
.contact-meta dd{margin:0;line-height:1.7}

/* ── Footer ───────────────────────────────────────────────────────────── */
.ftr{padding:0 var(--pad) clamp(14px,2.4vh,24px);overflow:hidden}
.ftr-mark{display:flex;justify-content:space-between;overflow:hidden;padding-top:.06em;font:500 calc((100vw - 2 * var(--pad)) / 2.66)/.76 var(--f-sans);letter-spacing:-.04em;user-select:none}
.ftr-mark span{display:block}
.js .ftr-mark span{transform:translate3d(0,100%,0)}
.ftr-mark.is-in span{transform:none;transition:transform var(--dur-xl) var(--ease-out) calc(var(--i) * 70ms)}
.js .ftr-mark[data-reveal]{opacity:1;transform:none}
.ftr-sign{display:inline-flex;align-items:center;gap:.9em}
.ftr-logo{width:18px;height:18px}
.ftr-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(14px,2.4vh,24px);padding-top:clamp(14px,2.4vh,24px);border-top:1px solid var(--rule);font:400 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}

/* ── Cursor (fine pointers only, created by main.js) ──────────────────── */
.cursor{position:fixed;left:0;top:0;z-index:140;width:0;height:0;pointer-events:none;mix-blend-mode:difference}
.cursor-dot{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;transform:scale(.1);opacity:0;transition:transform var(--dur-s) var(--ease-out),opacity var(--dur-s),background-color var(--dur-s)}
.cursor.is-on .cursor-dot{opacity:1}
.cursor.is-link .cursor-dot{transform:scale(.36)}
.cursor.is-big{mix-blend-mode:normal}
.cursor.is-big .cursor-dot{transform:scale(1);background:var(--ember-deep)}
.cursor-label{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity var(--dur-xs)}
.cursor.is-big .cursor-label{opacity:1;transition-delay:.08s}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(24px,4vh,48px);padding:calc(var(--hdr-h) + 24px) var(--pad) clamp(24px,5vh,56px)}
.nf h1{margin:0;font:500 calc((100vw - 2 * var(--pad)) / 1.9)/.8 var(--f-sans);letter-spacing:-.06em}
.nf p{max-width:26ch;font-size:var(--t-lead);line-height:1.12;letter-spacing:-.025em}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width:899px){
  :root{--hdr-h:56px}
  .hide-sm{display:none!important}
  .hdr{grid-template-columns:1fr auto}
  .hdr-where{display:none}
  .hero{min-height:auto;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto;row-gap:clamp(20px,4vw,32px);padding-top:calc(var(--hdr-h) + 20px);
    grid-template-areas:"name name name name name name" "media media media media media media" "intro intro intro intro intro intro" "roles roles roles roles roles roles"}
  .hero-name{margin:0;flex-direction:column;align-items:stretch;gap:0;font-size:29vw;line-height:.82}
  .hero-name .ln:nth-child(2){align-self:flex-end}
  .hero-media{justify-self:stretch;width:100%;height:auto}
  .hero-intro{max-width:24ch}
  .hero-roles{width:100%}
  .hero-cue{display:none}
  .about-cols{grid-template-columns:1fr;row-gap:1.4em}
  .about-cols p,.about-cols p:first-child{grid-column:1;max-width:44ch}
  .row-link{grid-template-columns:1fr auto;grid-template-areas:"idx arrow" "title title" "meta meta";row-gap:16px}
  .row-idx{grid-area:idx;padding:0;align-self:center}
  .row-title{grid-area:title}
  .row-meta{grid-area:meta}
  .row-arrow{grid-area:arrow}
  .services-foot{flex-direction:column;align-items:flex-start}
  .bleed-frame{aspect-ratio:4/5}
  .contact-grid{grid-template-columns:1fr;row-gap:32px}
  .contact-lede,.orb-wrap{grid-column:1;justify-self:start}
  .contact-meta{grid-template-columns:1fr 1fr;row-gap:28px}
  .contact-meta>div,.contact-meta>div:first-child,.contact-meta>div:nth-child(2){grid-column:auto}
  .contact-meta>div:last-child{grid-column:1 / -1}
}

/* Tablets: intro and roles sit beside the portrait instead of stacking under a full-width photo */
@media (min-width:600px) and (max-width:899px){
  .hero{grid-template-rows:auto auto 1fr;grid-template-areas:"name name name name name name" "intro intro intro media media media" "roles roles roles media media media"}
  .hero-intro{align-self:start}
  .hero-roles{align-self:end}
}

/* ── Reduced motion: everything visible, nothing travels ──────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal],.js [data-lines] .li,.js .hdr>*,.js .ftr-mark span{opacity:1;transform:none}
  .js .hero-frame{clip-path:none}
  .js .hero-img{transform:none}
  .js .sec-head .sec-rule{--rule-s:1}
  .grain{animation:none}
}