/* =========================================================
   NARAMU / THE PRINT ROOM
   Ink, paper and one signal colour. Archivo (variable width)
   for display, IBM Plex Mono for every label, Dela Gothic One
   for Japanese. Photos are never tinted or filtered.
   ========================================================= */
:root{
  --ink:#0d0e0f; --ink-2:#161819; --ink-3:#202325;
  --paper:#ebe8e1; --paper-2:#dedad1;
  --chalk:#ecebe6; --mute:#8b8f92; --mute-p:#625f59;
  --line:rgba(236,235,230,.14); --line-p:rgba(13,14,15,.16);
  --signal:#f04a2a;
  /* the signal red passes AA on ink but not as small text on paper; this darker red does (4.9:1) */
  --signal-p:#b8300f;

  --display:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --jp:"Dela Gothic One",var(--display);

  --pad:clamp(16px,2.4vw,36px);
  --nav-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --foot-h:100svh;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;color:var(--chalk);font:400 16px/1.45 var(--display);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0;padding:0}
button{cursor:pointer}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:var(--ink)}
.mono{font:500 11px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.skip{position:fixed;left:var(--pad);top:-80px;z-index:300;background:var(--chalk);color:var(--ink);padding:12px 16px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ln{display:block}
.lb{fill:currentColor} .li{fill:var(--ink)}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor *{cursor:none!important}
.c-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 1px rgba(13,14,15,.6)}
.c-ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(236,235,230,.5);display:grid;place-items:center;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background-color .35s,border-color .35s}
.c-label{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ease)}
.cursor.is-link .c-ring{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--chalk)}
.cursor.is-drag .c-ring,.cursor.is-view .c-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--chalk);border-color:var(--chalk)}
.cursor.is-view .c-ring{background:var(--signal);border-color:var(--signal)}
.cursor.is-drag .c-label,.cursor.is-view .c-label{opacity:1;transform:none}
.cursor.is-drag .c-dot,.cursor.is-view .c-dot{opacity:0}
.cursor.is-down .c-ring{transform:scale(.86)}
.cursor.is-hidden{opacity:0}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:150;background:var(--ink);display:grid;place-items:center}
.no-loader .loader{display:none}
.ld-top{position:absolute;top:var(--pad);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;color:var(--mute)}
.ld-status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--signal);animation:blink 1s steps(2) infinite;vertical-align:1px}
@keyframes blink{50%{opacity:0}}
.ld-logo{position:absolute;top:calc(var(--pad) + 44px);left:50%;transform:translateX(-50%);overflow:hidden;color:var(--chalk)}
.ld-logo-in svg{display:block;height:clamp(18px,2.2vw,28px);width:auto}
.ld-stage{position:relative;height:var(--frame-h,46vh);aspect-ratio:686/965}
.ld-frame{position:absolute;inset:0;overflow:hidden;background:var(--ink-2)}
.ld-img{width:100%;height:100%;object-fit:cover}
.crop{position:absolute;background:var(--mute);transform-origin:center}
.crop[class*="-h"]{height:1px;width:26px}
.crop[class*="-v"]{width:1px;height:26px}
.tl-h{top:0;right:calc(100% + 10px)} .tl-v{bottom:calc(100% + 10px);left:0}
.tr-h{top:0;left:calc(100% + 10px)} .tr-v{bottom:calc(100% + 10px);right:0}
.bl-h{bottom:0;right:calc(100% + 10px)} .bl-v{top:calc(100% + 10px);left:0}
.br-h{bottom:0;left:calc(100% + 10px)} .br-v{top:calc(100% + 10px);right:0}
.reg{position:absolute;width:20px;height:20px;fill:none;stroke:var(--mute);stroke-width:1}
.reg-t{bottom:calc(100% + 18px);left:50%;margin-left:-10px}
.reg-b{top:calc(100% + 18px);left:50%;margin-left:-10px;opacity:0}
.reg-l{right:calc(100% + 18px);top:50%;margin-top:-10px}
.reg-r{left:calc(100% + 18px);top:50%;margin-top:-10px}
.loader .dim{position:absolute;top:calc(100% + 22px);left:0;right:0;display:flex;align-items:center;gap:10px;color:var(--mute);white-space:nowrap}
.loader .dim i{flex:1;height:1px;background:var(--mute);position:relative}
.loader .dim i::before{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--mute)}
.loader .dim i:first-child::before{left:0} .loader .dim i:last-child::before{right:0}
.ld-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between;align-items:flex-end}
.ld-cmyk{display:flex;gap:14px;color:var(--mute)}
.ld-cmyk span{display:flex;align-items:center;gap:6px}
.ld-cmyk i{width:10px;height:10px;background:var(--c);transform:scale(0);transition:transform .5s var(--ease)}
.ld-cmyk span.on i{transform:none}
.ld-count{display:flex;align-items:flex-start;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 62;line-height:.8;letter-spacing:-.02em}
.ld-num{font-size:clamp(90px,15vw,240px);font-variant-numeric:tabular-nums}
.ld-pct{font-size:clamp(24px,3vw,44px);margin-top:.2em;color:var(--signal)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);color:var(--chalk);pointer-events:none;transition:color .4s}
.nav > *{pointer-events:auto}
.nav.on-paper,.nav.on-signal{color:var(--ink)}
.nav.on-signal .nav-links{background:rgba(13,14,15,.12);border-color:rgba(13,14,15,.25)}
.nav.on-signal .nav-links a.on{background:var(--ink);color:var(--signal)}
.nav.on-signal .nav-bag b{color:var(--ink)}
.nav-logo svg{height:17px;width:auto;display:block}
.nav-logo{justify-self:start;padding:12px 0}
.nav-links{display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(13,14,15,.82);border:1px solid var(--line)}
.nav.on-paper .nav-links{background:rgba(235,232,225,.9);border-color:var(--line-p)}
.nav-links a{padding:9px 14px;border-radius:99px;transition:background-color .3s,color .3s}
.nav-links a.on{background:var(--chalk);color:var(--ink)}
.nav.on-paper .nav-links a.on{background:var(--ink);color:var(--paper)}
.nav-right{justify-self:end;display:flex;gap:22px;align-items:center}
.nav-clock b{font-weight:500}
.nav-bag{padding:12px 0}
.nav-bag b{color:var(--signal);font-weight:500}

/* ---------- hero wall ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.wall{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.wall-rail,.wall-down{display:none}
/* any touch screen, including touch laptops and tablets with a trackpad attached */
@media (any-pointer:coarse){
  .hero.explore .wall{touch-action:none}
  /* the next section peeks in below the wall: somewhere to swipe down from */
  .hero{height:86svh;min-height:480px}
  .wall-rail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:absolute;right:0;top:var(--nav-h);bottom:0;z-index:4;width:34px;touch-action:pan-y;background:linear-gradient(90deg,rgba(13,14,15,0),rgba(13,14,15,.7));color:var(--chalk)}
  .wall-rail span{writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;opacity:.8}
  .wall-rail i{width:1px;height:48px;background:linear-gradient(var(--chalk),transparent);opacity:.7}
  .wall-down{display:inline-flex;align-items:center;gap:8px;position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:4;min-height:44px;padding:0 18px;border-radius:99px;background:rgba(13,14,15,.82);border:1px solid var(--line);color:var(--chalk)}
  .hero .hud{padding-bottom:78px;padding-right:calc(var(--pad) + 30px)}
}
.hero-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,14,15,.72) 0,rgba(13,14,15,0) 18%,rgba(13,14,15,0) 62%,rgba(13,14,15,.9) 100%)}
/* four corners and a red dot; on a click they travel to the print and close around it (app.js aimAt) */
.reticle{--x:0px;--y:0px;--w:32px;--h:32px;position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));width:0;height:0;pointer-events:none}
.reticle i{position:absolute;width:14px;height:14px;border:0 solid var(--chalk);opacity:.9;filter:drop-shadow(0 0 1px rgba(13,14,15,.7))}
.reticle i:nth-child(1){left:calc(-1 * var(--w));top:calc(-1 * var(--h));border-width:1.5px 0 0 1.5px}
.reticle i:nth-child(2){left:calc(var(--w) - 14px);top:calc(-1 * var(--h));border-width:1.5px 1.5px 0 0}
.reticle i:nth-child(3){left:calc(-1 * var(--w));top:calc(var(--h) - 14px);border-width:0 0 1.5px 1.5px}
.reticle i:nth-child(4){left:calc(var(--w) - 14px);top:calc(var(--h) - 14px);border-width:0 1.5px 1.5px 0}
.reticle b{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1px rgba(13,14,15,.6)}
.hud{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;padding:calc(var(--nav-h) + 12px) var(--pad) var(--pad)}
.hud-title{grid-column:1 / -1;grid-row:1;align-self:start;margin-top:3vh}
.hud-title h1{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(46px,7.6vw,138px);line-height:.8;letter-spacing:-.02em;text-shadow:0 2px 28px rgba(13,14,15,.85),0 0 2px rgba(13,14,15,.5)}
.hud-title .ln{overflow:hidden;padding-bottom:.04em}
.hud-title .ln:nth-child(2){padding-left:9vw}
.hud-title .ln:nth-child(2) .ln-in{color:var(--signal)}
.hud-label{grid-column:1;grid-row:2;align-self:end;max-width:min(60vw,640px)}
.hud-idx{color:var(--mute);display:flex;gap:14px}
.hud-world{color:var(--chalk)}
.hud-name{font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:clamp(34px,4.6vw,76px);line-height:.86;letter-spacing:-.015em;margin:10px 0 12px;min-height:.86em}
.hud-price{display:flex;gap:18px;color:var(--mute)}
.hud-jp{font:400 13px/1 var(--jp);letter-spacing:.04em;text-transform:none;color:var(--chalk)}
.hud-meta{grid-column:2;grid-row:2;align-self:end;text-align:right;color:var(--mute);display:grid;gap:6px}
.hud-meta b{color:var(--chalk);font-weight:500}
.hud-scroll{color:var(--chalk)}
.hud-scroll span{display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.pre .nav,.pre .hud > *,.pre .reticle{opacity:0}

/* ---------- shared section bits ---------- */
.sec-label{color:var(--mute);margin-bottom:28px}
.big-title{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(84px,17vw,300px);line-height:.78;letter-spacing:-.025em;display:flex;align-items:flex-start;flex-wrap:wrap}
.big-title sup{font-size:clamp(12px,1vw,14px);margin:.6em 0 0 .6em;color:var(--signal)}
.big-title .ln{overflow:hidden;padding-bottom:.02em}
.split-line{overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}

/* ---------- paper sheets ---------- */
.sheet{position:absolute;inset:0;z-index:0;background:var(--paper);border-radius:0;transform-origin:50% 0;will-change:transform;overflow:hidden}
.manifesto > :not(.sheet){position:relative;z-index:1}

/* ---------- the house: a proof sheet (paper) ---------- */
.manifesto{position:relative;background:transparent;color:var(--ink);padding:clamp(100px,16vh,180px) var(--pad) clamp(80px,12vh,140px)}
.manifesto .sec-label{color:var(--mute-p)}
.mf-head{display:flex;justify-content:space-between;gap:20px;color:var(--mute-p);margin-bottom:clamp(40px,7vh,80px)}
.mf-body{position:relative;padding-left:clamp(0px,6vw,110px)}
.mf-l{position:relative;font-weight:850;font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:-.02em}
.mf-l.s1{font-size:clamp(30px,4.6vw,86px);line-height:1.28;max-width:16em}
.mf-l.s2{font-size:clamp(50px,10.4vw,196px);line-height:1.12;margin-bottom:.12em}
.mf-l.in{text-indent:clamp(0px,14vw,280px)}
.mf-l.in2{margin-left:clamp(0px,30vw,560px);font-size:clamp(28px,3.4vw,62px);max-width:18em}
/* proof marks in the margin, written in as each line is set */
.mf-l::before{content:attr(data-mark);position:absolute;left:calc(clamp(0px,6vw,110px) * -1);top:.35em;width:clamp(0px,5vw,90px);text-indent:0;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--signal);opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s var(--ease)}
.mf-l.set::before{opacity:1;transform:none}
.mf-l .w{display:inline-block;white-space:nowrap;text-indent:0}
.mf-l .c{opacity:.1;transition:opacity .25s,color .35s}
.mf-l .c.on{opacity:1}
.mf-l .c.hot{color:var(--signal)}
.mf-l em{font-style:normal;color:var(--signal)}
.mf-l ruby{ruby-position:over;ruby-align:center}
.mf-l rt{font:400 .22em/1 var(--jp);letter-spacing:.12em;color:var(--signal);text-transform:none;text-indent:0;padding-bottom:.14em}
.mf-l rt span{display:inline-block;opacity:0}
/* the numbers, each with its kanji brushed over it */
.mf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,56px);margin:clamp(40px,8vh,90px) 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line-p);padding:clamp(18px,3vh,30px) 0}
/* the number and its kanji sit side by side, never on top of each other */
.st{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px clamp(8px,1vw,16px)}
.st .n{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(84px,13vw,250px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.st .k{font:400 clamp(34px,5.4vw,104px)/1 var(--jp);font-style:normal;color:var(--signal);clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .35s}
.st.on .k{clip-path:inset(0 0 0 0)}
.st .mono{grid-column:1 / -1}
.st .mono{color:var(--mute-p)}
.st small{font:400 12px/1 var(--jp);margin-left:8px;color:var(--ink)}
/* 校了: proof approved */
.kouryou{display:inline-grid;place-items:center;width:1.5em;height:2.6em;margin-left:.2em;vertical-align:.05em;border:.06em solid var(--signal);border-radius:.08em;color:var(--signal);font:400 .36em/1.05 var(--jp);writing-mode:vertical-rl;text-indent:0;opacity:0}
.mf-proof{color:var(--signal);opacity:0;transition:opacity .6s}
.mf-proof.on{opacity:1}
.mf-proof b{font:400 13px/1 var(--jp);margin-left:6px}
.mf-foot{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:clamp(56px,9vh,100px);padding-top:20px;border-top:1px solid var(--line-p);color:var(--mute-p)}

/* ---------- index ---------- */
.index{position:relative;background:var(--ink);padding:clamp(100px,16vh,180px) var(--pad) clamp(80px,12vh,140px)}
.ix-head{display:grid;grid-template-columns:1fr minmax(240px,28%);align-items:end;gap:24px}
.ix-head .sec-label{grid-column:1 / -1}
.ix-lede,.cs-lede{font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--mute);max-width:30ch}
.ix-bar{position:sticky;top:calc(var(--nav-h) + 6px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:clamp(40px,7vh,72px) 0 28px;padding:10px 0;background:linear-gradient(var(--ink) 70%,rgba(13,14,15,0))}
.ix-kinds,.ix-worlds,.ix-zoom{display:flex;flex-wrap:wrap;gap:6px}
.ix-zoom{margin-left:auto;align-items:center;gap:12px;color:var(--mute)}
.chip{padding:9px 13px;border:1px solid var(--line);border-radius:99px;color:var(--mute);transition:color .25s,border-color .25s,background-color .25s}
.chip sup{font-size:9px;margin-left:3px}
.chip:hover{color:var(--chalk);border-color:var(--chalk)}
.chip.on{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.zbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font:400 18px/1 var(--mono);color:var(--chalk);display:grid;place-items:center;transition:border-color .25s}
.zbtn:hover{border-color:var(--chalk)}
.zbtn:disabled{opacity:.3;cursor:default}
.ix-grid{--cols:6;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(12px,1.4vw,22px)}
.card{display:block;width:100%;text-align:left;color:inherit;content-visibility:auto;contain-intrinsic-size:auto 360px}
.card.gone{display:none}
.card-img{display:block;position:relative;aspect-ratio:686/965;overflow:hidden;background:var(--ink-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-meta{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding-top:12px}
.card-meta .n{color:var(--mute)}
.card-name{font-weight:700;font-variation-settings:"wdth" 80;text-transform:uppercase;font-size:clamp(13px,1vw,16px);line-height:1.1;letter-spacing:.005em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease);justify-self:start}
.card:hover .card-name{background-size:100% 1px}
.card-meta .p{color:var(--mute)}
.card-world{display:block;color:var(--mute);margin-top:4px;grid-column:2 / -1}
.ix-grid[data-cols="6"] .card-world,.ix-grid[data-cols="5"] .card-world{display:none}
.ln-in{display:block}
.ix-empty{padding:60px 0;color:var(--mute)}

/* iPhone or Android: one choice, two halves of a switch */
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:14px;gap:4px}
.seg button{display:grid;gap:4px;justify-items:start;padding:12px 14px;border-radius:10px;text-align:left;color:var(--mute);transition:background-color .3s,color .3s}
.seg button b{font:800 18px/1 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:0;color:var(--chalk)}
.seg button span{font-size:10px}
.seg button:hover b{color:var(--signal)}
.seg button[aria-checked="true"]{background:var(--chalk);color:var(--ink)}
.seg button[aria-checked="true"] b{color:var(--ink)}

/* ---------- cases: the deck ---------- *//* ---------- cases: the deck ---------- *//* ---------- cases: the deck ---------- */
.cases{position:relative;background:var(--ink);padding:clamp(100px,16vh,180px) 0 clamp(40px,8vh,100px);overflow:hidden}
.cs-head{padding:0 var(--pad);display:grid;grid-template-columns:1fr minmax(260px,30%);align-items:end;gap:24px}
.cs-head .sec-label{grid-column:1 / -1}
.cs-side{display:grid;gap:22px}
.cs-filter{display:grid;gap:12px}
.cs-plat{display:flex;gap:6px}
.cs-model{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0;color:var(--mute)}
.cs-model select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--chalk);font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-align:right;padding:8px 18px 8px 0;background-image:linear-gradient(45deg,transparent 50%,var(--chalk) 50%),linear-gradient(135deg,var(--chalk) 50%,transparent 50%);background-position:calc(100% - 7px) 50%,calc(100% - 2px) 50%;background-size:5px 5px;background-repeat:no-repeat;max-width:60%}
.cs-model select option{background:var(--ink);color:var(--chalk)}
.deck-stage{--cw:clamp(220px,24vw,340px);--ch:calc(var(--cw) * 1.5);position:relative;height:calc(var(--ch) + 260px);margin-top:clamp(20px,4vh,40px);touch-action:pan-y}
.deck{position:absolute;left:0;right:0;top:40px;height:var(--ch);perspective:1700px;perspective-origin:50% 45%;cursor:grab}
.deck-inner{position:absolute;inset:0;transform-style:preserve-3d}
.dcard{position:absolute;left:50%;top:0;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);border-radius:18px;overflow:hidden;background:var(--ink-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dcard img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.deck-ghost{position:absolute;left:0;right:0;top:calc(40px + var(--ch) * .28);text-align:center;white-space:nowrap;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(90px,19vw,340px);line-height:.8;letter-spacing:-.03em;color:var(--ink-3);pointer-events:none;will-change:transform}
.speed{position:absolute;left:50%;top:calc(40px + var(--ch) / 2);width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;pointer-events:none;opacity:0;will-change:transform,opacity}
.speed polygon{fill:rgba(236,235,230,.55)}
.deck-sfx{position:absolute;left:calc(50% + var(--cw) * .38);top:calc(40px + var(--ch) * .06);z-index:3;font:400 clamp(44px,5vw,84px)/1 var(--jp);color:var(--signal);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;pointer-events:none;opacity:0}
.deck-info{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:8px;text-align:center;padding:0 var(--pad)}
.deck-idx,.deck-meta{color:var(--mute)}
.deck-name{font-weight:850;font-variation-settings:"wdth" 66;text-transform:uppercase;font-size:clamp(28px,3vw,48px);line-height:.9}
.deck-actions{display:flex;gap:10px;align-items:center;margin-top:10px}
.round{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;transition:border-color .25s,opacity .25s}
.round:hover{border-color:var(--chalk)}
.round:disabled{opacity:.25;cursor:default}
.deck-open{height:52px;padding:0 26px;border-radius:99px;background:var(--chalk);color:var(--ink);font-size:12px}

/* ---------- footer (revealed from underneath) ---------- */
main{position:relative;z-index:2;background:var(--ink);margin-bottom:var(--foot-h)}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:1;min-height:var(--foot-h);background:var(--signal);color:var(--ink);display:flex}
.foot-in{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:calc(var(--nav-h) + 20px) var(--pad) var(--pad)}
.foot .sec-label{color:var(--ink)}
.foot-top{display:grid;grid-template-columns:1fr minmax(280px,34%);gap:28px;align-items:end}
.foot-title{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(48px,7.4vw,130px);line-height:.8;letter-spacing:-.02em}
.news{display:grid;gap:12px}
.news-row{display:flex;border-bottom:2px solid var(--ink)}
.news input{flex:1;min-width:0;padding:14px 0;font:500 18px/1 var(--display);color:var(--ink);outline:none}
.news input::placeholder{color:rgba(13,14,15,.45)}
.news button{padding:0 4px 0 16px;font-size:12px}
.news-msg{min-height:1.3em}
.ticker{overflow:hidden;border-top:1px solid rgba(13,14,15,.3);border-bottom:1px solid rgba(13,14,15,.3);padding:12px 0}
.ticker-track{display:flex;width:max-content;gap:28px;white-space:nowrap;animation:tick 38s linear infinite}
.ticker-track i{font-style:normal;opacity:.55}
@keyframes tick{to{transform:translateX(-50%)}}
.foot-logo{display:block;min-width:0;width:100%;color:var(--ink);overflow:hidden}
.foot-logo svg{width:100%;height:auto;display:block}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px}
.foot-links{display:flex;gap:18px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}


/* ---------- viewer/* ---------- viewer: the print at its true shape, details beside it ---------- */
.viewer{position:fixed;inset:0;z-index:120}
.viewer[hidden]{display:none}
.v-bg{position:absolute;inset:0;background:var(--ink)}
.v-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.v-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,1fr);align-items:start;min-height:100%}
.v-gallery{display:grid;gap:10px;padding:10px 0 10px 10px}
.v-print{position:relative;aspect-ratio:1/1.08;display:grid;place-items:center;background:var(--paper)}
.v-print img{height:84%;width:auto;max-width:78%;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.18),0 24px 50px -18px rgba(0,0,0,.45)}
.v-print .mono{position:absolute;left:16px;bottom:14px;color:var(--mute-p)}
.v-shot{position:relative;margin:0;background:var(--ink-2)}
.v-shot img{width:100%;height:auto}
.v-shot figcaption{position:absolute;left:14px;bottom:12px;color:var(--chalk);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.v-info{position:sticky;top:0;display:grid;gap:22px;align-content:start;padding:calc(var(--nav-h) + 8px) var(--pad) var(--pad)}
.v-top{display:flex;justify-content:space-between;gap:12px;color:var(--mute)}
.v-jp{font:400 clamp(15px,1.3vw,20px)/1.2 var(--jp)}
/* big name, small price beside it */
.v-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;margin-top:-8px}
.v-name{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(48px,5.4vw,100px);line-height:.8;letter-spacing:-.02em}
.v-price{padding-top:.25em;font-weight:700;font-variation-settings:"wdth" 75;font-size:clamp(17px,1.4vw,22px);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.v-note{font-size:clamp(14px,1vw,16px);line-height:1.45;color:var(--mute);max-width:40ch}
.v-note::before{content:"Naram / ";font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--signal)}
.v-opts{display:grid;gap:22px}
.v-opt-h{display:flex;justify-content:space-between;align-items:baseline;color:var(--mute);margin-bottom:10px}
.v-opt-h b{color:var(--chalk);font-weight:500}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.sizes button{padding:8px 10px;border:1px solid var(--line);border-radius:99px;font:500 11px/1 var(--mono);color:var(--mute);transition:color .2s,border-color .2s,background-color .2s}
.sizes button:hover{color:var(--chalk);border-color:var(--chalk)}
.sizes button.on{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.sizes button:disabled{opacity:.3;cursor:default}
.guide{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:14px 14px 10px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:end}
.guide svg{grid-column:1 / -1;width:100%;height:auto;max-height:230px;display:block;overflow:visible}
.guide .g-size{fill:none;stroke:rgba(236,235,230,.3);stroke-width:.1;transition:stroke .3s}
.guide .g-size.fits{stroke:rgba(236,235,230,.55)}
/* A4 reads on any print: a dark halo under alternating white and red dashes, and a solid tag */
.guide .g-a4 rect{fill:none;stroke-width:.16}
.guide .g-a4 .halo{stroke:rgba(13,14,15,.8);stroke-width:.42}
.guide .g-a4 .a{stroke:var(--chalk);stroke-dasharray:.5 .5}
.guide .g-a4 .b{stroke:var(--signal);stroke-dasharray:.5 .5;stroke-dashoffset:.5}
.guide .g-a4 .tag{fill:var(--signal);stroke:none}
.guide .g-frame{fill:none;stroke:var(--chalk);stroke-width:.16}
.guide .g-t{fill:var(--chalk);font:500 1.15px var(--mono);letter-spacing:.04em}
.guide .g-t.a4{fill:var(--ink);font-weight:600}
.guide p{color:var(--mute)}
.guide p b{color:var(--chalk);font-weight:500}
.papers{display:grid;gap:6px}
.paper{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;transition:border-color .2s,background-color .2s}
.paper:hover{border-color:var(--mute)}
.paper.on{border-color:var(--chalk);background:rgba(236,235,230,.05)}
.paper i{width:34px;height:34px;border-radius:6px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.paper b{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--chalk)}
.paper span{display:block;font-size:13px;line-height:1.35;color:var(--mute);margin-top:3px}
.paper em{font:500 11px/1 var(--mono);font-style:normal;color:var(--chalk)}
.picker{display:grid;gap:8px}
.pk-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pk-row > span{width:64px;color:var(--mute)}
.pk-row button{padding:8px 11px;border:1px solid var(--line);border-radius:99px;font:500 11px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute);transition:color .2s,border-color .2s,background-color .2s}
.pk-row button:hover{color:var(--chalk);border-color:var(--chalk)}
.pk-row button.on{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.pk-row button:disabled{opacity:.28;cursor:default}
.pk-now{color:var(--chalk)}
.model{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:4px 12px}
.model select{appearance:none;-webkit-appearance:none;flex:1;background:transparent;border:0;color:var(--chalk);font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:12px 18px 12px 0;background-image:linear-gradient(45deg,transparent 50%,var(--chalk) 50%),linear-gradient(135deg,var(--chalk) 50%,transparent 50%);background-position:calc(100% - 7px) 50%,calc(100% - 2px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.model select option{background:var(--ink)}
.v-buy{position:sticky;bottom:0;z-index:3;display:grid;gap:10px;margin:0 calc(var(--pad) * -1) calc(var(--pad) * -1);padding:14px var(--pad) 18px;background:var(--ink);border-top:1px solid var(--line)}
.v-buy::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(transparent,var(--ink));pointer-events:none}
.v-sel{display:flex;justify-content:space-between;gap:12px;color:var(--mute)}
.v-sel b{color:var(--chalk);font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-add{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 26px;border-radius:99px;background:var(--chalk);color:var(--ink);font-size:12px}
.v-add span{position:relative;z-index:1}
.v-add .js-v-add-p{font:700 18px/1 var(--display);font-variation-settings:"wdth" 75;letter-spacing:0;font-variant-numeric:tabular-nums}
.v-add::before{content:"";position:absolute;inset:0;background:var(--signal);transform:translateY(101%);transition:transform .55s var(--ease)}
.v-add:hover::before{transform:none}
.v-fine{color:var(--mute);line-height:1.6}
.v-strip[hidden],.v-up[hidden]{display:none}
.v-link{color:var(--mute);justify-self:start}
.v-link:hover{color:var(--signal)}

/* prev / this / next, pinned top left of the viewer */
.v-strip{position:fixed;left:24px;top:18px;z-index:125;display:flex;align-items:center;gap:6px;padding:5px 14px 5px 5px;border-radius:99px;background:rgba(13,14,15,.82);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v-strip button,.vs-cur{width:26px;height:36px;border-radius:3px;overflow:hidden;display:block;opacity:.55;transition:opacity .25s,transform .4s var(--ease)}
.v-strip button:hover{opacity:1;transform:translateY(-2px)}
.vs-cur{opacity:1;box-shadow:0 0 0 1.5px var(--signal)}
.v-strip img{width:100%;height:100%;object-fit:cover}
.vs-n{margin-left:8px;color:var(--chalk);font-variant-numeric:tabular-nums}

/* the end of every piece: previous on the left, next on the right; hover a side and its poster rises into view */
.v-up{--p:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 10px 10px}
.v-side{--sp:clamp(24px,3vw,44px);position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;align-content:stretch;min-height:min(84svh,800px);padding:var(--sp);border-radius:14px;background:var(--paper);color:var(--ink);text-align:left;transition:opacity .5s var(--ease)}
.v-side-next{justify-items:end;text-align:right}
.v-up:has(.v-side:hover) .v-side:not(:hover){opacity:.5}
.vu-top{position:relative;z-index:1;display:flex;gap:12px;color:var(--mute-p)}
.vu-top b{color:var(--ink);font-weight:500}
.v-side-next .vu-top{flex-direction:row-reverse}
/* the poster is the panel: it wipes up from the bottom and fills it edge to edge, untouched */
.vu-im{position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .85s var(--ease)}
.vu-im img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--ease)}
.v-side:hover .vu-im,.v-side:focus-visible .vu-im{clip-path:inset(0 0 0 0)}
.v-side:hover .vu-im img,.v-side:focus-visible .vu-im img{transform:none}
.vu-tx{position:relative;z-index:1;grid-row:3;display:grid;justify-items:start;gap:6px;margin-bottom:clamp(14px,2vh,24px)}
.v-side-next .vu-tx{justify-items:end}
.vu-tx > *{transition:background-color .4s,color .4s,padding .4s var(--ease)}
.vu-tx i{font:400 clamp(15px,1.4vw,22px)/1.1 var(--jp);font-style:normal;color:var(--signal)}
.vu-tx b{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(28px,3vw,54px);line-height:.85;letter-spacing:-.02em}
.vu-tx em{font-style:normal;color:var(--mute-p)}
.vu-big{position:relative;z-index:1;grid-row:4;justify-self:stretch;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(64px,10.5vw,200px);line-height:.76;letter-spacing:-.035em;margin:0 calc(var(--sp) * -1) calc(var(--sp) * -1);padding:.08em var(--sp) .1em;transform:translateY(calc((1 - var(--p)) * 35%));transition:color .4s,background-color .4s}
/* over the poster the words sit on ink tags and the big word on a solid ink band, so everything reads on any print */
.v-side:hover .vu-top,.v-side:focus-visible .vu-top{color:var(--chalk)}
.v-side:hover .vu-top > *,.v-side:hover .vu-tx > *,.v-side:focus-visible .vu-tx > *{background:var(--ink);color:var(--chalk);padding:5px 9px}
.v-side:hover .vu-top b{color:var(--chalk)}
.v-side:hover .vu-tx i{color:var(--signal)}
.v-side:hover .vu-tx em{color:var(--mute)}
.v-side:hover .vu-big,.v-side:focus-visible .vu-big{background:var(--ink);color:var(--signal)}
@media (hover:none){
  .vu-im{clip-path:none}
  .vu-im img{transform:none}
  .vu-top{color:var(--chalk)}
  .vu-top > *,.vu-tx > *{background:var(--ink);color:var(--chalk);padding:5px 9px}
  .vu-top b{color:var(--chalk)}
  .vu-tx em{color:var(--mute)}
  .vu-big{background:var(--ink);color:var(--signal)}
}

/* the sheet that carries you from one piece to the next */
.v-wipe{position:fixed;inset:0;z-index:128;visibility:hidden;display:grid;grid-template-rows:auto 1fr auto auto;padding:24px var(--pad);background:var(--signal);color:var(--ink);pointer-events:none;clip-path:polygon(112% 0,124% 0,136% 100%,124% 100%)}
.vw-top,.vw-bot{display:flex;justify-content:space-between;gap:16px}
.vw-jp{align-self:end;font:400 clamp(22px,2.4vw,40px)/1 var(--jp);margin-bottom:14px}
.vw-name{display:block;overflow:hidden;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(64px,11vw,210px);line-height:.82;letter-spacing:-.03em;padding-bottom:.04em;margin-bottom:clamp(24px,4vh,48px);max-width:14ch}
.vw-name span{display:block}
.v-close{position:fixed;top:18px;right:var(--pad);z-index:125;height:40px;padding:0 16px;border-radius:99px;background:rgba(13,14,15,.85);border:1px solid var(--line);color:var(--chalk)}
.v-close:hover{border-color:var(--chalk)}
.v-count{position:fixed;left:24px;bottom:20px;z-index:125;color:var(--chalk);background:rgba(13,14,15,.8);padding:8px 12px;border-radius:99px}
.v-more{padding:clamp(40px,6vh,72px) var(--pad) clamp(60px,9vh,100px);border-top:1px solid var(--line);margin-top:10px}
.v-more h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}
.v-more h3 b{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(34px,4vw,64px);line-height:.85;letter-spacing:-.02em}
.v-more h3 span{color:var(--mute)}
.v-more-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px}
.v-more-row button{text-align:left;display:grid;gap:10px}
.v-more-row .im{aspect-ratio:686/965;overflow:hidden;background:var(--ink-2)}
.v-more-row img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.v-more-row button:hover img{transform:scale(1.05)}
.v-more-row b{font-weight:700;font-variation-settings:"wdth" 80;text-transform:uppercase;font-size:14px;line-height:1.1}
.v-more-row span{color:var(--mute)}
.v-fly{position:fixed;z-index:130;pointer-events:none;object-fit:cover;box-shadow:0 1px 2px rgba(0,0,0,.18),0 24px 50px -18px rgba(0,0,0,.45);will-change:transform}

.toast{position:fixed;left:50%;bottom:28px;z-index:140;transform:translate(-50%,calc(100% + 40px));visibility:hidden;background:var(--chalk);color:var(--ink);padding:14px 20px;border-radius:99px;transition:transform .6s var(--ease),visibility 0s .6s}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .6s var(--ease),visibility 0s}

/* ---------- nav extras, the phone menu ---------- */
.nav-right button{padding:12px 0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.nav-search{display:inline-flex;align-items:center;gap:8px}
.nav-search svg,.ix-search svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.nav-menu{display:none}
.nav-right a:hover,.nav-right button:hover{color:var(--signal)}
.menu{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 24px) var(--pad) 28px;background:var(--ink)}
.menu[hidden]{display:none}
.menu-in{display:grid;gap:4px}
.menu-in a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(44px,13vw,80px);line-height:.95;letter-spacing:-.02em}
.menu-in a i{font:400 15px/1 var(--jp);font-style:normal;color:var(--signal)}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--mute)}

/* ---------- index: search and order ---------- */
.ix-search{display:flex;align-items:center;gap:10px;flex:1 1 280px;max-width:420px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:rgba(13,14,15,.6);transition:border-color .25s}
.ix-search:focus-within{border-color:var(--chalk)}
.ix-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--chalk);font:inherit;letter-spacing:.04em;text-transform:none}
.ix-search input::placeholder{color:var(--mute);text-transform:none}
.ix-search input::-webkit-search-cancel-button{display:none}
.ix-clear{width:24px;height:24px;border-radius:50%;color:var(--mute);font-size:16px;line-height:1}
.ix-clear:hover{color:var(--chalk)}
.ix-sort{display:flex;gap:6px}

/* ---------- footer columns ---------- */
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:12px clamp(40px,8vw,120px)}
.foot-cols div{display:grid;gap:8px;align-content:start}
.foot-cols p{color:var(--ink);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid rgba(13,14,15,.3)}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- viewer: the description, folded ---------- */
.v-desc{display:grid;border-top:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.v-desc:empty{display:none}
.vd-intro{padding:16px 0 6px;color:var(--mute);font-size:15px;line-height:1.55}
.vd-intro p{margin:0}
.v-desc details{border-bottom:1px solid var(--line)}
.v-desc summary{display:flex;justify-content:space-between;padding:14px 0;cursor:pointer;list-style:none;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.v-desc summary::-webkit-details-marker{display:none}
.v-desc summary::after{content:"+";color:var(--mute);transition:transform .3s var(--ease)}
.v-desc details[open] summary::after{transform:rotate(45deg)}
.v-desc details > div{padding:0 0 16px;color:var(--mute);font-size:14px;line-height:1.55}
.v-desc details.vd-legal summary{color:var(--mute)}
.v-desc ul{margin:0;padding-left:18px}
.v-desc p{margin:0 0 8px}
.v-desc a{text-decoration:underline}
button.v-link{text-align:left}

/* ---------- the hovering bag ---------- */
.fab{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:134;display:flex;align-items:center;gap:0;height:60px;min-width:60px;padding:0 17px;border-radius:99px;background:var(--ink);color:var(--chalk);box-shadow:0 0 0 1px rgba(236,235,230,.28),0 18px 40px -14px rgba(0,0,0,.7);transition:opacity .35s,scale .35s var(--ease),gap .45s var(--ease),padding .45s var(--ease)}
.fab[hidden]{display:none}
.fab svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.fab-n{position:absolute;right:-4px;top:-4px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--signal);color:var(--ink);font:600 11px/1 var(--mono)}
.fab-peek{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease)}
.fab:hover,.fab:focus-visible{gap:12px;padding-right:22px}
.fab:hover .fab-peek,.fab:focus-visible .fab-peek{max-width:220px}
.fab.gone{opacity:0;scale:.5;pointer-events:none}
.page[data-kind="cart"]:not([hidden]) ~ .fab{opacity:0;pointer-events:none}
/* the hovering bag never sits on top of the product's own Add to bag bar, the hero labels or the footer clock */
.viewer:not([hidden]) ~ .fab{bottom:calc(clamp(16px,2vw,28px) + 118px)}
body:has(.fab:not([hidden])) :is(.hud-meta,.foot-bottom){padding-right:84px}
@media (hover:none){.fab-peek{display:none}}

/* ---------- the bag that grows out of it: a print order clipped to the press ---------- */
.mbag{position:fixed;inset:0;z-index:135}
.mbag[hidden]{display:none}
.mb-scrim{position:absolute;inset:0;background:rgba(13,14,15,.55)}
.mb-panel{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);width:min(440px,calc(100vw - 24px));max-height:min(760px,calc(100svh - 24px));display:flex;flex-direction:column;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.mb-cm{position:absolute;width:12px;height:12px;border:0 solid var(--ink);opacity:.5;pointer-events:none}
.mb-cm.tl{left:10px;top:10px;border-left-width:1px;border-top-width:1px}.mb-cm.tr{right:10px;top:10px;border-right-width:1px;border-top-width:1px}
.mb-cm.bl{left:10px;bottom:10px;border-left-width:1px;border-bottom-width:1px}.mb-cm.br{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}
.mb-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px 10px}
.mb-head b{color:var(--signal);font-weight:500}
.mb-head span{font-family:var(--jp);margin-left:6px;opacity:.6}
.mb-close:hover{color:var(--signal)}
.mb-docket{display:flex;gap:14px;margin:0 26px;padding:8px 0;border-top:2px solid var(--ink);border-bottom:1px dashed var(--line-p);color:var(--mute-p)}
.mb-docket span:last-child{margin-left:auto;color:var(--ink)}
.mb-lines{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px 26px}
.mb-lines[hidden],.mb-empty[hidden],.mb-foot[hidden]{display:none}
.bl{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line-p)}
.bl:last-child{border-bottom:0}
.bl-im{display:block;align-self:start}
.bl-im img{width:100%;height:auto;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.bl-b{display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:10px;min-width:0}
.bl-b > .bl-row:last-child{align-self:end}
.bl-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bl-name{font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:17px;line-height:1.05;letter-spacing:-.005em}
.bl-name:hover{color:var(--signal)}
.bl-t{font-weight:700;font-variation-settings:"wdth" 75;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the picked options as a tiny spec sheet: label, value */
.bl-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;margin:0}
.bl-specs div{display:contents}
.bl-specs dt{font-size:10px;line-height:20px;color:var(--mute-p)}
.bl-specs dd{margin:0;font-size:14px;line-height:20px;font-weight:500}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-p);border-radius:99px}
.qty button{width:32px;height:30px;font-size:15px}
.qty button:hover{color:var(--signal)}
.qty button:disabled{opacity:.3}
.qty span{min-width:18px;text-align:center}
.bl-rm{color:var(--mute-p)}
.bl-rm:hover{color:var(--signal)}
.mb-empty{display:grid;justify-items:center;gap:14px;padding:36px 26px 40px;text-align:center}
.mb-empty p{font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:22px}
.mb-empty a,.mb-full{color:var(--mute-p)}
.mb-empty a:hover,.mb-full:hover{color:var(--signal)}
/* a blank sheet with crop marks: nothing's been printed yet */
.mb-blank{position:relative;width:88px;height:120px;display:grid;place-items:center;background:#f6f4ef;box-shadow:0 12px 24px -12px rgba(0,0,0,.35);font:400 16px/1 var(--jp);color:var(--line-p)}
.mb-blank i{position:absolute;width:14px;height:14px;border:0 solid var(--ink);opacity:.4}
.mb-blank i:nth-child(1){left:-10px;top:-10px;border-right-width:1px;border-bottom-width:1px}
.mb-blank i:nth-child(2){right:-10px;top:-10px;border-left-width:1px;border-bottom-width:1px}
.mb-blank i:nth-child(3){left:-10px;bottom:-10px;border-right-width:1px;border-top-width:1px}
.mb-blank i:nth-child(4){right:-10px;bottom:-10px;border-left-width:1px;border-top-width:1px}
.mb-foot{display:grid;gap:10px;padding:14px 26px 24px;border-top:2px solid var(--ink)}
.mb-sum{display:flex;justify-content:space-between;align-items:baseline}
.mb-sum i{font-style:normal;color:var(--mute-p)}
.mb-sum b{font-weight:800;font-variation-settings:"wdth" 70;font-size:26px;font-variant-numeric:tabular-nums}
.mb-checkout,.bp-cta{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 24px;border-radius:99px;background:var(--ink);color:var(--chalk);font-size:12px}
.mb-checkout span,.bp-cta span{position:relative;z-index:1}
.mb-checkout::before,.bp-cta::before{content:"";position:absolute;inset:0;background:var(--signal);transform:translateY(101%);transition:transform .55s var(--ease)}
.mb-checkout:hover::before,.bp-cta:hover::before{transform:none}
.mb-checkout:hover,.bp-cta:hover{color:var(--ink)}
.mb-checkout:disabled{opacity:.6;cursor:progress}
.mb-full{justify-self:center;padding:4px}
.mb-err{color:var(--signal);min-height:0}
.mb-err:empty{display:none}

/* ---------- pages: documents on paper ---------- */
.page{position:fixed;inset:0;z-index:122;color:var(--ink)}
.page[hidden]{display:none}
.pg-bg{position:absolute;inset:0;background:var(--paper)}
.pg-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.pg-in{min-height:100%;padding:clamp(80px,12vh,140px) var(--pad) clamp(80px,12vh,120px)}
.pg-close{position:fixed;top:18px;right:var(--pad);z-index:123;height:40px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--paper)}
.pg-close:hover{background:var(--signal);color:var(--ink)}
.doc{max-width:1240px;margin:0 auto}
.doc-head{display:grid;gap:18px;padding-bottom:clamp(28px,5vh,48px);border-bottom:2px solid var(--ink);margin-bottom:clamp(28px,5vh,56px)}
.doc-kicker{color:var(--mute-p)}
.doc-kicker span{font-family:var(--jp)}
.doc-title{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(64px,11vw,200px);line-height:.8;letter-spacing:-.035em}
.doc-title sup{font-size:14px;letter-spacing:.05em;color:var(--signal);vertical-align:top;margin-left:10px}
.doc-lede{max-width:40ch;font-size:clamp(19px,1.7vw,26px);line-height:1.35}
.doc-lede b{font-weight:600}
.doc-body{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,720px);gap:clamp(28px,6vw,110px)}
.doc-toc{position:sticky;top:90px;align-self:start;display:grid;gap:2px}
.doc-toc a{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-p);color:var(--mute-p);transition:color .2s}
.doc-toc a:hover{color:var(--ink)}
.doc-toc i{font-style:normal;color:var(--signal)}
.doc-text{font-size:clamp(16px,1.2vw,18px);line-height:1.65}
.doc-text h2{position:relative;margin:clamp(36px,5vh,56px) 0 12px;font-weight:850;font-variation-settings:"wdth" 66;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:.95;letter-spacing:-.01em;scroll-margin-top:90px}
.doc-text h2:first-child{margin-top:0}
.doc-text h2::before{content:attr(data-n);display:block;margin-bottom:10px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--signal)}
.doc-text p{margin:0 0 14px}
.doc-text a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--signal)}
.doc-text a:hover{color:var(--signal)}
.doc-fine{margin-top:36px!important;padding-top:16px;border-top:1px solid var(--line-p);font:500 12px/1.5 var(--mono);color:var(--mute-p)}
.doc-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px!important}
.doc-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:99px;text-decoration:none!important;color:var(--ink)}
.doc-btn:hover{background:var(--ink);color:var(--paper)!important}
button.doc-btn{background:var(--ink);color:var(--paper)}
button.doc-btn:hover{background:var(--signal-p);border-color:var(--signal-p)}

/* the full bag: the same ink, type, chips and buttons as the product view, not a paper document */
.page[data-kind="cart"]{color:var(--chalk);--line-p:var(--line);--mute-p:var(--mute)}
.page[data-kind="cart"] .pg-bg{background:var(--ink)}
.page[data-kind="cart"] .pg-close{background:rgba(13,14,15,.85);color:var(--chalk);border:1px solid var(--line)}
.page[data-kind="cart"] .pg-close:hover{border-color:var(--chalk);background:rgba(13,14,15,.85);color:var(--chalk)}
.bagpage{max-width:1400px;margin:0 auto}
.bp-head{display:grid;grid-template-columns:1fr minmax(240px,30%);align-items:end;gap:18px 24px;margin-bottom:clamp(32px,6vh,64px)}
.bp-kicker{grid-column:1 / -1;display:flex;gap:14px;color:var(--mute)}
.bp-kicker span:last-child{font-family:var(--jp)}
.bp-title{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(84px,14vw,250px);line-height:.78;letter-spacing:-.025em}
.bp-title sup{font-size:clamp(12px,1vw,14px);vertical-align:top;margin-left:.6em;letter-spacing:.05em;color:var(--signal)}
.bp-lede{font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--mute)}
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(28px,5vw,80px);align-items:start;border-top:1px solid var(--line)}
.bp-lines{list-style:none;margin:0;padding:0}
.bl.big{grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);gap:clamp(18px,2vw,32px);padding:clamp(20px,3vh,32px) 0;border-bottom:1px solid var(--line)}
.bl.big .bl-name{font-weight:850;font-variation-settings:"wdth" 62;font-size:clamp(26px,2.6vw,44px);line-height:.85}
.bl.big .bl-t{font-size:clamp(18px,1.5vw,24px)}
.bl.big .bl-specs{gap:4px 18px}
.bl.big .bl-specs dd{font-size:15px}
.bl.big .qty{border-color:var(--line)}
.bl.big .qty button{width:40px;height:38px}
.bp-sum{position:sticky;top:90px;display:grid;gap:14px;margin-top:clamp(20px,3vh,32px);padding:clamp(20px,2vw,28px);border:1px solid var(--line);border-radius:14px;background:var(--ink-2)}
.bp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--mute)}
.bp-row b{font-weight:500;color:var(--chalk)}
.bp-row i{font-style:normal;color:var(--mute)}
.bp-ship select{max-width:62%;appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:99px;padding:9px 32px 9px 14px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ecebe6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center;color:var(--chalk);font:inherit;text-transform:none}
.bp-ship select option{background:var(--ink);color:var(--chalk)}
.bp-total{padding-top:14px;border-top:1px solid var(--line);color:var(--chalk)}
.bp-total b{font-weight:800;font-variation-settings:"wdth" 70;font-size:clamp(32px,3vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.bagpage .mb-checkout,.bagpage .bp-cta{background:var(--chalk);color:var(--ink);height:60px}
.bagpage .mb-full{color:var(--mute)}
.bagpage .mb-full:hover{color:var(--signal)}
.bp-note{font-size:14px;line-height:1.5;color:var(--mute)}
.bp-note a{text-decoration:underline;text-underline-offset:3px}
.bp-empty{display:grid;justify-items:start;gap:24px;padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--line)}
.bp-empty .mb-blank{background:var(--ink-3);color:var(--line)}
.bp-empty .mb-blank i{border-color:var(--chalk)}
.bp-cta{min-width:260px;gap:30px}
/* the order confirmation */
.ty-stamp{display:inline-grid;place-items:center;width:1.5em;height:2.6em;margin-left:.2em;vertical-align:.05em;border:.05em solid var(--signal);border-radius:.08em;color:var(--signal);font:400 .34em/1.05 var(--jp);writing-mode:vertical-rl;transform:rotate(-12deg)}
.ty-lines{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:12px}
.ty-lines li{display:flex;gap:16px;align-items:center}
.ty-lines img{width:56px;height:auto}
.ty-lines span{display:grid;gap:4px}
.ty-steps{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.ty-steps li{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line-p)}
.ty-steps i{font-style:normal;color:var(--signal)}
.ty-steps b{font-weight:850;font-variation-settings:"wdth" 66;text-transform:uppercase;font-size:clamp(26px,2.4vw,38px);line-height:.95}
.ty-steps span{color:var(--mute-p);line-height:1.5}
.ty-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
/* the misprint (404): a sheet that came off the press crooked */
.misprint{position:relative}
.mp-sheet{position:relative;float:right;width:clamp(160px,22vw,320px);aspect-ratio:686/965;margin:0 0 30px 40px;display:grid;place-items:center;background:#f6f4ef;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transform:rotate(7deg) translateX(8%);font:400 clamp(28px,3vw,48px)/1.1 var(--jp);color:var(--signal);writing-mode:vertical-rl}
.mp-cm{position:absolute;width:22px;height:22px;border:0 solid var(--ink);opacity:.5}
.mp-cm.tl{left:-16px;top:-16px;border-right-width:1px;border-bottom-width:1px;transform:rotate(-7deg)}
.mp-cm.tr{right:-16px;top:-16px;border-left-width:1px;border-bottom-width:1px;transform:rotate(-7deg)}
.mp-cm.bl{left:-16px;bottom:-16px;border-right-width:1px;border-top-width:1px;transform:rotate(-7deg)}
.mp-cm.br{right:-16px;bottom:-16px;border-left-width:1px;border-top-width:1px;transform:rotate(-7deg)}

/* ---------- cookies ---------- */
.consent{position:fixed;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:138;width:min(380px,calc(100vw - 24px - 80px));display:grid;gap:12px;padding:18px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.consent[hidden]{display:none}
.consent a{text-decoration:underline}
.consent-b{display:flex;gap:8px}
.consent-b button{height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--ink)}
.consent-b button:first-child{background:var(--ink);color:var(--paper)}
.consent-b button:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}

/* ---------- accessibility (WCAG 2.2 AA) ---------- */
/* small red text on paper uses the darker red; large display type keeps the signal red (3:1 is enough there) */
.mf-l rt,.mf-l::before,.mf-proof,.doc-toc i,.doc-text h2::before,.mb-head b,.mb-err,.ty-steps i{color:var(--signal-p)}
@media (hover:hover){.v-side:not(:hover):not(:focus-visible) .vu-tx i{color:var(--signal-p)}}
.page[data-kind="cart"] .mb-err{color:var(--signal)}
.doc-text a{text-decoration-color:currentColor}
/* every target is at least 24px tall */
.foot-cols a,.mb-full,.bl-rm,.v-link,.consent a,.mb-empty a{display:inline-block;padding-block:5px;min-height:24px}
.foot-cols a{justify-self:start}
/* a clear focus ring on everything you can reach with a keyboard */
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.page:not([data-kind="cart"]) :where(a,button,input,select,summary):focus-visible,.mbag :where(a,button,select):focus-visible,.consent :focus-visible,.manifesto :focus-visible,.foot :focus-visible{outline-color:var(--ink)}
.ticker-pause{position:absolute;right:var(--pad);top:50%;translate:0 -50%;z-index:2;height:28px;padding:0 10px;border-radius:99px;background:var(--signal);color:var(--ink);font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(13,14,15,.35)}
.ticker{position:relative}
.ticker.paused .ticker-track{animation-play-state:paused}

.motion-btn{pointer-events:auto;position:relative;z-index:2;padding:6px 0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px}
.motion-btn:hover{color:var(--signal)}

/* hover colours on paper use the darker red too */
.mbag :is(.mb-full,.mb-empty a,.bl-name,.bl-rm,.qty button,.mb-close):hover,.page:not([data-kind="cart"]) .doc-text a:hover,.page:not([data-kind="cart"]) .mb-full:hover{color:var(--signal-p)}

/* ---------- responsive ---------- *//* ---------- responsive ---------- */
@media (max-width:1100px){
}
@media (max-width:860px){
  :root{--nav-h:56px}
  .nav{grid-template-columns:auto 1fr}
  .nav-links{display:none}
  .nav-search span,.nav-help{display:none}
  .nav-menu{display:inline-block}
  .ix-search{max-width:none;flex-basis:auto}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-body,.bp-grid,.bp-head{grid-template-columns:1fr}
  .doc-toc{position:static}
  .bp-sum{position:static}
  .ty-steps{grid-template-columns:1fr}
  .mp-sheet{float:none;margin:0 0 30px auto}
  .viewer:not([hidden]) ~ .fab{bottom:124px}
  .consent{top:calc(var(--nav-h) + 8px);bottom:auto;width:calc(100vw - 24px)}
  .mf-stats{gap:10px}
  .st{gap:6px}
  .st .n{font-size:17vw}
  .st .k{font-size:7.5vw}
  .st small{display:block;margin:4px 0 0}
  .toast{top:calc(var(--nav-h) + 8px);bottom:auto;transform:translate(-50%,calc(-100% - 90px))}
  .pg-close{top:12px}
  .nav-clock{display:none}
  .hud{grid-template-columns:1fr}
  .hud-meta > p:not(:last-child){display:none}
  .hud-label{max-width:none}
  .hud-title .ln:nth-child(2){padding-left:8vw}
  .ix-head,.cs-head{grid-template-columns:1fr}
  .ix-zoom{display:none}
  .ix-bar{position:static;background:none;display:grid;gap:8px}
  .ix-kinds,.ix-worlds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
  .ix-kinds::-webkit-scrollbar,.ix-worlds::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
  .ix-grid{--cols:2!important}
  .mf-body{padding-left:0}
  .mf-l::before{display:none}
  .mf-l.in{text-indent:0}
  .mf-l.in2{margin-left:0}
  .mf-l.s2{font-size:clamp(40px,12vw,64px)}
  .mf-head{flex-direction:column;gap:6px}
  .v-strip{left:12px;top:12px}
  .v-up{grid-template-columns:1fr}
  .v-side{--sp:22px;min-height:min(118vw,560px);gap:18px}
  .vu-big{font-size:clamp(56px,17vw,96px)}
  .vw-name{white-space:normal;font-size:clamp(48px,15vw,90px)}
  .foot-top{grid-template-columns:1fr}
  .deck-stage{--cw:min(60vw,280px)}
  .deck-sfx{left:calc(50% + var(--cw) * .2)}
  .foot-bottom{flex-direction:column}
  .v-grid{grid-template-columns:1fr}
  .v-gallery{grid-auto-flow:column;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;padding:calc(var(--nav-h)) 0 0 10px;scrollbar-width:none}
  .v-gallery > *{scroll-snap-align:start;align-self:start}
  .v-gallery{grid-auto-rows:min(118vw,64svh)}
  .v-print{aspect-ratio:auto;height:100%}
  .v-shot{height:100%}
  .v-shot img{height:100%;object-fit:cover}
  .v-info{position:relative;padding-top:24px}
  .v-name{font-size:clamp(44px,13vw,84px)}
  .v-count{display:none}
  .guide{grid-template-columns:1fr}
  .v-scroll{padding-bottom:128px}
  .v-buy{position:fixed;left:0;right:0;bottom:0;z-index:126;margin:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:8px}
  .v-add{height:54px}
  .ld-cmyk{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.hud-scroll span,.ld-status::before{animation:none}
}