/* The Issue: Aileen Mae Sze as a glossy monthly. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url(fonts/bricolage-grotesque.woff2) format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata.woff2) format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata-italic.woff2) format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #fbfaf6;
  --ink: #17110e;
  --hot: #e3173e;
  --peach: #f4c7a3;
  --hot-deep: #a80e27;
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(18px, 4vw, 64px);
  --rail: 0px;
  --travel: 95svh;
  color-scheme: light;
  accent-color: var(--hot);
  caret-color: var(--hot);
  scrollbar-color: var(--hot) var(--paper);
}
@media (min-width: 900px) {
  :root { --rail: 56px; }
}

/* palette per spread: each takes two colours from its lead photo */
.t-dance { --a: #c94b2b; --b: #f4b52e; --on-a: #fff; --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: var(--a); }
.t-mob { --a: #f28c28; --b: #1c120b; --on-a: var(--ink); --on-b: #fff; --mark: #ffe0b0; --on-mark: var(--ink); --drop: #9a4a00; }
.t-colour { --a: #0e9aa7; --b: #6b2fd6; --on-a: var(--ink); --on-b: #fff; --mark: var(--b); --on-mark: #fff; --drop: var(--b); }
.t-jewels { --a: #0a6e4f; --b: #c8102e; --on-a: #fff; --on-b: #fff; --mark: var(--b); --on-mark: #fff; --drop: var(--b); }
.t-table { --a: #ff4d94; --b: #ffd21f; --on-a: var(--ink); --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: #c4115a; }
.t-people { --a: #1fa6e8; --b: #ff6b1a; --on-a: var(--ink); --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: #b84300; }
.t-beyond { --a: #2b3cff; --b: #c8f135; --on-a: #fff; --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: var(--a); }
.t-letter { --a: var(--peach); --b: var(--hot); --on-a: var(--ink); --on-b: #fff; --mark: var(--b); --on-mark: #fff; --drop: var(--hot); }
.t-letters { --a: #ffd21f; --b: #ff4d94; --on-a: var(--ink); --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: var(--hot); }
.t-contrib { --a: var(--ink); --b: #c8f135; --on-a: #fff; --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: var(--b); }
.t-back { --a: #d4132f; --b: #ffd21f; --on-a: #fff; --on-b: var(--ink); --mark: var(--b); --on-mark: var(--ink); --drop: var(--b); }
.t-tabc { --a: var(--ink); --b: #fff; --on-a: #fff; --on-b: var(--ink); }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--hot); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--hot); border: 3px solid var(--paper); border-radius: 12px; }

img { max-width: 100%; height: auto; }
.is-viewing { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
  border-radius: 2px;
}

/* ---------- shared type ---------- */
.feature__title,
.contents__title,
.shelf__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.feature__title { font-size: clamp(2.9rem, 10.5vw, 9rem); }

.deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  max-width: 34ch;
  text-wrap: pretty;
}
.opener .deck {
  background: var(--b);
  color: var(--on-b);
  padding: 0.7em 0.9em;
  box-shadow: 0 14px 28px -14px rgba(23, 17, 14, 0.5);
}

.credits {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.5;
}
.credits span { display: inline-block; margin-right: 0.9em; }
.credits b { font-weight: 800; text-transform: uppercase; }

.pull {
  max-width: 17em;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.pull p {
  display: inline;
  color: var(--on-mark);
  background: var(--mark);
  padding: 0.04em 0.28em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pull--sm { max-width: 22em; font-size: clamp(1.25rem, 2.2vw, 1.9rem); }

.cols {
  columns: 3 15rem;
  column-gap: clamp(1.4rem, 2.6vw, 2.6rem);
  hyphens: auto;
}
.cols p { margin-bottom: 1em; break-inside: avoid-column; }
.dropcap::first-letter {
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.3em;
  line-height: 0.78;
  float: left;
  padding: 0.04em 0.1em 0 0;
  color: var(--drop);
}
.run-in { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.15em; }

.hl {
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(var(--mark, var(--b)), var(--mark, var(--b))) 0 92% / 100% 0.4em no-repeat;
  transition: background-size 0.3s var(--ease);
}
.hl:hover { background-size: 100% 100%; }

/* ---------- spread frame, folios ---------- */
.spread {
  position: relative;
  padding: clamp(48px, 7vw, 104px) calc(var(--gutter) + var(--rail)) clamp(80px, 9vw, 130px) var(--gutter);
}
.folio {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: calc(var(--gutter) + var(--rail));
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ink);
}
.folio--r { flex-direction: row-reverse; }
.folio b { background: var(--ink); color: #fff; padding: 0.35em 0.6em; font-weight: 800; }
.folio span { background: rgba(255, 255, 255, 0.88); padding: 0.35em 0.6em; }

/* ---------- plates (photos that open in the viewer) ---------- */
.plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(23, 17, 14, 0.08);
  cursor: zoom-in;
  text-decoration: none;
}
.plate img { display: block; width: 100%; height: auto; transition: transform 0.7s var(--ease); }
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) {
  .plate:hover img { transform: scale(1.045); }
  .plate:hover::after { transform: translateX(120%); }
}
.fig figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.55rem;
  font-family: var(--display);
  font-stretch: 75%;
  line-height: 1.3;
}
.fig figcaption > b { font-weight: 800; font-size: 1rem; }
.fig figcaption > span {
  font-family: var(--serif);
  font-style: italic;
  font-stretch: 100%;
  font-size: 0.82rem;
  line-height: 1.35;
}
.fig figcaption .credits { margin-top: 0.4rem; }

/* ---------- navigation furniture ---------- */
.all-issues {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px 0 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 14px 0;
  box-shadow: 0 8px 18px -8px rgba(23, 17, 14, 0.5);
  transition: background 0.2s, color 0.2s;
}
.all-issues:hover { background: var(--ink); color: #fff; }

.tabs {
  position: fixed;
  z-index: 60;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s;
}
@media (min-width: 900px) {
  .tabs { display: block; }
}
.tabs ul { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tab {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 44px;
  background: var(--a);
  color: var(--on-a);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 6px 14px -8px rgba(23, 17, 14, 0.55), inset 0 0 0 2px var(--paper);
  transform: translateX(5rem);
  transition: transform 0.4s var(--ease);
}
.tab__name { width: 5rem; padding-right: 8px; white-space: nowrap; }
.tab__pg { display: grid; place-items: center; width: 44px; flex: none; }
.tab:hover,
.tab:focus-visible,
.tab[aria-current='true'] { transform: none; }
.tab[aria-current='true'] { box-shadow: -4px 6px 14px -8px rgba(23, 17, 14, 0.55), inset 0 0 0 3px var(--paper), 0 0 0 2px var(--ink); }

.ribbon {
  position: fixed;
  z-index: 60;
  right: 14px;
  top: 0;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 62px;
  padding: 6px 18px 18px;
  background: var(--hot);
  color: #fff;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 8px 10px rgba(23, 17, 14, 0.4));
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s;
}
@media (min-width: 900px) {
  .ribbon { display: none; }
}
.turn-ready .tabs,
.turn-ready .ribbon { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.5s; }
.turn-ready .tabs { transform: translate(100%, -50%); }
.turn-ready .ribbon { transform: translateY(-120%); }
.turn-ready.is-open .tabs,
.turn-ready.is-open .ribbon { opacity: 1; visibility: visible; transition-delay: 0s; }
.turn-ready.is-open .tabs { transform: translate(0, -50%); }
.turn-ready.is-open .ribbon { transform: none; }

/* ---------- cover ---------- */
.cover {
  --pad: clamp(16px, 2.6vw, 40px);
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--peach);
  color: var(--ink);
  transform-origin: 0 50%;
  backface-visibility: hidden;
}
.cover__photo, .cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__photo img { object-fit: cover; object-position: 50% 16%; }

.cover__head {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: center;
  padding: 44px var(--pad) 0;
}
.cover__name { display: flex; flex-direction: column; align-items: center; width: 100%; font-weight: 400; }
/* authored masthead: three centre-lines stroked heavy so the joins round off into blobs */
.mast {
  display: block;
  width: 100%;
  max-width: calc(58svh * 3.7);
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mast__shade { stroke: rgba(23, 17, 14, 0.4); stroke-width: 24; transform: translateY(4px); }
.mast__body { stroke: var(--hot-deep); stroke-width: 24; }
.mast__core { stroke: var(--hot); stroke-width: 8; }
.mast__l { transform-box: fill-box; }
@media (min-width: 900px) {
  .byline { align-self: flex-start; }
}
.byline {
  margin-top: 0.15rem;
  padding: 0.3em 0.7em 0.36em;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.05rem, 2.5vw, 2.1rem);
  line-height: 1;
  transform: rotate(-1deg);
}

.cover__lines {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  display: grid;
  gap: 8px;
  width: min(29rem, calc(100% - 2 * var(--pad)));
}
.cl {
  display: block;
  padding: 0.5em 0.7em 0.55em;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.55rem);
  line-height: 1.05;
  text-decoration: none;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 10px 22px -10px rgba(23, 17, 14, 0.6);
  transition: transform 0.35s var(--ease);
}
.cl strong { font-weight: 800; font-size: 1.28em; letter-spacing: -0.01em; }
.cover__lines li:nth-child(odd) .cl { transform: rotate(-1.2deg); }
.cover__lines li:nth-child(even) .cl { transform: rotate(0.8deg) translateX(12px); }
.cl:hover { transform: translateX(10px) rotate(0); }
.cl--dance { --bg: #c94b2b; --fg: #fff; }
.cl--mob { --bg: #f28c28; --fg: var(--ink); }
.cl--jewels { --bg: #0a6e4f; --fg: #fff; }
.cl--heart { --bg: #ff4d94; --fg: var(--ink); }

/* barcode block: the inquiry action */
.barcode {
  display: grid;
  gap: 6px;
  width: min(15.5rem, 42vw);
  padding: 10px 12px 9px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 28px -12px rgba(23, 17, 14, 0.65);
  transition: background 0.25s, color 0.25s, transform 0.35s var(--ease);
}
.cover .barcode { position: absolute; right: calc(var(--pad) + 6px); bottom: var(--pad); }
.barcode__bars { display: block; width: 100%; height: 52px; fill: currentColor; }
.barcode__txt { display: grid; font-family: var(--display); font-stretch: 75%; line-height: 1.3; }
.barcode__txt b { font-weight: 800; font-size: 1.35rem; }
.barcode__txt span { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.barcode:hover { background: var(--ink); color: #fff; transform: translateY(-4px); }

.dogear {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 150px;
  padding-right: 10px;
  padding: 16px 0 22px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  writing-mode: vertical-rl;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 8px 18px -8px rgba(23, 17, 14, 0.6);
  transform: translateX(10px);
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s;
}
.dogear::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--hot);
  border-bottom: 0;
}
.dogear:hover { transform: none; background: var(--hot); color: #fff; }
.dogear:hover::after { border-top-color: #fff; }

/* the turn: cover pinned over contents, rotated on the left spine by scroll */
.turn-ready .opening::after { content: ''; display: block; height: var(--travel); }
.turn-ready .opening__pin { position: sticky; top: 0; perspective: 4200px; perspective-origin: 0% 50%; }
.turn-ready .cover { position: absolute; top: 0; left: 0; right: 0; z-index: 3; will-change: transform; }
.turn-ready .contents { position: relative; z-index: 1; }
.cover::before,
.cover::after { content: none; }
.turn-ready .cover::before,
.turn-ready .cover::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.turn-ready .cover::before {
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.5) 48%, transparent 62%);
  transform: translateX(calc(-80% + var(--turn, 0) * 190%));
  opacity: calc(var(--turn, 0) * 6);
}
.turn-ready .cover::after {
  background: linear-gradient(90deg, rgba(23, 17, 14, 0.2), rgba(23, 17, 14, 0.9));
  opacity: calc(var(--turn, 0) * 0.85);
}
.sweep { display: none; }
.turn-ready .sweep {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  z-index: 2;
  pointer-events: none;
  opacity: var(--sweep, 0);
  background: linear-gradient(90deg, transparent calc(var(--edge, 100%) - 1px), rgba(23, 17, 14, 0.55) var(--edge, 100%), rgba(23, 17, 14, 0) calc(var(--edge, 100%) + 34%));
}

@media (prefers-reduced-motion: no-preference) {
  .cover__photo img { animation: settle 1.8s var(--ease) both; }
  .mast__l { animation: mast-rise 1.1s var(--ease) both; }
  .mast__l:nth-of-type(2) { animation-delay: 0.12s; }
  .mast__l:nth-of-type(3) { animation-delay: 0.24s; }
  .byline { animation: wipe 0.9s var(--ease) 0.7s both; }
  .cover__lines li { animation: line-in 0.9s var(--ease) both; }
  .cover__lines li:nth-child(1) { animation-delay: 0.95s; }
  .cover__lines li:nth-child(2) { animation-delay: 1.07s; }
  .cover__lines li:nth-child(3) { animation-delay: 1.19s; }
  .cover__lines li:nth-child(4) { animation-delay: 1.31s; }
  .cover .barcode { animation: rise 1s var(--ease) 1.5s both; }
  .dogear { animation: peek 1.6s var(--ease) 2.4s 2 both; }
}
@keyframes settle { from { transform: scale(1.1); } to { transform: none; } }
@keyframes mast-rise {
  from { transform: translateY(24%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes line-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes peek { 0%, 100% { transform: translateX(10px); } 40% { transform: translateX(-6px); } }

/* ---------- contents ---------- */
.contents {
  position: relative;
  min-height: 100svh;
  padding: clamp(60px, 6vw, 88px) calc(var(--gutter) + var(--rail)) clamp(80px, 8vw, 110px) var(--gutter);
  background: var(--paper);
}
.contents__title { font-size: clamp(4rem, 14vw, 11.5rem); color: var(--hot); margin-bottom: 0.14em; }
.toc {
  display: grid;
  gap: 8px clamp(24px, 3.4vw, 56px);
}
@media (min-width: 900px) {
  .toc { grid-auto-flow: column; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); }
}
.toc a {
  display: grid;
  grid-template-columns: 3.4rem 1fr 3.5rem;
  gap: 14px;
  align-items: center;
  min-height: 60px;
  padding: 7px 8px 7px 7px;
  background: color-mix(in srgb, var(--a) 16%, #fff);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
}
.toc__pg {
  display: grid;
  place-items: center;
  align-self: stretch;
  background: var(--a);
  color: var(--on-a);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}
.toc__txt { display: grid; line-height: 1.3; }
.toc__txt strong { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -0.01em; }
.toc__txt em { font-size: 0.86rem; }
.toc img { width: 3.5rem; height: 4.2rem; object-fit: cover; display: block; }
.toc a:hover { background: var(--a); color: var(--on-a); transform: translateX(6px); }
.toc a:hover .toc__pg { background: var(--ink); color: #fff; }

/* ---------- features and openers ---------- */
.feature { position: relative; perspective: 2200px; background: var(--paper); }
.opener {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--a);
  color: var(--on-a);
  transform-origin: 0 50%;
  backface-visibility: hidden;
}
.turn-shade {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(23, 17, 14, 0), rgba(23, 17, 14, 0.75));
}

/* dance: split opener */
.op-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.op-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px) clamp(70px, 8vw, 110px) var(--gutter);
}
.op-split .feature__title { font-size: clamp(3.2rem, 11.5vw, 10.5rem); }
.op-split .feature__title span { display: block; }
.op-split__photo { position: relative; }
.op-split__photo .plate { position: absolute; inset: 0; height: 100%; }
.op-split__photo img { height: 100%; object-fit: cover; object-position: 50% 30%; }
.op-split .credits { max-width: 46ch; }

.sp-dance-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sp-dance-text__body { display: grid; gap: clamp(24px, 3vw, 44px); padding-top: clamp(0px, 3vw, 40px); }

.sp-prints { background: var(--b); }
.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 56px); align-items: center; }
.print .plate { background: none; }
.print--a { transform: rotate(-3deg); }
.print--b { transform: rotate(1.6deg) translateY(2.4rem); }
.print--c { transform: rotate(-1.4deg); }
.print figcaption { padding: 0.3rem 0.6rem 0; }

/* accents: the magazine itself, then the newsstand */
.op-cover {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(64px, 7vw, 110px) calc(var(--gutter) + var(--rail)) clamp(80px, 8vw, 120px) var(--gutter);
}
.op-cover__mag { display: grid; justify-items: center; }
.op-cover__mag .plate {
  width: min(100%, 66svh);
  transform: rotate(-2.5deg);
  box-shadow: 0 40px 70px -24px rgba(28, 18, 11, 0.7), 0 10px 18px -8px rgba(28, 18, 11, 0.4);
}
.op-cover__copy { display: grid; gap: 1.4rem; justify-items: start; }
.op-cover .feature__title { font-size: clamp(3.6rem, 14vw, 12rem); }

.sp-shelf { background: var(--paper); }
.shelf__title { font-size: clamp(3rem, 9vw, 8rem); color: var(--ink); margin-bottom: clamp(24px, 4vw, 56px); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 44px); align-items: start; }
.shelf__item--2 { margin-top: clamp(0px, 5vw, 80px); }
.shelf__item--3 { margin-top: clamp(0px, 2vw, 32px); }
.shelf__item--4 { margin-top: clamp(0px, 7vw, 110px); }
.shelf .plate { box-shadow: 0 24px 40px -22px rgba(23, 17, 14, 0.6); }
.shelf figcaption > b { font-size: 1.35rem; }
.shelf .credits { font-size: 0.8rem; }

/* fashion and beauty: triptych, then lookbook */
.op-trip { display: grid; }
.op-trip__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100svh; min-height: 560px; }
.op-trip__strip .plate { height: 100%; }
.op-trip__strip img { height: 100%; object-fit: cover; }
.op-trip__title {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(56px, 7vw, 100px);
  display: grid;
  gap: 10px;
  max-width: min(46rem, calc(100% - var(--gutter) * 2 - var(--rail)));
  pointer-events: none;
}
.op-trip__title .feature__title {
  justify-self: start;
  background: var(--a);
  color: var(--on-a);
  padding: 0.12em 0.2em 0.18em;
  font-size: clamp(2.8rem, 9vw, 8rem);
  transform: rotate(-1.5deg);
}
.op-trip__title .deck { justify-self: start; }

/* authored sheets: 12 columns, rows are half a column pitch, so every span tessellates and no column ends short.
   The spread is the size container, so cqw is exactly the grid width. */
.sp-look1, .sp-look2, .sp-table, .sp-people { container-type: inline-size; }
.look, .table, .people {
  --gap: clamp(14px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 900px) {
  .look, .table, .people {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: calc((100cqw + var(--gap)) / 24);
    row-gap: 0;
  }
  .look > .fig, .table > .fig, .people > .fig { display: flex; flex-direction: column; align-self: stretch; min-height: 0; padding-bottom: var(--gap); }
  .look > .fig .plate, .table > .fig .plate, .people > .fig .plate { flex: 1 1 0; min-height: 0; }
  .look > .fig .plate img, .table > .fig .plate img, .people > .fig .plate img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .look > .pull, .table > .pull { align-self: stretch; margin-bottom: var(--gap); }
}

/* fashion and beauty body: a lead spread, then a lookbook */
.sp-look1 { background: var(--paper); }
.sp-look2 { background: var(--a); }
.pull--mason {
  display: flex;
  align-items: center;
  max-width: none;
  padding: 1.6rem 1.4rem;
  background: var(--b);
  color: var(--on-b);
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  line-height: 1.08;
}
.pull--mason p { display: block; background: none; padding: 0; color: var(--on-b); }
@media (min-width: 900px) {
  .k-lead { grid-column: 1 / 8; grid-row: 1 / 23; }
  .k-quote { grid-column: 8 / 13; grid-row: 1 / 7; }
  .k-s1 { grid-column: 8 / 13; grid-row: 7 / 15; }
  .k-s2 { grid-column: 8 / 13; grid-row: 15 / 23; }
  .k-a { grid-column: 1 / 7; grid-row: 1 / 10; }
  .k-b { grid-column: 7 / 10; grid-row: 1 / 10; }
  .k-c { grid-column: 10 / 13; grid-row: 1 / 10; }
  .k-d { grid-column: 1 / 4; grid-row: 10 / 19; }
  .k-e { grid-column: 4 / 7; grid-row: 10 / 19; }
  .k-f { grid-column: 7 / 10; grid-row: 10 / 19; }
  .k-g { grid-column: 10 / 13; grid-row: 10 / 19; }
  .k-h { grid-column: 1 / 5; grid-row: 19 / 31; }
  .k-i { grid-column: 5 / 9; grid-row: 19 / 31; }
  .k-j { grid-column: 9 / 13; grid-row: 19 / 31; }
}

/* montecristo: ruby opener, shopping page */
.op-ring__photo { position: absolute; inset: 0; }
.op-ring__photo .plate { height: 100%; }
.op-ring__photo img { height: 100%; object-fit: cover; object-position: 50% 42%; }
.op-ring__title {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: end;
  gap: 14px;
  min-height: 100svh;
  align-content: start;
  padding: clamp(64px, 8vw, 110px) calc(var(--gutter) + var(--rail)) 0 var(--gutter);
  text-align: right;
  pointer-events: none;
}
.op-ring__title .feature__title {
  max-width: 11ch;
  background: var(--a);
  padding: 0.1em 0.18em 0.16em;
  font-size: clamp(3rem, 10vw, 9rem);
}
.op-ring__title .deck { max-width: 28ch; background: var(--b); }
.op-ring__title .deck, .op-trip__title .deck, .op-full__title .deck { pointer-events: none; }

.sp-shop { background: var(--a); color: var(--on-a); }
.shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(12px, 1.8vw, 26px); }
.shop__item { background: var(--paper); color: var(--ink); padding: 10px 10px 12px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
.shop__item--wide { grid-column: span 2; }
.shop .plate img { aspect-ratio: 4 / 5; object-fit: cover; }
.shop__item--wide .plate img { aspect-ratio: 8 / 5; }
.shop__item .fig figcaption { padding: 0.55rem 0.2rem 0; }

/* food and hospitality */
.op-full__photo { position: absolute; inset: 0; }
.op-full__photo .plate { height: 100%; }
.op-full__photo img { height: 100%; object-fit: cover; object-position: 70% 50%; }
.op-full__title {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(56px, 7vw, 100px);
  display: grid;
  gap: 12px;
  max-width: min(52rem, calc(100% - var(--gutter) * 2 - var(--rail)));
  pointer-events: none;
}
.op-full__title .feature__title {
  justify-self: start;
  background: var(--b);
  color: var(--on-b);
  padding: 0.1em 0.2em 0.16em;
  font-size: clamp(2.8rem, 9vw, 8rem);
  transform: rotate(-1deg);
}
.op-full__title .deck { justify-self: start; background: var(--a); color: var(--on-a); }

.sp-table { background: var(--b); }
.pull--table { display: flex; align-items: center; max-width: none; font-size: clamp(1.7rem, 3.1vw, 2.9rem); line-height: 1.12; }
.pull--table p { background: var(--a); color: var(--on-a); }
@media (min-width: 900px) {
  .tb--a { grid-column: 1 / 5; grid-row: 1 / 14; }
  .tb--b { grid-column: 5 / 9; grid-row: 1 / 14; }
  .tb--c { grid-column: 9 / 13; grid-row: 1 / 8; }
  .tb--q { grid-column: 9 / 13; grid-row: 8 / 14; }
  .tb--e { grid-column: 1 / 7; grid-row: 14 / 24; }
  .tb--d { grid-column: 7 / 10; grid-row: 14 / 24; }
  .tb--f { grid-column: 10 / 13; grid-row: 14 / 24; }
  .tb--h { grid-column: 1 / 7; grid-row: 24 / 33; }
  .tb--g { grid-column: 7 / 13; grid-row: 24 / 33; }
  .tb--i { grid-column: 1 / 7; grid-row: 33 / 42; }
  .tb--j { grid-column: 7 / 13; grid-row: 33 / 42; }
}

/* people */
.op-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(64px, 7vw, 100px) calc(var(--gutter) + var(--rail)) clamp(80px, 8vw, 110px) var(--gutter);
}
.op-stack__copy { display: grid; gap: 1.4rem; justify-items: start; }
.op-stack .feature__title { font-size: clamp(3rem, 9vw, 8rem); }
.op-stack__pile { position: relative; width: 100%; aspect-ratio: 1 / 1.05; max-height: 84svh; }
.pile {
  position: absolute;
  background: #fff;
  padding: 10px 10px 34px;
  box-shadow: 0 26px 44px -20px rgba(23, 17, 14, 0.7);
}
.pile--a { left: 0; top: 0; width: 58%; transform: rotate(-5deg); }
.pile--b { right: 0; top: 14%; width: 52%; transform: rotate(4deg); z-index: 2; }
.pile--c { left: 20%; bottom: 0; width: 44%; transform: rotate(-1.5deg); z-index: 3; }

.sp-people { background: var(--paper); }
@media (min-width: 900px) {
  .pp--e { grid-column: 1 / 9; grid-row: 1 / 14; }
  .pp--d { grid-column: 9 / 13; grid-row: 1 / 14; }
  .pp--a { grid-column: 1 / 5; grid-row: 14 / 21; }
  .pp--b { grid-column: 5 / 9; grid-row: 14 / 21; }
  .pp--c { grid-column: 9 / 13; grid-row: 14 / 21; }
}

/* beyond the lens */
.dept {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: clamp(24px, 4vw, 64px) clamp(20px, 3vw, 48px);
  background: var(--a);
  color: var(--on-a);
}
.dept__head { grid-column: 1 / -1; display: grid; gap: 1.2rem; justify-items: start; }
.dept__head .deck { max-width: 52ch; }
.dept h3 { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; background: var(--b); color: var(--on-b); display: inline-block; padding: 0.06em 0.3em 0.12em; transform: rotate(-1deg); }
.dept__col { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.note { font-style: italic; }
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); width: 100%; }
.board .plate { box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.6); }
.board--2, .board--6 { margin-top: 1.6rem; }
.board--4 { margin-top: 1.6rem; }
.board--7 { grid-column: 1 / 2; }
.reel { display: grid; gap: 8px; width: 100%; }
.ticket {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 12px;
  min-height: 56px;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 0.9rem;
  background: var(--b);
  color: var(--on-b);
  font-family: var(--display);
  font-stretch: 75%;
  line-height: 1.1;
  text-decoration: none;
  -webkit-mask: radial-gradient(circle 0.5rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.5rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.5rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.5rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  transition: background 0.25s, color 0.25s;
}
.ticket img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ticket__txt { display: grid; gap: 1px; }
.ticket b { font-weight: 800; font-size: 1rem; }
.ticket__txt span { font-weight: 600; font-size: 0.85rem; }
.ticket:hover { background: #fff; }

/* editor's letter */
.letter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  grid-template-areas: 'portrait body';
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  background: var(--a);
  color: var(--on-a);
}
.letter__portrait { grid-area: portrait; display: grid; gap: clamp(20px, 3vw, 36px); }
.letter__portrait .plate { box-shadow: 0 26px 44px -22px rgba(23, 17, 14, 0.6); }
.letter__body { grid-area: body; display: grid; gap: clamp(20px, 3vw, 36px); align-content: start; }
.letter .feature__title { font-size: clamp(2.6rem, 6.6vw, 6rem); max-width: 14ch; color: var(--hot-deep); }
.edu b { display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.3em 0.7em; background: var(--b); color: var(--on-b); font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1rem; }

/* letters */
.letters { background: var(--a); color: var(--on-a); display: grid; gap: 1.4rem; justify-items: start; }
.notes { columns: 3; column-gap: clamp(16px, 2.6vw, 40px); width: 100%; margin-top: clamp(12px, 2vw, 28px); }
.note-card {
  break-inside: avoid;
  margin-bottom: clamp(16px, 2.6vw, 40px);
  padding: clamp(18px, 2vw, 28px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 34px -20px rgba(23, 17, 14, 0.55);
}
.note-card blockquote p { font-style: italic; font-size: 1.1rem; line-height: 1.5; }
.sign { margin-top: 0.9rem; display: grid; font-family: var(--display); font-stretch: 75%; line-height: 1.3; }
.sign b { font-weight: 800; font-size: 1.3rem; }
.sign span { font-weight: 600; }
.note-card--1 { background: #c94b2b; color: #fff; transform: rotate(-1.2deg); }
.note-card--2 { background: var(--paper); transform: rotate(0.8deg); }
.note-card--3 { background: #0a6e4f; color: #fff; transform: rotate(1.4deg); }
.note-card--4 { background: #1fa6e8; transform: rotate(-0.8deg); }
.note-card--5 { background: #ff4d94; transform: rotate(1.2deg); }
.note-card--6 { background: var(--paper); transform: rotate(-1.4deg); }
.note-card--3 blockquote p, .note-card--5 blockquote p {
  font-family: var(--display);
  font-style: normal;
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.04;
}

/* contributors */
.contrib { background: var(--a); color: var(--on-a); display: grid; gap: 1.4rem; justify-items: start; }
.contrib .feature__title { color: var(--b); }
.names {
  columns: 3;
  column-gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(12px, 2vw, 28px);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.8vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.names li { break-inside: avoid; padding: 0.2em 0 0.2em 1em; text-indent: -1em; text-wrap: balance; --dot: var(--b); }
.names li::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--dot);
}
.names li:nth-child(6n + 1) { --dot: #c94b2b; }
.names li:nth-child(6n + 2) { --dot: #f28c28; }
.names li:nth-child(6n + 3) { --dot: #0e9aa7; }
.names li:nth-child(6n + 4) { --dot: #ff4d94; }
.names li:nth-child(6n + 5) { --dot: #1fa6e8; }
.names li:nth-child(6n) { --dot: #c8f135; }

/* back cover */
.back {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: 'lead wish' 'lead photo' 'links links' 'copy copy';
  gap: clamp(24px, 4vw, 64px);
  background: var(--a);
  color: var(--on-a);
  padding-bottom: clamp(100px, 10vw, 150px);
}
.back__lead { grid-area: lead; display: grid; gap: 1.4rem; justify-items: start; align-content: start; }
.back .feature__title { font-size: clamp(2.8rem, 8vw, 7.4rem); }
.back .deck { max-width: 40ch; }
.barcode--big { width: min(24rem, 100%); padding: 14px 16px 12px; margin: 0.4rem 0; }
.barcode--big .barcode__bars { height: 84px; }
.barcode--big .barcode__txt b { font-size: 2rem; }
.barcode--big .barcode__txt span { font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.asks__lead { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.4rem; }
.asks { display: grid; gap: 6px; counter-reset: ask; width: min(26rem, 100%); }
.asks li {
  counter-increment: ask;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  background: var(--b);
  color: var(--on-b);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.2rem;
}
.asks li::before { content: counter(ask); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--ink); color: #fff; font-size: 1.15rem; }
.back__wish { grid-area: wish; display: grid; gap: 1.2rem; align-content: start; }
.back__wish h3 { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; }
.back__wish ul { display: grid; gap: 1.2rem; }
.back__wish h4 { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--b); }
.back__wish p { max-width: 46ch; }
.back__photo { grid-area: photo; max-width: 30rem; }
.back__photo .plate { box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.6); }
.back__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.3rem; }
.back .hl { color: var(--ink); background-size: 100% 100%; padding: 0.35rem 0.7rem; min-height: 44px; display: inline-flex; align-items: center; }
.back .hl:hover { background: #fff; }
.copyright { grid-area: copy; font-size: 0.88rem; max-width: 70ch; }

/* ---------- photo viewer: one plate at a time ---------- */
.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--a, #fff);
  color: var(--on-a, var(--ink));
  overflow: hidden;
}
.viewer[open] { display: block; }
.viewer::backdrop { background: rgba(23, 17, 14, 0.88); }
.viewer__page { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; height: 100%; }
.viewer__fig { display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); min-height: 0; perspective: 1600px; }
.viewer__img { display: block; max-width: 100%; max-height: calc(100dvh - clamp(28px, 6vw, 80px)); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 60px -24px rgba(23, 17, 14, 0.7); touch-action: pan-y; }
.viewer__meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: clamp(18px, 3vw, 36px);
  background: var(--b, var(--ink));
  color: var(--on-b, #fff);
  overflow-y: auto;
}
.viewer__title { font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
.viewer__credit { font-style: italic; font-size: 0.95rem; line-height: 1.4; }
.viewer__folio { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 0.9rem; }
.viewer__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 1.1rem;
  border: 0;
  background: var(--a);
  color: var(--on-a);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.viewer__btn:hover { background: #fff; color: var(--ink); }
.viewer__btn--close { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink); }
.viewer__btn--close:hover { background: var(--hot); color: #fff; }
.viewer :focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--ink); }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .cover__head { padding-top: 56px; }
  .toc a { grid-template-columns: 3rem 1fr 3rem; }
  .toc img { width: 3rem; height: 3.8rem; }
  .op-split, .op-cover, .op-stack, .sp-dance-text, .letter, .back { grid-template-columns: minmax(0, 1fr); }
  .op-split__photo { min-height: 80svh; order: -1; }
  .op-split__photo .plate { position: relative; }
  .op-cover__mag .plate { width: min(100%, 22rem); }
  .letter { grid-template-areas: 'portrait' 'body'; }
  .letter__portrait { max-width: 20rem; }
  .back { grid-template-areas: 'lead' 'wish' 'photo' 'links' 'copy'; }
  .prints { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 22rem; margin-inline: auto; }
  .print--b { transform: rotate(1.6deg); }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf__item--2, .shelf__item--3, .shelf__item--4 { margin-top: 0; }
  .notes, .names { columns: 2; }
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb--c, .tb--q, .tb--e, .tb--g, .tb--h, .tb--i, .tb--j, .pp--a, .pp--b, .pp--c, .pp--d, .pp--e,
  .k-lead, .k-quote, .k-s1, .k-s2, .k-a, .k-j { grid-column: span 2; }
  .dept { grid-template-columns: minmax(0, 1fr); }
  .op-stack__pile { max-height: none; margin-bottom: 1rem; }
  .op-ring__title { justify-items: start; text-align: left; padding-right: var(--gutter); }
  .viewer__page { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .viewer__img { max-height: calc(100dvh - 15rem); }
  .viewer__meta { justify-content: flex-start; max-height: 14rem; }
  .viewer__btn--close { top: 8px; left: 8px; }
}
@media (max-width: 520px) {
  .notes, .names { columns: 1; }
  .cover__lines { bottom: calc(var(--pad) + 70px); width: calc(100% - 2 * var(--pad)); }
  .cover .barcode { left: var(--pad); right: var(--pad); width: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 12px; }
  .cover .barcode__bars { height: 44px; }
  .cover .barcode__txt b { font-size: 1.1rem; }
  .cover .barcode__txt span { font-size: 0.82rem; }
  .cl { font-size: 0.98rem; }
  .cover__lines li:nth-child(even) .cl { transform: rotate(0.8deg); }
}

/* ---------- reduced motion: fades only, no travel or rotation ---------- */
@media (prefers-reduced-motion: reduce) {
  .plate img, .plate::after, .cl, .barcode, .toc a, .tab, .dogear { transition: none; }
  .plate:hover img { transform: none; }
  .print--a, .print--b, .print--c, .note-card, .op-cover__mag .plate, .pile, .byline, .cover__lines li .cl { transform: none; }
  .cl:hover, .toc a:hover, .barcode:hover { transform: none; }
  .cover__photo img { animation: fade-in 0.8s ease both; }
  .mast, .byline, .cover__lines, .cover .barcode { animation: fade-in 0.8s ease both; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }