/* =========================================================
   Just Plastic Cards — design system
   Type: Archivo (variable width) · Instrument Serif · IBM Plex Mono
   Palette: card-stock paper, process inks (C/M/Y/K), stone
   ========================================================= */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-normal-100_900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-normal-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f2efe8;
  --paper-hi: #faf8f3;
  --stone: #e4ded1;
  --stone-2: #d6cebd;
  --ink: #121211;
  --ink-2: #1c1c1a;
  --ink-3: #2a2926;
  --mute: #5a574e;
  --mute-on-ink: #aaa69b;
  --c: #00a3e0;
  --m: #e6007e;
  --m-text: #b5005e;
  --y: #ffd400;
  --rule: rgba(18, 18, 17, .16);
  --rule-ink: rgba(242, 239, 232, .16);

  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --card-r: 3.7% / 5.9%; /* ISO ID-1 corner radius 3.18mm */
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans); font-size: 17px; line-height: 1.6; font-stretch: 100%;
  color: var(--ink); background: var(--paper);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
/* card-stock grain over everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
::selection { background: var(--y); color: var(--ink); }
:focus-visible { outline: 3px solid var(--m); outline-offset: 3px; }
.on-ink :focus-visible, .on-ink:focus-visible { outline-color: var(--y); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: .7rem 1rem; background: var(--y); color: var(--ink); font: 600 .85rem/1 var(--mono); text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Type ---------- */
.display, h1 {
  font-family: var(--display); font-weight: 800; font-stretch: 116%;
  font-size: clamp(2.7rem, 7.4vw, 7.6rem); line-height: .9; letter-spacing: -.045em;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--display); font-weight: 760; font-stretch: 110%;
  font-size: clamp(2.05rem, 4.4vw, 4.3rem); line-height: .96; letter-spacing: -.04em; text-wrap: balance;
}
h3, .h3 { font-family: var(--display); font-weight: 700; font-stretch: 104%; font-size: 1.32rem; line-height: 1.15; letter-spacing: -.018em; }
h1 em, h2 em, .display em, .statement em, .quote-line em {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  letter-spacing: -.02em; font-size: 1.06em; line-height: .8;
}
.lede { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5; max-width: 38ch; color: var(--ink-3); text-wrap: pretty; }
.on-ink .lede { color: #d9d5cb; }
.label {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.25rem;
  font: 500 .74rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.label::before { content: ""; width: .7em; height: .7em; flex: none; background: var(--chip, var(--m)); }
.label.c { --chip: var(--c); } .label.y { --chip: var(--y); } .label.k { --chip: var(--ink); }
.on-ink .label { color: var(--mute-on-ink); }
.on-ink .label.k { --chip: var(--paper); }
.mono { font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; }
.muted { color: var(--mute); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper-hi);
  position: relative; display: inline-flex; align-items: center; gap: .8rem;
  min-height: 52px; padding: .85rem 1.3rem; border: 1.5px solid var(--ink);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 650 .98rem/1.1 var(--sans); font-stretch: 108%; letter-spacing: -.005em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .25s var(--ease); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--m), -2px -2px 0 rgba(0,163,224,.85); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: none; box-shadow: none; }
.btn--ghost { --bg: transparent; --fg: var(--ink); }
.btn--y { --bg: var(--y); --fg: var(--ink); border-color: var(--y); }
.btn--paper { --bg: var(--paper-hi); --fg: var(--ink); border-color: var(--paper-hi); }
.on-ink .btn--ghost { --fg: var(--paper-hi); border-color: rgba(242,239,232,.5); }
.on-ink .btn:hover { box-shadow: 4px 4px 0 var(--m), -2px -2px 0 var(--c); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 650; text-decoration: underline; text-decoration-color: var(--m); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.colourbar { display: grid; grid-template-columns: repeat(4, 1fr) 2fr repeat(4, .5fr); height: 5px; }
.colourbar i:nth-child(1) { background: var(--c); } .colourbar i:nth-child(2) { background: var(--m); }
.colourbar i:nth-child(3) { background: var(--y); } .colourbar i:nth-child(4) { background: var(--ink); }
.colourbar i:nth-child(5) { background: transparent; }
.colourbar i:nth-child(6) { background: rgba(0,163,224,.45); } .colourbar i:nth-child(7) { background: rgba(230,0,126,.45); }
.colourbar i:nth-child(8) { background: rgba(255,212,0,.55); } .colourbar i:nth-child(9) { background: rgba(18,18,17,.4); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 46px; height: auto; }
.brand-word { font: 800 1.08rem/0.95 var(--display); font-stretch: 112%; letter-spacing: -.035em; }
.brand-word b { color: var(--m); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { position: relative; padding: .55rem .8rem; font-weight: 560; font-size: .95rem; text-decoration: none; }
.nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .35rem; height: 2px; background: var(--m); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:not(.nav-cta):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links .nav-cta { margin-left: 12px; padding: .7rem 1.05rem; background: var(--ink); color: var(--paper-hi); font-weight: 650; font-stretch: 108%; }
.nav-links .nav-cta:hover { background: var(--m); }
.menu-button { display: none; margin-left: auto; align-items: center; gap: 10px; padding: .6rem .9rem; border: 1.5px solid var(--ink); background: transparent; font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.menu-button span { display: grid; gap: 4px; width: 16px; }
.menu-button span::before, .menu-button span::after { content: ""; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.menu-button[aria-expanded="true"] span::before { transform: translateY(2.75px) rotate(45deg); }
.menu-button[aria-expanded="true"] span::after { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 150px); position: relative; }
.section.tight { padding-block: clamp(48px, 6vw, 88px); }
.on-ink { background: var(--ink); color: var(--paper); }
.on-stone { background: var(--stone); }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head > :first-child { grid-column: 1 / span 7; }
.sec-head > p { grid-column: 9 / -1; color: var(--mute); max-width: 44ch; }
.on-ink .sec-head > p { color: var(--mute-on-ink); }

/* crop marks */
.crop { position: relative; }
.crop::before {
  content: ""; position: absolute; inset: -18px; pointer-events: none; z-index: 2;
  --cm: var(--ink); --l: 12px; --t: 1px;
  background:
    linear-gradient(var(--cm), var(--cm)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cm), var(--cm)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cm), var(--cm)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cm), var(--cm)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom right / var(--t) var(--l) no-repeat;
}
.on-ink .crop::before { --cm: var(--paper); opacity: .6; }

/* ---------- 3D card ---------- */
.card3d {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative; aspect-ratio: 85.6 / 53.98; border-radius: var(--card-r);
  background: var(--face, #fff) center / cover no-repeat, #f4f2ee;
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(0,0,0,.08) inset,
    0 1px 1px rgba(18,18,17,.18), 0 2px 0 #cfc9bd, 0 3px 0 #b9b2a5,
    0 18px 30px -12px rgba(18,18,17,.35), 0 40px 70px -30px rgba(18,18,17,.35);
  transition: transform .5s var(--ease);
  overflow: hidden;
}
.card3d.is-tilting { transition: transform .08s linear; }
.card3d::after { /* specular sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
              linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 60%);
  mix-blend-mode: soft-light;
}
.card3d.holo::before { /* holographic foil */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(110deg, rgba(0,163,224,.0) 0 6%, rgba(0,163,224,.35) 10%, rgba(230,0,126,.3) 16%, rgba(255,212,0,.35) 22%, rgba(0,163,224,0) 28%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge; opacity: .55;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0, transparent 70%);
          mask: radial-gradient(circle at var(--mx) var(--my), #000 0, transparent 70%);
}
.card3d.clear { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 20px 40px -18px rgba(18,18,17,.3); }
.card3d.clear > .face-img { mix-blend-mode: multiply; opacity: .9; }
.card3d > .face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card3d .print { position: absolute; z-index: 2; }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: clip; padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 100px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.hero-copy { grid-column: 1 / span 7; position: relative; z-index: 3; }
.hero-copy h1 { font-size: clamp(3.4rem, 10.2vw, 10.4rem); line-height: .84; margin-bottom: clamp(24px, 3vw, 40px); }
.hero-copy h1 .line { display: block; }
.hero-copy h1 em { color: var(--m); display: inline-block; padding-right: .06em; }
.hero-copy .lede { margin-bottom: 32px; }
.hero-deck { grid-column: 7 / -1; position: relative; z-index: 2; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: clamp(32px, 4vw, 56px); padding-top: 18px; border-top: 1px solid var(--rule); max-width: 640px; }
.hero-meta div { font: 400 .78rem/1.45 var(--mono); color: var(--mute); max-width: 30ch; }
.hero-meta strong { display: block; font: 700 1.05rem/1.2 var(--display); font-stretch: 110%; color: var(--ink); letter-spacing: -.01em; margin-bottom: 2px; }

.deck { --spread: 1; position: relative; aspect-ratio: 1 / .92; perspective: 1600px; }
.deck__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--drx, 8deg)) rotateY(var(--dry, -14deg)); transition: transform .6s var(--ease); }
.deck .card3d {
  position: absolute; left: 6%; bottom: 16%; width: 74%;
  transform-origin: 12% 88%;
  transform: translate3d(calc(var(--i) * 2.2% * var(--spread)), calc(var(--i) * -1.5% * var(--spread)), calc(var(--i) * 26px))
             rotate(calc((var(--i) - 4) * 9deg * var(--spread)));
  transition: transform .9s var(--ease);
}
.deck:not(.is-ready) .card3d { transform: translate3d(0, 0, calc(var(--i) * 4px)) rotate(0deg); }
.deck .card3d:nth-child(1) { --i: 0; } .deck .card3d:nth-child(2) { --i: 1; } .deck .card3d:nth-child(3) { --i: 2; }
.deck .card3d:nth-child(4) { --i: 3; } .deck .card3d:nth-child(5) { --i: 4; }
.deck .card3d:nth-child(2) { transition-delay: .05s; } .deck .card3d:nth-child(3) { transition-delay: .1s; }
.deck .card3d:nth-child(4) { transition-delay: .15s; } .deck .card3d:nth-child(5) { transition-delay: .2s; }
.deck .top-print { left: 7%; bottom: 11%; font: 800 clamp(.8rem, 1.5vw, 1.3rem)/1 var(--display); font-stretch: 116%; letter-spacing: -.03em; color: var(--ink); }
.deck .top-print b { color: var(--m); }
.deck .top-mono { right: 7%; top: 10%; font: 500 clamp(.5rem, .75vw, .66rem)/1.3 var(--mono); color: var(--mute); text-align: right; letter-spacing: .06em; }
.dim { position: absolute; font: 500 .7rem/1 var(--mono); color: var(--mute); letter-spacing: .06em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dim::before, .dim::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6; }
.dim--w { left: 6%; width: 74%; bottom: 7%; }
.deck-caption { position: absolute; right: 0; bottom: 0; font: 400 .72rem/1.4 var(--mono); color: var(--mute); text-align: right; max-width: 26ch; }
.reg-mark { position: absolute; width: 56px; height: 56px; color: var(--ink); opacity: .55; }

/* principles = 4 inks */
.inks { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.inks > div { position: relative; padding: 26px 24px 28px 0; }
.inks > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.inks > div::before { content: ""; display: block; width: 28px; height: 10px; margin-bottom: 18px; background: var(--ink-chip); }
.inks > div:nth-child(1) { --ink-chip: var(--c); } .inks > div:nth-child(2) { --ink-chip: var(--m); }
.inks > div:nth-child(3) { --ink-chip: var(--y); } .inks > div:nth-child(4) { --ink-chip: var(--ink); }
.inks strong { display: block; font: 700 1.12rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.015em; }
.inks span { display: block; margin-top: 4px; font: 400 .8rem/1.4 var(--mono); color: var(--mute); }

/* ---------- Range index ---------- */
.index { border-top: 1.5px solid var(--ink); counter-reset: idx; }
.index-row {
  position: relative; display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) 56px; gap: 24px; align-items: center;
  padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
  transition: padding .4s var(--ease), background .3s;
}
.index-row .n { font: 500 .78rem/1 var(--mono); color: var(--mute); letter-spacing: .06em; }
.index-row .n i { display: block; margin-top: 6px; font-style: normal; color: var(--m-text); }
.index-row h3 { font-size: clamp(1.6rem, 3.3vw, 3.1rem); font-stretch: 112%; font-weight: 760; letter-spacing: -.04em; line-height: 1; transition: transform .45s var(--ease); }
.index-row p { color: var(--mute); max-width: 42ch; }
.index-row .go { justify-self: end; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; transition: background .3s, color .3s, transform .45s var(--ease); }
.index-row .go svg { width: 18px; height: 18px; }
.index-row .thumb { display: none; }
a.index-row:hover h3 { transform: translateX(14px); }
a.index-row:hover .go { background: var(--ink); color: var(--paper); transform: rotate(-45deg); }
a.index-row:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,.45) 40%, transparent); }
.on-ink .index { border-top-color: var(--paper); }
.on-ink .index-row { border-bottom-color: var(--rule-ink); }
.on-ink .index-row p, .on-ink .index-row .n { color: var(--mute-on-ink); }
.on-ink .index-row .n i { color: var(--y); }
.on-ink .index-row .go { border-color: var(--paper); }
.on-ink a.index-row:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,.05) 40%, transparent); }
.on-ink a.index-row:hover .go { background: var(--y); color: var(--ink); border-color: var(--y); }
.peek {
  position: fixed; left: 0; top: 0; z-index: 60; width: 300px; pointer-events: none;
  opacity: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(-6deg) scale(.85);
  transition: opacity .25s, transform .35s var(--ease);
}
.peek.on { opacity: 1; transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(-4deg) scale(1); }
.peek .card3d { width: 100%; }

/* ---------- Anatomy (exploded card) ---------- */
.anatomy { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.anatomy-stage-wrap { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + 24px); height: min(78vh, 700px); display: grid; place-items: center; }
.anatomy-stage { --p: .55; position: relative; width: min(88%, 520px); aspect-ratio: 85.6 / 53.98; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-34deg); }
.layer { position: absolute; inset: 0; border-radius: var(--card-r); transform: translateZ(calc(var(--i) * var(--p) * 90px)); transition: transform .2s linear; box-shadow: 0 0 0 1px rgba(18,18,17,.12); }
.layer .tag { position: absolute; left: 4%; top: -24px; font: 600 .66rem/1 var(--mono); letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.layer.l0 { --i: 0; background: url("/assets/faces/speckle.webp") center / cover; box-shadow: 0 1px 0 #cfc9bd, 0 2px 0 #b9b2a5, 0 30px 50px -10px rgba(18,18,17,.35); }
.layer.l1 { --i: 1; background: url("/assets/faces/nfc.webp") center / cover; mix-blend-mode: multiply; opacity: .85; }
.layer.l2 { --i: 2; background: transparent; box-shadow: 0 0 0 1px rgba(18,18,17,.25); }
.layer.l2 .pz { position: absolute; left: 8%; bottom: 14%; font: 800 clamp(.7rem, 1.6vw, 1.15rem)/1.15 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.layer.l2 .pz small { display: block; font: 500 .6em/1.4 var(--mono); letter-spacing: .1em; color: var(--mute); }
.layer.l2 .bar { position: absolute; right: 8%; top: 14%; width: 26%; aspect-ratio: 1; background:
  repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); opacity: .85; }
.layer.l3 { --i: 3; background: linear-gradient(120deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.65) 42%, rgba(255,255,255,.08) 55%), rgba(0,163,224,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(18,18,17,.12); backdrop-filter: blur(1px); }
.anatomy-copy { grid-column: 8 / -1; padding-block: 4vh 10vh; }
.anatomy-copy .lede { max-width: 46ch; margin: 28px 0 40px; font-size: 1.12rem; }
.anatomy-list { counter-reset: an; border-top: 1.5px solid var(--ink); margin-bottom: 40px; }
.anatomy-list li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.anatomy-list li::before { counter-increment: an; content: "0" counter(an); font: 500 .8rem/1.7 var(--mono); color: var(--m-text); }
.anatomy-list strong { display: block; font: 700 1.25rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.02em; margin-bottom: 4px; }
.anatomy-list span { color: var(--mute); }

/* ---------- More than one life ---------- */
.lives { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.lives-media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.lives-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lives-media figcaption { margin-top: 14px; font: 400 .74rem/1.4 var(--mono); color: var(--mute); }
.lives-grid { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); }
.life { padding: 28px 24px 36px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.life:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--rule); }
.life .k { font: 600 .74rem/1 var(--mono); letter-spacing: .1em; color: var(--m-text); }
.life h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-stretch: 110%; letter-spacing: -.035em; line-height: 1.02; }
.life p { color: var(--mute); }
.life .text-link { margin-top: auto; padding-top: 8px; align-self: start; }
.life--feature h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: clamp(2.1rem, 3.4vw, 3.1rem); letter-spacing: -.02em; }

/* ---------- Designer embed ---------- */
.press { position: relative; margin-top: 8px; }
.press-bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--rule-ink); border-bottom: 0; font: 500 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-on-ink); }
.press-bar span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--y); vertical-align: 1px; }
.embedded-designer-shell { overflow: hidden; border: 1px solid var(--rule-ink); background: var(--stone); }
.embedded-designer-shell iframe { display: block; width: 100%; height: 900px; border: 0; background: var(--stone); }
.embedded-designer-note { margin-top: 18px; color: var(--mute-on-ink); font-size: .92rem; }
.embedded-designer-note a { color: var(--paper-hi); font-weight: 650; text-decoration-color: var(--y); text-decoration-thickness: 2px; }

/* ---------- Job ticket (process) ---------- */
.ticket { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); background: var(--paper-hi); }
.ticket-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1.5px solid var(--ink); font: 500 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stage { position: relative; padding: 26px 22px 34px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.stage + .stage { border-left: 1px dashed rgba(18,18,17,.35); }
.stage::before { content: ""; height: 6px; width: 100%; background: var(--stage-c); transform-origin: left; transform: scaleX(var(--fill, 1)); transition: transform 1s var(--ease); }
.stage:nth-of-type(1) { --stage-c: var(--c); } .stage:nth-of-type(2) { --stage-c: var(--m); }
.stage:nth-of-type(3) { --stage-c: var(--y); } .stage:nth-of-type(4) { --stage-c: var(--ink); }
.stage b { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; color: var(--mute); margin-top: 8px; }
.stage h3 { font-size: 1.55rem; font-stretch: 110%; letter-spacing: -.03em; }
.stage p { color: var(--mute); font-size: .97rem; }
.stage .box { margin-top: auto; display: flex; align-items: center; gap: 10px; font: 400 .72rem/1 var(--mono); color: var(--mute); }
.stage .box::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--ink); }
.js .reveal-stages .stage { --fill: 0; }
.js .reveal-stages.in .stage { --fill: 1; }
.js .reveal-stages.in .stage:nth-of-type(2)::before { transition-delay: .15s; }
.js .reveal-stages.in .stage:nth-of-type(3)::before { transition-delay: .3s; }
.js .reveal-stages.in .stage:nth-of-type(4)::before { transition-delay: .45s; }

/* ---------- Statement ---------- */
.statement-wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.statement { grid-column: 1 / span 9; font-family: var(--display); font-weight: 780; font-stretch: 114%; font-size: clamp(2.3rem, 5.6vw, 5.9rem); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.statement em { color: var(--m); }
.statement-side { grid-column: 10 / -1; display: grid; gap: 28px; justify-items: start; }
.statement-side .card3d { width: 100%; max-width: 300px; transform: perspective(1200px) rotateY(-18deg) rotateX(10deg) rotate(-6deg); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.faq-wrap > header { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.faq { grid-column: 6 / -1; border-top: 1.5px solid var(--ink); counter-reset: q; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: grid; grid-template-columns: 56px 1fr 28px; gap: 12px; align-items: baseline; padding: 24px 0; cursor: pointer; font: 700 clamp(1.1rem, 1.6vw, 1.35rem)/1.25 var(--display); font-stretch: 106%; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { counter-increment: q; content: "Q." counter(q, decimal-leading-zero); font: 500 .76rem/1 var(--mono); color: var(--m-text); letter-spacing: .04em; }
.faq summary::after { content: ""; justify-self: end; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 28px 68px; color: var(--ink-3); max-width: 70ch; }
.faq summary:hover { color: var(--m-text); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(64px, 8vw, 120px); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 56px; }
.footer-grid p { color: var(--mute-on-ink); max-width: 32ch; }
.footer-grid h2 { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-on-ink); margin-bottom: 18px; }
.footer-grid ul a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--paper); }
.footer-grid ul a:hover { color: var(--y); }
.footer-word { font: 800 clamp(3rem, 12.4vw, 13.5rem)/.8 var(--display); font-stretch: 120%; letter-spacing: -.06em; white-space: nowrap; color: var(--paper); margin-bottom: -.06em; user-select: none; }
.footer-word b { color: var(--m); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 22px 0 26px; border-top: 1px solid var(--rule-ink); font: 400 .74rem/1.5 var(--mono); color: var(--mute-on-ink); }
.footer-bottom a { color: var(--paper); }

/* ---------- Page hero (inner pages) ---------- */
.phero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 6vw, 88px); overflow: clip; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 5vw, 64px); font: 400 .76rem/1.4 var(--mono); color: var(--mute); letter-spacing: .02em; }
.crumbs a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumbs a:hover { border-color: var(--m); }
.crumbs span[aria-hidden] { opacity: .5; }
.phero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.phero-copy { grid-column: 1 / span 7; }
.phero h1 { font-size: clamp(2.6rem, 6.6vw, 6.6rem); margin-bottom: clamp(20px, 3vw, 36px); }
.phero-visual { grid-column: 9 / -1; align-self: center; position: relative; }
.phero-visual .card3d { width: 100%; transform: perspective(1400px) rotateX(12deg) rotateY(-22deg) rotate(-5deg); }
.phero-visual .card3d.js-tilt { transform: perspective(1400px) rotateX(calc(12deg + var(--rx))) rotateY(calc(-22deg + var(--ry))) rotate(-5deg); }
.phero-visual figcaption { margin-top: 28px; font: 400 .72rem/1.4 var(--mono); color: var(--mute); }

.specs { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.specs > div { padding: 20px 24px 24px 0; }
.specs > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.specs dt { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--m-text); margin-bottom: 12px; }
.specs dd strong { display: block; font: 700 1.2rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.02em; }
.specs dd span { display: block; margin-top: 4px; color: var(--mute); font-size: .95rem; }

.subnav { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
.subnav a { display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 0; text-decoration: none; border-bottom: 1px solid var(--rule); font: 700 1.1rem/1.2 var(--display); font-stretch: 108%; }
.subnav a + a { padding-left: 16px; border-left: 1px solid var(--rule); }
.subnav img { width: 72px; aspect-ratio: 4/3; object-fit: cover; flex: none; }
.subnav a:hover { color: var(--m-text); }

/* ---------- Article layout ---------- */
.article { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.article-aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.article-aside h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.toc { margin-top: 32px; border-top: 1px solid var(--rule); font-size: .92rem; }
.toc p { padding: 14px 0 6px; font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.toc a { display: grid; grid-template-columns: 30px 1fr; padding: 7px 0; text-decoration: none; color: var(--ink-3); }
.toc a span { font: 400 .72rem/1.8 var(--mono); color: var(--mute); }
.toc a:hover, .toc a.is-active { color: var(--m-text); }
.prose { grid-column: 6 / -1; max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--ink-3); font-size: 1.06rem; }
.prose h3 { margin-top: 2.2em; font-size: clamp(1.35rem, 2vw, 1.75rem); font-stretch: 110%; letter-spacing: -.03em; padding-top: 18px; border-top: 1px solid var(--rule); }
.prose h3 + * { margin-top: .8em; }
.prose ul { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.prose ul li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--rule); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 1.15em; width: 12px; height: 1.5px; background: var(--m); }
.prose .btn { margin-top: 2.4em; }
.prose > .lede-p { font-size: 1.22rem; color: var(--ink); line-height: 1.5; }
.lead-section .prose > p:first-of-type { font-size: 1.2rem; color: var(--ink); line-height: 1.5; }

.note { position: relative; padding: 22px 24px 24px; background: var(--paper-hi); border: 1px solid var(--rule); border-left: 4px solid var(--y); }
.note .note-k { display: block; margin-bottom: 8px; font: 600 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.note p { font-size: .98rem; margin: 0; }
.note p + p { margin-top: .6em; }
.note.m { border-left-color: var(--m); } .note.c { border-left-color: var(--c); }
.on-ink .note { background: var(--ink-2); border-color: var(--rule-ink); border-left-color: var(--y); }
.on-ink .note p { color: #d9d5cb; } .on-ink .note .note-k { color: var(--paper); }

/* split with media */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.split-media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.split-media img { width: 100%; }
.split-media figcaption { margin-top: 14px; font: 400 .72rem/1.4 var(--mono); color: var(--mute); }
.split .prose { grid-column: 7 / -1; }

/* ledger (4-up feature rows on ink or paper) */
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid currentColor; }
.ledger > * { padding: 26px 22px 32px 0; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.ledger > * + * { padding-left: 22px; border-left: 1px solid var(--rule); }
.on-ink .ledger > * + * { border-left-color: var(--rule-ink); }
.ledger .k { font: 600 .72rem/1 var(--mono); letter-spacing: .1em; color: var(--m-text); }
.on-ink .ledger .k { color: var(--y); }
.ledger h3 { font-size: 1.5rem; font-stretch: 110%; letter-spacing: -.03em; }
.ledger p { color: var(--mute); font-size: .97rem; }
.on-ink .ledger p { color: var(--mute-on-ink); }
.ledger .text-link { margin-top: auto; padding-top: 10px; }
.on-ink .text-link { text-decoration-color: var(--y); }
a.ledger-item:hover h3 { color: var(--m-text); }
.on-ink a.ledger-item:hover h3 { color: var(--y); }

/* CTA band */
.cta-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.cta-band h2 { grid-column: 1 / span 8; font-size: clamp(2.2rem, 5vw, 5rem); }
.cta-band .cta-side { grid-column: 9 / -1; display: grid; gap: 22px; justify-items: start; }
.cta-band .cta-side p { color: var(--mute-on-ink); }

/* related */
.related .index-row { grid-template-columns: 70px 1fr 56px; }

/* ---------- Claim / specimen cards (recycled) ---------- */
.claim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.claim-card { position: relative; display: flex; flex-direction: column; background: var(--paper-hi); border: 1px solid var(--rule); }
.claim-card::after { /* swatch-book punch hole */
  content: ""; position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 2px rgba(18,18,17,.35); z-index: 2;
}
.claim-choice > picture img, .claim-choice > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--rule); }
.claim-body { padding: 22px 22px 24px; display: flex; flex: 1; flex-direction: column; gap: 14px; }
.claim-card .status { align-self: start; font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border: 1px solid currentColor; color: var(--m-text); }
.claim-card blockquote { font: italic 400 clamp(1.9rem, 2.7vw, 2.6rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.claim-card p { color: var(--mute); font-size: .96rem; }
.claim-card footer { margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(18,18,17,.3); font: 400 .74rem/1.5 var(--mono); color: var(--mute); }
.claim-order { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: end; }
.claim-order label { display: grid; gap: 6px; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.claim-order select, .field select, .field input, .field textarea {
  width: 100%; min-height: 48px; padding: .6rem 2rem .6rem .75rem; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper-hi);
  font: 500 .95rem/1.2 var(--sans); color: var(--ink); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.claim-order .btn { min-height: 48px; justify-content: center; padding-inline: 1rem; }
.claim-card.coral { background: var(--y); border-color: var(--y); }
.claim-card.coral .status, .claim-card.coral p, .claim-card.coral footer { color: var(--ink); }
.claim-card.coral .claim-order select { background-color: #fff6c4; }
.claim-card.coral::after { background: var(--paper); }
.claim-card.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.claim-card.ink .status { color: var(--y); }
.claim-card.ink p, .claim-card.ink footer, .claim-card.ink .claim-order label { color: var(--mute-on-ink); }
.claim-card.ink footer { border-top-color: var(--rule-ink); }
.claim-card.ink .claim-order select { background-color: var(--ink-2); color: var(--paper); border-color: var(--paper); background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%); }
.claim-card.ink .btn { --bg: var(--y); --fg: var(--ink); border-color: var(--y); }
.claim-grid .claim-card:first-child { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 1fr; }
.claim-grid .claim-card:first-child > picture img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(18,18,17,.12); }
.claim-grid .claim-card:first-child blockquote { font-size: clamp(2.4rem, 4vw, 3.8rem); }

/* printed example card */
.example-card { margin: 2.2em 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.example-card .card3d { container-type: inline-size; }
.example-card .card3d .print { inset: 9% 8%; display: flex; flex-direction: column; justify-content: space-between; }
.example-card .card3d .print q { quotes: none; font: italic 400 7.6cqi/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.example-card .card3d .print span { font: 600 2.6cqi/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(18,18,17,.6); }
.example-card .meta .status { display: inline-block; font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border: 1px solid currentColor; color: var(--m-text); margin-bottom: 14px; }
.example-card .meta blockquote { font: italic 400 1.5rem/1.15 var(--serif); margin-bottom: 10px; }
.example-card .meta p { font-size: .96rem; }
.example-card .meta footer { margin-top: 12px; font: 400 .74rem/1.5 var(--mono); color: var(--mute); }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.spec-table caption { text-align: left; font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-bottom: 14px; }
.spec-table thead th { text-align: left; font: 500 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 14px 16px 14px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.spec-table td, .spec-table tbody th { padding: 18px 16px 18px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; }
.spec-table tbody th { font: 700 1.08rem/1.25 var(--display); font-stretch: 108%; letter-spacing: -.015em; width: 20%; }
.spec-table tbody tr { transition: background .2s; }
.spec-table tbody tr:hover { background: rgba(255,255,255,.55); }
.spec-table td:last-child { color: var(--mute); }
.spec-table .src a { font: 500 .8rem/1.3 var(--mono); white-space: nowrap; }

/* dimension drawing */
.drawing { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: end; margin: 2.4em 0; }
.drawing svg { width: 100%; height: auto; color: var(--ink); }
.drawing .side { width: clamp(70px, 9vw, 110px); }
.drawing text { font-family: var(--mono); font-size: 13px; fill: currentColor; letter-spacing: .04em; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); }
.compare > div { padding: 22px 24px; }
.compare > div + div { border-left: 1px solid var(--ink); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(230,0,126,.05) 10px 11px); }
.compare .k { display: block; font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.compare > div:first-child .k { color: #0b7a55; }
.compare > div + div .k { color: var(--m-text); }
.compare q { font: italic 400 1.45rem/1.2 var(--serif); quotes: "“" "”"; }

/* wording rule big */
.rule-card { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.rule-card .rc-copy { grid-column: 1 / span 6; }
.rule-card .rc-visual { grid-column: 8 / -1; }
.rule-card .rc-copy p { color: var(--ink-3); margin-top: 1em; max-width: 56ch; }
.rule-card .card3d { container-type: inline-size; }
.rule-card .card3d .print { inset: 10% 8%; display: flex; flex-direction: column; justify-content: space-between; }
.rule-card .print span { font: 600 2.5cqi/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(18,18,17,.62); }
.rule-card .print strong { font: 800 6.4cqi/1.02 var(--display); font-stretch: 112%; letter-spacing: -.035em; color: var(--ink); max-width: 15ch; }

/* ---------- Reveal motion ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; } .js .rv.d3 { transition-delay: .24s; }
.hero-copy h1 .line { overflow: clip; padding-bottom: .04em; }
.js .hero-copy h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero.is-ready .hero-copy h1 .line > span { transform: none; }
.js .hero.is-ready .hero-copy h1 .line:nth-child(2) > span { transition-delay: .09s; }

/* ---------- Studio (designer) ---------- */
.designer-page { background: var(--stone); }
.studio-heading { padding: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule); background: var(--paper); }
.studio-heading .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.studio-heading .wrap > div { grid-column: 1 / span 7; }
.studio-heading .crumbs { margin-bottom: 20px; }
.studio-heading h1 { font-size: clamp(2.4rem, 5.2vw, 5rem); }
.studio-heading .lede { grid-column: 9 / -1; font-size: 1.02rem; color: var(--mute); }
.card-studio { width: min(1560px, 100% - 32px); margin: 24px auto 48px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; gap: 0; align-items: stretch; border: 1.5px solid var(--ink); background: var(--paper-hi); }
.studio-tools { border-right: 1.5px solid var(--ink); }
.tool-section { padding: 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.tool-kicker { font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--m-text); margin-bottom: 6px; }
.studio-tools label, .order-panel label { font: 500 .76rem/1.2 var(--mono); color: var(--ink-3); margin-top: 6px; }
.studio-tools select, .studio-tools input[type="text"], .studio-tools textarea, .studio-tools input[type="number"] {
  width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1.5px solid var(--ink); border-radius: 0; background-color: #fff; font: 500 .95rem/1.3 var(--sans); color: var(--ink);
}
.studio-tools select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.studio-tools textarea { resize: vertical; }
.studio-tools input[type="color"] { width: 100%; height: 44px; padding: 3px; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); margin-bottom: 10px; }
.mode-tab { padding: .7rem .5rem; border: 0; background: transparent; font: 600 .82rem/1.2 var(--sans); cursor: pointer; }
.mode-tab + .mode-tab { border-left: 1.5px solid var(--ink); }
.mode-tab.active { background: var(--ink); color: var(--paper-hi); }
.mode-panel { display: grid; gap: 8px; }
.mode-panel[hidden] { display: none; }
.tool-button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem .8rem; border: 1.5px solid var(--ink); background: #fff; font: 600 .9rem/1.2 var(--sans); cursor: pointer; text-align: center; }
.tool-button:hover { background: var(--y); }
.tool-button[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); }
.tool-button.danger { border-color: var(--m-text); color: var(--m-text); }
.tool-button.danger:hover { background: var(--m-text); color: #fff; }
.upload-button input, .dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-button:focus-within, .dropzone:focus-within { outline: 3px solid var(--m); outline-offset: 2px; }
.dropzone { position: relative; display: grid; gap: 6px; padding: 24px 16px; border: 1.5px dashed var(--ink); background: #fff; text-align: center; cursor: pointer; }
.dropzone span { font: 400 .76rem/1.4 var(--mono); color: var(--mute); }
.dropzone:hover { background: #fffbe0; }
.privacy-note { font: 400 .74rem/1.45 var(--mono); color: var(--mute); }
.compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-fields label { display: grid; gap: 6px; }
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.selection-controls[hidden] { display: none; }
.studio-workspace { display: flex; flex-direction: column; min-width: 0; }
.workspace-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 500 .76rem/1.2 var(--mono); }
.side-switch { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); }
.side-switch button { padding: .5rem 1rem; border: 0; background: transparent; font: 600 .82rem/1.2 var(--sans); cursor: pointer; }
.side-switch button + button { border-left: 1.5px solid var(--ink); }
.side-switch button.active { background: var(--ink); color: var(--paper-hi); }
.check-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check-label input { width: 18px; height: 18px; accent-color: var(--ink); }
#save-status { margin-left: auto; color: var(--mute); }
.canvas-stage {
  flex: 1; min-height: 540px; padding: 64px 48px 28px; display: grid; place-items: center; align-content: center; overflow: hidden;
  /* self-healing cutting mat */
  background-color: #1f5b4d;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 70%);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
  background-position: -1px -1px;
}
.design-canvas { position: relative; width: min(100%, 820px); aspect-ratio: 85.6 / 53.98; overflow: hidden; border-radius: var(--card-r); background: #fff; outline: none;
  box-shadow: 0 1px 0 #d7d2c6, 0 2px 0 #b9b2a5, 0 30px 60px -20px rgba(0,0,0,.6), 0 12px 24px -12px rgba(0,0,0,.45); }
.design-canvas:focus-visible { outline: 3px solid var(--y); outline-offset: 6px; }
.safe-area { position: absolute; z-index: 9999; inset: 5.5%; border: 1.5px dashed rgba(230,0,126,.75); border-radius: 2.5%; pointer-events: none; }
.hide-safe-area .safe-area { display: none; }
.design-element { position: absolute; min-width: 24px; cursor: grab; touch-action: none; user-select: none; outline: none; }
.design-element:active { cursor: grabbing; }
.design-element.text { line-height: 1.08; overflow-wrap: break-word; }
.design-element.image img { width: 100%; height: auto; pointer-events: none; }
.design-element.image[style*="z-index: 0"] { height: 100%; }
.design-element.image[style*="z-index: 0"] img { width: 100%; height: 100%; object-fit: cover; }
.design-element.selected::after, .design-element:focus-visible::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--c); box-shadow: 0 0 0 1px #fff; pointer-events: none; }
.canvas-help { margin-top: 24px; max-width: 640px; color: rgba(255,255,255,.82); text-align: center; font: 400 .76rem/1.5 var(--mono); }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--rule); }
.workspace-actions .btn { min-height: 46px; font-size: .9rem; }
.order-panel { border-left: 1.5px solid var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--paper-hi);
  background-image: radial-gradient(circle at 0 50%, var(--stone) 7px, transparent 7.5px); background-size: 14px 28px; background-repeat: repeat-y; background-position: -7px 0; }
.order-panel h2 { font-size: 1.9rem; }
.order-panel dl { border-top: 1.5px solid var(--ink); }
.order-panel dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px dashed rgba(18,18,17,.3); }
.order-panel dt { font: 500 .7rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.order-panel dd { font-weight: 600; font-size: .94rem; }
.story-preview { padding: 14px; background: var(--y); }
.story-preview span { display: block; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.story-preview strong { font: italic 400 1.35rem/1.1 var(--serif); }
.order-note { font: 400 .74rem/1.5 var(--mono); color: var(--mute); }
.order-panel .btn { justify-content: center; }
.designer-embed { background: var(--stone); }
.designer-embed::before { display: none; }
.designer-embed .site-header, .designer-embed .studio-heading, .designer-embed .site-footer, .designer-embed .order-panel, .designer-embed .skip-link { display: none; }
.designer-embed .card-studio { width: 100%; margin: 0; border: 0; grid-template-columns: 290px minmax(0, 1fr); }
.designer-embed .studio-workspace { min-height: 720px; }


/* =========================================================
   v2 components: rendered cards, page shells, forms
   ========================================================= */
/* rendered cards */
.pc { color: var(--ink); }
.card3d.pc { background: linear-gradient(135deg, #fbfaf7, #efece6); }
.pc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pc .t-display { font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.pc .t-mono { font-family: var(--mono); font-weight: 500; }
.pc .t-serif { font-family: var(--serif); font-style: italic; }
.pc .slot { fill: var(--slot-bg, var(--paper)); stroke: rgba(18,18,17,.25); stroke-width: 1.5; }
.on-stone .pc .slot { --slot-bg: var(--stone); }
.pc .holo-patch { mix-blend-mode: hard-light; }
.card3d.m-white { background: linear-gradient(135deg, #fdfcf9, #eeebe4); }
.card3d.m-rewritable { background: linear-gradient(135deg, #fbfcfd, #eceef0); }
.card3d.m-black { background: radial-gradient(120% 140% at 15% 0%, #33322f, #121211 62%); color: #f2efe8; }
.card3d.m-navy { background: radial-gradient(120% 140% at 15% 0%, #2d3f6e, #141f3b 65%); color: #f2efe8; }
.card3d.m-clear { background: linear-gradient(125deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 55%, rgba(255,255,255,.3)); color: rgba(18,18,17,.85);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 3px rgba(18,18,17,.08), 0 24px 40px -22px rgba(18,18,17,.35); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.card3d.m-frosted { background: linear-gradient(135deg, rgba(250,250,248,.72), rgba(236,238,238,.55)); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75), 0 1px 0 #d4d0c6, 0 22px 40px -18px rgba(18,18,17,.35); }
.card3d.m-rpet { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), 0 1px 0 #9fcbbf, 0 22px 40px -18px rgba(18,18,17,.3); }
.mat-chip.m-white { background: linear-gradient(135deg, #fdfcf9, #e6e2da); }
.mat-chip.m-clear { background: repeating-linear-gradient(45deg, #e8e4dc 0 6px, #f6f3ee 6px 12px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
.mat-chip.m-frosted { background: linear-gradient(135deg, #f4f5f4, #d9dcdc); }
.mat-chip.m-black { background: #1b1b1a; }
.mat-chip.m-rewritable { background: linear-gradient(135deg, #fff, #e3e6ea); }

/* H1 keyword line */
.h1-k { display: block; margin-bottom: .9rem; font: 500 .78rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--m-text); }
.h1-k::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .6em; background: var(--m); vertical-align: -.02em; }
.on-ink .h1-k { color: var(--y); }
h1 .h1-k { font-stretch: 100%; }

/* nav extras */
.nav-links .nav-ghost { margin-left: 10px; border: 1.5px solid var(--ink); padding: .62rem .9rem; font-weight: 600; }
.nav-links .nav-ghost::after { display: none; }
.nav-links .nav-ghost:hover { background: var(--y); }
.nav-links .nav-cta { margin-left: 6px; }
.nav-links a { font-size: .92rem; padding: .55rem .62rem; }
.nav-links a:not(.nav-cta):not(.nav-ghost)::after { left: .62rem; right: .62rem; }

/* sticky quote CTA */
.sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; box-shadow: 0 18px 40px -16px rgba(18,18,17,.55); transform: translateY(140%); transition: transform .45s var(--ease); }
.sticky-cta.show { transform: none; }
.sticky-cta a { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .8rem 1.2rem; text-decoration: none; font: 650 .95rem/1 var(--sans); font-stretch: 108%; }
.sticky-cta svg { width: 1em; height: 1em; }
.sticky-cta__design { background: var(--paper-hi); color: var(--ink); border: 1.5px solid var(--ink); border-right: 0; }
.sticky-cta__quote { background: var(--ink); color: var(--paper-hi); border: 1.5px solid var(--ink); }
.sticky-cta__quote:hover { background: var(--m); border-color: var(--m); }
.sticky-cta__design:hover { background: var(--y); }
.designer-page .sticky-cta__design { display: none; }

/* page hero variants */
.phero--compact { padding-bottom: clamp(24px, 3vw, 44px); }
.phero--compact .phero-grid { align-items: end; }
.phero-copy.wide { grid-column: 1 / span 8; }
.phero--compact h1 { margin-bottom: 0; font-size: clamp(2.5rem, 6vw, 6rem); }
.phero-side { grid-column: 9 / -1; font-size: 1.05rem; color: var(--mute); padding-bottom: .6rem; }
.phero .btn-row { margin-top: 30px; }
.phero-photo { grid-column: 8 / -1; align-self: center; }
.phero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phero-visual.pair { position: relative; aspect-ratio: 1 / .86; }
.phero-visual.pair .card3d { position: absolute; width: 80%; }
.phero-visual.pair .card3d:first-child { right: 0; top: 0; transform: perspective(1400px) rotateX(10deg) rotateY(-18deg) rotate(7deg); opacity: .97; }
.phero-visual.pair .card3d:nth-child(2) { left: 0; bottom: 12%; z-index: 2; }
.phero-visual.pair.single .card3d { position: relative; width: 100%; bottom: auto; }
.phero-visual.pair.single { aspect-ratio: auto; }
.phero-visual.pair figcaption { position: absolute; left: 0; bottom: 0; margin: 0; }
.phero-visual.pair.single figcaption { position: static; margin-top: 28px; }
.fan3 { position: relative; aspect-ratio: 1 / .8; }
.fan3 .card3d { position: absolute; width: 74%; left: 6%; bottom: 10%; transform-origin: 10% 90%; }
.fan3 .card3d:nth-child(1) { transform: rotate(-16deg) translate(4%, -6%); }
.fan3 .card3d:nth-child(2) { transform: rotate(-6deg) translate(12%, -4%); }
.fan3 .card3d:nth-child(3) { transform: perspective(1400px) rotate(5deg) translate(22%, 0) rotateX(var(--rx)) rotateY(var(--ry)); }
.phero-grid { align-items: center; }
.phero { padding-bottom: clamp(32px, 4vw, 64px); }

/* anatomy in hero */
.anatomy-fig { display: grid; place-items: center; min-height: 380px; }
.anatomy-stage { width: min(92%, 460px); transform: rotateX(56deg) rotateZ(-34deg) translate(6%, 10%); }
.anatomy-stage .layer { transition: transform 1.4s var(--ease); }
.anatomy-stage.go .layer { transition: transform 1.4s var(--ease); }
.anatomy-list.four { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(28px, 4vw, 56px) 0 0; border-top: 1.5px solid var(--ink); }
.anatomy-list.four li { grid-template-columns: 40px 1fr; padding: 20px 20px 22px 0; border-bottom: 1px solid var(--rule); }
.anatomy-list.four li + li { padding-left: 20px; border-left: 1px solid var(--rule); }
.anatomy-list.four strong { font-size: 1.15rem; }
.anatomy-list.four span { font-size: .95rem; }

/* specs: tighter in v2 */
.specs { margin-top: clamp(32px, 4vw, 56px); }

/* article */
.article-photo { margin-top: 32px; }
.article-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.article-photo figcaption { margin-top: 10px; font: 400 .72rem/1.4 var(--mono); color: var(--mute); }
.lead-section .prose > p:first-child { font-size: 1.2rem; color: var(--ink); line-height: 1.5; }
.prose a:not(.btn) { text-decoration-color: var(--m); text-decoration-thickness: 1.5px; }
.example-card { padding: 22px; background: var(--paper-hi); border: 1px solid var(--rule); }
.example-card .card3d { transform: perspective(1200px) rotateY(-8deg) rotate(-2deg); }
.example-card .meta blockquote { font-size: 1.35rem; }

/* related */
.related-head { margin-bottom: 24px; }
.h2-s { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.related .index-row { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 120px 56px; }
.index-row .thumb { display: block; width: 120px; transform: rotate(-4deg); transition: transform .45s var(--ease); }
.index-row .thumb .card3d { width: 100%; box-shadow: 0 1px 0 #cfc9bd, 0 10px 18px -10px rgba(18,18,17,.45); }
a.index-row:hover .thumb { transform: rotate(0deg) scale(1.06); }
#card-types .index-row { grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) 56px; }
#card-types .index-row .thumb { display: none; }
.peek { width: 320px; }
.peek-card { display: none; }
.peek-card.on { display: block; }
.peek .card3d { width: 100%; box-shadow: 0 30px 60px -20px rgba(18,18,17,.55); }

/* catalogue (card types page) */
.catalogue { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 72px); }
.cat-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; text-decoration: none; color: inherit; }
.cat-item:nth-child(even) { transform: translateY(clamp(0px, 6vw, 90px)); }
.catalogue { padding-bottom: clamp(0px, 6vw, 90px); }
.cat-visual { padding: clamp(24px, 4vw, 48px); background: var(--stone); position: relative; overflow: hidden; }
.cat-visual .card3d { width: 100%; transform: perspective(1400px) rotateX(8deg) rotateY(-10deg) rotate(-3deg); transition: transform .6s var(--ease); }
.cat-item:hover .cat-visual .card3d { transform: perspective(1400px) rotateX(0) rotateY(0) rotate(0) translateY(-6px); }
.cat-text { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cat-text .n { font: 500 .74rem/1 var(--mono); letter-spacing: .08em; color: var(--m-text); }
.cat-text h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-stretch: 112%; letter-spacing: -.035em; }
.cat-text p { color: var(--mute); max-width: 48ch; }
.cat-text .text-link { justify-self: start; }

/* swatches */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.swatch { display: grid; gap: 8px; align-content: start; }
.swatch .card3d { margin-bottom: 12px; }
.swatch:nth-child(odd) .card3d { transform: rotate(-2deg); }
.swatch:nth-child(even) .card3d { transform: rotate(1.5deg); }
.swatch h3 { font-size: 1.2rem; }
.swatch p { color: var(--mute); font-size: .95rem; }
.swatch .text-link { justify-self: start; font-size: .9rem; }
.swatches .card3d.m-clear, .swatches .card3d.m-frosted, .swatches .card3d.m-rpet { background-color: transparent; }
.swatches li:nth-child(2) .card3d, .swatches li:nth-child(3) .card3d { outline: 0; }
.on-stone .swatches .m-clear { background-image: linear-gradient(125deg, rgba(255,255,255,.5), rgba(255,255,255,.12) 55%, rgba(255,255,255,.35)), repeating-linear-gradient(90deg, transparent 0 18px, rgba(18,18,17,.05) 18px 19px); }

/* tech table */
.tech-table tbody th { display: flex; align-items: center; gap: 16px; width: auto; }
.tech-table .tt { flex: none; width: 92px; }
.tech-table .tt .card3d { width: 100%; box-shadow: 0 1px 0 #cfc9bd, 0 8px 14px -8px rgba(18,18,17,.4); }
.tech-table td { vertical-align: middle; }
.after-table { margin-top: 24px; color: var(--mute); max-width: 70ch; }

/* ticket stages list */
.ticket-stages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }

/* two-column blocks */
.split-2 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.split-2 > :first-child { grid-column: 1 / span 4; }
.split-2 > :last-child { grid-column: 6 / -1; }
.ledger--2 { grid-template-columns: 1fr 1fr; }
.ledger--stack { grid-template-columns: 1fr; }
.ledger--stack > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
.prose-plain > * + * { margin-top: 1em; }
.prose-plain p { color: var(--ink-3); font-size: 1.06rem; max-width: 62ch; }
.statement-inline { margin-top: clamp(48px, 6vw, 80px); font: 780 clamp(1.8rem, 3.6vw, 3.4rem)/1 var(--display); font-stretch: 114%; letter-spacing: -.04em; max-width: 22ch; }
.statement-inline em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--y); }

/* faq side */
.faq-wrap .faq { grid-column: 1 / span 8; }
.faq-side { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.side-links { border-top: 1.5px solid var(--ink); }
.side-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600; }
.side-links a:hover { color: var(--m-text); }

/* subnav with rendered cards */
.subnav { grid-template-columns: repeat(4, 1fr); }
.sn-card { width: 76px; flex: none; transform: rotate(-4deg); }
.sn-card .card3d { width: 100%; box-shadow: 0 1px 0 #cfc9bd, 0 6px 12px -6px rgba(18,18,17,.4); }
.sn-doc { display: grid; place-items: center; aspect-ratio: 85.6/53.98; border: 1.5px dashed var(--ink); font: 400 1.6rem/1 var(--serif); transform: none; }

/* evidence + rule card */
.evidence-table tbody th { width: 26%; }
.rule-card .card3d { transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) rotate(-3deg); }
.rule-card .note { margin-top: 24px; }

/* guide drawing */
.drawing .dim-bg { fill: var(--stone); }
.drawing .safe { fill: #b5005e; font-size: 12px; }

/* footer extras */
.footer-btn { margin-top: 24px; }
.footer-contact { margin-top: 16px; }
.footer-contact a { color: var(--paper); }

/* ---------- forms ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.quote-form { grid-column: 1 / span 7; display: grid; gap: 20px; }
.quote-live { grid-column: 9 / -1; align-self: stretch; }
.quote-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.quote-form fieldset { margin: 0; padding: 22px 22px 24px; border: 1.5px solid var(--ink); background: var(--paper-hi); display: grid; gap: 16px; min-width: 0; }
.quote-form legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; margin-left: -8px; font: 700 1.2rem/1 var(--display); font-stretch: 108%; letter-spacing: -.02em; }
.quote-form legend span { font: 500 .72rem/1 var(--mono); color: var(--m-text); letter-spacing: .06em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; font: 500 .8rem/1.3 var(--mono); color: var(--ink-3); }
.field small { font-size: .72rem; color: var(--mute); }
.field input, .field textarea, .field select { padding-right: .75rem; background-image: none; }
.field select { padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field [aria-invalid="true"] { border-color: var(--m-text); box-shadow: 0 0 0 2px rgba(230,0,126,.18); }
.field[hidden] { display: none; }
.mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mat { position: relative; display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--rule); cursor: pointer; font-size: .86rem; font-weight: 600; line-height: 1.25; transition: border-color .2s, background .2s; }
.mat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mat-chip { display: block; aspect-ratio: 85.6 / 53.98; border-radius: var(--card-r); box-shadow: inset 0 0 0 1px rgba(18,18,17,.12), 0 4px 8px -4px rgba(18,18,17,.3); }
.mat:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--m); }
.mat:has(input:focus-visible) { outline: 3px solid var(--m); outline-offset: 2px; }
.chks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--rule); cursor: pointer; font-size: .9rem; font-weight: 550; line-height: 1.25; }
.chk input { width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.chk:has(input:checked) { border-color: var(--ink); background: #fff; }
.form-note { font: 400 .74rem/1.5 var(--mono); color: var(--mute); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-error { color: var(--m-text); font-weight: 600; }
.q-result { padding: 24px; background: var(--ink); color: var(--paper); }
.q-result .label { margin-bottom: 8px; color: var(--y); }
.q-result p { color: #d9d5cb; margin-bottom: 16px; }
.q-result pre { margin: 0 0 18px; padding: 16px; max-height: 360px; overflow: auto; background: var(--ink-2); border: 1px solid var(--rule-ink); white-space: pre-wrap; font: 400 .8rem/1.55 var(--mono); color: var(--paper); }
.q-result .btn--ghost { --fg: var(--paper-hi); border-color: rgba(242,239,232,.5); }
.q-cards { position: relative; aspect-ratio: 1 / .8; margin-bottom: 8px; }
.q-cards .card3d { position: absolute; width: 82%; transition: background .4s, opacity .3s; }
.q-back { right: 0; top: 0; transform: perspective(1200px) rotateY(-16deg) rotate(6deg); }
.q-front { left: 0; bottom: 4%; z-index: 2; }
.q-cap { font: 400 .72rem/1.4 var(--mono); color: var(--mute); margin-bottom: 18px; }
.q-sheet { border-top: 1.5px solid var(--ink); }
.q-sheet div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(18,18,17,.3); }
.q-sheet dt { font: 500 .7rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.q-sheet dd { font-weight: 600; font-size: .94rem; }
.q-flags-title { margin-top: 20px; font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.q-flags { margin-top: 10px; display: grid; gap: 8px; }
.q-flags li { padding: 10px 12px; background: var(--paper-hi); border-left: 3px solid var(--y); font-size: .88rem; line-height: 1.45; color: var(--ink-3); }
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.contact-routes { grid-column: 1 / span 4; }
.contact-form { grid-column: 6 / -1; }
.contact-details { margin-bottom: 24px; }

@media (max-width: 1240px) {
  .menu-button { display: inline-flex; }
  .nav-links { position: fixed; inset: calc(var(--header-h) + 5px) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: var(--paper); border-bottom: 1.5px solid var(--ink); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--rule); font: 700 1.4rem/1.1 var(--display); font-stretch: 110%; letter-spacing: -.02em; }
  .nav-links a:not(.nav-cta):not(.nav-ghost)::after { display: none; }
  .nav-links .nav-ghost, .nav-links .nav-cta { margin: 12px 0 0; text-align: center; font-size: 1.05rem; padding: 16px; }
}
@media (max-width: 1100px) {
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .mats { grid-template-columns: repeat(2, 1fr); }
  .chks { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .card-studio { grid-template-columns: 270px minmax(0, 1fr); }
  .order-panel { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--ink); background-image: none; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .order-panel > .tool-kicker, .order-panel > h2 { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .hero-copy, .hero-deck, .phero-copy, .phero-visual, .anatomy-stage-wrap, .anatomy-copy, .lives-media, .lives-grid, .statement, .statement-side, .faq-wrap > header, .faq, .article-aside, .prose, .split-media, .split .prose, .cta-band h2, .cta-band .cta-side, .rule-card .rc-copy, .rule-card .rc-visual { grid-column: 1 / -1; }
  .hero-deck { max-width: 560px; margin: 8px auto 0; width: 100%; }
  .sec-head > :first-child, .sec-head > p { grid-column: 1 / -1; }
  .inks { grid-template-columns: 1fr 1fr; }
  .inks > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .inks > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .anatomy-stage-wrap { position: relative; top: 0; height: auto; padding: 72px 0 40px; }
  .anatomy-copy { padding-block: 0; }
  .lives-media, .faq-wrap > header, .article-aside, .split-media { position: static; }
  .lives-media img { aspect-ratio: 16 / 10; }
  .lives-grid { margin-top: 16px; }
  .ticket { grid-template-columns: 1fr 1fr; }
  .stage:nth-of-type(3) { border-left: 0; }
  .stage:nth-of-type(n+3) { border-top: 1px dashed rgba(18,18,17,.35); }
  .statement-side { grid-template-columns: 1fr auto; align-items: center; }
  .statement-side .card3d { max-width: 200px; order: 2; }
  .phero-visual { max-width: 460px; margin-top: 16px; }
  .claim-grid { grid-template-columns: 1fr 1fr; }
  .ledger { grid-template-columns: 1fr 1fr; }
  .ledger > :nth-child(3) { padding-left: 0; border-left: 0; }
  .ledger > :nth-child(n+3) { border-top: 1px solid var(--rule); }
  .on-ink .ledger > :nth-child(n+3) { border-top-color: var(--rule-ink); }
  .toc { display: none; }
  .article-aside { margin-bottom: 24px; }
  .peek { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .index-row { grid-template-columns: 1fr 88px; gap: 8px 16px; }
  .index-row .n { grid-column: 1 / -1; display: flex; gap: 12px; }
  .index-row .n i { margin: 0; }
  .index-row h3 { grid-column: 1; }
  .index-row p { grid-column: 1; font-size: .95rem; }
  .index-row .go { display: none; }
  .index-row .thumb { display: block; grid-column: 2; grid-row: 2 / span 2; align-self: center; width: 88px; aspect-ratio: 85.6/53.98; border-radius: var(--card-r); object-fit: cover; box-shadow: 0 1px 0 #cfc9bd, 0 8px 16px -8px rgba(18,18,17,.4); transform: rotate(-4deg); }
  .related .index-row { grid-template-columns: 1fr 88px; }
  .lives-grid { grid-template-columns: 1fr; }
  .life, .life:nth-child(2n) { padding: 24px 0 28px; border-left: 0; }
  .ticket { grid-template-columns: 1fr; }
  .stage + .stage { border-left: 0; border-top: 1px dashed rgba(18,18,17,.35); }
  .stage { min-height: 0; }
  .faq summary { grid-template-columns: 44px 1fr 22px; }
  .faq details p { padding: 0 0 24px 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: 1fr; }
  .specs > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .subnav { grid-template-columns: 1fr; }
  .subnav a + a { padding-left: 0; border-left: 0; }
  .claim-grid { grid-template-columns: 1fr; }
  .claim-grid .claim-card:first-child { grid-column: auto; display: flex; }
  .claim-grid .claim-card:first-child > picture img { aspect-ratio: 4/3; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ledger { grid-template-columns: 1fr; }
  .ledger > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .example-card { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare > div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .drawing { grid-template-columns: 1fr; }
  .spec-table thead { display: none; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td, .spec-table tbody th { display: block; width: auto; }
  .spec-table tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .spec-table tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  .spec-table td, .spec-table tbody th { padding: 4px 0; border: 0; }
  .spec-table td[data-l]::before { content: attr(data-l); display: block; font: 500 .66rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: 8px; }
  .card-studio { width: calc(100% - 20px); grid-template-columns: 1fr; }
  .studio-tools { border-right: 0; border-top: 1.5px solid var(--ink); grid-row: 2; }
  .studio-workspace { grid-row: 1; }
  .order-panel { grid-row: 3; grid-template-columns: 1fr; }
  .canvas-stage { min-height: 300px; padding: 36px 14px 20px; }
  .studio-heading .wrap > div, .studio-heading .lede { grid-column: 1 / -1; }
  .designer-embed .card-studio { grid-template-columns: 1fr; }
  .embedded-designer-shell iframe { min-height: 1200px; }
  .hero-meta { gap: 18px; }
  .deck-caption { position: static; text-align: left; margin-top: 8px; max-width: none; }
  .crop::before { inset: -10px; --l: 8px; }
  .press-bar span:last-child { display: none; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .btn { width: 100%; justify-content: space-between; }
  .btn-row { flex-direction: column; }
  .claim-order { grid-template-columns: 96px 1fr; }
  .claim-order .btn { width: auto; }
  .workspace-actions .btn { width: 100%; }
}


@media (max-width: 980px) {
  .phero-copy.wide, .phero-side, .phero-photo, .quote-form, .quote-live, .contact-routes, .contact-form, .split-2 > :first-child, .split-2 > :last-child, .faq-wrap .faq, .faq-side { grid-column: 1 / -1; }
  .phero-side { padding-bottom: 0; }
  .quote-live { order: -1; }
  .quote-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .quote-sticky .q-cards { grid-column: 1; grid-row: 1 / span 3; }
  .faq-side { position: static; }
  .anatomy-list.four { grid-template-columns: 1fr 1fr; }
  .anatomy-list.four li:nth-child(3) { padding-left: 0; border-left: 0; }
  .catalogue { grid-template-columns: 1fr 1fr; }
  .ticket-stages { grid-template-columns: 1fr 1fr; }
  .subnav { grid-template-columns: 1fr 1fr; }
  .subnav a:nth-child(3) { padding-left: 0; border-left: 0; }
  .related .index-row { grid-template-columns: 1fr 100px; }
  .phero-visual.pair { max-width: 520px; width: 100%; margin-inline: auto; }
  .fan3 { max-width: 520px; width: 100%; margin-inline: auto; }
  .anatomy-fig { min-height: 300px; }
}
@media (max-width: 760px) {
  .sticky-cta { left: 0; right: 0; bottom: 0; transform: none; box-shadow: 0 -10px 30px -12px rgba(18,18,17,.4); }
  .sticky-cta a { flex: 1; justify-content: center; min-height: 56px; }
  .sticky-cta__design { border-right: 1.5px solid var(--ink); border-left: 0; border-bottom: 0; }
  .sticky-cta__quote { border-bottom: 0; }
  body:has(.sticky-cta) .site-footer { padding-bottom: 56px; }
  .catalogue { grid-template-columns: 1fr; }
  .cat-item:nth-child(even) { transform: none; }
  .catalogue { padding-bottom: 0; }
  .swatches { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .swatch p { font-size: .88rem; }
  .field-row { grid-template-columns: 1fr; }
  .chks { grid-template-columns: 1fr; }
  .quote-sticky { grid-template-columns: 1fr; }
  .quote-sticky .q-cards { grid-row: auto; max-width: 400px; }
  .ticket-stages { grid-template-columns: 1fr; }
  .ledger--2 { grid-template-columns: 1fr; }
  .anatomy-list.four { grid-template-columns: 1fr; }
  .anatomy-list.four li + li { padding-left: 0; border-left: 0; }
  .subnav { grid-template-columns: 1fr; }
  .subnav a + a { padding-left: 0; border-left: 0; }
  .tech-table tbody th { padding-top: 0; }
  .tech-table .tt { width: 76px; }
  .tech-table td.src { padding-top: 10px; }
  .index-row .thumb { width: 88px; }
  .related .index-row { grid-template-columns: 1fr 88px; }
  #card-types .index-row { grid-template-columns: 1fr 88px; }
  #card-types .index-row .thumb { display: block; }
  .quote-form fieldset { padding: 18px 14px 20px; }
  .phero-visual.pair figcaption { position: static; margin-top: 12px; }
  .phero-visual.pair { aspect-ratio: auto; display: grid; }
  .phero-visual.pair .card3d { position: relative; width: 84%; }
  .phero-visual.pair .card3d:first-child { justify-self: end; }
  .phero-visual.pair .card3d:nth-child(2) { margin-top: -30%; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .hero-copy h1 .line > span { transform: none; }
}
@media print {
  body::before, .site-header, .site-footer, .peek { display: none; }
}

/* =========================================================
   v3: product hero + quote starter, tabs, prices, guides, formats
   ========================================================= */
.h1-s { display: block; }
.phero--product .phero-grid { grid-template-columns: repeat(12, 1fr); grid-template-areas: "copy copy copy copy copy copy copy vis vis vis vis vis" "copy copy copy copy copy copy copy st st st st st"; align-items: start; row-gap: 28px; }
.phero--product .phero-copy { grid-area: copy; }
.phero--product .phero-visual { grid-area: vis; }
.phero--product .starter { grid-area: st; }
.phero--product h1 { font-size: clamp(2.4rem, 5.4vw, 5.4rem); }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 .8rem/1.3 var(--mono); letter-spacing: .02em; }
.ticks li::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: 8px; border-left: 2px solid var(--m); border-bottom: 2px solid var(--m); transform: rotate(-45deg) translateY(-3px); }
.from-price { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: .95rem; color: var(--mute); }
.from-price strong { font: 800 clamp(2rem, 3.4vw, 2.9rem)/1 var(--display); font-stretch: 112%; letter-spacing: -.03em; color: var(--ink); }
.from-price .fp-k { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--m-text); }
.from-price.big { display: block; font-size: 1rem; margin-bottom: 18px; }
.from-price.big strong { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.starter { position: relative; background: var(--paper-hi); border: 1.5px solid var(--ink); padding: 22px 22px 20px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px 14px; box-shadow: 8px 8px 0 -1.5px var(--y), 8px 8px 0 0 var(--ink); }
.starter-k { grid-column: 1 / -1; margin: 0; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; }
.starter-k::after { content: "Job ticket"; color: var(--mute); }
.starter .field { display: grid; gap: 6px; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.starter input, .starter select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--ink); background: #fff; font: 600 1rem/1.2 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; border-radius: 0; }
.starter .chks { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.starter .chks legend { font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; padding: 0; }
.starter .chk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); background: #fff; font-size: .88rem; cursor: pointer; }
.starter .chk:has(input:checked) { border-color: var(--ink); background: var(--y); }
.starter .chk input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.starter-price { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: .9rem; color: var(--mute); min-height: 3.4em; }
.starter-price strong { display: inline-block; font: 800 1.9rem/1 var(--display); font-stretch: 112%; letter-spacing: -.03em; color: var(--ink); margin-right: 6px; }
.starter-price span { display: block; margin-top: 6px; font: 400 .74rem/1.4 var(--mono); }
.starter .btn { grid-column: 1 / -1; justify-content: center; }

/* tabs (progressive enhancement: all panels visible without JS) */
.tabs .tab-nav { display: none; }
.js .tabs .tab-nav { display: flex; gap: 0; overflow-x: auto; border-bottom: 1.5px solid var(--ink); margin-bottom: clamp(24px, 3vw, 40px); scrollbar-width: none; }
.tab-nav button { flex: none; appearance: none; border: 0; background: none; padding: 16px 20px 14px; font: 650 1rem/1 var(--sans); font-stretch: 108%; color: var(--mute); cursor: pointer; position: relative; }
.tab-nav button[aria-selected="true"] { color: var(--ink); }
.tab-nav button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 4px; background: var(--m); }
.tab-nav button:hover { color: var(--ink); }
.tab-nav button:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }
.tabs [role="tabpanel"] { max-width: 1040px; }
.tabs [role="tabpanel"] + [role="tabpanel"] { margin-top: 48px; }
.js .tabs [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
.tabs [role="tabpanel"][hidden] { display: none; }
.tabs .faq { grid-column: auto; }
.tabs .prose { max-width: 70ch; }
.small { font-size: .85rem; color: var(--mute); margin-top: 14px; }
.opt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; border-top: 1.5px solid var(--ink); }
.opt-list > div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.opt-list dt { font: 700 1.08rem/1.25 var(--display); font-stretch: 108%; }
.opt-list dd { margin: 6px 0 0; color: var(--mute); }

/* prices */
.price-table td { font-variant-numeric: tabular-nums; }
.price-table tbody th { width: auto; }
.price-table.matrix td small { display: block; font: 400 .72rem/1.3 var(--mono); color: var(--mute); margin-top: 3px; }
.price-table.matrix td { font-weight: 700; }
.glance { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.glance > div { padding: 22px 18px 20px 0; display: grid; gap: 6px; }
.glance > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.glance .k { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.glance strong { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--display); font-stretch: 112%; letter-spacing: -.03em; }
.glance > div > span:last-child { font: 400 .78rem/1.3 var(--mono); color: var(--m-text); }
.q-price { margin: 18px 0 8px; padding: 18px; background: var(--ink); color: var(--paper-hi); }
.q-price .qp-note { margin: 0; color: var(--mute-on-ink); font-size: .92rem; }
.q-price .qp-note strong { color: var(--paper-hi); }
.qp-lines { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.qp-lines th { text-align: left; font-weight: 400; padding: 5px 0; color: var(--mute-on-ink); }
.qp-lines td { text-align: right; padding: 5px 0; }
.qp-lines tfoot th, .qp-lines tfoot td { border-top: 1px solid var(--rule-ink); padding-top: 8px; color: var(--paper-hi); }
.qp-lines .qp-gross th, .qp-lines .qp-gross td { font: 800 1.6rem/1.1 var(--display); font-stretch: 110%; color: var(--y); border-top: 0; }
.qp-each { margin: 6px 0 0; font: 400 .74rem/1.3 var(--mono); color: var(--mute-on-ink); }
.chks--2 { margin: 6px 0 14px; }

/* card types catalogue groups */
.cat-group + .cat-group { margin-top: clamp(40px, 5vw, 72px); }
.cat-group > h2 { margin-bottom: 18px; }
.cat-item h3 { font: 800 1.35rem/1.15 var(--display); font-stretch: 110%; letter-spacing: -.02em; margin: 6px 0 8px; }

/* steps, guides, swatches, templates, day calc */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 .8rem/1.6 var(--mono); color: var(--m-text); }
.more-guides { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group > h2 { margin-bottom: 8px; }
.faq-wrap > div:first-child { grid-column: 1 / span 8; }
.faq-wrap > div:first-child .faq { grid-column: auto; }
.faq-wrap .faq-side { grid-column: 10 / -1; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.swatch-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.swatch-row a { display: grid; gap: 10px; text-decoration: none; color: var(--ink); font: 500 .72rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.swatch-row .card3d { width: 100%; transition: transform .4s var(--ease); }
.swatch-row a:hover .card3d { transform: translateY(-6px) rotate(-3deg); }
.tpls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 18px; }
.tpl { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1.5px solid var(--ink); background: var(--paper-hi); text-decoration: none; color: var(--ink); transition: background .2s; }
.tpl:hover { background: var(--y); }
.tpl strong { font: 700 1rem/1.2 var(--display); font-stretch: 108%; margin-top: 8px; }
.tpl span:last-child { font: 400 .72rem/1.3 var(--mono); color: var(--mute); }
.tpl-shape { display: block; width: 100%; max-height: 120px; max-width: 120px; border: 1.5px dashed var(--m); border-radius: 6px; outline: 1.5px solid var(--c); outline-offset: -8px; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(230,0,126,.07) 6px 12px); }
.daycalc { padding: 24px; border: 1.5px solid var(--ink); background: var(--paper-hi); display: grid; gap: 14px; }
.daycalc .field { display: grid; gap: 8px; font-weight: 600; }
.daycalc input { min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--ink); font: 600 1rem var(--sans); background: #fff; border-radius: 0; }
.dc-out { margin: 0; font-size: 1.05rem; }
.redirect { padding: 80px 0; }

/* additional materials + non-CR80 formats */
.card3d.m-gold { background: linear-gradient(115deg, #b8893a 0%, #f3d98b 28%, #c9a04f 46%, #fbe7a8 62%, #a77b2c 100%); color: #2a1e08; }
.card3d.m-silver { background: linear-gradient(115deg, #9aa0a6 0%, #eef0f2 30%, #b5babf 48%, #f7f8f9 64%, #8d9399 100%); color: #1b1d20; }
.mat-chip.m-gold { background: linear-gradient(115deg, #b8893a, #f3d98b 45%, #a77b2c); }
.mat-chip.m-silver { background: linear-gradient(115deg, #9aa0a6, #eef0f2 45%, #8d9399); }
.mat-chip.m-speckle { background: #ece8df; }
.mat-chip.m-rpet { background: linear-gradient(135deg, #d9efe9, #bfe0d7); }
.card3d.pc-tag { aspect-ratio: 54 / 29; border-radius: 10% / 19%; }
.card3d.pc-pass { aspect-ratio: 70 / 100; border-radius: 4% / 2.8%; }
.phero-visual.pair .card3d.pc-tag { width: 58%; left: 4%; bottom: 14%; }
.phero-visual.pair .card3d.pc-pass { width: 46%; left: 6%; bottom: 0; }
.thumb .card3d.pc-tag, .peek .card3d.pc-tag { width: 70%; margin: 0 auto; }
.cat-visual .card3d.pc-tag { width: 64%; margin: 8% auto; }

@media (max-width: 1100px) {
  .tpls { grid-template-columns: repeat(3, 1fr); }
  .swatch-row { grid-template-columns: repeat(4, 1fr); }
  .glance { grid-template-columns: repeat(3, 1fr); }
  .glance > div:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 980px) {
  .phero--product .phero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "vis" "st"; }
  .phero--product .phero-visual { max-width: 560px; }
  .opt-list { grid-template-columns: 1fr; }
  .faq-wrap > div:first-child, .faq-wrap .faq-side { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .starter { grid-template-columns: 1fr; box-shadow: 6px 6px 0 -1.5px var(--y), 6px 6px 0 0 var(--ink); }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance > div { border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--rule); }
  .tpls { grid-template-columns: 1fr 1fr; }
  .price-table.matrix { font-size: .85rem; }
  .price-table.matrix th, .price-table.matrix td { padding-right: 8px; }
  .tab-nav button { padding: 14px 14px 12px; font-size: .92rem; }
}
@media (min-width: 761px) {
  .index-row { grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) 120px 56px; }
  #card-types .index-row { grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) 56px; }
}
.panel-h { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); font-stretch: 110%; letter-spacing: -.02em; margin-bottom: 20px; }
.js .panel-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-nav { scroll-snap-type: x proximity; }
/* product hero: keep the price/quote ticket above the fold */
.phero--product .phero-grid { row-gap: 0; }
.phero--product .phero-visual.pair { aspect-ratio: 1 / .62; }
.phero--product .phero-visual.pair .card3d { width: 70%; }
.phero--product .phero-visual.pair .card3d:nth-child(2) { bottom: 4%; left: 2%; }
.phero--product .phero-visual.pair .card3d.pc-pass { width: 34%; left: 8%; bottom: -6%; }
.phero--product .phero-visual.pair .card3d.pc-tag { width: 50%; }
.phero--product .phero-visual figcaption { position: absolute; top: 0; left: 0; bottom: auto; max-width: 22ch; }
.phero--product .starter { margin-top: -28px; z-index: 3; }
.phero--product .phero-copy { padding-bottom: 32px; }
.starter .chk { padding: 6px 10px; font-size: .84rem; }
@media (max-width: 980px) { .phero--product .starter { margin-top: 12px; } .phero--product .phero-visual.pair { aspect-ratio: 1 / .7; } }
.footer-grid ul, .side-links { list-style: none; padding: 0; margin: 0; }
.tabs [role="tabpanel"]:has(> .price-table.matrix) { max-width: none; }
@media (min-width: 981px) { .hero-copy, .hero-deck { grid-row: 1; } }
@media (max-width: 980px) { .phero--product .phero-visual figcaption { position: static; max-width: none; margin-top: 8px; } .phero--product .phero-visual.pair { margin-bottom: 36px; } }
@media (max-width: 760px) {
  .spec-table.price-table { display: table; width: 100%; }
  .spec-table.price-table thead { display: table-header-group; }
  .spec-table.price-table tbody { display: table-row-group; }
  .spec-table.price-table tr { display: table-row; padding: 0; }
  .spec-table.price-table td, .spec-table.price-table tbody th, .spec-table.price-table thead th { display: table-cell; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule); font-size: .84rem; }
  .spec-table.price-table thead th { font-size: .6rem; letter-spacing: .04em; }
  .spec-table.price-table tbody th { font-size: .95rem; }
  .spec-table.price-table caption { display: table-caption; line-height: 1.4; }
  .price-table.matrix td small { font-size: .62rem; }
}
.price-table.matrix td:last-child { color: var(--ink); }

/* =========================================================
   Dark brand pass + compact product browsing
   Keep all existing interactions; only colour and density change.
   ========================================================= */
:root {
  --paper: #1a1a1a;
  --paper-hi: #232323;
  --stone: #292929;
  --stone-2: #353535;
  --ink: #f7f5ef;
  --ink-2: #ece9e1;
  --ink-3: #d8d4ca;
  --mute: #aaa69b;
  --mute-on-ink: #aaa69b;
  --m-text: #ff3f9f;
  --rule: rgba(247, 245, 239, .18);
  --rule-ink: rgba(247, 245, 239, .18);
}

body::before { opacity: .13; mix-blend-mode: screen; }
.site-header { background: color-mix(in srgb, #1a1a1a 88%, transparent); }
.on-ink, .site-footer { background: #101010; color: #f7f5ef; }
.on-stone { background: #242424; }
.on-ink .label, .on-ink .sec-head > p, .on-ink .cta-side p,
.on-ink .index-row p, .on-ink .index-row .n { color: #aaa69b; }
.on-ink .index, .on-ink .index-row .go { border-color: #f7f5ef; }
.on-ink .btn--ghost { --fg: #f7f5ef; border-color: rgba(247,245,239,.55); }
.btn--y { --fg: #121211; }
.skip-link, ::selection { color: #121211; }
.claim-card.coral, .claim-card.coral .status, .claim-card.coral p,
.claim-card.coral footer { color: #121211; }

/* Printed card artwork keeps real stock colours inside the dark interface. */
.card3d.pc { color: #121211; }
.card3d.m-black, .card3d.m-navy { color: #f2efe8; }
.card3d { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 -1px 0 rgba(0,0,0,.45) inset,
  0 1px 1px rgba(0,0,0,.4), 0 2px 0 #0e0e0e, 0 3px 0 #050505,
  0 18px 30px -12px rgba(0,0,0,.78), 0 40px 70px -30px rgba(0,0,0,.88); }

/* Home range: three compact cards per row instead of long ruled rows. */
#card-types .index--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}
#card-types .index--cards .index-row {
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-rows: auto auto 1fr;
  gap: 10px 14px;
  min-height: 218px;
  padding: 22px;
  align-items: start;
  border: 1px solid var(--rule);
  background: var(--paper-hi);
}
#card-types .index--cards .index-row .n { grid-column: 1; grid-row: 1; }
#card-types .index--cards .index-row h3 {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  font-size: clamp(1.35rem, 2vw, 2rem);
}
#card-types .index--cards .index-row p {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  font-size: .95rem;
  line-height: 1.48;
}
#card-types .index--cards .index-row .thumb {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 96px;
  align-self: center;
  transform: rotate(-4deg);
}
#card-types .index--cards .index-row .go { display: none; }
#card-types .index--cards .index-row:hover { background: #2b2b2b; }
#card-types .index--cards .index-row:hover h3 { transform: translateX(5px); }

/* Card-types catalogue: smaller previews, no stagger, three-up on desktop. */
.catalogue {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  padding-bottom: 0;
}
.cat-item:nth-child(even) { transform: none; }
.cat-item { gap: 15px; }
.cat-visual { min-height: 145px; padding: 22px 28px; display: grid; place-items: center; }
.cat-visual .card3d { width: min(62%, 180px); }
.cat-text h3 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.cat-text p { font-size: .94rem; line-height: 1.48; }

@media (max-width: 980px) {
  #card-types .index--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #card-types .index--cards, .catalogue { grid-template-columns: 1fr; }
  #card-types .index--cards .index-row { min-height: 190px; }
  .cat-visual { min-height: 135px; }
}

/* White editing and enquiry controls need dark, high-contrast field text. */
.claim-order select, .field select, .field input, .field textarea,
.studio-tools select, .studio-tools input[type="text"], .studio-tools textarea,
.studio-tools input[type="number"], .starter input, .starter select, .daycalc input,
.tool-button, .dropzone, .starter .chk, .mat:has(input:checked), .chk:has(input:checked) {
  color: #303030;
}
.field input::placeholder, .field textarea::placeholder,
.studio-tools input::placeholder, .studio-tools textarea::placeholder,
.starter input::placeholder, .daycalc input::placeholder { color: #717171; opacity: 1; }
.studio-tools select, .field select {
  background-image: linear-gradient(45deg, transparent 50%, #303030 50%),
                    linear-gradient(135deg, #303030 50%, transparent 50%);
}
.dropzone span { color: #666; }
.claim-card.ink .claim-order select { color: #f2efe8; }
.nav-links .nav-cta, .mode-tab.active, .side-switch button.active,
.tool-button:not(.danger), .btn:not(.btn--ghost) { color: #303030; }
.tool-button:disabled { color: #666; background: #e2e2e2; opacity: 1; cursor: not-allowed; }

/* Footer sits on near-black, so never inherit the dark paper token. */
.site-footer, .site-footer .footer-word, .site-footer a { color: #f7f5ef; }
.site-footer p, .site-footer h2, .site-footer .footer-bottom { color: #b9b5aa; }
.site-footer .footer-bottom a { color: #f7f5ef; }