/* ============================================================
   FABRICATR — design system
   Bone paper. Warm ink. Ultramarine. The dark is earned later.
   ============================================================ */

:root{
  --paper:#F2EFE6;
  --ink:#16140F;
  --ink-soft:rgba(22,20,15,.62);
  --ink-faint:rgba(22,20,15,.6);   /* real text: must stay AA-readable */
  --ink-ghost:rgba(22,20,15,.38);  /* purely decorative whispers only */
  --line:rgba(22,20,15,.16);
  --line-soft:rgba(22,20,15,.09);
  --accent:#4B58FF;
  --signal:#FF4D00;

  --app-bg:#F2EFE6;
  --app-fg:#16140F;

  --sans:'Archivo',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gutter:clamp(20px,4.5vw,72px);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.83,0,.17,1);
  --e-el:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:auto}
html.reduced{scroll-behavior:auto}

body{
  background:var(--app-bg);
  color:var(--app-fg);
  font-family:var(--sans);
  font-weight:480;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .12s linear;
}
body.loading{overflow:hidden}
body.menu-open,body.overlay-open,body.modal-open{overflow:hidden}

::selection{background:var(--accent);color:var(--paper)}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
canvas{display:block}
kbd{
  font-family:var(--mono);font-size:.78em;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:.1em .45em;background:rgba(22,20,15,.04);
}
.mono{font-family:var(--mono);font-weight:400}
sup{font-size:.45em;vertical-align:super}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.container{padding-inline:var(--gutter);max-width:1680px;margin-inline:auto}

/* On pointer-fine devices the custom cursor takes over */
html.js:not(.touch) body,
html.js:not(.touch) a,
html.js:not(.touch) button,
html.js:not(.touch) input{cursor:none}

/* ============ GRAIN ============ */
#grain{
  position:fixed;inset:-50%;z-index:200;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:multiply;
  animation:grain 1.4s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}
}
html.reduced #grain{animation:none}

/* ============ GRID OVERLAY ============ */
#grid-overlay{
  position:fixed;inset:0;z-index:190;pointer-events:none;
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
  padding-inline:var(--gutter);
  opacity:0;transition:opacity .45s var(--e-out);
}
.gcol{background:rgba(75,88,255,.06);border-inline:1px solid rgba(75,88,255,.25)}
html.gridlines #grid-overlay{opacity:1}

/* ============ CUSTOM CURSOR ============ */
#cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;display:none;opacity:0;transition:opacity .25s linear}
html.js:not(.touch) #cursor{display:block}
.cursor-dot{
  position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
}
.cursor-ring{
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  transition:width .35s var(--e-out),height .35s var(--e-out),border-radius .35s var(--e-out),background-color .35s var(--e-out),border-color .35s var(--e-out),opacity .3s;
}
.cursor-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--paper);
  opacity:0;transition:opacity .2s;white-space:nowrap;
}
#cursor[data-state="link"] .cursor-ring{width:54px;height:54px;background:rgba(75,88,255,.08)}
#cursor[data-state="open"] .cursor-ring,
#cursor[data-state="play"] .cursor-ring,
#cursor[data-state="copy"] .cursor-ring,
#cursor[data-state="drag"] .cursor-ring{
  width:88px;height:88px;background:var(--accent);border-color:var(--accent);
}
#cursor[data-state="open"] .cursor-label,
#cursor[data-state="play"] .cursor-label,
#cursor[data-state="copy"] .cursor-label,
#cursor[data-state="drag"] .cursor-label{opacity:1}
#cursor[data-state="open"] .cursor-dot,
#cursor[data-state="play"] .cursor-dot,
#cursor[data-state="copy"] .cursor-dot,
#cursor[data-state="drag"] .cursor-dot{opacity:0}
#cursor[data-state="pluck"] .cursor-ring{width:46px;height:46px;border-radius:8px;border-color:var(--app-fg)}
#cursor[data-state="pluck"] .cursor-label{opacity:1;color:var(--app-fg);font-size:9px}
#cursor[data-state="pluck"] .cursor-ring{background:transparent}
#cursor[data-state="text"] .cursor-ring{width:10px;height:34px;border-radius:5px;background:var(--accent);border-color:var(--accent)}
#cursor[data-state="text"] .cursor-dot{opacity:0}
#cursor[data-state="hidden"]{opacity:0}
#cursor.is-down .cursor-ring{transform:translate(-50%,-50%) scale(.82)}
#cursor.is-sleep .cursor-ring{border-style:dashed;opacity:.5}
#cursor.is-sleep .cursor-label{opacity:1;color:var(--app-fg)}
.cursor-burst{
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--accent);transform:translate(-50%,-50%);
  animation:burst .55s var(--e-out) forwards;
}
@keyframes burst{to{width:90px;height:90px;opacity:0}}

/* ============ TOAST ============ */
#toast{
  position:fixed;bottom:28px;left:50%;z-index:380;
  transform:translate(-50%,calc(100% + 48px));
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  padding:12px 22px;border-radius:100px;
  transition:transform .55s var(--e-el);
  pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
#toast.show{transform:translate(-50%,0)}

/* ============ NAV ============ */
#nav{
  position:fixed;inset-inline:0;top:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  color:var(--app-fg);
  mix-blend-mode:normal;
  transform:translateY(-110%);
  transition:transform .9s var(--e-out) .1s;
}
body.ready #nav{transform:translateY(0)}
.nav-progress{
  position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--accent);transform-origin:left;transform:scaleX(0);
}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-mark{width:23px;height:16px;fill:var(--accent);transition:transform .5s var(--e-el)}
.nav-logo:hover .nav-mark{transform:translateX(4px) scaleX(1.08)}

/* the real wordmark — dark on paper, light once the site goes ink */
.nav-word{position:relative;display:block;height:15px}
.nav-word img{height:100%;width:auto;display:block;transition:opacity .35s}
.nav-word .nw-light{position:absolute;left:0;top:0;opacity:0}
body.dark .nav-word .nw-dark,body.menu-open .nav-word .nw-dark{opacity:0}
body.dark .nav-word .nw-light,body.menu-open .nav-word .nw-light{opacity:1}
.nav-status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft);color:color-mix(in srgb,var(--app-fg) 60%,transparent)}
.nav-right{display:flex;gap:10px}
.nav-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  border:1px solid color-mix(in srgb,var(--app-fg) 25%,transparent);
  border-radius:100px;padding:9px 16px;
  background:color-mix(in srgb,var(--app-bg) 65%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .3s,color .3s,border-color .3s;
}
.nav-btn:hover{background:var(--app-fg);color:var(--app-bg)}
.nav-menu-btn .mt-close{display:none}
body.menu-open .nav-menu-btn .mt-open{display:none}
body.menu-open .nav-menu-btn .mt-close{display:inline}
body.menu-open #nav{color:var(--paper)}

/* ============ MENU OVERLAY ============ */
#menu-overlay{
  position:fixed;inset:0;z-index:290;background:var(--ink);color:var(--paper);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-io);
  visibility:hidden;
}
body.menu-open #menu-overlay{clip-path:inset(0 0 0% 0);visibility:visible}
#menu-overlay.closing{visibility:visible}
.menu-inner{
  height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  padding:96px var(--gutter) 36px;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-list{list-style:none;margin-bottom:auto}
.menu-link{
  display:flex;align-items:baseline;gap:24px;
  font-size:clamp(28px,min(4.6vw,7.2vh),64px);font-weight:780;letter-spacing:-.03em;line-height:1.14;
  padding:.06em 0;
  opacity:0;transform:translateY(40px);
  border-bottom:1px solid rgba(242,239,230,.12);
}
body.menu-open .menu-link{
  opacity:1;transform:translateY(0);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  transition-delay:calc(.25s + var(--i,0)*.06s);
}
.ml-idx{font-family:var(--mono);font-size:.22em;font-weight:400;color:rgba(242,239,230,.5)}
.ml-word{transition:transform .45s var(--e-out),color .3s}
.ml-arrow{margin-left:auto;opacity:0;transform:translateX(-16px);transition:opacity .3s,transform .45s var(--e-out);color:var(--accent)}
.menu-link:hover .ml-word{font-family:var(--serif);font-style:italic;font-weight:400;transform:translateX(12px);color:var(--accent)}
.menu-link:hover .ml-arrow{opacity:1;transform:translateX(0)}
.menu-foot{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;padding-top:28px}
.menu-mail{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,32px);border-bottom:1px solid rgba(242,239,230,.4)}
.menu-meta{font-size:11px;letter-spacing:.08em;color:rgba(242,239,230,.55);line-height:1.8}

/* ============ INTRO ============ */
#intro{position:fixed;inset:0;z-index:350;display:none}
html.js #intro{display:block}
#intro.exit{pointer-events:none}
html.js #intro.done{display:none!important}
.intro-slats{position:absolute;inset:0;display:flex}
.slat{flex:1;background:var(--paper);border-right:1px solid var(--line-soft);transform:translateY(0)}
#intro.exit .slat{
  transition:transform .85s var(--e-io);
  transform:translateY(-101%);
}
#intro.exit .slat:nth-child(1){transition-delay:0s}
#intro.exit .slat:nth-child(2){transition-delay:.07s}
#intro.exit .slat:nth-child(3){transition-delay:.14s}
#intro.exit .slat:nth-child(4){transition-delay:.21s}
#intro.exit .slat:nth-child(5){transition-delay:.28s}
.intro-stage{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;
  transition:opacity .3s;
}
#intro.exit .intro-stage{opacity:0}
.intro-corners .ic{position:absolute;width:22px;height:22px;border:1.5px solid var(--ink);opacity:.5}
.ic.tl{left:24px;top:24px;border-right:0;border-bottom:0}
.ic.tr{right:24px;top:24px;border-left:0;border-bottom:0}
.ic.bl{left:24px;bottom:24px;border-right:0;border-top:0}
.ic.br{right:24px;bottom:24px;border-left:0;border-top:0}
#intro-logo{width:104px;height:74px;overflow:visible}
.mk{
  fill:var(--accent);opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.mk-1{transform:translate(-240px,160px) rotate(-12deg) scale(.7)}
.mk-2{transform:translate(240px,-160px) rotate(12deg) scale(.7)}
#intro.run .mk{
  transition:transform .95s var(--e-el),opacity .25s linear;
  transform:translate(0,0) rotate(0) scale(1);opacity:1;
}
#intro.run .mk-1{transition-delay:.2s}
#intro.run .mk-2{transition-delay:.38s}
#intro-word{width:min(58vw,460px)}
#intro-word img{
  width:100%;display:block;
  clip-path:inset(-5% 102% -5% 0);
}
#intro.run #intro-word img{
  clip-path:inset(-5% -2% -5% 0);
  transition:clip-path .95s var(--e-io) 1.2s;
}
.intro-tag{
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.2vw,26px);
  color:var(--ink-soft);opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--e-out) 2s,transform .8s var(--e-out) 2s;
}
#intro.run .intro-tag{opacity:1;transform:translateY(0)}
.intro-readout{
  position:absolute;bottom:30px;left:0;right:0;
  display:flex;justify-content:space-between;padding-inline:30px;
  font-size:11px;letter-spacing:.12em;color:var(--ink-soft);
}
#intro-counter{font-size:11px}
.intro-skip{position:absolute;top:30px;right:30px;font-size:10px;letter-spacing:.12em;color:var(--ink-soft)}

/* ============ SHARED SCENE PIECES ============ */
.scene{position:relative}
.scene-head{padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(36px,6vh,80px)}
.eyebrow{
  font-size:11px;letter-spacing:.14em;color:var(--ink-soft);
  color:color-mix(in srgb,var(--app-fg) 60%,transparent);
  margin-bottom:26px;
  display:inline-block;border-bottom:1px solid var(--line);padding-bottom:8px;
}
.h-xl{
  font-size:clamp(40px,6.4vw,108px);font-weight:820;letter-spacing:-.035em;line-height:1.0;
  font-stretch:108%;text-wrap:balance;
}
.h-xl em,.rl em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent)}
.accent-dot{color:var(--accent)}
.lede{max-width:560px;margin-top:30px;font-size:clamp(17px,1.5vw,21px);color:color-mix(in srgb,var(--app-fg) 78%,transparent)}
.lede em{font-family:var(--serif);font-style:italic}

/* reveal primitives */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
html.js [data-reveal].in{opacity:1;transform:translateY(0)}
html.js [data-reveal="mask"]{opacity:1;transform:none;transition:none}
html.js [data-reveal="mask"] .rl{
  display:inline-block;overflow:hidden;vertical-align:top;
  /* room for serif descenders — the g in "unforgettable" must survive the mask */
  padding-bottom:.16em;margin-bottom:-.16em;
}
html.js [data-reveal="mask"] .rl>*{display:inline-block}
html.js [data-reveal="mask"] .rl::after{content:none}
html.js [data-reveal="mask"] .rl{clip-path:inset(0 0 100% 0)}
html.js [data-reveal="mask"].in .rl{
  clip-path:inset(0 0 -10% 0);
  transition:clip-path 1s var(--e-io);
}
html.js [data-reveal="mask"].in .rl:nth-child(3){transition-delay:.12s}
html.reduced [data-reveal],html.reduced [data-reveal="mask"] .rl{transition-duration:.01s!important;clip-path:none!important;opacity:1!important;transform:none!important}

.pin-wrap{position:relative}
.pin-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ============ HERO ============ */
#hero{min-height:100vh;min-height:100svh;display:flex;align-items:stretch;overflow:hidden}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-frame{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  min-height:100vh;min-height:100svh;width:100%;
  padding-top:90px;padding-bottom:60px;
}
.hero-eyebrow{
  font-size:11px;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:clamp(20px,4vh,44px);
}
.hero-head{font-weight:850;line-height:.94;letter-spacing:-.035em}
.hero-line{display:block;overflow:hidden;padding-bottom:.04em}
.hl-inner{
  display:inline-block;
  font-size:clamp(46px,9.2vw,150px);
  font-stretch:112%;
  transform:translateY(112%);
}
.wd{display:inline-block;white-space:nowrap}
body.ready .hl-inner{transition:transform 1.1s var(--e-io);transform:translateY(0)}
body.ready .hero-line:nth-child(1) .hl-inner{transition-delay:.25s}
body.ready .hero-line:nth-child(2) .hl-inner{transition-delay:.38s}
body.ready .hero-line:nth-child(3) .hl-inner{transition-delay:.51s}
.hero-line.serif .hl-inner{
  font-family:var(--serif);font-weight:400;font-stretch:100%;letter-spacing:-.02em;
  font-size:clamp(50px,9.8vw,160px);
  color:var(--accent);
}
.hero-line.serif em{font-style:italic}
.warp .ch{display:inline-block;font-variation-settings:'wght' 850,'wdth' 112;will-change:font-variation-settings}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-top:clamp(28px,6vh,64px);flex-wrap:wrap;
  opacity:0;transform:translateY(20px);
}
body.ready .hero-foot{opacity:1;transform:none;transition:opacity 1s var(--e-out) .9s,transform 1s var(--e-out) .9s}
.hero-sub{max-width:380px;font-size:16px;color:var(--ink-soft)}
.hero-sub strong{color:var(--ink);font-weight:650}
.hero-meta{display:flex;flex-direction:column;gap:8px;font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);text-align:right}
.hero-scrollcue{
  position:absolute;bottom:34px;left:var(--gutter);
  display:flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:.18em;color:var(--ink-soft);
  opacity:0;
}
body.ready .hero-scrollcue{opacity:1;transition:opacity 1s linear 1.6s}
.sc-line{position:relative;width:54px;height:1px;background:var(--line);overflow:hidden}
.sc-line::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:scline 2.2s var(--e-io) infinite;
}
@keyframes scline{40%{transform:translateX(0)}100%{transform:translateX(102%)}}
.hero-index{
  position:absolute;right:var(--gutter);bottom:18px;
  font-size:clamp(80px,11vw,170px);font-weight:850;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line);
  pointer-events:none;user-select:none;
}

/* hero chips — sit above the canvas but BELOW the headline, so type always wins */
.hero-chip{
  position:absolute;z-index:1;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px -28px rgba(22,20,15,.35);
  padding:12px;
  opacity:0;transform:translateY(30px) rotate(var(--rot,0deg)) scale(.95);
}
body.ready .hero-chip{
  opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1);
  transition:opacity .9s var(--e-out),transform .9s var(--e-el);
}
body.ready .chip-a{transition-delay:1.15s}
body.ready .chip-b{transition-delay:1.3s}
body.ready .chip-c{transition-delay:1.45s}
.chip-a{right:max(7vw,60px);top:16vh;--rot:2.5deg}
.chip-a canvas{width:190px;height:130px;border-radius:8px;background:rgba(27,44,193,.05)}
.chip-b{right:max(17vw,200px);bottom:28vh;--rot:-4deg;padding:8px}
.chip-c{right:max(5vw,40px);bottom:9vh;--rot:1.5deg;max-width:210px}
.chip-cap{margin-top:8px;font-size:9px;letter-spacing:.12em;color:var(--ink-soft)}
.chip-feed{font-size:10px;line-height:1.7;color:var(--accent);min-height:52px;width:180px;white-space:pre-line}
.seal{width:118px;height:118px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html.reduced .seal{animation:none}
.seal-text{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;fill:var(--ink)}
.seal-star{font-size:30px;fill:var(--accent)}
@media (max-width:900px){.hero-chip{display:none}}

/* ============ TICKER ============ */
.ticker{
  border-block:1px solid var(--line);
  padding-block:16px;overflow:hidden;white-space:nowrap;
  background:color-mix(in srgb,var(--app-bg) 92%,var(--app-fg) 8%);
  background:transparent;
}
.ticker-track{
  display:inline-block;white-space:nowrap;
  font-weight:780;font-size:clamp(20px,2.6vw,34px);letter-spacing:.01em;
  font-stretch:115%;
  will-change:transform;
}
.ticker-track em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}

/* ============ THE FABRIC ============ */
#fabric-pin{height:300vh}
.fabric-stage{
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
}
#fabric-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.fabric-hud{position:absolute;inset:0;pointer-events:none;font-size:11px;letter-spacing:.1em}
.fabric-hud>div{position:absolute;line-height:2}
.hud-tl{left:var(--gutter);top:90px;color:var(--ink-soft)}
.hud-tl span{color:var(--ink)}
.hud-tr{right:var(--gutter);top:90px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:auto}
.fabric-mode{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  padding:8px 14px;border:1px solid var(--line);border-radius:100px;
  color:var(--ink-soft);background:color-mix(in srgb,var(--paper) 70%,transparent);
  transition:all .35s var(--e-out);
}
.fabric-mode:hover{border-color:var(--ink)}
.fabric-mode.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hud-bl{left:var(--gutter);bottom:34px;color:var(--ink-soft)}
.hud-br{right:var(--gutter);bottom:34px;color:var(--ink-faint)}
@media (max-width:700px){.hud-br{display:none}.hud-tr{top:auto;bottom:80px;flex-direction:row;left:var(--gutter);right:auto}}

/* ============ WORK / DECK ============ */
#deck-pin{height:560vh}
.deck-stage{display:flex;align-items:center;justify-content:center}
.deck-tint{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,var(--tint,transparent),transparent 70%);opacity:.5;transition:--tint .5s;pointer-events:none}
.deck-card{
  position:absolute;
  width:min(880px,86vw);
  will-change:transform;
  perspective:1200px;
  outline:none;
}
.dc-inner{
  background:var(--paper);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 40px 90px -40px rgba(22,20,15,.4);
  padding:clamp(14px,2vw,24px);
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2vw,28px);
  transform-style:preserve-3d;
  transition:box-shadow .4s;
}
.deck-card:hover .dc-inner{box-shadow:0 60px 110px -40px rgba(22,20,15,.5)}
.dc-art{position:relative;border-radius:10px;overflow:hidden;background:var(--art-bg,var(--ink));aspect-ratio:4/3.1}
.dc-imgwrap{position:absolute;inset:-7% 0;will-change:transform}
.dc-img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e-out);
}
.deck-card:hover .dc-img,.deck-card:focus-visible .dc-img{transform:scale(1.045)}
.dc-fig{
  position:absolute;left:12px;bottom:10px;font-size:9px;letter-spacing:.12em;
  color:#F2EFE6;background:rgba(22,20,15,.55);
  padding:4px 9px;border-radius:100px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.dc-meta{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-block:6px;transform:translateZ(36px)}
.dc-index{font-size:10px;letter-spacing:.14em;color:var(--ink-soft)}
.dc-name{font-size:clamp(30px,3.6vw,52px);font-weight:830;letter-spacing:-.025em;line-height:1;font-stretch:110%}
.dc-line{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);color:var(--ink-soft);opacity:0;transform:translateY(8px);transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.deck-card:hover .dc-line,.deck-card:focus-visible .dc-line{opacity:1;transform:none}
.dc-tags{font-size:9.5px;letter-spacing:.12em;color:var(--ink-faint)}
.deck-ui{
  position:absolute;left:var(--gutter);bottom:34px;
  display:flex;align-items:baseline;gap:26px;color:var(--ink-soft);
}
.deck-count{font-size:13px;letter-spacing:.1em}
#deck-counter{font-size:30px;font-weight:500;color:var(--ink)}
.deck-hint{font-size:10px;letter-spacing:.16em;color:var(--ink-faint)}
@media (max-width:760px){
  .dc-inner{grid-template-columns:1fr}
  .dc-art{aspect-ratio:16/10}
}

/* ============ SERVICES ============ */
#svc-pin{height:520vh}
.svc-stage{display:flex;align-items:center}
#svc-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.svc-rail{position:relative;z-index:2;width:100%;padding-inline:var(--gutter)}
.svc{
  position:absolute;inset-inline:var(--gutter);top:50%;transform:translateY(-50%);
  visibility:hidden;
}
.svc.is-on{visibility:visible}
.svc-word{
  font-size:clamp(64px,13.5vw,230px);
  font-weight:870;letter-spacing:-.03em;line-height:.92;
  font-stretch:115%;
  display:flex;flex-wrap:wrap;
}
.svc-word .ch{display:inline-block;opacity:0}
/* per-service entrance personalities */
.svc.is-on [data-fx="stamp"] .ch{animation:fxStamp .6s var(--e-out) forwards;animation-delay:calc(var(--i)*.05s)}
@keyframes fxStamp{0%{opacity:0;transform:scale(1.6);filter:blur(6px)}60%{opacity:1;transform:scale(.97);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.svc.is-on [data-fx="wire"] .ch{animation:fxWire .05s steps(1) forwards;animation-delay:calc(var(--i)*.07s)}
@keyframes fxWire{to{opacity:1}}
.svc.is-on [data-fx="decode"] .ch{animation:fxDecode .7s var(--e-out) forwards;animation-delay:calc(var(--i)*.06s)}
@keyframes fxDecode{0%{opacity:0;transform:translateY(.18em);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}
.svc.is-on [data-fx="flow"] .ch{animation:fxFlow .8s var(--e-out) forwards;animation-delay:calc(var(--i)*.045s)}
@keyframes fxFlow{0%{opacity:0;transform:translateX(.4em) skewX(-12deg)}100%{opacity:1;transform:none}}
.svc.is-on [data-fx="spring"] .ch{animation:fxSpring .9s var(--e-el) forwards;animation-delay:calc(var(--i)*.05s)}
@keyframes fxSpring{0%{opacity:0;transform:translateY(.8em) scaleY(1.4)}60%{opacity:1}100%{opacity:1;transform:none}}
.svc.is-out .ch{opacity:1;animation:fxOut .35s var(--e-io) forwards;animation-delay:calc(var(--i)*.02s)}
@keyframes fxOut{to{opacity:0;transform:translateY(-.35em)}}
.svc-sub{
  font-size:clamp(17px,1.9vw,26px);max-width:560px;margin-top:26px;
  color:color-mix(in srgb,var(--app-fg) 80%,transparent);
  opacity:0;transform:translateY(16px);
}
.svc-sub em{font-family:var(--serif);font-style:italic;color:var(--accent)}
.svc.is-on .svc-sub{opacity:1;transform:none;transition:opacity .7s var(--e-out) .45s,transform .7s var(--e-out) .45s}
.svc-tags{
  margin-top:18px;font-size:10px;letter-spacing:.15em;color:var(--ink-faint);
  opacity:0;
}
.svc.is-on .svc-tags{opacity:1;transition:opacity .7s linear .65s}
.svc-ui{
  position:absolute;right:var(--gutter);bottom:34px;
  font-size:12px;letter-spacing:.12em;color:var(--ink-soft);
}
#svc-counter{font-size:26px;color:var(--ink)}

/* ============ PLAYGROUND ============ */
#playground{padding-bottom:clamp(70px,10vh,140px)}
#board{
  position:relative;height:min(72vh,720px);min-height:420px;
  border:1.5px solid var(--ink);border-radius:20px;
  overflow:hidden;touch-action:none;
  background-image:
    radial-gradient(var(--line) 1px,transparent 1.5px);
  background-size:26px 26px;
  background-position:13px 13px;
}
#stamp-canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-shape{
  position:absolute;left:0;top:0;width:84px;height:84px;
  will-change:transform;touch-action:none;
  filter:drop-shadow(0 14px 18px rgba(22,20,15,.25));
}
.sh-circle{background:var(--accent);border-radius:50%}
.sh-square{background:var(--ink);border-radius:12px;width:76px;height:76px}
.sh-arch{background:var(--signal);border-radius:50px 50px 0 0;height:74px}
.sh-cross{
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 26% no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/26% 100% no-repeat;
  filter:drop-shadow(0 12px 14px rgba(22,20,15,.22));
}
.sh-pill{background:var(--accent);border-radius:100px;width:120px;height:54px}
.sh-tri{
  width:0;height:0;background:none;
  border-left:46px solid transparent;border-right:46px solid transparent;
  border-bottom:80px solid var(--signal);
}
.board-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:.16em;color:var(--ink-faint);
  pointer-events:none;text-align:center;transition:opacity .5s;
}
#board.touched .board-hint{opacity:0}
.board-fig{position:absolute;right:14px;bottom:12px;font-size:9px;letter-spacing:.12em;color:var(--ink-ghost);pointer-events:none}
.pg-tools{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:18px;flex-wrap:wrap;
}
.pg-toolset{display:flex;gap:10px;flex-wrap:wrap}
.pg-tool,.pg-action{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:100px;padding:10px 18px;
  transition:all .3s var(--e-out);color:var(--app-fg);
}
.pg-tool kbd{margin-left:6px;border-color:currentColor;opacity:.55;background:none}
.pg-tool:hover,.pg-action:hover{border-color:var(--app-fg)}
.pg-tool.is-active{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.pg-export{background:var(--app-fg);color:var(--app-bg);border-color:var(--app-fg)}
.pg-export:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* ============ LIVING SYSTEM ============ */
.sys-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);
  padding-bottom:clamp(70px,10vh,140px);
}
@media (max-width:900px){.sys-grid{grid-template-columns:1fr}}
.sys-block{
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.6vw,36px);
  background:color-mix(in srgb,var(--app-bg) 88%,var(--app-fg) 3%);
  background-color:transparent;
}
.sys-label{font-size:10px;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ts-row{
  display:flex;flex-direction:column;gap:6px;padding-block:16px;
  border-bottom:1px solid var(--line-soft);
}
.ts-row:last-child{border-bottom:0}
.ts-tag{font-size:9px;letter-spacing:.14em;color:var(--ink-faint)}
.ts-sample{font-size:clamp(26px,3vw,44px);line-height:1.1;letter-spacing:-.02em;transition:font-variation-settings .7s var(--e-out),letter-spacing .7s var(--e-out),color .4s}
.ts-1{font-weight:800;font-stretch:110%}
.ts-row:hover .ts-1{font-variation-settings:'wght' 200,'wdth' 125;color:var(--accent)}
.ts-2{font-family:var(--serif);font-weight:400}
.ts-row:hover .ts-2{letter-spacing:.06em;color:var(--accent)}
.ts-3{font-family:var(--mono);font-size:clamp(18px,2vw,26px)}
.ts-row:hover .ts-3{color:var(--accent)}
.swatches{display:flex;gap:10px;height:190px}
.swatch{
  flex:1;border-radius:12px;background:var(--sw);color:var(--swt);
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  padding:14px 12px;text-align:left;
  font-size:12px;font-weight:650;letter-spacing:.02em;
  transition:flex .6s var(--e-io),transform .3s var(--e-out);
}
.swatch .mono{font-size:9.5px;font-weight:400;opacity:.75}
.swatch:hover{flex:2.2}
.swatch:active{transform:scale(.985)}
.sys-note{margin-top:18px;font-size:9.5px;letter-spacing:.12em;color:var(--ink-faint);line-height:1.9}
.ease-lab{display:flex;flex-direction:column;gap:16px}
.ease-opts{display:flex;flex-wrap:wrap;gap:8px}
.ease-opt{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:100px;padding:7px 13px;
  color:var(--ink-soft);transition:all .3s;
}
.ease-opt:hover{border-color:var(--app-fg);color:var(--app-fg)}
.ease-opt.is-active{background:var(--app-fg);color:var(--app-bg);border-color:var(--app-fg)}
.ease-opt s{opacity:.6}
#ease-canvas{width:100%;height:180px;border:1px solid var(--line-soft);border-radius:10px}
.ease-track{position:relative;height:34px;border-block:1px dashed var(--line)}
#ease-ball{
  position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;
  background:var(--accent);transform:translate(0,-50%);
}
.ease-css{font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft)}
.ruler{display:flex;align-items:flex-end;gap:10px;height:170px;padding-block:10px}
.ruler-bar{
  flex:1;background:var(--accent);border-radius:6px 6px 0 0;
  height:calc(var(--u)*6% + 8%);position:relative;
  transform-origin:bottom;transform:scaleY(0);
  display:flex;justify-content:center;
}
.sys-block.in .ruler-bar{transform:scaleY(1);transition:transform .9s var(--e-el);transition-delay:calc(var(--u)*.045s)}
.ruler-bar span{position:absolute;top:-22px;font-size:9px;color:var(--ink-soft)}
.sys-space .pg-action{margin-top:16px}

/* ============ LAB ============ */
.lab-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);
  padding-bottom:clamp(70px,10vh,140px);
}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr}}
.exp{border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;background:transparent}
.exp-head,.exp-foot{
  display:flex;justify-content:space-between;gap:14px;
  padding:14px 18px;font-size:9.5px;letter-spacing:.13em;color:var(--ink-soft);
}
.exp-head{border-bottom:1px solid var(--line)}
.exp-foot{border-top:1px solid var(--line);color:var(--ink-faint)}
.exp-status{padding:2px 10px;border-radius:100px;font-size:8.5px;letter-spacing:.12em}
.st-live{background:var(--accent);color:var(--paper)}
.st-train{border:1px dashed var(--ink-soft)}
.st-class{background:var(--signal);color:var(--ink)}
.exp-body{flex:1;min-height:300px;position:relative;display:flex;align-items:center;justify-content:center;padding:24px}
.exp-glyph-zone{overflow:hidden}
#exp-glyph{
  font-size:clamp(150px,16vw,260px);font-weight:500;line-height:1;
  font-variation-settings:'wght' 500,'wdth' 100;
  user-select:none;
}
.exp-seed{flex-direction:column;gap:16px}
#exp-art{width:min(100%,320px);aspect-ratio:1;border-radius:12px;border:1px solid var(--line-soft)}
.exp-input-row{display:flex;gap:8px;width:min(100%,320px)}
#exp-input{
  flex:1;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:10px 16px;color:var(--app-fg);min-width:0;
}
#exp-input:focus{outline:none;border-color:var(--accent)}
#exp-generate{
  font-size:11px;letter-spacing:.08em;border:1px solid var(--app-fg);
  background:var(--app-fg);color:var(--app-bg);border-radius:100px;padding:10px 16px;
  transition:background .3s,border-color .3s;
}
#exp-generate:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.exp-body>#exp-bento{flex:1}
#exp-bento{
  display:grid;width:100%;height:240px;gap:8px;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);
}
.bt{border-radius:8px;background:var(--accent);transition:none}
.bt:nth-child(2n){background:var(--ink)}
.bt:nth-child(5),.bt:nth-child(7){background:var(--signal)}
#exp-shuffle{
  position:absolute;right:18px;bottom:18px;
  font-size:10px;letter-spacing:.1em;background:var(--paper);
  border:1px solid var(--ink);border-radius:100px;padding:9px 16px;
  transition:all .3s;
}
#exp-shuffle:hover{background:var(--ink);color:var(--paper)}
.exp-redacted{flex-direction:column;gap:14px}
.redact,.redact-line{color:var(--ink);letter-spacing:2px;opacity:.85;user-select:none}
.redact-line{font-size:18px;line-height:1.3;transition:opacity .2s}
.exp-classified:hover .redact-line{animation:flicker 1.2s steps(2) infinite}
@keyframes flicker{50%{opacity:.45}}
.exp-class-hint{margin-top:10px;font-size:9.5px;letter-spacing:.12em;color:var(--signal)}
.exp-classified.unlocked .redact-line{display:none}
.exp-classified .exp-secret{display:none;text-align:center}
.exp-classified.unlocked .exp-secret{display:block}

/* ============ MANIFESTO ============ */
#manifesto{padding-block:clamp(110px,16vh,200px)}
.manifesto-text{
  margin-top:40px;
  font-size:clamp(28px,4.4vw,68px);
  font-weight:740;letter-spacing:-.028em;line-height:1.18;
  max-width:1280px;font-stretch:105%;
}
.manifesto-text em{font-family:var(--serif);font-style:italic;font-weight:400}
.manifesto-text .mw{color:color-mix(in srgb,var(--app-fg) 14%,transparent);transition:color .5s var(--e-out)}
.manifesto-text .mw.lit{color:var(--app-fg)}
.manifesto-text em .mw.lit{color:var(--accent)}
.m-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:clamp(60px,10vh,120px);border-top:1px solid var(--line);padding-top:40px;
}
@media (max-width:800px){.m-stats{grid-template-columns:repeat(2,1fr)}}
.m-stat{display:flex;flex-direction:column;gap:8px}
.stat-num{font-size:clamp(40px,4.6vw,72px);font-weight:830;letter-spacing:-.03em;font-stretch:110%;font-variant-numeric:tabular-nums}
.stat-label{font-size:9.5px;letter-spacing:.15em;color:var(--ink-soft)}

/* ============ FINALE ============ */
#finale-pin{height:300vh}
.finale-stage{background:transparent}
#finale-canvas{position:absolute;inset:0;width:100%;height:100%}
.finale-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:0 var(--gutter) 11vh;
  pointer-events:none;
}
.finale-eyebrow{
  position:absolute;top:96px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:90vw;
  font-size:10px;letter-spacing:.2em;color:color-mix(in srgb,var(--app-fg) 50%,transparent);
  opacity:0;transition:opacity .8s;
}
.finale-head{
  font-size:clamp(38px,6vw,104px);font-weight:830;letter-spacing:-.03em;line-height:1.02;
  font-stretch:108%;
}
.finale-head em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.fh-l{display:inline-block;overflow:hidden;vertical-align:top;clip-path:inset(0 0 100% 0)}
.finale-stage.show .fh-l{clip-path:inset(0 0 -12% 0);transition:clip-path .9s var(--e-io)}
.finale-stage.show .fh-l:nth-of-type(2){transition-delay:.12s}
.finale-stage.show .finale-eyebrow{opacity:1}
.finale-cta{
  display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:44px;
  opacity:0;transform:translateY(24px);pointer-events:none;
}
.finale-stage.show-cta .finale-cta{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .8s var(--e-out) .2s,transform .8s var(--e-out) .2s;
}
.cta-btn{
  display:inline-block;border-radius:100px;
  background:var(--paper);color:var(--ink);
  font-weight:760;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.01em;
  padding:0;overflow:hidden;position:relative;
}
.cta-inner{
  display:flex;align-items:center;gap:14px;
  padding:clamp(20px,2.2vw,30px) clamp(36px,3.4vw,56px);
  position:relative;z-index:1;transition:color .35s;
}
.cta-btn::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  border-radius:100px;transform:scale(0);transform-origin:center;
  transition:transform .5s var(--e-io);
}
.cta-btn:hover::after{transform:scale(1.02)}
.cta-btn:hover .cta-inner{color:var(--ink)}
.cta-arrow{display:inline-block;transition:transform .4s var(--e-el)}
.cta-btn:hover .cta-arrow{transform:translateX(8px)}
.cta-mail{font-size:11px;letter-spacing:.14em;color:color-mix(in srgb,var(--app-fg) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--app-fg) 30%,transparent);padding-bottom:3px}
.cta-mail:hover{color:var(--app-fg)}

/* ============ FOOTER ============ */
#footer{padding-top:clamp(60px,9vh,120px);overflow:hidden}
.foot-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding-bottom:60px;font-size:14.5px;line-height:1.8;
  color:color-mix(in srgb,var(--app-fg) 85%,transparent);
}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
.foot-h{font-size:9.5px;letter-spacing:.16em;color:color-mix(in srgb,var(--app-fg) 50%,transparent);margin-bottom:14px}
.foot-col a{border-bottom:1px solid color-mix(in srgb,var(--app-fg) 25%,transparent);transition:color .3s,border-color .3s}
.foot-col a:hover{color:var(--accent);border-color:var(--accent)}
.foot-small{font-size:12.5px;line-height:1.75}
.foot-meta{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.12em;
  color:color-mix(in srgb,var(--app-fg) 50%,transparent);
  border-top:1px solid color-mix(in srgb,var(--app-fg) 15%,transparent);
  padding-block:22px;
}
.foot-word{
  padding:10px var(--gutter) clamp(26px,4vh,48px);
  user-select:none;
}
.fw-img{
  width:100%;display:block;
  transition:transform .7s var(--e-out);
}
.foot-word:hover .fw-img{transform:translateY(-6px) scale(1.005)}

/* ============ PROJECT OVERLAY ============ */
#project-overlay{
  position:fixed;inset:0;z-index:320;
  visibility:hidden;
}
#project-overlay.open{visibility:visible}
.po-frame{
  position:absolute;inset:0;
  background:var(--po-bg,#0E2A23);color:var(--po-fg,#F2EFE6);
  clip-path:inset(50% 50% 50% 50% round 18px);
  transition:clip-path .75s var(--e-io);
  display:flex;flex-direction:column;
  overflow:hidden;
}
#project-overlay.open .po-frame{clip-path:inset(0 0 0 0 round 0px)}
#po-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.po-top{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--gutter);font-size:10.5px;letter-spacing:.14em;
  border-bottom:1px solid color-mix(in srgb,var(--po-fg,#fff) 18%,transparent);
}
.po-top-right{display:flex;align-items:center;gap:10px}
#po-site{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  border:1px solid color-mix(in srgb,currentColor 40%,transparent);
  border-radius:100px;padding:8px 16px;transition:all .3s;
  background:var(--po-ac,transparent);border-color:var(--po-ac,currentColor);
  color:var(--po-bg,inherit);font-weight:500;
}
#po-site:hover{background:var(--po-fg);border-color:var(--po-fg);color:var(--po-bg)}
#po-close,#sm-close{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:inherit;
  border:1px solid color-mix(in srgb,currentColor 40%,transparent);
  border-radius:100px;padding:8px 16px;transition:all .3s;
}
#po-close:hover,#sm-close:hover{background:var(--po-fg,var(--ink));color:var(--po-bg,var(--paper))}
#shortcuts-modal #sm-close:hover{background:var(--ink);color:var(--paper)}
.po-scroll{position:relative;z-index:2;flex:1;overflow-y:auto;padding:0 var(--gutter) 80px;overscroll-behavior:contain}
.po-hero{min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px}
.po-logo-wrap{height:clamp(64px,9vw,108px);margin-bottom:30px}
#po-logo{
  height:100%;width:auto;max-width:min(70vw,420px);object-fit:contain;
  border-radius:12px;
  clip-path:inset(0 100% 0 0);
}
.po-frame.is-ready #po-logo{
  clip-path:inset(0 -2% 0 0);
  transition:clip-path 1s var(--e-io) .35s;
  animation:logofloat 5.5s ease-in-out 1.4s infinite;
}
@keyframes logofloat{50%{transform:translateY(-7px) rotate(-.6deg)}}
html.reduced .po-frame.is-ready #po-logo{animation:none}
#po-name{
  font-size:clamp(56px,11vw,200px);font-weight:870;letter-spacing:-.035em;line-height:.95;
  font-stretch:112%;
}
.po-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,36px);margin-top:18px;color:var(--po-ac,#7BD3B2)}
.po-meta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  border-block:1px solid color-mix(in srgb,var(--po-fg,#fff) 18%,transparent);
  padding-block:26px;margin-bottom:50px;
}
.po-k{font-size:9.5px;letter-spacing:.15em;opacity:.55;margin-bottom:8px}
.po-body{max-width:680px;display:flex;flex-direction:column;gap:22px;font-size:clamp(16px,1.4vw,19px);line-height:1.7}

/* case media — mockups, posters, films */
.po-media{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px);
  align-items:start;margin-top:70px;
}
.pm-item{
  margin:0;
  opacity:0;transform:translateY(40px) scale(.985);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
}
.pm-item.pm-in{opacity:1;transform:none}
.pm-wide{grid-column:1/-1}
.pm-item img,.pm-item video{
  width:100%;display:block;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--po-fg,#fff) 14%,transparent);
}
.pm-item figcaption{
  margin-top:10px;font-size:9px;letter-spacing:.14em;opacity:.55;
}
@media (max-width:700px){
  .po-media{grid-template-columns:1fr}
  .po-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  #po-site{display:none}
}
.po-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:60px;border-top:1px solid color-mix(in srgb,var(--po-fg,#fff) 18%,transparent);
  padding-top:34px;
}
@media (max-width:700px){.po-stats{grid-template-columns:1fr}}
.po-stat b{display:block;font-size:clamp(30px,3.4vw,52px);font-weight:830;letter-spacing:-.02em;font-stretch:110%;color:var(--po-ac,inherit)}
.po-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;opacity:.6}
.po-next{
  margin-top:80px;width:100%;text-align:left;color:inherit;
  border-top:1px solid color-mix(in srgb,var(--po-fg,#fff) 18%,transparent);
  padding-top:30px;display:flex;flex-direction:column;gap:10px;
  transition:opacity .3s;
}
.po-next .mono{font-size:10px;letter-spacing:.16em;opacity:.55}
#po-next-name{font-size:clamp(34px,5vw,72px);font-weight:830;letter-spacing:-.03em;font-stretch:110%;transition:transform .5s var(--e-out),color .3s}
.po-next:hover #po-next-name{transform:translateX(16px);color:var(--po-ac,inherit)}

/* ============ SHORTCUTS MODAL ============ */
#shortcuts-modal{
  position:fixed;inset:0;z-index:330;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,20,15,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
#shortcuts-modal.open{opacity:1;visibility:visible}
.sm-frame{
  width:min(560px,92vw);background:var(--paper);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;
  transform:translateY(26px) scale(.97);transition:transform .5s var(--e-out);
}
#shortcuts-modal.open .sm-frame{transform:none}
.sm-frame .po-top{border-color:var(--line);color:var(--ink-soft)}
.sm-list{list-style:none;padding:10px 26px}
.sm-list li{
  display:flex;align-items:center;gap:20px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-size:11.5px;letter-spacing:.06em;
}
.sm-list li:last-child{border-bottom:0}
.sm-list kbd{min-width:38px;text-align:center}
.sm-list span{color:var(--ink-soft)}
.sm-note{padding:0 26px 24px;font-size:9.5px;letter-spacing:.12em;color:var(--signal)}

/* ============ EASTER EGG: DISCO (regrettably temporary) ============ */
@keyframes discoHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
body.disco main,body.disco #footer,body.disco .dark-end{animation:discoHue .84s linear 5}
html.reduced body.disco main,html.reduced body.disco #footer,html.reduced body.disco .dark-end{animation:none}

/* ============ EASTER EGG: BARREL ROLL ============ */
@keyframes roll{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.rolling #main,body.rolling #footer{animation:roll 1.2s var(--e-io)}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:560px){
  #sound-toggle{display:none}
  .nav-logo .nav-word{font-size:13px}
  #nav{padding:14px var(--gutter)}
}
@media (max-width:700px){
  .nav-status{display:none}
  .hero-meta{text-align:left}
  .hero-index{display:none}
  .deck-ui{bottom:18px}
  .swatches{height:150px}
}

/* ============ MOBILE: shorter pins, scroll cue, fitting service words ============ */
#pin-cue{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:185;
  display:flex;align-items:center;gap:10px;
  padding:8px 15px;border-radius:100px;
  background:color-mix(in srgb,var(--app-bg) 78%,transparent);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:color-mix(in srgb,var(--app-fg) 62%,transparent);
  opacity:0;transform:translateX(-50%) translateY(16px);pointer-events:none;
  transition:opacity .35s var(--e-out),transform .35s var(--e-out);
}
#pin-cue.show{opacity:1;transform:translateX(-50%) translateY(0)}
#pin-cue .cue-track{position:relative;width:46px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
#pin-cue .cue-track i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
#pin-cue .cue-chev{display:inline-block;animation:cueBob 1.4s var(--e-io) infinite}
@keyframes cueBob{50%{transform:translateY(3px);opacity:.5}}
html.reduced #pin-cue .cue-chev{animation:none}

@media (max-width:760px){
  #fabric-pin{height:200vh}
  #deck-pin{height:360vh}
  #svc-pin{height:360vh}
  #finale-pin{height:200vh}
  .svc-word{font-size:clamp(40px,12.5vw,84px);font-stretch:100%}
}