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

/* ============================================================
   KATMAN — RISO / SCREENPRINT PUNK-ZINE CUT-UP
   Scanned physical hand-made collage. Newsprint + riso inks.
   ============================================================ */
:root{
  /* paper grounds */
  --bg:#E7E0CE;
  --paper:#F3EEDF;
  --paper-2:#EDE6D3;
  --surface:#F6F1E3;
  --surface-2:#E4DBC4;
  --surface-3:#D6CBAF;
  --paper-dark:#211D15;

  --ink:#1A1610;
  --ink-soft:#3B362B;
  --ink-faint:#6C6454;

  /* riso inks */
  --pink:#FF2E7E;   --pink-ink:#C01260;
  --blue:#203BE0;   --blue-ink:#1B2FB2;
  --orange:#FF5A1F; --orange-ink:#CF3F08;
  --teal:#10B49A;   --teal-ink:#0A7D6B;
  --yellow:#FFC61E;
  --tape:rgba(255,214,92,.72);
  --tape-blue:rgba(120,150,235,.55);
  --tape-pink:rgba(255,120,175,.5);

  /* legacy token bridge (used across CSS + inline HTML) */
  --accent:var(--pink);
  --accent-text:var(--pink-ink);
  --accent2:var(--teal);
  --accent2-text:var(--teal-ink);

  --line:rgba(26,22,16,.20);
  --line-strong:rgba(26,22,16,.40);

  --font-head:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Inter", ui-monospace, "Cascadia Mono", "Courier New", monospace;

  --maxw:1320px;
  --pad:clamp(16px,3vw,40px);
  --gap:16px;
  --header-h:74px;
  --radius:3px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease2:cubic-bezier(.4,0,.2,1);
  interpolate-size:allow-keywords;
}

/* ---------- reset / sticky-safe clip ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; overflow-y:visible; }
body{ overflow-x:clip; overflow-y:visible; max-width:100vw; margin:0; padding:0; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400; line-height:1.6; font-size:16px; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* xerox halftone dot field + faint registration grid on the paper */
  background-image:
    radial-gradient(rgba(26,22,16,.10) 22%, transparent 24%),
    radial-gradient(rgba(32,59,224,.05) 22%, transparent 24%),
    linear-gradient(rgba(26,22,16,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,22,16,.05) 1px, transparent 1px);
  background-size:7px 7px, 7px 7px, 58px 58px, 58px 58px;
  background-position:0 0, 3.5px 3.5px, 0 0, 0 0;
}
/* scanned paper grain overlay (multiply) */
body::after{
  content:""; position:fixed; inset:0; z-index:4; pointer-events:none;
  mix-blend-mode:multiply; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

figure,figcaption,blockquote{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 .4em; }
p{ margin:0 0 1em; }
::selection{ background:var(--pink); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }
section > .container{ position:relative; z-index:2; }
.break{ word-break:break-word; overflow-wrap:anywhere; }

/* ---------- eyebrow = riso stamp label ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; background:var(--ink);
  padding:5px 11px; margin:0 0 16px; display:inline-block;
  transform:rotate(-1.4deg); box-shadow:3px 3px 0 var(--pink);
}
.section-lead{ color:var(--ink-soft); max-width:62ch; font-size:1.02rem; }
.section-head{ max-width:760px; margin-bottom:clamp(28px,4vw,44px); position:relative; z-index:2; }
.section-head h2{ font-size:clamp(1.9rem,4.6vw,3.3rem); }

.skip-link{ position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; font-weight:700;
  padding:10px 16px; border-radius:2px; z-index:3000; transition:top .2s var(--ease); }
.skip-link:focus{ top:12px; }

/* ============================================================
   RANSOM / CUT-LETTER HEADLINES
   ============================================================ */
.ransom{ display:inline; }
.ransom .cut{
  display:inline-block; padding:0 .1em; margin:0 .01em;
  line-height:.9; position:relative;
  transform:rotate(var(--rt,0deg)) translateY(var(--ty,0));
  font-weight:700;
}
/* alternating cut-paper backings */
.ransom .cut:nth-child(6n+1){ background:var(--ink); color:var(--paper); --rt:-2deg; }
.ransom .cut:nth-child(6n+2){ background:var(--pink); color:#fff; --rt:2.4deg; --ty:-.03em; font-weight:600; }
.ransom .cut:nth-child(6n+3){ background:var(--paper); color:var(--ink); --rt:-1.6deg; box-shadow:2px 2px 0 var(--blue); }
.ransom .cut:nth-child(6n+4){ background:var(--blue); color:#fff; --rt:3deg; }
.ransom .cut:nth-child(6n+5){ background:var(--yellow); color:var(--ink); --rt:-3deg; --ty:.02em; }
.ransom .cut:nth-child(6n+6){ background:var(--orange); color:#fff; --rt:1.6deg; }
.ransom .cut::after{ /* tape on some */ content:""; }
.ransom .gap{ display:inline-block; width:.28em; }

/* misregistration overprint word (riso mis-print) */
.mis{ position:relative; color:var(--ink); letter-spacing:-.02em;
  text-shadow:3px -2px 0 var(--orange), -3px 2px 0 var(--blue); }
h1 .mis{ text-shadow:4px -3px 0 var(--orange), -4px 3px 0 var(--blue); }
.mis.pink{ text-shadow:3px -2px 0 var(--pink), -3px 2px 0 var(--blue); }
@media (max-width:600px){
  .mis{ text-shadow:2px -1px 0 var(--orange), -2px 1px 0 var(--blue); }
  h1 .mis{ text-shadow:3px -2px 0 var(--orange), -3px 2px 0 var(--blue); }
}
/* marker-scrawl underline word */
.scrawl{ position:relative; white-space:nowrap; }
.scrawl::after{ content:""; position:absolute; left:-.06em; right:-.06em; bottom:-.08em; height:.32em; z-index:-1;
  background:var(--yellow); transform:rotate(-1.2deg);
  clip-path:polygon(0 40%,8% 20%,20% 55%,33% 25%,46% 60%,60% 22%,74% 58%,88% 28%,100% 50%,100% 100%,0 100%); }

/* ============================================================
   PRINTER-MARK / COLLAGE DECOR SYSTEM  (.pm)
   ============================================================ */
.pm{ position:absolute; pointer-events:none; z-index:1; }
.tc-ink{ color:var(--ink); } .tc-blue{ color:var(--blue); } .tc-red{ color:var(--orange); }
.tc-pink{ color:var(--pink); } .tc-teal{ color:var(--teal); }
.o35{opacity:.35}.o5{opacity:.5}.o6{opacity:.6}.o7{opacity:.7}.o85{opacity:.85}

/* registration crosshair */
.pm-reg{ width:40px; height:40px;
  background:radial-gradient(circle, transparent 5px, currentColor 5px, currentColor 6.5px, transparent 7px); }
.pm-reg::before{ content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1.6px; background:currentColor; transform:translateX(-50%); }
.pm-reg::after{ content:""; position:absolute; top:50%; left:-6px; right:-6px; height:1.6px; background:currentColor; transform:translateY(-50%); }

/* corner crop marks */
.pm-crop{ width:30px; height:30px; }
.pm-crop::before{ content:""; position:absolute; left:0; top:0; width:30px; height:1.6px; background:currentColor; }
.pm-crop::after{ content:""; position:absolute; left:0; top:0; width:1.6px; height:30px; background:currentColor; }

/* CMYK / riso calibration bar */
.pm-cmyk{ width:130px; height:18px; border:1px solid rgba(26,22,16,.4);
  background:linear-gradient(90deg,var(--pink) 0 25%,var(--blue) 25% 50%,var(--yellow) 50% 75%,var(--ink) 75% 100%); }
.pm-bar{ width:118px; height:18px; border:1px solid rgba(26,22,16,.4);
  background:linear-gradient(90deg,var(--pink) 0 33.33%,var(--blue) 33.33% 66.66%,var(--orange) 66.66% 100%); }
/* vertical ink swatch chips */
.pm-swatch{ width:26px; height:104px; border:1px solid rgba(26,22,16,.4);
  background:linear-gradient(180deg,var(--pink) 0 20%,var(--blue) 20% 40%,var(--orange) 40% 60%,var(--teal) 60% 80%,var(--ink) 80% 100%); }

/* halftone dot patch */
.pm-halo{ width:110px; height:110px;
  background:radial-gradient(currentColor 32%, transparent 34%); background-size:8px 8px;
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 66%); mask:radial-gradient(circle,#000 60%,transparent 66%); }

/* printer star target */
.pm-star{ width:54px; height:54px; border-radius:50%;
  background:repeating-conic-gradient(currentColor 0 15deg, transparent 15deg 30deg);
  -webkit-mask:radial-gradient(circle, #000 68%, transparent 70%); mask:radial-gradient(circle, #000 68%, transparent 70%); }

/* density wedge */
.pm-wedge{ width:150px; height:22px; border:1px solid rgba(26,22,16,.35);
  background:linear-gradient(90deg,#1A1610 0 12.5%,#3a352b 12.5% 25%,#57503f 25% 37.5%,#756c56 37.5% 50%,#948a70 50% 62.5%,#b3a988 62.5% 75%,#cdc4a6 75% 87.5%,#efe9d8 87.5% 100%); }

/* mm ruler tick strip */
.pm-ruler{ width:178px; height:16px; border-bottom:1.6px solid currentColor;
  background:repeating-linear-gradient(90deg, currentColor 0 1.4px, transparent 1.4px 9px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 55%); mask:linear-gradient(180deg,transparent 0,#000 55%); }

/* rubber stamp */
.pm-stamp{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:currentColor; border:2px solid currentColor; border-radius:3px; padding:5px 9px; opacity:.85;
  white-space:nowrap; background:rgba(243,238,223,.4); }
.pm-stamp.ring{ box-shadow:0 0 0 2px rgba(255,255,255,.5) inset, 3px 3px 0 -1px currentColor; }
.pm-stamp.solid{ color:#fff; border-color:transparent; opacity:.94; }
.pm-stamp.solid.tc-red{ background:var(--orange); }
.pm-stamp.solid.tc-blue{ background:var(--blue); }
.pm-stamp.solid.tc-pink{ background:var(--pink); }
.pm-stamp.solid.tc-ink{ background:var(--ink); }

/* tape strip */
.pm-tape{ width:78px; height:24px; background:var(--tape);
  border:1px solid rgba(255,255,255,.4); box-shadow:0 2px 7px -3px rgba(0,0,0,.4); }
.pm-tape.blue{ background:var(--tape-blue); }
.pm-tape.pink{ background:var(--tape-pink); }

/* riso slab (torn ink field) */
.pm-slab{ width:120px; height:120px; opacity:.9; mix-blend-mode:multiply;
  clip-path:polygon(4% 8%,34% 1%,68% 6%,98% 2%,95% 40%,100% 80%,66% 97%,34% 100%,5% 92%,0 52%,6% 24%); }
.pm-slab.pink{ background:var(--pink); } .pm-slab.blue{ background:var(--blue); }
.pm-slab.orange{ background:var(--orange); } .pm-slab.yellow{ background:var(--yellow); mix-blend-mode:normal; }
.pm-slab.teal{ background:var(--teal); }

/* spray / marker splat */
.pm-spray{ width:90px; height:90px; opacity:.5; mix-blend-mode:multiply;
  background:radial-gradient(circle at 50% 50%, currentColor 0 8%, transparent 9%),
    radial-gradient(circle at 30% 40%, currentColor 0 4%, transparent 5%),
    radial-gradient(circle at 70% 60%, currentColor 0 5%, transparent 6%),
    radial-gradient(circle at 60% 25%, currentColor 0 3%, transparent 4%),
    radial-gradient(circle at 40% 72%, currentColor 0 3%, transparent 4%),
    radial-gradient(circle at 78% 35%, currentColor 0 2%, transparent 3%);
  filter:blur(.3px); }

/* torn overprint band across a section edge */
.pm-band{ height:14px; left:-2%; right:-2%; z-index:3;
  background:repeating-linear-gradient(90deg,var(--pink) 0 26px,var(--blue) 26px 52px);
  opacity:.9;
  clip-path:polygon(0 40%,4% 10%,9% 55%,15% 15%,22% 60%,30% 12%,38% 58%,46% 18%,54% 60%,62% 14%,70% 58%,78% 16%,86% 60%,93% 18%,100% 52%,100% 100%,0 100%); }

/* handwritten marker scrawl mark */
.pm-mark{ font-family:var(--font-mono); font-weight:700; font-style:italic; font-size:15px; color:currentColor;
  letter-spacing:.02em; opacity:.9; white-space:nowrap; }

/* staple */
.pm-staple{ width:22px; height:9px; border:2px solid rgba(26,22,16,.55); border-bottom:none; border-radius:2px 2px 0 0;
  box-shadow:0 1px 2px rgba(0,0,0,.3); background:transparent; }

/* mobile decor curation — keep substrate, thin the scattered marks */
@media (max-width:900px){ .pm-bleed{ display:none !important; } }
@media (max-width:768px){
  .pm:not(.pm-keep){ display:none !important; }
  .pm-keep.pm-cmyk,.pm-keep.pm-bar{ width:94px; }
  .pm-keep.pm-ruler{ width:118px; }
  .pm-keep.pm-swatch{ height:74px; }
  .pm-keep.pm-slab{ width:88px; height:88px; }
}

/* ============================================================
   BUTTONS — taped tabs / stamped tickets
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-mono); font-size:.86rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:14px 24px; border:2px solid var(--ink);
  background:var(--pink); color:#fff; text-align:center; position:relative;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-1deg);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn::before{ /* tape on the tab */ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:46px; height:16px; background:var(--tape); border:1px solid rgba(255,255,255,.4); }
.btn:hover,.btn:focus-visible{ transform:rotate(-1deg) translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:rotate(-1deg) translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-primary{ background:var(--pink); color:#fff; }
.btn-ghost{ background:var(--paper); color:var(--ink); transform:rotate(1deg); box-shadow:4px 4px 0 var(--blue); }
.btn-ghost::before{ background:var(--tape-blue); }
.btn-ghost:hover,.btn-ghost:focus-visible{ transform:rotate(1deg) translate(-2px,-2px); box-shadow:6px 6px 0 var(--blue); background:var(--yellow); }
.btn .arw{ transition:transform .2s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* ============================================================
   HEADER / NAV — taped masthead strip
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:1080;
  display:flex; align-items:center;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  box-shadow:0 3px 0 rgba(32,59,224,.35);
  transition:height .24s var(--ease);
}
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 14px,transparent 14px 28px); opacity:.7; pointer-events:none; }
.site-header.is-scrolled{ height:62px; }
.header-inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ font-family:var(--font-head); font-weight:700; font-size:1.34rem; letter-spacing:.02em; color:var(--ink);
  display:flex; align-items:center; gap:9px; text-transform:uppercase; }
.brand .brand-dot{ width:14px; height:14px; background:var(--pink); box-shadow:3px 3px 0 var(--blue); transform:rotate(8deg); }
.brand small{ font-family:var(--font-mono); font-weight:600; font-size:.56rem; letter-spacing:.16em; color:var(--ink-faint);
  text-transform:uppercase; margin-left:2px; background:var(--yellow); padding:2px 5px; transform:rotate(-2deg); }
.nav-desktop{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); }
.nav-desktop a{ position:relative; font-family:var(--font-mono); font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-soft); padding:6px 2px; transition:color .2s var(--ease); }
.nav-desktop a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:3px; background:var(--pink); transition:right .25s var(--ease); }
.nav-desktop a:hover{ color:var(--ink); } .nav-desktop a:hover::after,.nav-desktop a.is-active::after{ right:0; }
.nav-desktop a.is-active{ color:var(--pink-ink); }
.nav-cta{ font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--ink) !important; color:#fff !important; padding:9px 16px; border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--pink); transform:rotate(-1.5deg);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease); }
.nav-desktop .nav-cta::after{ display:none; }
.nav-cta:hover,.nav-cta:focus-visible{ background:var(--pink) !important; color:#fff !important; transform:rotate(-1.5deg) translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }

.nav-toggle{ display:none; position:relative; z-index:1100; width:46px; height:46px; border:2px solid var(--ink);
  background:var(--yellow); box-shadow:3px 3px 0 var(--ink); padding:0; }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2.5px; background:var(--ink); transition:transform .28s var(--ease), opacity .2s var(--ease), top .28s var(--ease); }
.nav-toggle span:nth-child(1){ top:14px; } .nav-toggle span:nth-child(2){ top:21px; } .nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* drawer */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(20,17,10,.6); opacity:0; visibility:hidden; z-index:1040;
  transition:opacity .24s var(--ease), visibility .24s var(--ease); }
.drawer-backdrop.is-open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(360px,92vw); background:var(--paper);
  border-left:3px solid var(--ink); transform:translateX(100%); transition:transform .32s var(--ease); z-index:1050;
  padding:calc(var(--header-h) + 18px) 26px 26px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.drawer::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 16px,var(--blue) 16px 32px); }
.drawer.is-open{ transform:translateX(0); }
.drawer a{ font-family:var(--font-head); font-weight:700; font-size:1.2rem; text-transform:uppercase; color:var(--ink);
  padding:12px 0; border-bottom:1px dashed var(--line-strong); transition:color .2s var(--ease), padding-left .2s var(--ease); }
.drawer a:hover,.drawer a.is-active{ color:var(--pink-ink); padding-left:8px; }
.drawer .drawer-cta{ margin-top:18px; text-align:center; justify-content:center; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:.86rem; font-weight:700; text-transform:uppercase; border:2px solid var(--ink);
  padding:14px; letter-spacing:.04em; box-shadow:4px 4px 0 var(--pink); }
.drawer .drawer-cta:hover{ background:var(--pink); padding-left:0; }
.drawer .drawer-meta{ margin-top:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); line-height:1.9; border:none; padding-top:18px; }

main{ padding-top:var(--header-h); }
main section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* ============================================================
   SECTIONS / torn-paper grounds
   ============================================================ */
.block{ padding:clamp(54px,8vw,100px) 0; position:relative; }
.block-tight{ padding:clamp(40px,5vw,64px) 0; position:relative; }
.divider{ height:0; border:none; margin:0; position:relative; z-index:3; }
.divider::before{ content:""; position:absolute; left:-2%; right:-2%; top:-9px; height:18px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 20px,transparent 20px 40px); opacity:.6;
  clip-path:polygon(0 45%,5% 15%,11% 55%,18% 18%,26% 58%,34% 14%,42% 56%,50% 20%,58% 58%,66% 15%,74% 56%,82% 18%,90% 58%,96% 20%,100% 48%,100% 100%,0 100%); }

/* torn riso-paper ground for a section band */
.band-glass{ position:relative; background:var(--paper-2); }
.band-glass::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(rgba(32,59,224,.10) 22%, transparent 24%) 0 0/9px 9px,
    linear-gradient(115deg, rgba(255,46,126,.10), transparent 46%),
    linear-gradient(300deg, rgba(16,180,154,.10), transparent 50%);
  -webkit-mask:linear-gradient(#000,#000); }
.band-glass::after{ content:""; position:absolute; left:0; right:0; top:0; height:12px; z-index:1; pointer-events:none;
  background:var(--paper-2);
  clip-path:polygon(0 60%,6% 20%,13% 70%,21% 25%,30% 72%,40% 22%,50% 68%,60% 24%,70% 70%,80% 26%,90% 68%,96% 30%,100% 60%,100% 0,0 0); }

/* ============================================================
   HERO — pinned cine, ransom masthead + torn poster cluster
   ============================================================ */
.hero{ position:relative; }
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }
.hero-cine{ height:124vh; }
.cine-pin.hero-pin{
  background:
    radial-gradient(rgba(26,22,16,.08) 1px, transparent 1.7px) 0 0/7px 7px,
    linear-gradient(180deg, rgba(255,46,126,.10), transparent 44%),
    var(--paper);
}
.hero-inner{ position:relative; z-index:4; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad); display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,4vw,52px); align-items:center; }
.hero-copy{ min-width:0; position:relative; z-index:5; }
.hero h1{ font-size:clamp(2.5rem,7vw,5rem); line-height:.98; letter-spacing:-.02em; margin:0 0 22px; }
.hero .hero-sub{ font-size:clamp(1rem,1.4vw,1.16rem); color:var(--ink); max-width:46ch; margin:0 0 24px;
  background:var(--surface); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--blue);
  padding:14px 16px; transform:rotate(-.6deg);
  clip-path:polygon(0 6%,99% 0,100% 92%,1% 100%); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:26px; }
.trust-strip{ display:flex; flex-wrap:wrap; gap:9px 10px; list-style:none; padding:0; margin:0; }
.trust-strip li{ font-family:var(--font-mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink); background:var(--yellow); border:1.5px solid var(--ink); padding:6px 11px; display:flex; align-items:center; gap:7px;
  transform:rotate(var(--tr,-1.5deg)); box-shadow:2px 2px 0 var(--ink); }
.trust-strip li:nth-child(2){ --tr:1.4deg; background:var(--surface); }
.trust-strip li:nth-child(3){ --tr:-1deg; background:var(--tape-pink); }
.trust-strip li:nth-child(4){ --tr:2deg; background:var(--surface); }
.trust-strip li::before{ content:""; width:7px; height:7px; background:var(--pink); box-shadow:1px 1px 0 var(--ink); }

/* torn poster cluster */
.hero-wall{ position:relative; min-width:0; height:min(62vh,500px); z-index:3; }
@media (max-width:1023px){ .hero-wall{ height:clamp(300px,60vw,430px); } }
.hero-wall .wall-tile{ position:absolute; background:#fff; padding:8px; box-shadow:0 20px 40px -22px rgba(26,22,16,.7);
  transform:rotate(var(--r,0)); border:none;
  clip-path:polygon(2% 4%,22% 1%,50% 3%,76% 0,99% 5%,97% 32%,100% 64%,97% 97%,74% 99%,48% 96%,24% 100%,2% 95%,0 64%,3% 32%);
  animation:none; opacity:1; }
.hero-wall .wall-tile::after{ content:""; position:absolute; inset:8px; mix-blend-mode:multiply; pointer-events:none;
  background:linear-gradient(140deg, rgba(32,59,224,.28), rgba(255,46,126,.24)); }
.hero-wall .wall-tile img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(.9); }
.hero-wall .wall-tile::before{ content:""; position:absolute; top:-10px; left:28%; width:62px; height:20px;
  background:var(--tape); transform:rotate(-6deg); border:1px solid rgba(255,255,255,.4); z-index:2; }
.hero-wall .wall-tile.big{ width:min(52%,258px); left:30%; top:4%;  --r:-4deg; z-index:6; }
.hero-wall .wall-tile.tall{ width:min(40%,196px); left:2%;  top:14%; --r:6deg;  z-index:5; }
.hero-wall .wall-tile:nth-child(3){ width:min(42%,208px); left:42%; top:46%; --r:5deg;  z-index:7; }
.hero-wall .wall-tile:nth-child(4){ width:min(34%,168px); left:6%;  top:52%; --r:-8deg; z-index:6; }
.hero-wall .wall-tile:nth-child(5){ width:min(30%,150px); left:64%; top:60%; --r:7deg;  z-index:5; }
.hero-scroll{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:8;
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); background:var(--tape); padding:6px 12px; border:1px solid rgba(0,0,0,.15);
  animation:cineBob 2s ease-in-out infinite; }
@keyframes cineBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ============================================================
   FILTER BAR — taped index card
   ============================================================ */
.filter-wrap{ position:relative; padding:clamp(24px,4vw,44px) 0 0; }
.filter-bar{ position:relative; z-index:2; background:var(--surface); border:2px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink); padding:18px clamp(14px,2vw,22px); display:grid; gap:14px; transform:rotate(-.5deg); }
.filter-bar::before{ content:""; position:absolute; top:-12px; left:24px; width:96px; height:24px; background:var(--tape); transform:rotate(-4deg); border:1px solid rgba(255,255,255,.4); }
.filter-bar::after{ content:""; position:absolute; top:-12px; right:24px; width:80px; height:24px; background:var(--tape-blue); transform:rotate(3deg); border:1px solid rgba(255,255,255,.4); }
.filter-row{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:end; }
.filter-field{ display:flex; flex-direction:column; gap:6px; min-width:130px; flex:1 1 130px; }
.filter-field label{ font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.filter-field select{ appearance:none; -webkit-appearance:none;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1610' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--ink); border:2px solid var(--ink); padding:10px 28px 10px 12px; font-family:var(--font-mono); font-size:.86rem; font-weight:600; }
.filter-field select:focus{ outline:none; box-shadow:3px 3px 0 var(--pink); }
.filter-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filter-count{ font-family:var(--font-mono); font-weight:700; font-size:.78rem; color:var(--ink); background:var(--yellow);
  border:1.5px solid var(--ink); padding:5px 10px; min-width:8ch; font-variant-numeric:tabular-nums; text-align:center; }
.filter-reset{ background:var(--paper); border:2px solid var(--ink); color:var(--ink); font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; text-transform:uppercase; padding:8px 14px; box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s var(--ease); }
.filter-reset:hover{ background:var(--pink); color:#fff; transform:translate(-1px,-1px); }

/* ============================================================
   CATALOG — torn-edge poster cut-outs, tape + staples
   ============================================================ */
.catalog-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 18px; }
.poster-card{ position:relative; min-width:0; background:var(--surface); border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink); display:flex; flex-direction:column;
  transform:rotate(var(--cardr,-1deg)); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.poster-card:nth-child(4n+2){ --cardr:1.2deg; box-shadow:6px 6px 0 var(--blue); }
.poster-card:nth-child(4n+3){ --cardr:-1.6deg; }
.poster-card:nth-child(4n){ --cardr:1.6deg; box-shadow:6px 6px 0 var(--teal); }
.poster-card::before{ /* staple top */ content:""; position:absolute; top:-2px; left:22px; width:22px; height:9px;
  border:2px solid rgba(26,22,16,.6); border-bottom:none; border-radius:2px 2px 0 0; z-index:5; }
.poster-card:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:9px 9px 0 var(--ink); z-index:6; }
.poster-media{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--surface-2); margin:10px 10px 0;
  border:1.5px solid var(--ink); }
.poster-media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.92); transition:transform .5s var(--ease); }
.poster-media::before{ /* tape corner */ content:""; position:absolute; top:-8px; right:14px; width:56px; height:18px;
  background:var(--tape); transform:rotate(6deg); border:1px solid rgba(255,255,255,.4); z-index:3; }
.poster-media::after{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(255,46,126,.28), transparent 55%);
  opacity:0; transition:opacity .3s var(--ease); }
.poster-card:hover .poster-media img{ transform:scale(1.05) rotate(-.6deg); }
.poster-card:hover .poster-media::after{ opacity:1; }
.poster-tag{ position:absolute; top:8px; left:8px; z-index:4; font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:#fff; padding:5px 11px 5px 8px;
  transform:rotate(-3deg); box-shadow:2px 2px 0 var(--pink); }
.poster-tag.tag-teal{ background:var(--blue); box-shadow:2px 2px 0 var(--yellow); }
.poster-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.poster-name{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; line-height:1.12; text-transform:uppercase; }
.poster-meta{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); letter-spacing:.03em; display:flex; flex-wrap:wrap; gap:5px 8px; }
.poster-meta span{ background:var(--paper); border:1px solid var(--line-strong); padding:2px 6px; }
.poster-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1.5px dashed var(--line-strong); }
.poster-price{ font-family:var(--font-mono); font-weight:700; font-size:1.06rem; color:var(--pink-ink); font-variant-numeric:tabular-nums; }
.poster-price small{ color:var(--ink-faint); font-size:.6rem; font-weight:400; display:block; letter-spacing:.03em; }
.poster-order{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; text-transform:uppercase;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink); padding:8px 12px; box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s var(--ease), background .2s var(--ease); }
.poster-order:hover{ background:var(--pink); color:#fff; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.compare-toggle{ display:flex; align-items:center; gap:7px; padding:0 14px 14px; font-family:var(--font-mono); font-size:.66rem;
  font-weight:600; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.03em; cursor:pointer; }
.compare-toggle input[type="checkbox"]{ appearance:auto; -webkit-appearance:auto; accent-color:var(--blue);
  width:16px; height:16px; min-width:16px; min-height:16px; padding:0; border:0; margin:0; }
.catalog-empty{ grid-column:1/-1; text-align:center; padding:46px 20px; color:var(--ink-soft); font-family:var(--font-mono);
  font-size:.9rem; border:2px dashed var(--ink); background:var(--surface); }

/* compare bar / modal */
.compare-bar{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,160%); z-index:900;
  width:min(760px,calc(100vw - 32px)); background:var(--surface); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--blue);
  padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; opacity:0;
  transition:transform .32s var(--ease), opacity .28s var(--ease); }
.compare-bar.is-visible{ transform:translate(-50%,0); opacity:1; }
.compare-bar .cb-label{ font-family:var(--font-mono); font-size:.74rem; font-weight:700; text-transform:uppercase; color:var(--ink); letter-spacing:.04em; }
.compare-bar .cb-chips{ display:flex; gap:8px; flex:1; flex-wrap:wrap; min-width:0; }
.cb-chip{ font-family:var(--font-mono); font-size:.7rem; font-weight:600; background:var(--yellow); border:1.5px solid var(--ink);
  padding:6px 10px; display:inline-flex; align-items:center; gap:7px; color:var(--ink); }
.cb-chip button{ background:none; border:none; color:var(--pink-ink); font-size:1rem; line-height:1; padding:0; }
.compare-bar .btn{ padding:11px 18px; transform:none; box-shadow:3px 3px 0 var(--ink); }
.compare-bar .btn::before{ display:none; }
.compare-bar .btn:disabled{ opacity:.5; cursor:not-allowed; }
.compare-modal{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(20,17,10,.72); }
.compare-modal.is-open{ display:flex; }
.compare-inner{ background:var(--surface); border:3px solid var(--ink); box-shadow:10px 10px 0 var(--pink);
  width:min(820px,100%); max-height:88vh; overflow-y:auto; padding:clamp(18px,3vw,30px); }
.compare-inner .cm-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.compare-inner .cm-close{ background:var(--yellow); border:2px solid var(--ink); color:var(--ink); width:42px; height:42px;
  font-size:1.3rem; line-height:1; box-shadow:2px 2px 0 var(--ink); }
.compare-inner .cm-close:hover{ background:var(--pink); color:#fff; }
.cm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cm-col{ border:2px solid var(--ink); overflow:hidden; background:var(--paper); }
.cm-col img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:contrast(1.08) saturate(.92); }
.cm-col .cm-info{ padding:14px; }
.cm-col h4{ font-size:1rem; margin-bottom:10px; text-transform:uppercase; }
.cm-col dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
.cm-col dt{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.cm-col dd{ margin:0; font-size:.82rem; text-align:right; }
.cm-col dd.price{ color:var(--pink-ink); font-family:var(--font-mono); font-weight:700; }

/* ============================================================
   COLLECTIONS — pasted photo scraps
   ============================================================ */
.collections{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px 18px; }
.col-card{ position:relative; min-width:0; overflow:hidden; border:2px solid var(--ink); background:var(--surface-2);
  display:flex; align-items:flex-end; min-height:260px; box-shadow:6px 6px 0 var(--ink);
  transform:rotate(var(--cr,-1deg)); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.col-card::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg); width:70px; height:20px;
  background:var(--tape); border:1px solid rgba(255,255,255,.4); z-index:3; }
.col-b{ --cr:1.3deg; box-shadow:6px 6px 0 var(--blue); } .col-c{ --cr:-1.4deg; }
.col-d{ --cr:1.5deg; box-shadow:6px 6px 0 var(--teal); } .col-e{ --cr:-1.2deg; box-shadow:6px 6px 0 var(--orange); }
.col-card:hover{ transform:rotate(0) translateY(-4px); box-shadow:9px 9px 0 var(--ink); z-index:4; }
.col-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(.85);
  transition:transform .6s var(--ease); }
.col-card:hover img{ transform:scale(1.06); }
.col-card .col-inner{ position:relative; z-index:1; padding:20px; width:100%;
  background:linear-gradient(to top, rgba(20,17,10,.9) 24%, rgba(20,17,10,0)); }
.col-card h3{ font-size:1.3rem; margin-bottom:6px; color:#fff; text-transform:uppercase; }
.col-card p{ color:rgba(255,255,255,.86); font-size:.86rem; margin:0; }
.col-card .col-count{ font-family:var(--font-mono); font-size:.66rem; font-weight:700; color:var(--yellow); letter-spacing:.08em;
  display:inline-block; margin-top:10px; background:rgba(0,0,0,.4); padding:2px 7px; }
.col-a{ grid-column:span 4; min-height:340px; } .col-b,.col-c,.col-d,.col-e{ grid-column:span 2; }

/* ============================================================
   TABLE
   ============================================================ */
.about-hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,50px); align-items:center; }
.about-hero .ah-media{ overflow:hidden; border:2px solid var(--ink); box-shadow:8px 8px 0 var(--pink); aspect-ratio:4/5;
  transform:rotate(1.2deg); position:relative; }
.about-hero .ah-media::before{ content:""; position:absolute; top:-10px; left:30%; width:80px; height:22px; background:var(--tape);
  transform:rotate(-4deg); z-index:2; border:1px solid rgba(255,255,255,.4); }
.about-hero .ah-media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.92); }
.table-scroll{ display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:18px 0; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--surface); }
.table-scroll > table{ margin:0 !important; min-width:560px; width:100%; border-collapse:collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)){ min-width:0; }
table th, table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:top; }
table thead th{ font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ink); white-space:nowrap; }
table tbody tr:nth-child(even){ background:rgba(32,59,224,.05); }
table tbody tr:hover{ background:rgba(255,46,126,.08); }
table td:first-child{ font-weight:700; color:var(--ink); }
table .cell-mono{ font-family:var(--font-mono); color:var(--ink-soft); }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{ display:grid; gap:0; max-width:900px; }
.tl-step{ display:grid; grid-template-columns:96px 1fr; gap:22px; padding:22px 0; border-bottom:1.5px dashed var(--line-strong); position:relative; }
.tl-step:last-child{ border-bottom:none; }
.tl-num{ font-family:var(--font-head); font-weight:700; font-size:2.4rem; line-height:1; color:var(--ink);
  background:var(--yellow); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:6px 8px; height:max-content;
  transform:rotate(-3deg); text-align:center; }
.tl-num .tl-when{ font-family:var(--font-mono); font-size:.56rem; font-weight:700; color:var(--pink-ink); letter-spacing:.06em;
  display:block; margin-top:4px; text-transform:uppercase; }
.tl-body h3{ font-size:1.16rem; margin-bottom:6px; text-transform:uppercase; }
.tl-body p{ color:var(--ink-soft); margin:0; font-size:.94rem; }

/* ============================================================
   PRICING — cut riso tickets
   ============================================================ */
.pricing{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.price-card{ background:var(--surface); border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:26px 22px;
  display:flex; flex-direction:column; gap:14px; position:relative; transform:rotate(var(--pr,-.8deg));
  transition:transform .2s var(--ease); }
.price-card:nth-child(2){ --pr:0deg; }
.price-card:nth-child(3){ --pr:.8deg; box-shadow:7px 7px 0 var(--blue); }
.price-card:hover{ transform:rotate(0) translateY(-4px); }
.price-card.featured{ box-shadow:7px 7px 0 var(--pink); border-color:var(--ink); background:var(--paper); }
.price-card .pc-flag{ align-self:flex-start; font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:var(--pink); color:#fff; padding:5px 11px; border:2px solid var(--ink); transform:rotate(-2deg); box-shadow:2px 2px 0 var(--ink); }
.price-card h3{ font-size:1.3rem; margin:0; text-transform:uppercase; }
.price-card .pc-price{ font-family:var(--font-mono); font-weight:700; font-size:2rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.price-card .pc-price small{ display:block; font-size:.64rem; color:var(--ink-faint); font-weight:400; letter-spacing:.05em; margin-top:3px; }
.price-card .pc-desc{ color:var(--ink-soft); font-size:.88rem; margin:0; }
.pc-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pc-list li{ position:relative; padding-left:22px; font-size:.86rem; color:var(--ink-soft); }
.pc-list li::before{ content:"✚"; position:absolute; left:2px; top:0; color:var(--teal-ink); font-weight:700; }
.pc-list li.no{ color:var(--ink-faint); }
.pc-list li.no::before{ content:"✕"; color:var(--orange-ink); }
.pc-note{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); letter-spacing:.02em; }
.pc-teslim{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--blue-ink); }

/* ============================================================
   REVIEWS — pinned buyer polaroids
   ============================================================ */
.reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.review-card{ background:#fff; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); display:flex; flex-direction:column;
  padding:8px; transform:rotate(var(--rr,-1.4deg)); position:relative; }
.review-card:nth-child(2){ --rr:1.4deg; transform:rotate(1.4deg) translateY(18px); box-shadow:6px 6px 0 var(--blue); }
.review-card:nth-child(3){ --rr:-1deg; box-shadow:6px 6px 0 var(--teal); }
.review-card::before{ content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-4deg); width:80px; height:22px;
  background:var(--tape); border:1px solid rgba(255,255,255,.4); z-index:3; }
.review-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); border:1.5px solid var(--ink); }
.review-photo img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.9); }
.review-body{ padding:16px 12px 12px; display:flex; flex-direction:column; gap:12px; flex:1; }
.review-body p{ color:var(--ink); font-size:.9rem; margin:0; }
.review-meta{ margin-top:auto; }
.review-meta strong{ font-family:var(--font-head); font-weight:700; font-size:.96rem; display:block; text-transform:uppercase; }
.review-meta span{ font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); letter-spacing:.03em; }
.stars{ color:var(--orange); font-size:.9rem; letter-spacing:2px; }

/* ============================================================
   NOTES
   ============================================================ */
.notes{ display:grid; gap:2px; max-width:800px; }
.note-item{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px; border:1.5px dashed var(--line-strong);
  background:var(--surface); margin-bottom:8px; transform:rotate(var(--nr,-.5deg)); }
.note-item:nth-child(even){ --nr:.6deg; }
.note-date{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--pink-ink); letter-spacing:.02em; }
.note-item p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.note-item strong{ color:var(--ink); }

/* ============================================================
   FAQ — folder tabs
   ============================================================ */
.faq{ max-width:840px; }
.faq-item{ border:2px solid var(--ink); background:var(--surface); margin-bottom:12px; box-shadow:4px 4px 0 var(--ink);
  transform:rotate(var(--fr,-.4deg)); }
.faq-item:nth-child(even){ --fr:.5deg; box-shadow:4px 4px 0 var(--blue); }
.faq-item summary{ list-style:none; cursor:pointer; padding:18px 46px 18px 18px; position:relative;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--ink); text-transform:uppercase; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:1.5rem; color:var(--pink-ink); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--pink-ink); }
.faq-item .answer{ height:0; overflow:hidden; padding:0 18px; transition:height .36s var(--ease2), padding-block-end .36s var(--ease2); }
.faq-item[open] .answer{ height:auto; padding-block-end:20px; }
.faq-item .answer p{ color:var(--ink-soft); margin:0; font-size:.94rem; }
.faq-item .answer a{ color:var(--pink-ink); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .faq-item .answer{ transition:none; } }

/* ============================================================
   FORM — pasted order slip
   ============================================================ */
.form-wrap{ background:var(--surface); border:2px solid var(--ink); box-shadow:8px 8px 0 var(--ink);
  padding:clamp(22px,3vw,34px); position:relative; transform:rotate(-.4deg); }
.form-wrap::before{ content:""; position:absolute; top:-13px; left:36px; width:110px; height:26px; background:var(--tape);
  transform:rotate(-3deg); border:1px solid rgba(255,255,255,.4); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field select,.field textarea{ background:var(--paper); border:2px solid var(--ink); color:var(--ink);
  padding:12px 13px; font-family:var(--font-mono); font-size:.92rem; width:100%; transition:box-shadow .15s var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--pink); }
.field textarea{ resize:vertical; min-height:120px; font-family:var(--font-body); }
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1610' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }
.field.kvkk{ flex-direction:row; align-items:flex-start; gap:10px; }
.field.kvkk label{ text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:.84rem; color:var(--ink-soft); line-height:1.5; }
.field.kvkk a{ color:var(--pink-ink); text-decoration:underline; }
.field input[type="checkbox"]{ appearance:auto; -webkit-appearance:auto; width:18px; height:18px; min-width:18px; min-height:18px;
  padding:0; border:0; margin:2px 0 0; accent-color:var(--pink); }
.form-submit{ margin-top:20px; }
.form-submit .btn{ width:100%; }
@media (min-width:640px){ .form-submit .btn{ width:auto; } }

/* ============================================================
   CONTACT / ABOUT / prose (subpages)
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--gap); }
.contact-card{ background:var(--surface); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:22px;
  transform:rotate(-.6deg); transition:transform .2s var(--ease); }
.contact-card:nth-child(even){ transform:rotate(.6deg); box-shadow:5px 5px 0 var(--blue); }
.contact-card:hover{ transform:rotate(0) translateY(-3px); }
.contact-card .cc-ico{ width:46px; height:46px; background:var(--yellow); border:2px solid var(--ink); display:flex;
  align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.1rem; color:var(--ink); margin-bottom:14px; font-weight:700; box-shadow:2px 2px 0 var(--ink); }
.contact-card h3{ font-size:1.02rem; margin-bottom:6px; text-transform:uppercase; }
.contact-card a,.contact-card p{ color:var(--ink-soft); font-size:.9rem; margin:0 0 4px; word-break:break-word; }
.contact-card a:hover{ color:var(--pink-ink); }
.contact-card .cc-sub{ font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); letter-spacing:.03em; }
.hours-grid{ display:grid; gap:4px; }
.hours-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 12px; border:1.5px solid var(--ink); background:var(--surface); font-size:.88rem; }
.hours-row.today{ background:var(--yellow); }
.hours-row .h-time{ font-family:var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-row{ display:flex; flex-wrap:wrap; gap:26px 40px; margin:26px 0; }
.stat .stat-num{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--pink-ink);
  line-height:1; font-variant-numeric:tabular-nums; min-width:4ch; display:inline-block; }
.stat .stat-lbl{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft); letter-spacing:.05em; display:block; margin-top:6px; text-transform:uppercase; }
.team{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.team-card{ background:#fff; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); overflow:hidden; padding:8px;
  transform:rotate(var(--tr,-1deg)); }
.team-card:nth-child(even){ --tr:1deg; box-shadow:5px 5px 0 var(--blue); }
.team-card .tc-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); border:1.5px solid var(--ink); }
.team-card .tc-photo img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.9); }
.team-card .tc-info{ padding:14px 10px 10px; }
.team-card h3{ font-size:1.1rem; margin-bottom:3px; text-transform:uppercase; }
.team-card .tc-role{ font-family:var(--font-mono); font-size:.64rem; color:var(--blue-ink); letter-spacing:.06em; text-transform:uppercase; }
.team-card p{ color:var(--ink-soft); font-size:.86rem; margin:12px 0 0; }
.prose{ max-width:760px; line-height:1.7; }
.prose h2{ font-size:clamp(1.4rem,3vw,2rem); margin-top:1.8em; text-transform:uppercase; }
.prose h3{ font-size:1.15rem; margin-top:1.4em; }
.prose p,.prose li{ color:var(--ink-soft); font-size:.96rem; line-height:1.7; }
.prose p{ margin-bottom:1.15em; }
.prose ul{ padding-left:20px; } .prose li{ margin-bottom:8px; }
.prose a{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }
.page-hero{ padding:clamp(40px,7vw,80px) 0 clamp(20px,3vw,34px); position:relative; }
.page-hero h1{ font-size:clamp(2.2rem,6vw,4rem); text-transform:uppercase; }
.page-hero p{ color:var(--ink-soft); max-width:60ch; }
.sitemap-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.sitemap-cols h3{ font-size:1rem; margin-bottom:12px; color:var(--pink-ink); text-transform:uppercase; }
.sitemap-cols ul{ list-style:none; padding:0; margin:0; }
.sitemap-cols li{ padding:6px 0; border-bottom:1px dashed var(--line-strong); }
.sitemap-cols a{ color:var(--ink-soft); font-size:.92rem; }
.sitemap-cols a:hover{ color:var(--pink-ink); }
.err-wrap{ min-height:62vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.err-wrap .err-code{ font-family:var(--font-head); font-weight:700; font-size:clamp(5rem,18vw,11rem); color:var(--ink);
  line-height:1; letter-spacing:-.03em; text-shadow:6px -4px 0 var(--orange), -6px 4px 0 var(--blue); }

/* ============================================================
   FOOTER — pasted colophon
   ============================================================ */
.site-footer{ background:var(--paper-dark); color:rgba(243,238,223,.8); padding:clamp(44px,6vw,72px) 0 28px; margin-top:40px;
  border-top:4px solid var(--ink); position:relative; }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:-4px; height:8px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 16px,var(--blue) 16px 32px,var(--yellow) 32px 48px); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.footer-brand .brand{ margin-bottom:14px; color:#fff; }
.footer-brand .brand small{ color:var(--ink); }
.footer-brand p{ color:rgba(243,238,223,.66); font-size:.9rem; max-width:34ch; }
.footer-col h4{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); font-weight:700; margin-bottom:14px; }
.footer-col a{ display:block; color:rgba(243,238,223,.72); font-size:.9rem; padding:5px 0; transition:color .2s var(--ease), padding-left .2s var(--ease); }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-col p{ color:rgba(243,238,223,.72); font-size:.88rem; margin:0 0 8px; word-break:break-word; }
.footer-bottom{ margin-top:40px; padding-top:22px; border-top:1px dashed rgba(243,238,223,.24);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
.footer-bottom p{ color:rgba(243,238,223,.55); font-size:.78rem; margin:0; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.footer-legal a{ display:inline; color:rgba(243,238,223,.6); font-size:.78rem; }
.footer-legal a:hover{ color:var(--yellow); }
.footer-reg{ font-family:var(--font-mono); font-size:.7rem; color:rgba(243,238,223,.5); letter-spacing:.02em; }

/* ============================================================
   COOKIE — pasted note
   ============================================================ */
.cookie-banner{ position:fixed; bottom:16px; left:16px; right:16px; max-width:520px; margin:0 auto;
  background:var(--surface); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:20px; z-index:9999;
  transform:translateY(160%); opacity:0; transition:transform .28s var(--ease), opacity .24s var(--ease); }
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; }
.cookie-banner h4{ font-size:1rem; margin-bottom:8px; text-transform:uppercase; }
.cookie-banner p{ color:var(--ink-soft); font-size:.84rem; margin:0 0 14px; }
.cookie-banner p a{ color:var(--pink-ink); text-decoration:underline; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:9px; }
.cookie-actions button{ flex:1 1 auto; min-height:44px; font-family:var(--font-mono); font-size:.76rem; font-weight:700;
  text-transform:uppercase; padding:11px 16px; border:2px solid var(--ink); transition:transform .15s var(--ease); }
.cookie-actions [data-consent="accept"]{ background:var(--ink); color:#fff; box-shadow:3px 3px 0 var(--pink); }
.cookie-actions [data-consent="accept"]:hover{ transform:translate(-1px,-1px); }
.cookie-actions [data-consent="reject"]{ background:var(--paper); color:var(--ink); }
.cookie-actions [data-consent="reject"]:hover{ background:var(--yellow); }
.cookie-actions [data-consent="settings"]{ background:transparent; color:var(--ink-soft); border-color:transparent; text-decoration:underline; }
@media (min-width:720px){ .cookie-banner{ left:24px; right:auto; max-width:420px; } }

/* ============================================================
   EPIC — POSTER-WALL ASSEMBLE (pinned print-run scene)
   ============================================================ */
.wall-track{ height:300vh; position:relative; }
.cine-pin.wall-pin{ background:
  radial-gradient(rgba(26,22,16,.06) 1px, transparent 1.7px) 0 0/7px 7px,
  radial-gradient(120% 90% at 50% 36%, var(--surface), var(--bg) 78%); }
.wall-scene{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr .78fr; gap:clamp(20px,3vw,44px); align-items:center; }
@media (max-width:960px){ .wall-scene{ grid-template-columns:1fr; } }
.wall-stage{ position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin-inline:auto; }
.wall-stage .wp{ position:absolute; background:#fff; padding:6px; box-shadow:0 16px 30px -18px rgba(26,22,16,.7);
  will-change:transform,opacity; overflow:hidden;
  clip-path:polygon(3% 4%,26% 1%,52% 4%,80% 0,98% 6%,96% 34%,100% 66%,97% 97%,72% 99%,44% 96%,20% 100%,2% 94%,0 62%,4% 30%); }
.wall-stage .wp img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(.88); }
.wall-stage .wp::after{ content:""; position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(140deg, var(--l1,rgba(32,59,224,.35)), var(--l2,rgba(255,46,126,.3))); }
.wall-stage .wp .tp{ position:absolute; top:-4px; left:30%; width:52px; height:16px; background:var(--tape); transform:rotate(-6deg); z-index:2; border:1px solid rgba(255,255,255,.4); }
/* wall grid slots (final positions) */
.wp-0{ width:32%; left:0;    top:0;   }
.wp-1{ width:32%; left:34%;  top:0;   }
.wp-2{ width:32%; left:68%;  top:0;   }
.wp-3{ width:32%; left:0;    top:26%; }
.wp-4{ width:32%; left:34%;  top:26%; }
.wp-5{ width:32%; left:68%;  top:26%; }
.wp-6{ width:32%; left:0;    top:52%; }
.wp-7{ width:32%; left:34%;  top:52%; }
.wp-8{ width:32%; left:68%;  top:52%; }
.wp-9{ width:32%; left:0;    top:78%; }
.wp-10{ width:32%; left:34%; top:78%; }
.wp-11{ width:32%; left:68%; top:78%; }
.wall-cap{ position:relative; z-index:4; }
.wall-cap .eyebrow{ margin-bottom:14px; }
.wall-cap h2{ font-size:clamp(1.8rem,4.4vw,3rem); }
.wall-cap p{ color:var(--ink-soft); max-width:44ch; }
.wall-readout{ margin-top:18px; display:inline-grid; grid-template-columns:auto auto; gap:8px 18px; align-items:center;
  font-family:var(--font-mono); font-weight:700; background:var(--surface); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:14px 18px; }
.wall-readout .rk{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.wall-readout .rv{ font-size:1.5rem; color:var(--pink-ink); font-variant-numeric:tabular-nums; text-align:right; min-width:5ch; }
.wall-readout .rv.blue{ color:var(--blue-ink); }
.wall-bar{ grid-column:1/-1; height:12px; background:var(--surface-3); border:1.5px solid var(--ink); overflow:hidden; margin-top:4px; }
.wall-bar > i{ display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,var(--pink) 0 10px,var(--blue) 10px 20px); }
.wall-c{ opacity:0; transform:translateY(20px); }
@media (max-width:600px){ .wall-stage{ max-width:340px; } }

/* ============================================================
   PRELOADER + motes
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:10000; background:var(--paper); display:grid; place-items:center;
  transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ text-align:center; }
#pre .pl-mark{ font-family:var(--font-head); font-weight:700; font-size:clamp(34px,8vw,64px); letter-spacing:-.02em;
  color:var(--ink); text-shadow:5px -4px 0 var(--orange), -5px 4px 0 var(--blue); }
#pre .pl-sub{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px; }
#pre .pl-bar{ margin:22px auto 0; width:min(240px,60vw); height:14px; border:2px solid var(--ink); background:var(--surface); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0; background:repeating-linear-gradient(90deg,var(--pink) 0 12px,var(--blue) 12px 24px);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:multiply; opacity:.4; }

/* ============================================================
   REVEAL / motion
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i,0) * 80ms); }
.reveal.is-in{ opacity:1; transform:none; }
html.no-js .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-scroll{ animation:none; }
  .wall-c{ opacity:1; transform:none; }
  * { scroll-behavior:auto !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){ .footer-top{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:1024px){
  .nav-desktop{ display:none; } .nav-toggle{ display:block; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-wall{ max-width:540px; margin:0 auto; }
  .about-hero{ grid-template-columns:1fr; }
  .about-hero .ah-media{ max-width:460px; aspect-ratio:4/3; }
  .catalog-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .collections{ grid-template-columns:repeat(4,1fr); }
  .col-a{ grid-column:span 4; } .col-b,.col-c,.col-d,.col-e{ grid-column:span 2; }
}
@media (max-width:820px){
  .pricing{ grid-template-columns:1fr; }
  .reviews{ grid-template-columns:1fr; }
  .review-card:nth-child(2){ transform:rotate(1.4deg); }
  .team{ grid-template-columns:1fr 1fr; }
  .cm-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .catalog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:24px; }
  .collections{ grid-template-columns:repeat(2,1fr); }
  .col-a,.col-b,.col-c,.col-d,.col-e{ grid-column:span 2; min-height:220px; }
}
@media (max-width:560px){
  .note-item{ grid-template-columns:1fr; gap:4px; }
  .tl-step{ grid-template-columns:66px 1fr; gap:14px; }
  .tl-num{ font-size:1.7rem; }
  .team{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hero .hero-sub{ transform:rotate(-.4deg); }
  .filter-field{ flex:1 1 100%; min-width:0; }
  .cm-grid{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .catalog-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.5rem; }
}

/* mobile: un-pin hero so it flows (kills empty gap from tall pinned track) */
@media (max-width:1023px){
  .hero-cine{ height:auto; }
  .cine-pin.hero-pin{ position:static; height:auto; min-height:0; overflow:visible; display:block; place-items:stretch; padding:20px 0 36px; }
  .hero-scroll{ display:none; }
}