/* Zine House website — shared styles.
   One typeface (Schibsted Grotesk). No accent colour: the photographs bring the colour.
   Spreads are drawn in millimetres: inside .spread, var(--mm) is 1 mm of a 296 x 210 mm A5 spread. */

:root {
  --paper: #ffffff;
  --table: #eef0ef;          /* cool light table, for tinted sections */
  --table-deep: #e3e6e5;
  --ink: #17191a;
  --ink-2: #5b6164;          /* secondary text, 6.3:1 on white */
  --ink-3: #8b9194;          /* small print only */
  --line: #dde1e1;
  --line-strong: #b9bfc0;
  --focus: #2459ba;          /* same focus blue as the studio */

  --font: "Schibsted Grotesk", system-ui, sans-serif;

  --t-small: 14px;
  --t-body: 17px;
  --t-lede: clamp(18px, 1.6vw, 21px);
  --t-h3: clamp(21px, 2vw, 26px);
  --t-h2: clamp(32px, 4.2vw, 56px);
  --t-display: clamp(44px, 7.4vw, 108px);

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --zine-shadow: 0 1px 1px rgba(23,25,26,.06), 0 12px 32px -8px rgba(23,25,26,.18), 0 40px 80px -40px rgba(23,25,26,.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font);
  font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 500; letter-spacing: -0.012em; line-height: 1.06; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: var(--t-body); font-weight: 600; line-height: 1.35; }
/* No widows: headings balance their lines; running text avoids a lone last word. */
h3, h4, summary, .step-chip, figcaption { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 32em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); line-height: 1.5; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 500 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: #33373a; border-color: #33373a; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: #e9ecec; border-color: #e9ecec; }
.btn.light-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn.light-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--ink); background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, color .3s, border-color .3s;
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 32px; max-width: none; }
.brand { display: inline-flex; align-items: center; gap: 13.5px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.brand svg { width: 23.2px; height: 22px; flex: none; }
.brand svg.wordmark { width: 101.4px; height: 22px; overflow: visible; } /* the lockup from 01-brand/logo (12 November 2026 master), set as two pieces so the name can drop on small screens; gap 13.5px = the lockup's spacing at 22px */
.main-nav { display: flex; gap: 28px; margin-right: auto; margin-left: 32px; position: relative; top: 7px; } /* 64px from the logo in all; top: 7px puts the 15px links on the wordmark's baseline (was 2px for the typed name, Chiu, 6 November 2026; 11 November 2026) */
.main-nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions .signin { font-size: 15px; font-weight: 500; text-decoration: none; }
.menu-btn { display: none; }
/* Over the hero photograph */
.site-header.over { background: transparent; border-color: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.over .btn { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .main-nav, .header-actions .signin { display: none; }
  .header-actions { margin-left: auto; gap: 8px; }
  .menu-btn {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    background: transparent; color: inherit; border: 1px solid currentColor; font: 500 15px/1 var(--font); cursor: pointer;
  }
  .site-header.menu-open { background: #fff; color: var(--ink); border-color: var(--line); }
  .site-header.menu-open .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
  .main-nav.open {
    display: flex; flex-direction: column; gap: 0; position: fixed; left: 0; right: 0; margin-left: 0; top: var(--header-h); bottom: 0;
    background: #fff; color: var(--ink); padding: 16px var(--gutter) 40px; overflow-y: auto;
  }
  .main-nav.open a { font-size: 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 420px) { .site-header .brand .wordmark { display: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 160px) 0; }
.tint { background: var(--table); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head p { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; min-height: max(640px, 100svh);
  display: grid; place-items: center; text-align: center; color: #fff; padding: calc(var(--header-h) + 48px) var(--gutter) 96px;
  background: #222;
}
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,12,.45) 0%, rgba(10,12,12,.35) 45%, rgba(10,12,12,.6) 100%); }
.hero h1 { font-size: var(--t-display); max-width: 11em; margin: 0 auto; }
.hero .lede { color: rgba(255,255,255,.88); margin: 28px auto 36px; max-width: 30em; }
.hero .actions { justify-content: center; }
.hero .terms { margin-top: 28px; font-size: 15px; color: rgba(255,255,255,.8); }
.hero .credit { position: absolute; left: var(--gutter); bottom: 24px; font-size: 13px; color: rgba(255,255,255,.65); }

/* ---------- The story: three photographs that swap places ---------- */
/* Each photograph's width follows its proportions, so all three share one height and are shown whole. */
.story .section-head { margin-bottom: clamp(28px, 5vh, 64px); }
.story-row {
  display: flex; gap: clamp(12px, 2.4vw, 32px); align-items: center;
  max-width: calc((100vh - var(--header-h) - 300px) * 2.83 + 64px); margin: 0 auto;
}
.story-row figure { flex: var(--ar) 1 0; min-width: 0; will-change: transform; }
.story-row img { width: 100%; height: auto; }
.story-row figure.moving { z-index: 2; }
.story-row figure.moving img { box-shadow: 0 24px 48px -16px rgba(23,25,26,.45); }
.story-foot { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: clamp(20px, 4vh, 40px); }
.no-js .story-foot { display: none; }
@media (max-width: 800px) {
  .story .section-head { gap: 16px; }
  .story .section-head p { font-size: 17px; }
  .story-row { gap: 8px; max-width: none; }
}

/* ---------- Zine spread (drawn in mm) ---------- */
.spread {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 296 / 210;
  background: #fff; box-shadow: var(--zine-shadow);
}
.spread > * { --mm: calc(100cqw / 296); }
.spread::after { /* the fold */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 8%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.04) 56%, rgba(0,0,0,0) 100%);
}
.z { position: absolute; left: calc(var(--x) * var(--mm)); top: calc(var(--y) * var(--mm)); width: calc(var(--w) * var(--mm)); height: calc(var(--h) * var(--mm)); }
img.z { object-fit: cover; }
.z-title { font-weight: 600; font-size: calc(13 * var(--mm)); line-height: .98; letter-spacing: -0.02em; }
.z-text { font-size: calc(3.1 * var(--mm)); line-height: 1.45; color: #2a2d2e; }
.z-text p + p { margin-top: calc(2.4 * var(--mm)); }
.z-text h3 { font-size: calc(6 * var(--mm)); font-weight: 600; line-height: 1.1; margin-bottom: calc(5 * var(--mm)); letter-spacing: -0.01em; }
.z-folio { font-size: calc(2.6 * var(--mm)); color: #6b7073; font-variant-numeric: tabular-nums; }

/* ---------- Pinned scroll stories (layouts, how it works) ---------- */
.pinned { position: relative; height: calc(var(--count) * var(--step, 75vh) + 25vh); }
.pinned-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.pinned-stage > .wrap { width: 100%; }
.frame { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.frame.on { opacity: 1; visibility: visible; transition: opacity .45s ease .22s, visibility 0s; }
.no-js .pinned { height: auto; }
.no-js .pinned-stage { position: static; height: auto; padding: 80px 0; }

/* Layouts */
.layouts .grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Studio scene, drawn in units of a 370 x 264 stage (the spread is 296 x 210 mm at the top left). */
.studio-demo {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 370 / 264;
  max-width: calc((100vh - var(--header-h) - 150px) * 370 / 264); user-select: none;
}
.studio-demo > * { --u: calc(100cqw / 370); position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.sd-spread { --x: 0; --y: 0; --w: 296; --h: 210; background: #fff; box-shadow: var(--zine-shadow); }
.sd-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 8%; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.04) 56%, rgba(0,0,0,0) 100%); }
.sd-tray { --x: 0; --y: 222; --w: 296; --h: 42; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 6px; }
.sd-panel { --x: 310; --y: 0; --w: 60; --h: 210; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.sd-tile { position: relative; width: 100%; aspect-ratio: 296 / 210; background: #fff; border-radius: 3px; outline: 1px solid var(--line); transition: outline-color .2s, transform .15s; }
.sd-tile.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.sd-tile.press { transform: scale(.94); }
.sd-tile i, .sd-tile b { position: absolute; display: block; background: #c5cacb; }
.sd-tile b { height: 5%; background: #9aa0a2; }
.sd-page { background: #fff; border-radius: 2px; outline: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .15s; }
.sd-page::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); }
.sd-page.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.sd-page.press { transform: scale(.92); }
.sd-ph { border: 1.5px dashed var(--line-strong); background: rgba(238,240,239,.5); opacity: 0; transition: opacity .3s; }
.sd-ph.on { opacity: 1; }
.sd-photo { object-fit: cover; z-index: 2; transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), box-shadow .3s; }
.sd-photo.grab { z-index: 4; box-shadow: 0 18px 36px -10px rgba(23,25,26,.5); }
.sd-cursor { --w: 13; --h: 13; z-index: 6; margin: calc(-1.5 * var(--u)) 0 0 calc(-1.8 * var(--u)); transition-property: left, top, transform; transition-duration: .5s, .5s, .12s; transition-timing-function: cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.sd-cursor.press { transform: scale(.82); }
.layouts .copy p { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; margin: 24px 0 32px; }
.layout-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 15px; color: var(--ink-2); }
.layout-caption .name { position: relative; flex: 1; min-height: 1.6em; }
.layout-caption .name span { position: absolute; left: 0; top: 0; }
.ticks { display: flex; gap: 10px; flex: none; align-items: center; }
.ticks i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); opacity: .6; transition: background .3s, opacity .3s, transform .3s; }
.ticks i.on { background: var(--ink); opacity: 1; transform: scale(1.15); }
@media (max-width: 900px) {
  .layouts .grid { grid-template-columns: 1fr; gap: 28px; }
  .layouts .copy { order: -1; }
  .layouts .copy p { margin: 14px 0 0; font-size: 17px; }
  .layouts .copy .btn { display: none; }
  .studio-demo { max-width: none; }
  .layout-caption { margin-top: 20px; }
}

/* How it works */
.how-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vh, 44px); }
/* Stepper, as in the studio: numbered circles, and a black pill that slides to the current step. */
.how-steps { position: relative; display: flex; gap: 4px; }
.how-steps li { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; color: var(--ink-2); font-size: 16px; font-weight: 500; white-space: nowrap; transition: color .3s; }
.how-steps .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .3s, color .3s, border-color .3s; }
.how-steps li.on { color: #fff; }
.how-steps li.on .n { background: #fff; color: var(--ink); border-color: #fff; }
.how-steps .how-pill { position: absolute; z-index: 0; left: 0; top: 0; height: 44px; padding: 0; width: var(--pill-w, 120px); transform: translateX(var(--pill-x, 0)); background: var(--ink); transition: transform .55s var(--ease), width .55s var(--ease); }
.how-slides { position: relative; height: min(60vh, 560px); }
.how-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Steps slide sideways: in from the right going forward, out to the left. Scrolling back reverses it. */
.how-slide.frame { transform: translateX(56px); transition: opacity .25s ease, transform .4s var(--ease), visibility 0s linear .4s; }
.how-slide.frame.past { transform: translateX(-56px); }
.how-slide.frame.on { transform: none; transition: opacity .45s ease .18s, transform .7s var(--ease) .12s, visibility 0s; }

.how-text h3 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 18px; }
.how-text p { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 22em; }
.how-visual { position: relative; height: 100%; background: var(--table); border-radius: 6px; overflow: hidden; }
.how-foot { margin-top: clamp(20px, 3vh, 36px); }
@media (max-width: 900px) {
  .how-slides { height: min(70vh, 600px); }
  .how-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; align-items: stretch; }
  .how-text h3 { font-size: 28px; margin: 0 0 8px; }
  .how-text p { font-size: 17px; }
  .how-head h2 { font-size: 26px; }
  .how-steps li { height: 38px; padding: 0 6px; gap: 8px; font-size: 15px; }
  .how-steps li.on { padding-right: 14px; }
  .how-steps li:not(.on) .t { display: none; }
  .how-steps .how-pill { height: 38px; }
  .how-steps .n { width: 26px; height: 26px; }
}

/* How it works: step pictures */
.v-formats { position: absolute; inset: 12% 7% 16%; display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.v-formats figure { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.v-formats .sheet { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -10px rgba(0,0,0,.25); position: relative; overflow: hidden; }
.v-formats .sel .sheet { outline: 2px solid var(--ink); outline-offset: 5px; }
.v-formats .sel figcaption { color: var(--ink); font-weight: 500; }
.v-formats .sheet img { position: absolute; inset: 8% 8% 14%; width: 84%; height: 78%; object-fit: cover; }

.v-table img { position: absolute; width: 21%; height: auto; border: 5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 6px 14px -6px rgba(0,0,0,.3); }
.v-table img.lift { z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 22px 40px -12px rgba(0,0,0,.45); }
.v-table .strip { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; gap: 1.6%; padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.v-table .strip > * { flex: 1 1 0; min-width: 0; aspect-ratio: 3/2; }
.v-table .strip img { position: static; width: auto; height: auto; object-fit: cover; border: 0; box-shadow: none; }
.v-table .strip .gap { border: 1.5px dashed var(--line-strong); border-radius: 2px; }

.v-layouts { position: absolute; inset: 10% 6%; display: grid; grid-template-columns: 3.2fr 1fr; gap: 6%; align-items: center; }
.v-layouts .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-layouts .tile { aspect-ratio: 296/210; background: #fff; position: relative; border-radius: 2px; }
.v-layouts .tile.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.v-layouts .tile i { position: absolute; background: #c9cecf; }

.v-flip { position: absolute; inset: 12% 6%; display: grid; grid-template-columns: 3fr 1.1fr; gap: 8%; align-items: center; }
.v-flip .book { position: relative; perspective: 1400px; }
/* The turning page, lifted off the right-hand page. Its shadow falls on the page beneath it, darkest at the spine and
   fading as the gap opens; the page itself is a little darker where it bends out of the binding (Chiu, 5 November 2026). */
.v-flip .leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 2; transform-origin: left center; transform: rotateY(-34deg); background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.08); overflow: hidden; }
.v-flip .leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.03) 9%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 82%, rgba(0,0,0,.025) 100%); }
.v-flip .book::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.09) 12%, rgba(0,0,0,.03) 32%, rgba(0,0,0,0) 55%); }
/* the turning page: a landscape photograph placed on the page (15 mm gutter margin, 121 mm wide), like the spread beneath */
.v-flip .leaf img { position: absolute; left: 10.1%; width: 81.8%; top: 27%; height: auto; }
.v-flip .proof { position: relative; aspect-ratio: 148/210; background: #fff; transform: rotate(4deg); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 22px -10px rgba(0,0,0,.35); overflow: hidden; }
/* The proof is the same page as the one turning in the book, so the photograph sits in the same place
   (gutter margin, 121 mm wide). Printed at home, so a touch flatter. */
.v-flip .proof img { position: absolute; left: 10.1%; width: 81.8%; top: 27%; height: auto; filter: contrast(.92) brightness(1.03); }

.v-print { position: absolute; inset: 10% 8%; display: flex; align-items: center; justify-content: center; gap: 9%; }
.v-print .file { width: 30%; display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
/* The print-ready PDF, shown as its first page: the front cover plus 3 mm bleed all round (154 x 216 mm).
   The printed copies beside it are the same cover trimmed to 148 x 210 mm, so both use the same .cover. */
.v-print .page { position: relative; aspect-ratio: 154/216; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.3); }
.v-print .page .cover { position: absolute; inset: 1.39% 1.95%; overflow: visible; }
.v-print .page .cover img { left: -2.03%; width: 104.06%; max-width: none; top: -1.43%; height: 48.43%; } /* runs into the bleed */
.v-print .cover { position: absolute; inset: 0; container-type: inline-size; }
.v-print .cover img { position: absolute; left: 0; top: 0; width: 100%; height: 47%; object-fit: cover; }
.v-print .cover b { position: absolute; top: 47%; left: 0; right: 0; padding: 8% 8% 0; font-weight: 600; font-size: 8.6cqw; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.v-print .stack { position: relative; width: 34%; aspect-ratio: 148/210; }
.v-print .stack .copy { position: absolute; inset: 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 22px -12px rgba(0,0,0,.35); overflow: hidden; }
.v-print .stack .copy:nth-child(1) { transform: translate(14%, -6%) rotate(6deg); }
.v-print .stack .copy:nth-child(2) { transform: translate(7%, -3%) rotate(3deg); }

/* ---------- Shelf ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split .copy p { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; margin: 24px 0 32px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Shelf scene, in units of the 296 x 210 mm spread. Steps (data-step): 0 open, 1 on the shelf.
   One move (Chiu, 5 November 2026): the left page folds over the spine to show the front cover while the zine
   shrinks into its place on the wall, and the other zines drop in before it lands, so the wall is not missed. */
.shelf-stage { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 296 / 210; max-width: calc((100vh - var(--header-h) - 120px) * 296 / 210); }
.shelf-stage > * { --u: calc(100cqw / 296); }
.sh-zine { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; perspective: 2400px; z-index: 2;
  transition: transform .95s var(--ease); }
.sh-leaf, .sh-right { position: absolute; top: 0; width: 50%; height: 100%; }
.sh-right { left: 50%; background: #fff; box-shadow: var(--zine-shadow); overflow: hidden; }
.sh-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-right::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 10%; background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.12)); }
.sh-leaf { left: 0; z-index: 1; transform-origin: 100% 50%; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.5,.05,.25,1); }
.sh-face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--zine-shadow); }
.sh-face img { position: absolute; object-fit: cover; }
.sh-front::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10%; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.1)); }
.sh-folio { position: absolute; left: 8.1%; bottom: 3%; font-size: calc(2.6 * var(--u)); color: #6b7073; }
.sh-back { transform: rotateY(180deg); }
/* Front cover of the example zine (Evidence of Ordinary Days): the photograph full width at its own 3:2 shape, title below. Same on the Shelf, the zine page and How it works step 5. */
.sh-back img { left: 0; right: 0; top: 0; width: 100%; height: 47%; }
.sh-back b { position: absolute; left: 8%; right: 8%; top: 52.4%; font-weight: 600; font-size: calc(17 * var(--u)); letter-spacing: -0.02em; line-height: 1; }
.shelf-stage[data-step="1"] .sh-leaf { transform: rotateY(180deg); }
/* On the shelf: the closed zine (the right half) moves to its place in the middle row. */
.shelf-stage[data-step="1"] .sh-zine { transform: translate(calc((var(--tx) - 148 * var(--s)) * var(--u)), calc(var(--ty) * var(--u))) scale(var(--s)); transition: transform 1.1s cubic-bezier(.45,.05,.2,1); }
.shelf-stage[data-step="1"] .sh-face, .shelf-stage[data-step="1"] .sh-right { box-shadow: 0 3px 6px rgba(0,0,0,.35), 6px 16px 28px -4px rgba(0,0,0,.3); }
/* The other zines: three rows, standing on invisible shelves */
.sh-cover { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: #fff; overflow: hidden; border-radius: 0 1px 1px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), calc(2 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)) calc(-1 * var(--u)) rgba(0,0,0,.28);
  opacity: 0; transform: translateY(calc(-12 * var(--u))) scale(.96); transition: opacity .35s ease, transform .6s var(--ease); }
/* the fold of a stapled zine, down the left edge */
.sh-cover::after, .sh-back::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7%; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.03) 60%, rgba(255,255,255,0)); }
.sh-cover img { position: absolute; object-fit: cover; }
.sh-cover img.bleed { inset: 0; width: 100%; height: 100%; }
.sh-cover img.inset { left: 11%; top: 9%; width: 78%; height: var(--ih); }
.sh-cover b { position: absolute; left: 11%; bottom: 8%; font-weight: 600; font-size: calc(3.6 * var(--u)); letter-spacing: -0.01em; line-height: 1; z-index: 2; }
.sh-cover b.on-photo { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.shelf-stage[data-step="1"] .sh-cover { opacity: 1; transform: none; transition-delay: calc(.25s + var(--d) * .05s); }
/* Zine covers on the wall, each set by hand in a studio typeface (positions and sizes inline, in --u). */
.sh-cover.zc img, .sh-cover.zc b { inset: auto; }
.sh-cover.zc b { font-weight: 400; letter-spacing: normal; color: var(--ink); }
.sh-cover.zc b.w { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 900px) { .shelf-stage { max-width: none; } }

/* ---------- Guides ---------- */
.notes-head .link, .how-foot .link { white-space: nowrap; }
.notes-head { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.note { text-decoration: none; display: flex; flex-direction: column; }
.note .pic { aspect-ratio: 3/2; overflow: hidden; background: var(--table); }
.note .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.note:hover .pic img { transform: scale(1.03); }
.note .topic { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.note h3 { margin-top: 6px; }
.note:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.note p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 800px) { .notes { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.about .copy p { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; margin: 24px 0 28px; }
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(24px, 4vw, 56px); }
.promises li { border-top: 1px solid var(--ink); padding-top: 18px; }
.promises p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .about h2 { white-space: nowrap; font-size: min(var(--t-h2), 3.6vw); } }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Closing invitation ---------- */
.closing { text-align: center; overflow: hidden; }
.prints { position: relative; height: clamp(150px, 22vw, 280px); max-width: 980px; margin: 0 auto clamp(48px, 6vw, 80px); }
.prints img { position: absolute; top: 50%; height: auto; border: clamp(4px, .6vw, 8px) solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 14px 28px -12px rgba(0,0,0,.35); }
.closing h2 { max-width: 14em; margin: 0 auto; }
.closing .lede { margin: 24px auto 36px; }
.closing .actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0 32px; font-size: 15px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px 32px; }
.site-footer h4 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.site-footer li + li { margin-top: 8px; }
.site-footer ul a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.site-footer ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.news p { color: var(--ink-2); margin: 18px 0 16px; max-width: 22em; }
.news form { display: flex; gap: 8px; max-width: min(320px, calc(100% - 48px)); } /* clear of the next column (Chiu, 6 November 2026) */
.news input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; font: 400 16px var(--font); color: var(--ink); background: #fff; }
.news input::placeholder { color: var(--ink-3); }
.site-footer .base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; }
@media (max-width: 960px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .news { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}
@media (max-width: 900px) {
  .v-formats { inset: 8% 4% 12%; gap: 3%; flex-wrap: wrap; align-content: center; row-gap: 28px; }
  .v-formats figure { font-size: 12px; }
  .v-formats figure:nth-child(1) { width: 26% !important; }
  .v-formats figure:nth-child(2), .v-formats figure:nth-child(3) { width: 37% !important; }
  .v-formats figure:nth-child(4) { width: 52% !important; }
  .v-table img { width: 30%; border-width: 3px; }
  .v-layouts { grid-template-columns: 1fr; gap: 20px; inset: auto 6%; top: 50%; transform: translateY(-50%); }
  .v-layouts .tiles { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .v-flip { grid-template-columns: 1fr; inset: auto 8%; top: 50%; transform: translateY(-50%); gap: 28px; justify-items: center; }
  .v-flip .book { width: 100%; }
  .v-flip .proof { width: 34%; }
  .v-print { inset: 8% 6%; gap: 10%; }
  .v-print .file, .v-print .stack { width: 42%; }
}
.main-nav .only-menu { display: none; }
@media (max-width: 960px) { .main-nav.open .only-menu { display: block; } }
.site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero :focus-visible, .site-header.over :focus-visible { outline-color: #fff; }
/* Progress dots: a vertical column at the right edge of the pinned scene (Chiu, 4 November). */
.pinned .ticks { position: absolute; right: clamp(14px, 2.2vw, 36px); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 12px; z-index: 2; }
.story-foot { margin: 0; }
@media (max-width: 560px) { .pinned .ticks { right: 7px; gap: 10px; } .pinned .ticks i { width: 6px; height: 6px; } }

/* =========================================================
   Inner pages
   ========================================================= */
.page-hero { padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) 0 clamp(64px, 8vw, 120px); }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 76px); }
.page-hero .lede { margin: 24px 0 32px; }
.section-title { max-width: 16em; margin-bottom: clamp(40px, 6vw, 72px); }
.split .copy h1 + .lede { margin-top: 24px; }
.measure { font-variant-numeric: tabular-nums; }

/* How it works: the five steps, one row each */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 112px); }
.step-row, .step-row:nth-child(even) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
/* the picture stays in view while you read the longer text beside it */
.step-row .step-visual { position: sticky; top: calc(var(--header-h) + 32px); }
.step-row:nth-child(even) .step-copy { order: 2; }
.step-chip { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; }
.step-chip .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step-copy h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.012em; margin: 20px 0 14px; }
.step-copy { max-width: 34em; }
.step-lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink); }
.step-points { margin: 28px 0 0; }
.step-points li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.step-points li:last-child { border-bottom: 1px solid var(--line); }
.step-points li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.step-tip { margin-top: 28px; padding: 24px 28px; background: var(--table); border-radius: 6px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.step-tip b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.step-tip .link { display: inline-block; margin-top: 10px; }
@media (max-width: 520px) { .step-tip { padding: 20px 22px; } }
.how-visual.step-visual { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .step-row, .step-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .step-row .step-visual { position: relative; top: auto; order: -1; }
  .step-row:nth-child(even) .step-copy { order: 0; }
  .how-visual.step-visual { aspect-ratio: 4 / 5; }
}

/* Sequence strip close-up */
.seq-strip ol { list-style: none; margin: 0; padding: clamp(14px, 2vw, 22px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 18px);
  background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.25); }
.seq-strip li { position: relative; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.seq-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.seq-strip li.on img { outline: 2px solid var(--ink); outline-offset: 3px; }
.seq-strip li.on span { color: var(--ink); font-weight: 600; }

/* Formats, drawn to one scale */
.formats { --k: min(0.9px, 0.066vw); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; align-items: end; }
.format-sheet { position: relative; width: calc(var(--fw) * var(--k)); height: calc(var(--fh) * var(--k)); background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 12px 24px -12px rgba(0,0,0,.3); margin-bottom: 20px; }
.format-sheet::after { content: ""; position: absolute; inset: calc(12 * var(--k)); border: 1px dashed var(--line-strong); }
.format h3 { font-size: 19px; font-weight: 600; }
.format p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.formats-note { margin-top: 32px; }
@media (max-width: 800px) { .formats { --k: min(0.9px, 0.13vw); grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Price */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.price { border-top: 1px solid var(--line-strong); padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.price.main { border-top: 3px solid var(--ink); padding-top: 26px; }
.price h3 { font-size: 19px; font-weight: 600; }
.price .amount { font-size: clamp(48px, 5vw, 72px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 18px 0 24px; font-variant-numeric: tabular-nums; }
.price .amount span { font-variant-numeric: normal; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.price ul { width: 100%; margin-bottom: 32px; }
.price li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.price li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .prices { grid-template-columns: 1fr; } }

/* Three promises */
.promises.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promises.three h3 { font-size: 21px; font-weight: 600; }
.promises.three p { margin: 10px 0 18px; }
@media (max-width: 800px) { .promises.three { grid-template-columns: 1fr; } }

/* Questions */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--ink), var(--ink)) center/14px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 14px no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding: 0 0 24px; max-width: 36em; }
.faq-more { margin-top: 28px; }
@media (max-width: 800px) { .faq-wrap { grid-template-columns: 1fr; } }
@media (max-width: 360px) {
  .how-steps { gap: 0; }
  .how-steps li { padding: 0 4px; gap: 6px; font-size: 14px; }
  .how-steps li.on { padding-right: 12px; }
  .how-steps .n { width: 24px; height: 24px; font-size: 12px; }
}

/* ---------- The Shelf page ---------- */
.page-hero-short { padding-bottom: clamp(40px, 5vw, 64px); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.hero-row .lede { margin: 20px 0 0; }

/* A zine cover, drawn to scale: width is the format's width as a share of 297 mm */
.zcover { position: relative; display: block; background: #fff; overflow: hidden; border-radius: 0 2px 2px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 6px 10px 22px -6px rgba(0,0,0,.3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.zcover.a5.portrait  { width: 49.8%; aspect-ratio: 148 / 210; }
.zcover.a5.landscape { width: 70.7%; aspect-ratio: 210 / 148; }
.zcover.a4.portrait  { width: 70.7%; aspect-ratio: 210 / 297; }
.zcover.a4.landscape { width: 100%;  aspect-ratio: 297 / 210; }
.zcover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6%; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.03) 60%, rgba(255,255,255,0)); }
.zcover img { position: absolute; object-fit: cover; }
.zcover.bleed img { inset: 0; width: 100%; height: 100%; }
.zcover.inset img { left: 11%; top: 9%; width: 78%; height: 62%; }
.zcover.inset.landscape img { height: 58%; }
.zcover b { position: absolute; left: 11%; bottom: 7.5%; z-index: 2; font-weight: 600; font-size: clamp(11px, 1.1vw, 15px); letter-spacing: -0.01em; line-height: 1.1; }
.zcover.bleed b { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.zcover.top img { left: 0; top: 0; width: 100%; height: 47%; }
.zcover.top b { left: 8%; right: 8%; top: 52.4%; bottom: auto; }
/* Covers set by hand in studio typefaces (the same zines as the homepage wall); sizes in cqw of the cover width. */
.zcover.zc { container-type: inline-size; }
.zcover.zc img, .zcover.zc b { inset: auto; }
.zcover.zc b { font-weight: 400; letter-spacing: normal; color: var(--ink); }
.zcover.zc b.w { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* Featured */
.featured { padding: clamp(56px, 7vw, 104px) 0; }
.featured-spread { display: block; transition: transform .4s var(--ease); }
.featured-spread:hover { transform: translateY(-4px); }
.featured-label { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.featured .copy h2 { margin: 0; }
.featured .featured-maker { margin: 14px 0 0; font-size: 17px; color: var(--ink); }
.featured .copy p:not(.featured-label):not(.featured-maker) { margin: 18px 0 26px; }

/* Browse */
.shelf-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--table); border-radius: 999px; }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 15px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.shelf-search { display: flex; gap: 8px; flex: 1 1 280px; justify-content: flex-end; max-width: 460px; min-width: 0; }
.shelf-search input, .shelf-search select { min-height: 46px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font: 400 16px var(--font); color: var(--ink); }
.shelf-search input { flex: 1; min-width: 0; padding: 0 18px; }
.shelf-search select { padding: 0 36px 0 16px; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%2317191a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 48px); }
/* covers stand on a common baseline: each card fills its row and pushes its content to the bottom */
.shelf-item a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-decoration: none; }
.shelf-item a:hover .zcover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.16), 8px 18px 30px -8px rgba(0,0,0,.35); }
.shelf-item .meta { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.shelf-item .meta strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.shelf-item:hover .meta strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.shelf-item .measure { white-space: nowrap; }
@media (max-width: 900px) { .shelf-item .pp { display: block; } .shelf-item .dot { display: none; } }
.shelf-empty { padding: 48px 0; color: var(--ink-2); font-size: 17px; }
.shelf-more { text-align: center; margin-top: clamp(56px, 6vw, 80px); }
@media (max-width: 900px) { .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zcover b { font-size: 12px; } .shelf-search { max-width: none; } }
@media (max-width: 480px) { .seg button { padding: 0 12px; font-size: 14px; min-height: 34px; } .shelf-search select { padding: 0 32px 0 14px; } .shelf-search input { padding: 0 14px; } }

/* Closing: a small pile of zines */
.zine-pile { position: relative; aspect-ratio: 16 / 9; }
.zine-pile .zcover.zcover.zcover { position: absolute; width: 25%; bottom: 10%; }
.zine-pile .zcover:nth-child(1) { left: 10%; transform: rotate(-6deg); }
.zine-pile .zcover:nth-child(2) { left: 38%; transform: rotate(3deg); bottom: 16%; }
.zine-pile .zcover:nth-child(3) { left: 64%; transform: rotate(-2deg); bottom: 6%; }
.zine-pile .zcover b { font-size: clamp(11px, 1.2vw, 16px); }

/* ---------- Single zine page ---------- */
.zine-top { padding: calc(var(--header-h) + 28px) 0 clamp(56px, 7vw, 96px); }
.breadcrumb { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); margin-bottom: 28px; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current] { color: var(--ink); }
.zine-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.zine-info { position: sticky; top: calc(var(--header-h) + 28px); }
.zine-info h1 { font-size: clamp(36px, 4vw, 56px); }
.zine-by { margin-top: 12px; font-size: 18px; color: var(--ink-2); }
.zine-by a { color: var(--ink); }
.zine-details { margin: 28px 0; }
.zine-details div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.zine-details div:last-child { border-bottom: 1px solid var(--line); }
.zine-details dt { color: var(--ink-2); }
.zine-details dd { margin: 0; }
.btn .ext { width: 16px; height: 16px; margin-right: -4px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.zine-note { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 960px) { .zine-layout { grid-template-columns: 1fr; } .zine-info { position: static; } }

/* Flip-through viewer */
.viewer { outline: none; }
.viewer:focus-visible .book-stage { outline: 2px solid var(--focus); outline-offset: 4px; }
.book-stage { background: var(--table); border-radius: 8px; padding: clamp(24px, 5%, 56px); }
.book { position: relative; width: 100%; aspect-ratio: 296 / 210; perspective: 2400px; }
.pg { container-type: inline-size; position: absolute; top: 0; width: 50%; height: 100%; background: #fff; overflow: hidden; cursor: pointer; }
.pg > * { --mm: calc(100cqw / 148); }
.pg.l { left: 0; box-shadow: -6px 10px 24px -10px rgba(0,0,0,.25); }
.pg.r { left: 50%; box-shadow: 6px 10px 24px -10px rgba(0,0,0,.25); }
.pg.l::after, .pg.r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 2; }
.pg.l::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.1)); }
.pg.r::after { left: 0; background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.12)); }
.pg.empty { background: transparent; box-shadow: none; cursor: default; }
.pg.empty::after { display: none; }
.pg img, .pg .txt { position: absolute; left: calc(var(--x) * var(--mm)); top: calc(var(--y) * var(--mm)); width: calc(var(--w) * var(--mm)); height: calc(var(--h) * var(--mm)); object-fit: cover; }
.pg .cover-title { position: absolute; left: calc(12 * var(--mm)); right: calc(12 * var(--mm)); top: calc(110 * var(--mm)); font-weight: 600; font-size: calc(13 * var(--mm)); letter-spacing: -0.02em; line-height: 1; }
.pg .back-text { position: absolute; left: calc(12 * var(--mm)); bottom: calc(14 * var(--mm)); font-size: calc(3.2 * var(--mm)); color: #555; }
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 5; pointer-events: none; }
.leaf .pg { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .pg.back { transform: rotateY(180deg); }
/* the turning page casts no box shadow (it showed as a dark edge mid-turn); it darkens slightly instead, see site.js */
.leaf .pg { box-shadow: none; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.viewer-nav { display: flex; align-items: center; gap: 12px; }
.viewer-label { min-width: 7.5em; text-align: center; font-size: 15px; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.viewer-actions { display: flex; gap: 8px; }
.viewer-thumbs { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.viewer-thumbs button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; }
.viewer-thumbs .mini { position: relative; display: block; width: 100%; aspect-ratio: 296 / 210; }
.viewer-thumbs .mini .pg { box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; }
.viewer-thumbs .mini .pg.empty { box-shadow: none; }
.viewer-thumbs button[aria-current="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 600px) { .viewer-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.viewer:fullscreen { background: var(--table); display: flex; flex-direction: column; justify-content: center; padding: 3vh 4vw; }
.viewer:fullscreen .book-stage { padding: 0; }
.viewer:fullscreen .book { width: min(100%, calc((100vh - 220px) * 296 / 210)); margin: 0 auto; }
.viewer:fullscreen .viewer-thumbs { display: none; }

.zine-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.zine-about .copy p { margin-top: 20px; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.made-here { background: var(--table); border-radius: 8px; padding: 28px 32px; }
.made-here h3 { font-size: 19px; font-weight: 600; }
.made-here p { margin: 8px 0 16px; color: var(--ink-2); }
@media (max-width: 800px) { .zine-about { grid-template-columns: 1fr; } }

/* ---------- Guides ---------- */
.note-list { list-style: none; margin: 0; padding: 0; row-gap: clamp(48px, 5vw, 64px); }
.note-list li[hidden] { display: none; }
ul.notes { list-style: none; margin: 0; padding: 0; }
.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.download { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: start; background: #fff; border-radius: 8px; padding: 28px; }
.download h3 { font-size: 19px; font-weight: 600; }
.download p { margin: 8px 0 20px; color: var(--ink-2); font-size: 16px; }
.pdf-sheet { aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15), 4px 10px 20px -8px rgba(0,0,0,.3); padding: 14% 12%; display: flex; flex-direction: column; gap: 7%; }
.pdf-sheet i { display: block; height: 3px; background: #c9cecf; border-radius: 2px; }
.pdf-sheet i:first-child { height: 6px; background: var(--ink); }
.inline-news { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 32px; }
.inline-news p { color: var(--ink-2); margin-right: 8px; }
.inline-news input { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; font: 400 16px var(--font); flex: 0 1 280px; min-width: 0; }
@media (max-width: 800px) { .downloads { grid-template-columns: 1fr; } .download { grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 22px; } }
@media (max-width: 420px) { .download { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px; } }

/* Guide (one guide) */
.guide-head { padding: calc(var(--header-h) + 28px) 0 clamp(32px, 4vw, 48px); }
.guide-head h1 { font-size: clamp(40px, 5.4vw, 72px); max-width: 14em; }
.guide-head .lede { margin-top: 20px; max-width: 30em; }
.guide-meta { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.guide-hero { margin-bottom: clamp(56px, 7vw, 96px); }
.guide-hero .spread { max-width: 860px; }
.guide-hero .guide-photo { display: block; width: 100%; max-width: 860px; height: auto; border-radius: 4px; } /* a photograph in place of a drawn spread (Making a dummy, 5 November 2026) */
/* Edit and sequence: a loose pile of prints on the table, the chosen ones set aside in neat columns (Chiu, 5 November 2026) */
.edit-table { position: relative; max-width: 860px; aspect-ratio: 296 / 210; background: var(--table); border-radius: 4px; overflow: hidden; }
.edit-table img { position: absolute; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 4px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 14px -6px rgba(0,0,0,.35); }
.edit-table img.kept { border-width: 3px; }
@media (max-width: 560px) { .edit-table img { border-width: 2px; } }
.guide-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 10vw, 140px); }
.guide-toc { position: sticky; top: calc(var(--header-h) + 32px); font-size: 15px; }
.guide-toc p { font-weight: 600; margin-bottom: 12px; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.guide-toc li a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; }
.guide-toc li a:hover { color: var(--ink); }
.guide-toc li a.on { color: var(--ink); border-left-color: var(--ink); }
.guide-body { max-width: 680px; font-size: 18px; line-height: 1.65; }
.guide-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 56px 0 18px; scroll-margin-top: calc(var(--header-h) + 24px); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p + p { margin-top: 1em; }
.guide-body figure { margin: 40px 0; }
.guide-body figure .spread { box-shadow: var(--zine-shadow); }
.guide-body figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); text-wrap: pretty; } /* runs the full column, not balanced (Chiu) */
/* The same photographs in different orders (Finding your sequence): three small strips, like the studio's sequence strip */
.orders { display: grid; gap: 10px; }
.orders-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; background: var(--table); border-radius: 4px; }
.orders-pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.orders figcaption { margin-top: 6px; }
@media (max-width: 560px) { .orders-pics { gap: 6px; padding: 8px; } }
/* Figures in the "The idea" guides (9 November 2026): one cover with two titles; one spread set two ways. */
.title-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 32px); max-width: 480px; }
.title-covers .zcover.a5.portrait { width: 100%; box-shadow: var(--zine-shadow); }
.layout-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* stacked so each spread is large enough to read (Chiu, 9 November 2026) */
.guide-body blockquote { margin: 40px 0; padding-left: 24px; border-left: 3px solid var(--ink); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; }
.guide-body .try { margin: 56px 0; padding: 28px 32px; background: var(--table); border-radius: 8px; scroll-margin-top: calc(var(--header-h) + 24px); }
.guide-body .try h3 { font-size: 21px; font-weight: 600; }
.guide-body .try p { margin: 8px 0 20px; color: var(--ink-2); }
.sources { border-top: 1px solid var(--line-strong); padding-top: 28px; scroll-margin-top: calc(var(--header-h) + 24px); }
.sources h2 { font-size: 21px; margin: 0 0 14px; }
.sources ul { list-style: disc; padding-left: 20px; color: var(--ink-2); font-size: 16px; }
.sources p { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } .guide-toc { position: static; } .guide-body { font-size: 17px; } }

/* ---------- About ---------- */
.about-hero h1 { font-size: clamp(38px, 6.4vw, 96px); max-width: 12em; }
.about-hero .lede { margin-top: 28px; max-width: 34em; font-size: clamp(19px, 1.8vw, 24px); }
.about-band { margin-bottom: clamp(80px, 10vw, 140px); }
.about-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.person-pic { aspect-ratio: 3 / 2; overflow: hidden; background: var(--table-deep); margin-bottom: 24px; }
.person-pic img { width: 100%; height: 100%; object-fit: cover; }
.person-pic.empty { display: grid; place-items: center; }
.person-pic.empty span { font-size: clamp(64px, 8vw, 120px); font-weight: 500; color: #fff; }
.people h3 { font-size: 26px; }
.people .place { margin-top: 2px; color: var(--ink-2); font-size: 15px; }
.people p:not(.place) { margin: 14px 0 16px; color: var(--ink-2); max-width: 30em; }
.promises.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promises.four h3 { font-size: 19px; font-weight: 600; }
.promises.four p { margin-top: 8px; }
/* About, "Something special in mind?": three formats and finishes the studio can't make (Chiu, 6 November 2026). Widths are a share of the pile, to one scale (297 mm = 100%); sizes inside in cqw of the cover width. */
.zine-pile.edition .zcover.zc > * { position: absolute; z-index: 2; margin: 0; font-style: normal; }
.zine-pile.edition .zcover.zc b { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: .92; }
.zine-pile.edition .zcover.zc small { font-family: 'IBM Plex Mono', monospace; font-size: 3.4cqw; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; }
.zine-pile.edition .zcover.zcover.zcover:nth-child(1) { width: 33%; aspect-ratio: 1; left: 3%; bottom: 10%; transform: rotate(-5deg); }
.zine-pile.edition .zcover.zcover.zcover:nth-child(2) { width: 16.5%; aspect-ratio: 105 / 250; left: 40%; bottom: 7%; transform: rotate(2deg); }
.zine-pile.edition .zcover.zcover.zcover:nth-child(3) { width: 39%; aspect-ratio: 250 / 120; left: 58%; bottom: 16%; transform: rotate(-3deg); }
/* Square, die-cut: black board with a round window onto the photograph beneath */
.zine-pile.edition .zcover.ed-diecut { background: #111; color: #f2f2f0; }
.zine-pile.edition .zcover.ed-diecut img { inset: 0; width: 100%; height: 100%; z-index: 1; }
.zine-pile.edition .zcover.ed-diecut .board { inset: 0; z-index: 2; background: radial-gradient(circle at 50% 44%, transparent 0 25cqw, rgba(0,0,0,.55) 25cqw 25.8cqw, #111 25.8cqw); }
.zine-pile.edition .zcover.ed-diecut b { z-index: 3; left: 8%; bottom: 7%; font-size: 9cqw; color: #f2f2f0; }
.zine-pile.edition .zcover.ed-diecut small { z-index: 3; right: 8%; bottom: 7.4%; text-align: right; color: #f2f2f0; opacity: .6; font-size: 2.6cqw; }
/* Tall and narrow: silver foil on black board */
.zine-pile.edition .zcover.ed-foil { background: #161616; }
.zine-pile.edition .zcover.ed-foil b { left: 12%; bottom: 6%; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 27cqw; text-transform: uppercase; letter-spacing: -.02em;
  background: linear-gradient(170deg, #8d9196 0%, #f4f5f6 22%, #9fa3a8 40%, #ffffff 55%, #7f8388 75%, #d9dbde 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zine-pile.edition .zcover.ed-foil small { right: 10%; top: 5%; text-align: right; color: #c9ccd0; opacity: .7; font-size: 6cqw; }
/* Panoramic: black-and-white photograph printed in fluoro pink risograph, exposed stitched spine */
.zine-pile.edition .zcover.ed-riso { background: #ff4fa3; color: #121212; }
.zine-pile.edition .zcover.ed-riso img { left: 38%; top: 0; width: 62%; height: 100%; filter: grayscale(1) brightness(1.35) contrast(1.05); mix-blend-mode: multiply; z-index: 1; }
.zine-pile.edition .zcover.ed-riso .stitch { left: 2.6%; top: 8%; bottom: 8%; width: .6cqw; z-index: 3; background: repeating-linear-gradient(180deg, #f6f1e8 0 3.2cqw, transparent 3.2cqw 5cqw); }
.zine-pile.edition .zcover.ed-riso b { z-index: 3; left: 7%; top: 10%; width: 28%; font-size: 7.4cqw; color: #121212; }
.zine-pile.edition .zcover.ed-riso small { z-index: 3; left: 7%; bottom: 9%; width: 28%; font-size: 1.9cqw; color: #121212; }
.about-contact > * { max-width: 46rem; }
.about-contact p { margin-top: 20px; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .promises.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .people { grid-template-columns: 1fr; } .about-band img { aspect-ratio: 3 / 2; } }
@media (max-width: 480px) { .promises.four { grid-template-columns: 1fr; } }
.section-intro { margin: -24px 0 clamp(40px, 5vw, 64px); max-width: 30em; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); }
#care-title { margin-bottom: clamp(40px, 6vw, 72px); }
#care-title + .section-intro { margin-top: calc(-1 * clamp(40px, 6vw, 72px) + 20px); }

/* Before you add photos (How it works) */
.prep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.prep-head { position: sticky; top: 96px; }
.prep-head p { margin-top: 14px; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 22em; }
.prep-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; border-top: 1px solid var(--ink); padding: 18px 0 26px; }
.prep-list h3 { font-size: 19px; font-weight: 600; }
.prep-list p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) { .prep { grid-template-columns: 1fr; } .prep-head { position: static; } }
@media (max-width: 560px) { .prep-list li { grid-template-columns: 1fr; } }

/* Custom zines */
.custom-hero .spread { align-self: center; }
.make-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(20px, 3vw, 40px); }
.make-list h3 { margin-top: 24px; }
.make-list p { margin-top: 8px; color: var(--ink-2); }
.make-pic { position: relative; aspect-ratio: 4 / 3; background: var(--table); display: grid; place-items: center; overflow: hidden; }
.make-obj { position: relative; }
.make-obj.exhibition { width: 50%; display: flex; justify-content: center; }
.make-obj.exhibition .zcover { width: 70.7%; }
.make-obj.book { width: 62%; }
.make-obj.book .zcover { box-shadow: 0 1px 2px rgba(0,0,0,.16), 2px 2px 0 #f6f7f7, 4px 4px 0 #e4e7e7, 5px 5px 0 #f6f7f7, 7px 7px 0 #dcdfdf, 10px 14px 24px -6px rgba(0,0,0,.3); }
.make-obj.club { width: 78%; display: flex; justify-content: center; }
.make-obj.club .zcover { width: 36%; flex: none; }
.make-obj.club .zcover + .zcover { margin-left: -9%; }
.make-obj.club .zcover:nth-child(1) { transform: rotate(-5deg) translateY(4%); }
.make-obj.club .zcover:nth-child(2) { transform: rotate(1deg); z-index: 1; }
.make-obj.club .zcover:nth-child(3) { transform: rotate(5deg) translateY(5%); z-index: 2; }
.make-pic .zcover b { font-size: clamp(10px, 1vw, 14px); }
@media (max-width: 860px) { .make-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .make-list { grid-template-columns: 1fr; } .make-pic .zcover b { font-size: 13px; } }

.custom-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px clamp(16px, 2.4vw, 32px); }
.custom-steps li { border-top: 1px solid var(--ink); padding-top: 18px; }
.custom-steps .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.custom-steps h3 { margin-top: 20px; font-size: 19px; font-weight: 600; }
.custom-steps p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 1000px) { .custom-steps { grid-template-columns: 1fr; gap: 0; }
  .custom-steps li { display: grid; grid-template-columns: 56px minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; align-items: start; padding: 20px 0 26px; }
  .custom-steps h3 { margin-top: 4px; } .custom-steps p { margin-top: 4px; } }
@media (max-width: 560px) { .custom-steps li { grid-template-columns: 48px minmax(0, 1fr); } .custom-steps p { grid-column: 2; } }

.enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.enquiry-head p { margin-top: 14px; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 22em; }
.enquiry-form { display: grid; gap: 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { font-weight: 500; font-size: 16px; padding: 0; margin-bottom: 10px; }
.field > label { margin-bottom: 0; }
.field input[type=text], .field input[type=email], .field textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: 400 16px/1.5 var(--font); color: var(--ink); transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); border-radius: 8px; }
.field [aria-invalid=true] { border-color: #b3261e; }
.hint { font-size: 14px; color: var(--ink-2); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; background: #fff; transition: background .2s, color .2s, border-color .2s; }
.choices label:hover span { border-color: var(--ink); }
.choices input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choices input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.form-error { color: #b3261e; font-size: 15px; }
.enquiry-done { border-top: 1px solid var(--ink); padding-top: 20px; }
.enquiry-done:focus { outline: none; }
.enquiry-done p { margin-top: 10px; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; }
@media (max-width: 900px) { .enquiry { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .btn { padding: 0 18px; } }

/* =========================================================
   Help (help.html)
   ========================================================= */
.help-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.help-search { margin-top: clamp(24px, 3vw, 40px); max-width: 640px; }
.help-search input { width: 100%; height: 56px; padding: 0 20px; font: inherit; font-size: 18px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; }
.help-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.help-none { margin-top: 16px; color: var(--ink-2); }
.help-body { padding-top: 0; }
.help-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.help-nav { position: sticky; top: 96px; }
.help-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.help-nav a { display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; }
.help-nav a:hover, .help-nav a.on { color: var(--ink); }
.help-nav a.on { font-weight: 500; }
.help-topics { display: grid; gap: clamp(48px, 6vw, 72px); max-width: 760px; }
.help-topic, .help-contact { scroll-margin-top: 96px; }
.help-topic h2, .help-contact h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }
.help-topic .faq details p a { color: inherit; }
.help-contact { background: var(--table); border-radius: 12px; padding: clamp(24px, 4vw, 40px); }
.help-contact > p { color: var(--ink-2); margin: 0 0 24px; }
.help-contact .enquiry-form { display: grid; gap: 20px; }
@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-nav { position: static; }
  .help-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .help-nav a { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; }
}

/* =========================================================
   Legal pages (legal.html, privacy, refunds, cookies, shelf-rules). Shares .help-layout and .help-nav.
   ========================================================= */
.legal-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.legal-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; list-style: none; }
.legal-tabs a { display: block; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.legal-tabs a:hover { color: var(--ink); border-color: var(--ink); }
.legal-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.legal-date { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
.legal-text { display: grid; gap: clamp(36px, 4vw, 48px); max-width: 720px; }
.legal-short { background: var(--table); border-radius: 12px; padding: clamp(24px, 3vw, 32px); }
.legal-short h2, .legal-sec h2 { font-size: clamp(21px, 2vw, 24px); margin-bottom: 10px; }
.legal-sec { scroll-margin-top: 96px; border-top: 1px solid var(--line); padding-top: 24px; }
.legal-text p { color: var(--ink-2); max-width: 36em; }
.legal-todo { font-style: italic; }
@media (max-width: 900px) { body[data-page^="legal"] .help-nav { display: none; } }
.legal-text p { margin: 0 0 14px; }
.legal-text ul { margin: 0 0 14px; padding-left: 1.2em; color: var(--ink-2); max-width: 36em; }
.legal-text li { margin: 0 0 8px; }
.legal-text strong { color: var(--ink); font-weight: 500; }
.legal-short p { color: var(--ink); font-size: var(--t-lede); margin: 0; }
mark.todo { background: #fff3b0; color: var(--ink); padding: 0 2px; border-radius: 2px; }
.legal-table { overflow-x: auto; margin: 4px 0 16px; }
.legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.legal-table th { color: var(--ink); font-weight: 500; border-top: 0; }
.legal-text > * { min-width: 0; }
@media (max-width: 700px) {
  .legal-table table { min-width: 0; }
  .legal-table thead { display: none; }
  .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { border-top: 1px solid var(--line); padding: 14px 0; }
  .legal-table td { border: 0; padding: 4px 0; }
  .legal-table td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--ink-3); }
}
.legal-text ul { list-style: disc; } .legal-text li::marker { color: var(--ink-3); }

/* =========================================================
   Share your zine (share.html)
   ========================================================= */
.share-hero { align-items: center; }
.share-steps { margin: 28px 0 32px; padding: 0; list-style: none; display: grid; gap: 14px; font-size: var(--t-lede); }
.share-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: baseline; }
.share-steps .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; transform: translateY(-2px); }
.share-steps strong { font-weight: 500; }
.share-note { margin-top: 18px; font-size: 15px; color: var(--ink-2); max-width: 32em; }
.share-mock { background: var(--table); border-radius: 12px; padding: clamp(20px, 3vw, 36px); }
.share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ss { position: relative; aspect-ratio: 296 / 210; background: #fff; box-shadow: 0 1px 2px rgba(23,25,26,.08), 0 6px 16px -8px rgba(23,25,26,.25); opacity: .45; transition: opacity .2s; }
.ss.on { opacity: 1; outline: 2px solid var(--ink); outline-offset: 3px; }
.ss::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(23,25,26,.08); }
.ss img { position: absolute; object-fit: cover; }
.ss .l { left: 9%; top: 9%; width: 32%; height: 82%; }
.ss .r { left: 59%; top: 9%; width: 32%; height: 82%; }
.ss .across { inset: 0; width: 100%; height: 100%; }
.ss .tick { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line-strong); z-index: 1; }
.ss.on .tick { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--ink); }
.share-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(20px, 3vw, 32px); font-size: 15px; color: var(--ink-2); }
.share-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) { .share-mock { margin-top: 12px; } }

/* =========================================================
   Sign in (signin.html) and Your zines (account.html). Front end only.
   ========================================================= */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--ink); }
.auth { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 120px)); min-height: 72vh; }
.auth-wrap { max-width: calc(480px + 2 * var(--gutter)); }
.auth-form, .auth-sent { display: grid; gap: 24px; }
.auth h1 { font-size: clamp(36px, 4.4vw, 52px); }
.auth-lede { color: var(--ink-2); font-size: var(--t-lede); margin: 0; }
.auth-lede strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.auth-note { color: var(--ink-2); font-size: 15px; margin: 0; }
.acct-hero { padding-bottom: 0; }
.acct-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.acct-who { color: var(--ink-2); font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.acct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }
.acct-tabs button { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font: 500 15px var(--font); color: var(--ink-2); cursor: pointer; }
.acct-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.acct-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.acct-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acct-body { padding-top: clamp(28px, 4vw, 48px); }
.mz-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mz { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mz-cover.zcover { width: 56px; box-shadow: 0 1px 2px rgba(23,25,26,.12), 0 6px 14px -8px rgba(23,25,26,.35); }
.mz-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mz-title strong { font-size: 19px; font-weight: 500; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.tag.live { background: var(--ink); color: #fff; }
.tag.wait { background: var(--table); color: var(--ink-2); }
.mz-acts { display: flex; gap: 20px; font-size: 15px; }
.acct-empty { color: var(--ink-2); }
.acct-hint { margin-top: clamp(32px, 4vw, 48px); background: var(--table); border-radius: 12px; padding: 24px 28px; color: var(--ink-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.acct-hint p { margin: 0; max-width: 36em; }
.acct-narrow { max-width: 560px; display: grid; gap: 28px; }
.acct-narrow > p { color: var(--ink-2); margin: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--ink); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.acct-danger { border-top: 1px solid var(--line); padding-top: 28px; display: grid; gap: 14px; }
.acct-danger h2 { font-size: var(--t-h3); }
.acct-danger p { color: var(--ink-2); margin: 0; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
dialog.confirm { border: 0; border-radius: 12px; padding: 32px; max-width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 64px -12px rgba(23,25,26,.35); }
dialog.confirm::backdrop { background: rgba(23,25,26,.4); }
dialog.confirm h2 { font-size: var(--t-h3); }
dialog.confirm p { color: var(--ink-2); margin: 10px 0 24px; }
.confirm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 560px) {
  .mz { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; }
  .mz-cover.zcover { width: 48px; grid-row: span 2; }
  .mz-acts { grid-column: 2; }
}
.auth-form[hidden], .auth-sent[hidden] { display: none; }