@font-face { font-family:"Geist"; src:url("fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  --ink:#0c0c0c; --paper:#f1ede6; --mute:#8d887f; --line:rgba(241,237,230,.14);
  --ember:#ff5b2e;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,3.2vw,44px);
}
* { box-sizing:border-box; }
html { background:var(--ink); color:var(--paper); -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
body { margin:0; font-family:"Geist", system-ui, sans-serif; font-size:17px; line-height:1.55; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:var(--ember); color:var(--ink); }
:focus-visible { outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:8px; z-index:200; background:var(--paper); color:var(--ink); padding:8px 12px; }
.skip:focus { left:8px; }
.kicker { font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0 0 18px; }

/* Top bar */
.bar { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px var(--pad); mix-blend-mode:difference; color:#fff; }
.bar-name { font-weight:600; letter-spacing:-.01em; }
.bar-mid { font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.menu-btn { display:flex; align-items:center; gap:10px; font-size:15px; }
.menu-btn-lines { position:relative; width:22px; height:10px; }
.menu-btn-lines i { position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .5s var(--ease), top .5s var(--ease); }
.menu-btn-lines i:first-child { top:1px; } .menu-btn-lines i:last-child { top:8px; }
.menu-open .menu-btn-lines i:first-child { top:4.5px; transform:rotate(45deg); }
.menu-open .menu-btn-lines i:last-child { top:4.5px; transform:rotate(-45deg); }
@media (max-width:720px) { .bar-mid { display:none; } }

/* Menu */
.menu { position:fixed; inset:0; z-index:55; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; padding:110px var(--pad) 28px; clip-path:inset(0 0 100% 0); }
.menu[hidden] { display:none; }
.menu ul { list-style:none; margin:0; padding:0; }
.menu li { overflow:hidden; }
.menu li a { display:block; }
.menu { overflow-y:auto; }
.menu li small { font-family:"Geist Mono", monospace; font-size:13px; letter-spacing:.06em; color:#77736c; margin-right:16px; vertical-align:top; }
.menu li span { display:inline-block; font-weight:700; font-size:clamp(44px,8.6vw,112px); line-height:.98; letter-spacing:-.05em; transition:transform .6s var(--ease); }
.menu li a:hover span, .menu li a:focus-visible span { transform:translateX(24px); }
.menu-foot { margin:0; font-family:"Geist Mono", monospace; font-size:13px; }

/* Hero */
.hero { position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero-stage { position:absolute; inset:0; display:grid; place-items:center; }
.hero-photo { margin:0; width:min(34vh,62vw); aspect-ratio:3/4; overflow:hidden; border-radius:4px; will-change:clip-path,transform; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center 28%; filter:grayscale(1) contrast(1.05); will-change:transform; }
.hero-name { position:absolute; inset:0; margin:0; display:flex; flex-direction:column; justify-content:center; pointer-events:none; mix-blend-mode:difference; color:#fff; }
.hero-line { display:block; font-weight:800; font-size:clamp(56px,15.5vw,250px); line-height:.86; letter-spacing:-.06em; white-space:nowrap; will-change:transform; }
.hero-line.l1 { padding-left:var(--pad); }
.hero-line.l2 { align-self:flex-end; padding-right:var(--pad); }
.hero-foot { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 var(--pad) clamp(18px,3vw,36px); }
.hero-claim { margin:0; max-width:24ch; font-size:clamp(18px,2vw,26px); line-height:1.2; font-weight:500; letter-spacing:-.015em; }

.hero-foot { z-index:3; }
.hero-cue { font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }

/* Statement */
.statement { padding:clamp(120px,20vh,220px) var(--pad); }
.statement-text { margin:0; max-width:18em; font-size:clamp(32px,5.4vw,84px); line-height:1.06; letter-spacing:-.04em; font-weight:600; }
.w { color:rgba(241,237,230,.16); transition:color .2s linear; }
.rm .w { color:var(--paper); }

/* Work stack */
.work { padding:0 var(--pad) clamp(80px,12vh,140px); }
.work-head { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:18px; margin-bottom:28px; }
.work-count { margin:0; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.stack { list-style:none; margin:0; padding:0; }
.card { position:sticky; top:clamp(70px,10vh,96px); height:min(78vh,720px); margin-bottom:6vh; border-radius:22px; overflow:hidden; transform-origin:50% 0; will-change:transform; }
.card-btn { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; text-align:left; padding:clamp(22px,3.4vw,48px); width:100%; }
.card-top { display:flex; justify-content:space-between; gap:16px; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.card-name { margin:0; font-weight:800; font-size:clamp(46px,7.4vw,128px); line-height:.88; letter-spacing:-.055em; }
.card-hook { margin:0; max-width:16ch; font-size:clamp(22px,2.4vw,36px); line-height:1.1; letter-spacing:-.025em; font-weight:500; }
.card-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.card-cta { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500; padding:12px 18px; border-radius:999px; border:1px solid currentColor; transition:background .3s, color .3s; }
.card-btn:hover .card-cta, .card-btn:focus-visible .card-cta { background:currentColor; }
.card-btn:hover .card-cta span, .card-btn:focus-visible .card-cta span { filter:invert(1); }
.card-shade { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; }
.aspen { margin-top:8vh; border-top:1px solid var(--line); padding-top:22px; display:grid; gap:6px; max-width:760px; }
.aspen-text { margin:0; font-size:clamp(20px,2.2vw,28px); line-height:1.25; letter-spacing:-.015em; }
.aspen-note { margin:6px 0 0; color:var(--mute); font-size:14px; }

/* About */
.about { padding:clamp(80px,14vh,160px) var(--pad); background:var(--paper); color:var(--ink); }
.about .kicker { color:#77736c; }
.about-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,80px); align-items:start; }
.about-photo { margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/5; }
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.about-lead { margin:0 0 36px; font-size:clamp(24px,2.8vw,40px); line-height:1.12; letter-spacing:-.03em; font-weight:500; }
.timeline { list-style:none; margin:0; padding:0; border-top:1px solid rgba(12,12,12,.14); }
.timeline li { display:grid; grid-template-columns:1.2fr 1.2fr .8fr; gap:12px; padding:14px 0; border-bottom:1px solid rgba(12,12,12,.14); font-size:15px; }
.timeline li span:last-child { text-align:right; color:#77736c; font-family:"Geist Mono", monospace; font-size:13px; }
@media (max-width:760px) {
  .about-grid { grid-template-columns:1fr; }
  .timeline li { grid-template-columns:1fr auto; }
  .timeline li span:nth-child(2) { grid-column:1; grid-row:2; color:#77736c; font-size:14px; }
  .timeline li span:last-child { grid-row:1 / span 2; grid-column:2; align-self:center; }
}

/* Contact */
.contact { padding:clamp(110px,18vh,200px) var(--pad) clamp(70px,10vh,110px); }
.contact-title { margin:0 0 40px; font-size:clamp(46px,9vw,150px); line-height:.92; letter-spacing:-.055em; font-weight:800; max-width:11em; }
.contact-mail { display:inline-flex; padding:20px 30px; border-radius:999px; background:var(--ember); color:var(--ink); font-size:clamp(16px,1.8vw,22px); font-weight:600; letter-spacing:-.01em; will-change:transform; max-width:100%; }
.contact-mail span { overflow-wrap:anywhere; }
.contact-links { list-style:none; display:flex; gap:28px; padding:0; margin:36px 0 0; }
.contact-links a { border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .3s; }
.contact-links a:hover { border-color:var(--paper); }
.foot { display:flex; justify-content:space-between; padding:22px var(--pad); border-top:1px solid var(--line); font-size:13px; color:var(--mute); }

/* Case study sheet */
.sheet { position:fixed; inset:0; z-index:80; background:var(--paper); color:var(--ink); overflow-y:auto; overscroll-behavior:contain; clip-path:inset(100% 0 0 0); }
.sheet[hidden] { display:none; }
.sheet-inner { min-height:100%; }
.sheet-close { position:fixed; top:16px; right:var(--pad); z-index:2; padding:10px 18px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:14px; }
.sheet-head { padding:clamp(90px,14vh,150px) var(--pad) clamp(40px,6vh,70px); }
.sheet-head .kicker { color:inherit; opacity:.7; }
.sheet-title { margin:0; font-size:clamp(52px,11vw,180px); line-height:.86; letter-spacing:-.06em; font-weight:800; }
.sheet-hook { margin:24px 0 0; max-width:22ch; font-size:clamp(22px,3vw,40px); line-height:1.1; letter-spacing:-.025em; font-weight:500; }
.sheet-link { display:inline-block; margin-top:26px; border-bottom:1px solid currentColor; padding-bottom:3px; font-size:15px; }
.sheet-body { padding:clamp(40px,7vh,80px) var(--pad); display:grid; gap:clamp(34px,6vh,64px); max-width:1100px; }
.part { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:20px; border-top:1px solid rgba(12,12,12,.14); padding-top:18px; }
.part h3 { margin:0; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#77736c; font-weight:500; }
.part p { margin:0; font-size:clamp(19px,1.9vw,25px); line-height:1.35; letter-spacing:-.012em; }
@media (max-width:760px) { .part { grid-template-columns:1fr; gap:10px; } }
.sheet-next { display:block; width:100%; text-align:left; padding:clamp(50px,9vh,100px) var(--pad); background:var(--ink); color:var(--paper); }
.sheet-next small { display:block; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:12px; }
.sheet-next strong { font-size:clamp(40px,8vw,120px); line-height:.9; letter-spacing:-.055em; font-weight:800; display:inline-block; transition:transform .6s var(--ease); }
.sheet-next:hover strong { transform:translateX(20px); }
html.sheet-open, html.sheet-open body, html.menu-lock, html.menu-lock body { overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; }
  .card { position:relative; top:auto; }
}


/* Product shots on the cards */
.card-btn { z-index:1; }
.card-btn > span:not(.card-top) { max-width:40%; }
.card-shot { position:absolute; z-index:0; right:3%; bottom:-5%; width:51%; border-radius:14px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.30); will-change:transform; }
.card-shot img { width:100%; height:auto; }
.card-shade { z-index:2; }
.sheet-shot { display:block; width:min(100%,980px); height:auto; margin-top:40px; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.25); }
.sheet-shot[hidden] { display:none; }
@media (max-width:720px) {
  .card { height:auto; min-height:min(72svh,640px); }
  .card-btn { position:relative; justify-content:flex-start; gap:18px; padding-bottom:calc(94vw * .625 + 28px); min-height:inherit; }
  .card-name { font-size:clamp(40px,12vw,64px); }
  .card-btn > span:not(.card-top) { max-width:100%; }
  .card-bottom { flex-direction:column; align-items:flex-start; gap:14px; }
  .card-shot { width:94%; right:3%; bottom:-6%; }
}
@media (max-width:720px) { .card.no-shot .card-btn { padding-bottom:clamp(22px,3.4vw,48px); } }

/* ---------- About page ---------- */
.ab-intro { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(24px,4vw,64px); align-items:end; padding:clamp(110px,16vh,170px) var(--pad) clamp(40px,8vh,90px); }
.ab-title { margin:0; font-weight:800; font-size:clamp(56px,9.6vw,168px); line-height:.9; letter-spacing:-.06em; }
.ab-mask { display:inline-block; overflow:hidden; padding-bottom:.06em; margin-right:.18em; vertical-align:top; }
.ab-w { display:inline-block; will-change:transform; }
.ab-photo { margin:0; aspect-ratio:3/4; overflow:hidden; border-radius:6px; will-change:clip-path; }
.ab-photo img { width:100%; height:115%; object-fit:cover; object-position:center 25%; filter:grayscale(1) contrast(1.05); }
.ab-bio { padding:clamp(60px,12vh,140px) var(--pad); display:grid; gap:clamp(36px,6vh,64px); }
.ab-lead { margin:0; max-width:24em; font-size:clamp(26px,3.6vw,54px); line-height:1.12; letter-spacing:-.035em; font-weight:600; }
.ab-exp { padding:clamp(40px,8vh,90px) var(--pad); }
.ab-exp-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ab-row { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,4fr) minmax(0,5fr); grid-template-areas:"period co body" "period role body"; column-gap:clamp(16px,3vw,48px); padding:clamp(22px,3.4vh,34px) 0; border-bottom:1px solid var(--line); transition:background .4s; }
.ab-row:hover { background:rgba(241,237,230,.03); }
.ab-period { grid-area:period; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding-top:.7em; }
.ab-co { grid-area:co; font-weight:700; font-size:clamp(26px,3vw,46px); line-height:1.02; letter-spacing:-.04em; transition:transform .6s var(--ease); }
.ab-row:hover .ab-co { transform:translateX(10px); }
.ab-role { grid-area:role; color:var(--mute); font-size:16px; padding-top:6px; }
.ab-body { grid-area:body; margin:0; font-size:17px; line-height:1.55; color:rgba(241,237,230,.82); padding-top:.5em; }
.ab-stack { padding:clamp(60px,10vh,120px) var(--pad); }
.ab-stack-text { margin:0; max-width:26em; font-size:clamp(24px,3vw,44px); line-height:1.18; letter-spacing:-.03em; font-weight:500; }
.ab-contact-links { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.ab-contact-row { display:flex; gap:28px; flex-wrap:wrap; }
.ab-contact-row a { border-bottom:1px solid var(--line); padding-bottom:4px; font-size:18px; transition:border-color .3s; }
.ab-contact-row a:hover { border-color:var(--paper); }
@media (max-width:760px) {
  .ab-intro { grid-template-columns:1fr; align-items:start; }
  .ab-photo { width:min(100%,420px); }
  .ab-row { grid-template-columns:1fr; grid-template-areas:"period" "co" "role" "body"; row-gap:6px; }
  .ab-period { padding-top:0; }
}
.rm .ab-w, .rm .ab-photo { transform:none; clip-path:none; }
.about-more { display:inline-block; margin-top:28px; font-weight:600; border-bottom:1.5px solid currentColor; padding-bottom:3px; }
/* Contact: a big quiet email link instead of the orange pill */
.contact-mail { background:none; color:var(--paper); padding:0 0 6px; border-radius:0; font-size:clamp(24px,3.6vw,52px); font-weight:600; letter-spacing:-.03em; position:relative; }
.contact-mail::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; transform-origin:left; transform:scaleX(.35); transition:transform .7s var(--ease); }
.contact-mail:hover::after, .contact-mail:focus-visible::after { transform:scaleX(1); }
@media (max-width:720px) { .contact-mail { font-size:clamp(18px,5.3vw,28px); } .contact-mail span { overflow-wrap:normal; white-space:nowrap; } }
.statement-text .w, .statement-text { color:var(--paper); }
.about-exp-label { margin:0 0 12px; }

/* ---------- Light theme (switch in the footer widget) ---------- */
html[data-theme="light"] { --ink:#f4f1ea; --paper:#121212; --mute:#6d6962; --line:rgba(18,18,18,.14); }
html[data-theme="light"] .about { background:#121212; color:#f4f1ea; }
html[data-theme="light"] .about .kicker, html[data-theme="light"] .timeline li span:last-child { color:#9a958d; }
html[data-theme="light"] .timeline, html[data-theme="light"] .timeline li { border-color:rgba(244,241,234,.16); }

/* ---------- Footer widget: links + theme switch ---------- */
.wg-foot { padding:clamp(60px,10vh,110px) var(--pad) clamp(24px,4vh,40px); border-top:1px solid var(--line); }
.wg { max-width:600px; margin:0 auto; display:flex; flex-direction:column; }
.wg-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.wg-cell { position:relative; display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; font-size:14px; letter-spacing:.02em; border-top:1px solid var(--line); transition:background .25s; }
.wg-cell:nth-child(-n+2) { border-top:0; }
.wg-cell:nth-child(odd) { border-right:1px solid var(--line); }
.wg-cell:hover, .wg-cell:focus-visible { background:rgba(127,127,127,.08); }
.wg-ico { display:inline-flex; opacity:.85; }
.wg-ico svg { width:20px; height:20px; fill:currentColor; }
.wg-arrow { position:absolute; right:12px; top:50%; transform:translate(4px,-50%); opacity:0; transition:transform .2s, opacity .2s; display:inline-flex; }
.wg-arrow svg { width:16px; height:16px; fill:currentColor; }
.wg-cell:hover .wg-arrow, .wg-cell:focus-visible .wg-arrow { transform:translate(0,-50%); opacity:1; }
.wg-theme { display:flex; height:52px; margin-top:-1px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.wg-theme-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--mute); transition:background .3s, color .3s; }
.wg-theme-btn + .wg-theme-btn { border-left:1px solid var(--line); }
.wg-theme-btn .wg-ico svg { width:16px; height:16px; }
.wg-theme-btn[aria-checked="true"] { background:rgba(127,127,127,.12); color:var(--paper); font-weight:500; }
.wg-copy { margin:18px 0 0; text-align:center; font-size:12px; color:var(--mute); }

/* Role line: in the top bar on wide screens, above the claim on phones */
.hero { background:var(--ink); }
.hero-role { display:none; margin:0 0 12px; font-family:"Geist Mono", monospace; font-size:11px; line-height:1.6; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
@media (max-width:720px) { .hero-role { display:block; } }
@media (max-width:1000px) and (min-width:721px) { .bar-mid { font-size:11px; letter-spacing:.05em; } }

/* Feedback 4 Nov: calmer statement size, theme switch in the top bar */
.statement-text { font-size:clamp(22px,3.1vw,44px); line-height:1.18; letter-spacing:-.025em; max-width:26em; }
.bar-right { display:flex; align-items:center; gap:14px; }
.tq { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.tq-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:26px; border-radius:999px; color:inherit; opacity:.6; transition:opacity .2s, background .2s; }
.tq-btn svg { width:15px; height:15px; fill:currentColor; }
.tq-btn:hover { opacity:1; }
.tq-btn[aria-checked="true"] { opacity:1; background:rgba(255,255,255,.2); }
.card-top { justify-content:flex-start; }
html[data-theme="light"] .hero-photo { mix-blend-mode:multiply; }
/* Phones: first name only in the top bar */
@media (max-width:720px) { .bar-last { display:none; } }