/* ============================================================
   DESIGNDENZI — PRODUCTION DESIGN SYSTEM
   Ink ground · limestone paper · drafting brass · mono annotations
   ============================================================ */
:root{
  --ink:#0B0E13; --ink-2:#11151d; --ink-3:#181d27;
  --paper:#EDEAE3; --paper-2:#E3DFD6;
  --brass:#C08B3C; --brass-soft:#d8a55c;
  --white:#F5F3EE; --muted:#8B919C; --muted-2:#5d636e;
  --line:rgba(237,234,227,.13); --line-strong:rgba(237,234,227,.25); --line-dark:rgba(11,14,19,.16);
  --ease:cubic-bezier(.22,.9,.24,1); --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur-1:250ms; --dur-2:400ms; --dur-3:550ms; --dur-4:650ms;
  --pad:clamp(20px,4.5vw,72px); --nav-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--brass);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
@view-transition{navigation:auto}

/* type roles */
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono.brass{color:var(--brass)}
.display{font-weight:600;line-height:.96;letter-spacing:-.025em;text-wrap:balance}
.h-xl{font-size:clamp(44px,7.6vw,118px)}
.h-lg{font-size:clamp(34px,5.2vw,76px)}
.h-md{font-size:clamp(26px,3.4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.h-sm{font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.body-lg{font-size:clamp(17px,1.6vw,21px);line-height:1.65;font-weight:400}
.body-m{font-size:16px;line-height:1.7;color:var(--muted)}
.measure{max-width:62ch}

/* layout */
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1680px;margin:0 auto}
.sec{padding-top:clamp(72px,9vw,150px);padding-bottom:clamp(72px,9vw,150px);position:relative}
.sec.hairline-top{border-top:1px solid var(--line)}
.sec.pagehead{padding-top:calc(var(--nav-h) + clamp(48px,7vw,100px))}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.eyebrow-row{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,56px)}
.eyebrow-row .rule{flex:1;height:1px;background:var(--line)}
.sheetno{position:absolute;top:26px;right:var(--pad);pointer-events:none}

/* reveal system */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:80ms}.rv[data-d="2"]{transition-delay:160ms}
.rv[data-d="3"]{transition-delay:240ms}.rv[data-d="4"]{transition-delay:320ms}
.no-js .rv{opacity:1;transform:none}

/* loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:transform 460ms var(--ease-io)}
#loader.up{transform:translateY(-101%)}
#loader.off{display:none}
#loader .lg-badge{width:68px;height:68px;border-radius:50%;opacity:0;transform:scale(.86);transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
#loader.go .lg-badge{opacity:1;transform:scale(1)}
#loader .wordmark{font-weight:700;letter-spacing:.28em;font-size:15px;text-transform:uppercase}
#loader .wordmark b{color:var(--brass);font-weight:700}
#loader .bar{width:min(320px,58vw);height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .bar i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease-io)}
#loader.go .bar i{transform:scaleX(1)}
.no-js #loader{display:none}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background 320ms var(--ease),border-color 320ms var(--ease),backdrop-filter 320ms var(--ease);border-bottom:1px solid transparent;background:transparent}
header.site.solid{background:rgba(11,14,19,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
header.site .inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad)}
.logo{font-weight:700;letter-spacing:.22em;font-size:14px;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:11px}
.logo b{color:var(--brass);font-weight:700}
.lg-img{width:34px;height:34px;border-radius:50%;flex:none}
nav.desktop{display:flex;gap:clamp(18px,2.4vw,40px)}
nav.desktop a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);position:relative;padding:6px 0;transition:color var(--dur-1) var(--ease)}
nav.desktop a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right 260ms var(--ease)}
nav.desktop a:hover,nav.desktop a.active{color:var(--white)}
nav.desktop a:hover::after,nav.desktop a.active::after{right:0}
.cta-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);padding:12px 22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);white-space:nowrap}
.cta-btn:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.cta-btn.brass{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.cta-btn.brass:hover{background:var(--brass-soft);border-color:var(--brass-soft)}
.cta-btn .arr{transition:transform var(--dur-1) var(--ease)}
.cta-btn:hover .arr{transform:translate(2px,-2px)}
#burger{display:none;flex-direction:column;gap:5px;padding:8px}
#burger span{width:26px;height:1.5px;background:var(--white);transition:transform 300ms var(--ease),opacity 300ms var(--ease)}
body.menu-open #burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open #burger span:nth-child(2){opacity:0}
body.menu-open #burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile menu */
#mmenu{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 320ms var(--ease),visibility 0s 320ms}
body.menu-open #mmenu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 320ms var(--ease)}
#mmenu a.mm-link{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:clamp(30px,7vw,44px);font-weight:600;letter-spacing:-.02em;opacity:0;transform:translateY(24px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
body.menu-open #mmenu a.mm-link{opacity:1;transform:none}
#mmenu a.mm-link:nth-of-type(2){transition-delay:50ms}#mmenu a.mm-link:nth-of-type(3){transition-delay:100ms}
#mmenu a.mm-link:nth-of-type(4){transition-delay:150ms}#mmenu a.mm-link:nth-of-type(5){transition-delay:200ms}
#mmenu .mm-social{display:flex;gap:28px;margin-top:38px;opacity:0;transition:opacity 420ms var(--ease) 300ms}
body.menu-open #mmenu .mm-social{opacity:1}

/* frames */
.frame{position:relative;overflow:hidden;background:var(--ink-3)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.frame .ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:20px;background:repeating-linear-gradient(45deg,transparent 0 11px,rgba(237,234,227,.05) 11px 12px),var(--ink-3)}
.frame.noimg .ph{display:flex}
.frame.noimg img{display:none}
.ph span{border:1px solid var(--line-strong);padding:8px 14px}
.ratio-169{aspect-ratio:16/9}.ratio-45{aspect-ratio:4/5}.ratio-11{aspect-ratio:1/1}.ratio-32{aspect-ratio:3/2}.ratio-219{aspect-ratio:21/9}.ratio-43{aspect-ratio:4/3}

/* hero */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
#hero .bg{position:absolute;inset:0}
#hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);filter:brightness(.6) saturate(.94)}
#hero.settle .bg img{transform:scale(1);transition:transform 1800ms var(--ease)}
#hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,19,.94) 0%,rgba(11,14,19,.35) 45%,rgba(11,14,19,.45) 100%)}
#hero .content{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(48px,7vh,90px)}
.mask{overflow:hidden;display:block}
.mask>span{display:block;transform:translateY(110%);transition:transform 760ms var(--ease)}
#hero.settle .mask>span{transform:none}
#hero .l2>span{transition-delay:130ms}
#hero .hero-sub{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;opacity:0;transition:opacity 700ms var(--ease) 460ms}
#hero.settle .hero-sub{opacity:1}
#hero .hero-body{margin-top:16px;max-width:52ch;color:var(--muted);opacity:0;transition:opacity 700ms var(--ease) 540ms}
#hero.settle .hero-body{opacity:1}
#hero .hero-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease) 600ms,transform 600ms var(--ease) 600ms}
#hero.settle .hero-cta{opacity:1;transform:none}
#hero .coord{position:absolute;z-index:2;right:var(--pad);bottom:clamp(48px,7vh,90px);text-align:right;display:none}
@media(min-width:900px){#hero .coord{display:block}}
.no-js #hero .bg img,.no-js .mask>span{transform:none}
.no-js #hero .hero-sub,.no-js #hero .hero-body,.no-js #hero .hero-cta{opacity:1;transform:none}
.scroll-hint{position:absolute;left:26px;top:44%;z-index:2;display:none;flex-direction:column;align-items:center;gap:12px}
@media(min-width:1251px){.scroll-hint{display:flex}}
.scroll-hint i{width:1px;height:74px;background:var(--line-strong);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--brass);animation:drip 2.6s var(--ease-io) infinite}
@keyframes drip{0%{top:-40%}70%{top:110%}100%{top:110%}}

/* project cards */
.proj-row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);row-gap:clamp(48px,6vw,90px)}
.pcard{position:relative;display:block}
.pcard .frame img{transform:scale(1)}
.pcard:hover .frame img{transform:scale(1.025)}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:16px;transition:transform var(--dur-2) var(--ease)}
.pcard:hover .meta{transform:translateY(-5px)}
.pcard .meta h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.pcard .view-tag{position:absolute;top:16px;right:16px;background:rgba(11,14,19,.85);padding:8px 13px;opacity:0;transform:translateY(6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em}
.pcard:hover .view-tag{opacity:1;transform:none}
.pcard .num{position:absolute;top:16px;left:16px;background:rgba(11,14,19,.85);padding:8px 12px}
.pcard .badge{position:absolute;bottom:14px;left:14px;background:rgba(11,14,19,.85);padding:7px 11px;color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-8{grid-column:span 8}.span-12{grid-column:span 12}

/* paper sections */
.paper-sec{background:var(--paper);color:var(--ink)}
.paper-sec .mono{color:var(--muted-2)}
.paper-sec .body-m{color:#464b55}
.paper-sec .eyebrow-row .rule{background:var(--line-dark)}
.paper-sec .cta-btn{border-color:rgba(11,14,19,.35);color:var(--ink)}
.paper-sec .cta-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper-sec .cta-btn.inkfill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper-sec .cta-btn.inkfill:hover{background:var(--ink-3);border-color:var(--ink-3)}
.paper-sec ::selection{background:var(--ink);color:var(--paper)}
.paper-sec .tag{border-color:rgba(11,14,19,.3);color:var(--muted-2)}
.paper-sec .hairline-list>div{border-color:var(--line-dark)}
.paper-sec .pd-meta{border-color:var(--line-dark)}
.paper-sec .ins-item{border-color:var(--line-dark)}
.paper-sec .ins-item:first-child{border-top-color:var(--line-dark)}
.paper-sec .ins-item h3{color:var(--ink)}
.paper-sec .ins-item:hover h3{color:var(--brass)}
.paper-sec .fbtn{border-color:rgba(11,14,19,.3);color:var(--muted-2)}
.paper-sec .fbtn:hover{color:var(--ink);border-color:var(--ink)}
.paper-sec .fbtn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper-sec .note-slip{border-color:rgba(11,14,19,.35)}
.paper-sec .wrap{position:relative}
.paper-sec .mono.brass{color:#8a5f22}
.paper-sec .stage-ind .big{color:#9a6a26}
.paper-sec .pstep .n{color:#5d636e;opacity:1;transition:color 450ms var(--ease)}
.paper-sec .pstep.on .n{color:#9a6a26}
.crosshair{position:absolute;width:15px;height:15px;pointer-events:none;opacity:.5}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:rgba(11,14,19,.5)}
.crosshair::before{left:50%;top:0;bottom:0;width:1px}
.crosshair::after{top:50%;left:0;right:0;height:1px}

/* typology explorer / expertise list */
.xp-wrap{position:relative;isolation:isolate}
.xp-media{position:absolute;right:0;top:0;width:38%;aspect-ratio:4/5;pointer-events:none;display:none}
@media(min-width:1000px){.xp-media{display:block}}
.xp-media .frame{position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--ease)}
.xp-media .frame.show{opacity:1}
.xp-list{position:relative;z-index:2}
@media(min-width:1000px){.xp-list{width:58%}}
.xp-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(16px,3vw,36px);padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--line);transition:padding-left 300ms var(--ease),opacity 300ms var(--ease);position:relative;z-index:2}
.xp-item:first-child{border-top:1px solid var(--line)}
.xp-item .t{font-size:clamp(22px,3.2vw,44px);font-weight:600;letter-spacing:-.02em;color:var(--muted);transition:color 250ms var(--ease)}
.xp-item:hover{padding-left:14px}
.xp-item:hover .t{color:var(--white)}
.xp-item .arr{margin-left:auto;color:var(--muted-2);transition:color 250ms var(--ease),transform 250ms var(--ease)}
.xp-item:hover .arr{color:var(--brass);transform:translate(3px,-3px)}
.xp-item .d{flex-basis:100%;max-height:0;overflow:hidden;color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;margin:0;transition:max-height 360ms var(--ease),margin 360ms var(--ease),opacity 360ms var(--ease);opacity:0}
.xp-item:hover .d{max-height:96px;margin-top:10px;opacity:1}
.xp-list:hover .xp-item:not(:hover) .t{color:var(--muted-2)}
.xp-list:hover .xp-item:not(:hover){opacity:.55}
#xpWord{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);font-weight:700;font-size:clamp(72px,13vw,210px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(237,234,227,.08);pointer-events:none;white-space:nowrap;z-index:0;opacity:0;transition:opacity 450ms var(--ease)}
#xpWord.on{opacity:1}

/* plan -> concept -> 3d */
.pc3-tabs{display:flex;gap:8px;margin-bottom:18px}
.pc3-stage{position:relative}
.pc3-pane{display:none}
.pc3-pane.on{display:block;animation:fadeUp 380ms var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* process */
.proc2{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media(min-width:1000px){.proc2{grid-template-columns:5fr 7fr}.proc-left{position:sticky;top:calc(var(--nav-h) + 34px);align-self:start}}
.stage-ind{display:flex;align-items:baseline;gap:12px;margin-top:26px}
.stage-ind .big{font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,4vw,54px);color:var(--brass)}
.proc{position:relative;display:grid;grid-template-columns:1px 1fr;gap:clamp(24px,4vw,64px)}
.proc .spine{position:relative;background:var(--line-dark);width:1px}
.proc .spine i{position:absolute;top:0;left:0;width:1px;height:0;background:var(--brass)}
.pstep{display:grid;grid-template-columns:clamp(64px,8vw,120px) 1fr;gap:clamp(14px,3vw,42px);padding:clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line-dark)}
.pstep:last-child{border-bottom:0}
.pstep .n{opacity:.3;transition:opacity 450ms var(--ease)}
.pstep.on .n{opacity:1}
.no-js .pstep .n{opacity:1}
.pstep .n{font-family:'IBM Plex Mono',monospace;font-size:clamp(22px,3vw,38px);color:var(--brass);font-weight:400}
.pstep h3{font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.pstep p{color:#464b55;max-width:52ch}

/* stats / misc */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,60px)}
.stat .v{font-size:clamp(64px,9vw,128px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .v em{color:var(--brass);font-style:normal}
.stat .l{margin-top:10px}
.hairline-list>div{border-bottom:1px solid var(--line);padding:18px 0}
.hairline-list>div:first-child{border-top:1px solid var(--line)}
.note-slip{border:1px dashed var(--line-strong);padding:16px 20px;display:inline-flex;gap:12px;align-items:baseline}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.tag{display:inline-block;border:1px solid var(--line-strong);padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pd-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:clamp(30px,4vw,50px) 0}
.pd-meta .k{margin-bottom:6px}
.pd-meta .v{font-size:15px;font-weight:600}
.chapter{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line)}
@media(min-width:900px){.chapter{grid-template-columns:minmax(180px,4fr) 8fr}}
.next-proj{display:block;position:relative}
.next-proj .frame img{filter:brightness(.55)}
.next-proj:hover .frame img{transform:scale(1.02)}
.next-proj .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;z-index:2;text-align:center;padding:0 16px}

/* insights */
.ins-item{display:grid;grid-template-columns:clamp(56px,6vw,90px) 1fr auto;gap:clamp(14px,2.5vw,34px);align-items:baseline;padding:clamp(20px,2.8vw,30px) 0;border-bottom:1px solid var(--line)}
.ins-item:first-child{border-top:1px solid var(--line)}
.ins-item h3{font-size:clamp(19px,2.4vw,30px);font-weight:600;letter-spacing:-.015em;transition:color 250ms var(--ease)}
.ins-item:hover h3{color:var(--brass-soft)}
.feat-art{display:grid;grid-template-columns:1fr;border:1px solid var(--line-dark);margin-bottom:clamp(30px,4vw,50px)}
@media(min-width:900px){.feat-art{grid-template-columns:7fr 5fr}}
.feat-art .txt{padding:clamp(24px,3.4vw,48px)}
.feat-art .fig{border-top:1px solid var(--line-dark);background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,40px)}
@media(min-width:900px){.feat-art .fig{border-top:0;border-left:1px solid var(--line-dark)}}
.feat-art .ft{transition:color 250ms var(--ease)}
.feat-art:hover .ft{color:var(--brass)}
#readbar{position:fixed;top:0;left:0;height:2px;background:var(--brass);width:0;z-index:130}
.art-layout{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,70px)}
@media(min-width:1000px){.art-layout{grid-template-columns:minmax(200px,3fr) 7fr}}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;display:flex;flex-direction:column;gap:2px}
.toc a{font-size:13px;color:var(--muted);padding:7px 0 7px 16px;border-left:1px solid var(--line);transition:all 200ms var(--ease)}
.toc a.on{color:var(--white);border-left-color:var(--brass)}
.toc .toc-fig{margin-top:26px;border:1px solid var(--line);padding:14px;display:none}
@media(min-width:1000px){.toc .toc-fig{display:block}}
.toc .toc-fig svg{display:block;width:100%;height:auto}
.prose h2{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.015em;margin:44px 0 14px;scroll-margin-top:110px}
.prose p{color:var(--muted);max-width:66ch;margin-bottom:16px}
.prose p strong{color:var(--white);font-weight:600}
.prose ul{color:var(--muted);max-width:66ch;margin:0 0 16px 20px}
.prose li{margin-bottom:8px}
.artmeta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}

/* projects page */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:clamp(30px,4vw,54px)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fbtn{border:1px solid var(--line-strong);padding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:all 220ms var(--ease)}
.fbtn:hover{color:var(--white);border-color:var(--white)}
.fbtn.active{background:var(--white);color:var(--ink);border-color:var(--white)}
.fbtn .cnt{color:var(--brass);margin-left:7px;font-size:9px}
.fbtn.active .cnt{color:inherit;opacity:.75}
.vtoggle{display:flex;gap:8px}
.pcell{will-change:transform}
.swapfade{opacity:0 !important;transform:translateY(12px)}
#projGrid,#projIndex{transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.idx{display:none;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){.idx{grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px)}}
.idx.show{display:grid}
.gridwrap.hidez{display:none}
.idx-row{display:grid;grid-template-columns:clamp(44px,4vw,64px) 1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left 250ms var(--ease)}
.idx-row:first-child{border-top:1px solid var(--line)}
.idx-row:hover{padding-left:12px}
.idx-row .t{font-size:clamp(20px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--muted);transition:color 220ms var(--ease)}
.idx-row:hover .t,.idx-row.on .t{color:var(--white)}
.idx-preview{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;display:none}
@media(min-width:1000px){.idx-preview{display:block}}
.idx-ovl{position:absolute;left:12px;bottom:10px;background:rgba(11,14,19,.85);padding:7px 11px;color:var(--white);z-index:2}

/* custom cursor */
#cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
@media(pointer:fine){#cur{display:block}}
#cur i{display:flex;width:82px;height:82px;border-radius:50%;background:var(--brass);color:var(--ink);align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-style:normal;transform:scale(0);transition:transform 240ms var(--ease)}
#cur.on i{transform:scale(1)}

/* values / confidentiality */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.values>div{background:var(--paper);padding:clamp(20px,2.4vw,30px)}
.values .vt{font-weight:700;letter-spacing:.2em;font-size:12.5px;text-transform:uppercase;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
.values .vt .mono{font-size:10px}
.values p{color:#464b55;font-size:14px;line-height:1.6}
.conf-box{border:1px solid var(--line-strong);padding:clamp(24px,3.4vw,44px);max-width:88ch}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:760px){.form-grid{grid-template-columns:1fr 1fr}.fw{grid-column:1/-1}}
.field label{display:block;margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);color:var(--white);font:inherit;padding:10px 2px;transition:border-color 220ms var(--ease);border-radius:0;appearance:none}
.field select option{color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input[type="file"]{border-bottom:1px dashed var(--line-strong);padding:14px 2px;color:var(--muted)}
.form-note{grid-column:1/-1}
.form-ok{border:1px solid var(--brass);padding:26px}
.form-err{border:1px solid #a04b3c;padding:18px 22px;color:#e2b3a8}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.rotbox{display:inline-block;overflow:hidden;vertical-align:bottom}
.rotbox span{display:block;color:var(--brass)}

/* footer */
footer.site{border-top:1px solid var(--line);padding:clamp(60px,8vw,110px) var(--pad) 40px;overflow:hidden}
.foot-mark{font-weight:700;letter-spacing:.06em;font-size:clamp(44px,10.5vw,168px);line-height:.9;text-transform:uppercase;opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.foot-mark.in,.no-js .foot-mark{opacity:1;transform:none}
.foot-mark b{color:var(--brass);font-weight:700}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;margin-top:clamp(40px,6vw,80px)}
.foot-grid a{color:var(--muted);display:block;padding:5px 0;font-size:14px;transition:color 200ms var(--ease)}
.foot-grid a:hover{color:var(--white)}
.foot-base{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,70px);padding-top:26px}

/* statement */
.stmt{position:relative;overflow:hidden;background:var(--ink)}
.stmt .grain{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(237,234,227,.035) calc(8.333% - 1px) 8.333%)}
.stmt-line{display:block;overflow:hidden}
.stmt-line>span{display:block;transform:translateY(108%);transition:transform 720ms var(--ease)}
.stmt-line.in>span,.no-js .stmt-line>span{transform:none}
.stmt-line:nth-child(2)>span{transition-delay:110ms}
.stmt-line:nth-child(3)>span{transition-delay:220ms}
.stmt em{font-style:normal;color:var(--brass)}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--white)}

/* mobile */
@media(max-width:860px){
  nav.desktop{display:none}
  header.site .cta-btn{display:none}
  #burger{display:flex}
  .proj-row .pcard{grid-column:span 12 !important}
  .span-7,.span-5,.span-6,.span-4,.span-8{grid-column:span 12}
  .chapter{grid-template-columns:1fr}
  .grid12{grid-template-columns:1fr}
  .grid12>*{grid-column:auto !important}
  .lg-img{width:30px;height:30px}
  #xpWord{display:none}
  .xp-item .d{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .rv,.stmt-line>span{opacity:1;transform:none}
  #hero .bg img,.mask>span{transform:none}
  #hero .hero-sub,#hero .hero-body,#hero .hero-cta{opacity:1;transform:none}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}

/* DD-MOBILEFIX-V1 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.art-layout>*{min-width:0}
@media(max-width:999px){.toc{position:static;top:auto}}
@media(max-width:860px){.cta-btn{white-space:normal;text-align:left}.prose p,.prose h2,.prose h3,.prose li,.toc a{overflow-wrap:break-word}}
@media(max-width:820px){body:has(.ddwa-stick){padding-bottom:56px}}