/* ===== Universal styles: the single source for every page ===== */

/* ---------- fonts (self-hosted variable fonts from Google Fonts, SIL Open Font License) ---------- */
@font-face{font-family:'Lexend';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lexend';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/lexend-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- page-to-page crossfade (supporting browsers; others navigate as normal) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}

/* ---------- tokens ---------- */
:root{
  --ink:#121212; --paper:#E9E9E8; --white:#FFFFFF; --soft:#F2F2F1;
  --text:#46464A; --muted:#6A6A6D; --line:#B8B8B7; --accent:#2F3FA8;
  --panel:#2E2E30; --panel-line:#484850; --on-dark:#E9E9E8; --on-dark-muted:#A4A4A8; --seg-off:#7A7A7E;
  --on-ink-text:#C9C9C8; --on-ink-muted:#9C9C9B; --on-ink-line:#5A5A5C; --on-ink-rule:#333335;
  --chrome:#F1F1F0; --chrome-line:#DADAD8; --chrome-dot:#C9C9C8;
  --orbit-inner:#A9A9A8; --orbit-outer:#C2C2C1; --photo-bg:#CFCFCE;
  --font-display:'Lexend',sans-serif; --font-body:'Instrument Sans',system-ui,sans-serif;
  --gutter:32px; --max:1560px; --radius:28px; --bar-h:96px;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}
[id]{scroll-margin-top:var(--bar-h)}

/* ---------- layout ---------- */
.page{min-height:100%;background:var(--paper)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.stack{display:flex;flex-direction:column}
.stack-sm{gap:16px}
.stack-xs{gap:4px}
.row-wrap{display:flex;flex-wrap:wrap}
.page-head{padding-top:56px;padding-bottom:64px;gap:36px}
.rule{flex:1 1 0;height:1px;background:var(--ink)}
.rule-row{display:flex;align-items:center;gap:32px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px}
@media (max-width:760px){.grid-2{grid-template-columns:minmax(0,1fr);gap:48px}}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px 28px}
.grid-3-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px 28px}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.page-foot{padding-top:72px;padding-bottom:40px}
.page-foot-tight{padding-top:56px}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-weight:200;font-size:clamp(38px,7.7vw,124px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.eyebrow{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.eyebrow-center{font-family:var(--font-display);font-weight:300;font-size:14px;letter-spacing:.4em;text-transform:uppercase;padding-left:.4em;color:var(--ink)}
.label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label-light{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.caption-light{font-size:12px;letter-spacing:.04em;color:var(--on-dark-muted)}
.lead{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,1.9vw,26px);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.lead em{display:block;margin-top:20px;font-style:italic;color:var(--muted);font-size:.85em}
.lead-xl{font-family:var(--font-display);font-weight:200;font-size:clamp(22px,2.5vw,36px);line-height:1.35;letter-spacing:-.015em;text-wrap:pretty}
.tagline{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.body{font-size:17px;line-height:1.6;color:var(--text)}
.body-sm{font-size:15px;line-height:1.55;color:var(--text)}
.fact-value{font-size:18px;line-height:1.5}
.title-sm{font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:-.01em}
.meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);line-height:1.7}
.stat-num{font-family:var(--font-display);font-weight:200;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.03em}
.muted{color:var(--muted)}

/* ---------- menu bar (Menu.dc.html) ---------- */
.menu-host,.sc-host:has(>.menu-host){display:contents}
.bar{position:sticky;top:0;z-index:50;background:rgba(233,233,232,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:16px}
.bar-nav{display:flex;flex-wrap:wrap;gap:10px}
/* whole-pixel widths so every button edge lands on a pixel: crisp outlines, no blur */
.wordmark{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;animation:tick 5s ease-in-out infinite}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn-black{background:var(--ink);color:var(--paper)}
.btn-blue{background:var(--accent);color:var(--white)}
.btn-line{border-color:var(--ink)}
.btn-icon{width:44px;padding:0;border-color:var(--ink)}
.btn-md{height:52px;padding:0 26px;font-size:15px}
.btn-lg{height:56px;padding:0 34px;font-size:15px}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-line-light{border-color:var(--paper);color:var(--paper)}
.btn-group{display:flex;flex-wrap:wrap;gap:10px}
.circle-btn{flex:0 0 52px;width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease-out)}
.circle-btn-solid{background:var(--ink);color:var(--paper)}
.circle-btn-sm{flex:0 0 32px;width:32px;height:32px}
.circle-btn-dark{border-color:var(--on-dark);color:var(--on-dark)}
.tag{height:34px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.chip{height:36px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.tab-row{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px;padding:24px 0;border-top:1px solid var(--ink)}
.tab{background:none;border:0;padding:0 0 4px;cursor:pointer;font:inherit;color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tab.is-on{color:var(--ink)}
.tab.is-on{border-bottom-color:var(--ink)}

/* ---------- dark showcase panel (project screenshots, work grid) ---------- */
.showcase{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--panel);color:var(--on-dark);padding:clamp(24px,4.5vw,64px);display:flex;flex-direction:column;gap:36px}
.showcase-centered{align-items:center}
.showcase-head,.showcase-foot{position:relative;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.showcase-head{gap:8px 24px}
.showcase-foot{gap:16px 32px}
.count{font-size:14px;color:var(--on-dark-muted)}
.count b{font-weight:400;color:var(--on-dark)}
.ring{position:absolute;border-radius:50%;border:1px solid var(--panel-line);pointer-events:none}
.ring-a{width:700px;height:700px;left:-220px;bottom:-380px;animation:spin 90s linear infinite}
.ring-b{width:460px;height:460px;right:-120px;top:-200px;animation:spinrev 120s linear infinite}
.window{position:relative;width:100%;max-width:980px;border-radius:14px;overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.7)}
.window-document{max-width:860px}
.window-document .slides{background:var(--soft)}
.window-dark .slides{background:var(--panel)}
.window-bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 18px;background:var(--chrome);border-bottom:1px solid var(--chrome-line)}
.window-bar i{width:10px;height:10px;border-radius:50%;background:var(--chrome-dot);display:block}
.window-bar span{margin-left:14px;flex:0 1 360px;min-width:0;height:26px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;background:var(--white);font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slides{position:relative;aspect-ratio:3/2;background:var(--white)}
.window-document .slides{aspect-ratio:4/3}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.slide.is-active{opacity:1;visibility:visible}
.slide img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;transform:scale(1.003)}
.controls{display:flex;align-items:center;gap:24px}
.controls .buttons{display:flex;gap:10px}
.seg-group{display:flex;gap:8px}
.seg{width:44px;height:24px;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center}
.seg i{display:block;width:100%;height:2px;background:var(--seg-off);transition:background .3s}
.seg.is-on i{background:var(--on-dark)}

/* ---------- project details ---------- */
.details{padding-top:72px;gap:72px}
.story-item{display:flex;flex-direction:column;gap:24px;padding-top:20px;border-top:1px solid var(--ink)}
.story-head{display:flex;align-items:baseline;gap:16px;font-weight:inherit}
.story-num{font-family:var(--font-display);font-weight:300;font-size:14px;letter-spacing:.1em;color:var(--ink)}
.sample{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:padding-left .4s var(--ease-out)}
.label-stack{display:flex;flex-direction:column;gap:10px}

/* ---------- work cards ---------- */
.work-grid{padding-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:48px 28px;position:relative}
.card{display:flex;flex-direction:column;gap:16px}
.thumb{aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--panel);position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;display:block;transition:transform 1s var(--ease-out)}
.meta-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-top:1px solid var(--panel-line);padding-top:14px}
.card-title{font-family:var(--font-display);font-weight:300;font-size:18px;letter-spacing:-.01em}
.empty-note{position:relative;color:var(--on-dark-muted)}

/* ---------- home: hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-rule{margin-top:56px;display:flex;align-items:center;gap:24px}
.hero-name{margin-top:36px;text-align:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px) minmax(0,1fr);gap:0 48px;align-items:end;margin-top:72px}
.hl{grid-column:1;grid-row:1;padding:0 56px 56px 0;display:flex;flex-direction:column;gap:20px;max-width:420px}
.ph{grid-column:2;grid-row:1;position:relative;width:100%}
.phimg{aspect-ratio:4/5;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:var(--photo-bg);position:relative}
.phimg img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.hr{grid-column:3;grid-row:1;padding:0 0 56px 56px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;justify-self:end;width:100%;max-width:420px}
.ringbox{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;pointer-events:none}
.orbit{grid-area:1/1;aspect-ratio:1;border-radius:50%;border:1px solid var(--orbit-inner);position:relative}
.orbit-1{width:114%;animation:spinrev 60s linear infinite}
.orbit-2{width:130%;border-color:var(--orbit-outer);animation:spinrev 90s linear infinite}
.orbit i{position:absolute;left:50%;border-radius:50%;display:block}
.orbit-1 i{bottom:-6px;margin-left:-6px;width:12px;height:12px;background:var(--ink)}
.orbit-2 i{top:-5px;margin-left:-5px;width:10px;height:10px;background:var(--accent)}

/* ---------- home: sections ---------- */
.work-cta{padding-top:128px;padding-bottom:120px}
.about{padding-bottom:140px;gap:32px 80px;align-items:baseline}
.about-label{flex:0 0 160px}
.about-body{flex:1 1 560px;max-width:980px;display:flex;flex-direction:column;gap:56px}
.stat{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--ink)}
.stat .body-sm{max-width:220px}
.discipline{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
.contact{background:var(--ink);color:var(--paper)}
.contact-inner{padding-top:120px;padding-bottom:56px;display:flex;flex-direction:column;gap:56px}
.contact-mail{font-family:var(--font-display);font-weight:200;font-size:clamp(22px,3.4vw,52px);line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere;border-bottom:1px solid var(--on-ink-line);align-self:flex-start;padding-bottom:8px;transition:border-color .25s}
.contact-copy{font-size:18px;line-height:1.55;color:var(--on-ink-text);max-width:460px}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.footer-row-dark{border-top-color:var(--on-ink-rule);color:var(--on-ink-muted);padding-top:28px}


/* ---------- states: hover only on devices with a real pointer, so taps never leave a button stuck in its hover colour ---------- */
@media (hover:hover){
  .footer-row a:hover{color:var(--accent)}
  .btn:hover{transform:translateY(-2px)}
  .btn-black:hover{background:var(--accent)}
  .btn-blue:hover{background:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .btn-icon:hover{background:var(--ink);color:var(--paper)}
  .btn-light:hover{background:var(--white)}
  .btn-line-light:hover{background:var(--paper);color:var(--ink)}
  .circle-btn:hover{background:var(--ink);color:var(--paper)}
  .circle-btn-solid:hover{background:var(--accent);border-color:var(--accent)}
  .circle-btn-dark:hover{background:var(--on-dark);color:var(--ink)}
  .tab:hover{color:var(--ink)}
  .seg:hover i{background:var(--on-dark)}
  .sample:hover{padding-left:20px}
  .sample:hover .circle-btn{transform:rotate(-45deg);background:var(--accent);border-color:var(--accent)}
  .card:hover .thumb img{transform:scale(1.04)}
  .card:hover .circle-btn{transform:rotate(-45deg);background:var(--on-dark);color:var(--ink)}
  .contact-mail:hover{border-color:var(--paper)}
  .footer-row-dark a:hover{color:var(--paper)}
  .btn-black[aria-current="page"]:hover{background:var(--ink)}
}
/* pressed */
.btn:active,.circle-btn:active{transform:translateY(0) scale(.97)}
.btn:active{transition-duration:.08s}
/* keyboard focus stays visible on dark surfaces */
.contact a:focus-visible,.contact button:focus-visible,.showcase a:focus-visible,.showcase button:focus-visible{outline-color:var(--paper)}

/* ---------- motion ---------- */
/* ---------- page entrance: a soft fade, then the top of the page rises in, in steps ---------- */
:root{--ease-soft:cubic-bezier(.16,1,.3,1)}
.page:not(.menu-host){animation:fadein .2s ease-out backwards}
.page-head>*,.hero-rule,.hero-name,.hero-grid,.tab-row,.work-grid,.page-head+section{animation:rise .4s var(--ease-soft) backwards}
.page-head>:nth-child(1),.hero-rule{animation-delay:0s}
.page-head>:nth-child(2),.hero-name{animation-delay:.03s}
.tab-row,.hero-grid,.page-head+section{animation-delay:.06s}
.work-grid{animation-delay:.08s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- reveal on scroll: browsers that support it fade sections up as they come into view; others show them as normal ---------- */
@supports (animation-timeline:view()){
  .card,.story-item,.sample,.work-cta,.about-label,.about-body>.lead-xl,.stat,.discipline,.contact-inner>*{
    animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .card:nth-child(3n+2),.stat:nth-child(2),.discipline:nth-child(2),.story-item:nth-child(2n){animation-range:entry 15% entry 100%}
  .card:nth-child(3n),.stat:nth-child(3),.discipline:nth-child(3){animation-range:entry 30% entry 100%}
  @keyframes reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
@keyframes tick{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- responsive: tablet ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:56px 40px;align-items:start;margin-top:24px}
  .ph{grid-column:1/-1;grid-row:1;justify-self:center;max-width:440px;margin:calc(min(100%,440px)*.19) auto}
  .phimg{border-radius:var(--radius)}
  .orbit-1{width:138%}
  .orbit-2{width:160%}
  .hl{grid-column:1;grid-row:2;padding:0;max-width:560px}
  .hr{grid-column:2;grid-row:2;padding:0;justify-self:end;max-width:none;width:auto}
  .work-cta{padding-top:80px;padding-bottom:88px}
}

/* ---------- responsive: phone ---------- */
@media (max-width:640px){
  :root{--gutter:20px;--bar-h:72px}
  .bar-inner{padding-top:12px;padding-bottom:10px;gap:8px}
  .wordmark{display:none}
  .bar-inner{justify-content:center}
  .bar-nav{gap:6px;flex-wrap:nowrap}
  .bar-nav .btn{height:38px;font-size:13px}
  .bar-nav .btn-icon{width:38px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px 0;margin-top:44px}
  .orbit-1{width:108%}
  .orbit-2{width:124%}
  .ph{margin:24px auto}
  .phimg{border-radius:24px}
  .hl{grid-column:1;grid-row:2}
  .hr{grid-column:1;grid-row:3;justify-self:start}
  .work-cta{padding-top:64px;padding-bottom:72px;gap:16px}
  .about{padding-bottom:96px}
  .controls{gap:16px}
    .seg{width:auto;flex:1 1 0;min-width:8px}
    .seg-group{flex:1 1 0;min-width:0;gap:4px}
}
@media (max-width:360px){
  .bar-nav{gap:4px}
  .bar-nav .btn{font-size:12.5px}
  .bar-nav .btn-icon{width:34px;height:34px}
}
/* Thicker outlines on rounded controls */
.btn,.circle-btn,.tag,.chip{border-width:2px}
.page-head-center{text-align:center}
.page-head-center .eyebrow{padding-left:.1em}