/* ============================================================
   THE DESK — Haute Lumière's own publishing surface.

   Everything here obeys the house: cream ground and never white,
   Cormorant Garamond for anything a human would read aloud,
   Manrope uppercase and tracked only for furniture the reader
   ignores, radius zero, hairline rules, one curve and three
   durations. Gold is a mark — a hairline, the monogram, a drop
   cap — and never a fill, so there is no gold button on this page
   or any other. Gold carries display type only: a kicker's words
   are --text-muted, and the gold in front of them is a hairline.

   THE SKINS AND ROOMS. Every choice a holder makes in Settings →
   Design arrives as one attribute on <html> (see default.hbs) and
   is read here. The skin is the register, and the token files
   beside this one — copied verbatim from the house — do all of it.
   The room, the measure, the gold, the breaks, the cap and the
   grain are the sections below, in that order.

   Scale is taken off cqi, so a spread reads the same whether it
   is a column on a phone or a page on a desk.
   ============================================================ */

@import url("./fonts.css");
@import url("./colors.css");
@import url("./typography.css");
@import url("./spacing.css");
@import url("./surfaces.css");
@import url("./motion.css");

/* ── The options, as four variables ───────────────────────── */
/* --mark        a hairline, the monogram, the current room
   --mark-type   gold that carries display type: the drop cap, the folio figures
   --mark-kicker the hairline in front of a kicker
   --mark-quote  the hairline over a pull quote */
html {
  --measure: 60ch;
  --mark: var(--gold);
  --mark-type: var(--gold-d);
  --mark-kicker: var(--gold);
  --mark-quote: var(--gold);
  color-scheme: light;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
html[data-measure="Narrow"] { --measure: 52ch; }
html[data-measure="Wide"]   { --measure: 68ch; }

html[data-gold="Kickers"]     { --mark-quote: var(--rule); }
html[data-gold="Pull quotes"] { --mark-kicker: transparent; }
html[data-gold="None"] {
  --mark: var(--text-muted); --mark-type: var(--ink);
  --mark-kicker: transparent; --mark-quote: var(--rule);
}

/* The dark three tell the browser so: scrollbars and form controls follow. */
html[data-register="vespers"], html[data-register="midnight"], html[data-register="nocturne"] { color-scheme: dark; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.15cqi, 20px);
  line-height: 1.62;
  container-type: inline-size;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  transition: var(--transition-register);
}

/* Paper grain — three per cent fractal noise, once, over the sheet.
   Multiply on the light registers and screen on the dark: the token
   says which. It never takes a touch. */
html[data-grain="on"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none;
  background-image: var(--grain-url);
  mix-blend-mode: var(--grain-blend);
}

/* Furniture — Manrope, uppercase, tracked, and never read aloud. */
.kicker, .meta, .nav a, .idx small, .entry .year {
  font-family: var(--font-sans);
  font-size: clamp(9px, .78cqi, 11px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-muted);
  font-variant-numeric: lining-nums;
}
.kicker { margin: 0; }
.kicker:empty { display: none; }

/* The gold mark in front of a section's kicker: a hairline, never a letter. */
:is(.opening, .issue-head, .lead .text, .folio-head, .further) > .kicker::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  margin: 0 14px 0 0;
  vertical-align: middle;
  background: var(--mark-kicker);
}
html[data-gold="Pull quotes"] :is(.opening, .issue-head, .lead .text, .folio-head, .further) > .kicker::before,
html[data-gold="None"] :is(.opening, .issue-head, .lead .text, .folio-head, .further) > .kicker::before { display: none; }

a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:active { opacity: var(--press-opacity); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

img { max-width: 100%; height: auto; display: block; }

/* ── The shell ─────────────────────────────────────────────── */
.wrap {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(clamp(22px, 4cqi, 74px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(22px, 4cqi, 74px), env(safe-area-inset-right, 0px));
}

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: clamp(22px, 3cqi, 52px) 0 clamp(14px, 2cqi, 22px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(14px, 2cqi, 34px); flex-wrap: wrap;
}
.masthead .name {
  font-family: var(--font-serif);
  font-weight: 300; font-size: clamp(30px, 4.6cqi, 62px);
  letter-spacing: -.015em; line-height: 1; margin: 0; color: var(--ink);
}
.masthead .name a:hover { text-decoration: none; opacity: var(--hover-opacity); }
.masthead .sub { margin: .5em 0 0; color: var(--text-muted); font-style: italic; }
.primary .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6cqi, 22px); }
.primary .nav li { margin: 0; }
.nav a { display: inline-block; padding: 8px 0; }
.nav .nav-current a {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--mark);
  text-decoration-thickness: 1px; text-underline-offset: .7em;
}

/* Masthead — Centred stands the title over the navigation. */
html[data-masthead="Centred"] .masthead,
html[data-masthead="Couture"] .masthead { flex-direction: column; align-items: center; text-align: center; }
html[data-masthead="Centred"] .primary .nav,
html[data-masthead="Couture"] .primary .nav { justify-content: center; }

/* Masthead — Couture sets it as the cover of an issue sets it: whispered,
   tracked .26em, and the description beneath it as tracked furniture. */
html[data-masthead="Couture"] .masthead { padding-top: clamp(34px, 5cqi, 74px); gap: clamp(22px, 2.6cqi, 34px); }
html[data-masthead="Couture"] .masthead .name {
  font-size: clamp(30px, 5.6cqi, 74px);
  letter-spacing: .26em; text-indent: .26em;
}
html[data-masthead="Couture"] .masthead .sub {
  font-family: var(--font-sans); font-style: normal; font-weight: 500;
  font-size: clamp(9px, .78cqi, 11px); text-transform: uppercase;
  letter-spacing: .5em; text-indent: .5em; margin-top: 1.8em;
}
html[data-masthead="Couture"] .primary { width: 100%; border-top: 1px solid var(--rule); padding-top: 8px; }

/* ── The opening of a run ──────────────────────────────────── */
.opening { border-bottom: 1px solid var(--rule); padding: clamp(34px, 4.4cqi, 74px) 0; }
.opening:not(:has(> *)) { display: none; }
.opening .line {
  font-size: clamp(26px, 3.4cqi, 46px); font-weight: 300; color: var(--ink);
  margin: .35em 0 0; line-height: 1.1; max-width: 24ch; letter-spacing: -.01em;
}
.opening .lede { font-style: italic; color: var(--text-muted); margin: .9em 0 0; max-width: 52ch; font-size: clamp(17px, 1.4cqi, 22px); }
html[data-masthead="Centred"] .opening, html[data-masthead="Couture"] .opening,
html[data-room="Letter"] .opening { text-align: center; }
html[data-masthead="Centred"] .opening :is(.line, .lede),
html[data-masthead="Couture"] .opening :is(.line, .lede),
html[data-room="Letter"] .opening :is(.line, .lede) { margin-inline: auto; }

/* ════════════════════════════════════════════════════════════
   THE ROOMS — five layouts of the run
   ════════════════════════════════════════════════════════════ */

/* ── Magazine: the cover story ─────────────────────────────── */
.lead {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4cqi, 74px); align-items: center;
  padding: clamp(34px, 4.4cqi, 74px) 0 0;
}
.lead.has-plate { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.lead .shot { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.lead .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.lead h2 {
  font-weight: 300; font-size: clamp(34px, 5cqi, 74px); line-height: 1.04;
  letter-spacing: -.015em; color: var(--ink); margin: .3em 0 0; max-width: 16ch;
}
.lead:not(.has-plate) h2 { max-width: 20ch; }
.lead .deck { font-style: italic; font-size: clamp(19px, 1.7cqi, 26px); line-height: 1.4; color: var(--text-muted); margin: .8em 0 0; max-width: 40ch; }
.lead .meta { margin: 1.6em 0 0; }
@container (max-width: 760px) { .lead.has-plate { grid-template-columns: minmax(0, 1fr); } }

/* ── Magazine: cells over a hairline ───────────────────────────
   The rules are the cells' own outlines meeting in a 1px gap, so a
   short last row ends in paper rather than a block of rule colour.
   The outer edges are clipped, so the grid has rules between cells,
   above and below, and nothing standing at its sides. */
.desk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1px; padding: 1px 0; overflow: hidden;
  margin: clamp(34px, 4cqi, 74px) 0;
}
.desk:not(:has(> *)) { display: none; }
.cell {
  outline: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(22px, 2.6cqi, 34px);
  display: flex; flex-direction: column; gap: .7em;
  transition: background var(--dur-base) var(--ease);
}
.cell:hover { background: var(--paper-2); }
.cell h2 { font-weight: 400; font-size: clamp(22px, 2.1cqi, 30px); line-height: 1.16; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.cell .meta, .cell .excerpt { margin: 0; }
.cell .excerpt { color: var(--text-muted); }
.cell .plate { display: block; margin: 0 0 .4em; aspect-ratio: 3 / 4; overflow: hidden; }
.cell .plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* ── Journal: one column, dated entries ────────────────────── */
.journal { max-width: calc(var(--measure) + 12rem); margin: 0 auto clamp(34px, 4cqi, 74px); }
.entry {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(22px, 3cqi, 52px);
  padding: clamp(34px, 4cqi, 52px) 0;
  border-bottom: 1px solid var(--rule);
}
.entry .dateline { margin: 0; }
.entry .dateline time { display: flex; flex-direction: column; gap: 4px; }
.entry .day { font-size: clamp(34px, 4.6cqi, 62px); font-weight: 300; line-height: .9; color: var(--ink); font-variant-numeric: lining-nums; }
.entry .month { font-style: italic; color: var(--text-body); }
.entry h2 { font-weight: 400; font-size: clamp(24px, 2.4cqi, 34px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .5em; }
.entry .excerpt { margin: 0 0 1em; max-width: var(--measure); }
.entry .plate { display: block; margin: 0 0 1em; }
.entry .plate img { width: 100%; height: auto; max-height: min(62svh, 560px); object-fit: contain; object-position: 0% 0%; }
.entry .meta { margin: 0; }
@container (max-width: 640px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .entry .dateline time { flex-direction: row; align-items: baseline; gap: 8px; }
  .entry .day { font-size: 34px; }
}

/* ── Salon: plates first ───────────────────────────────────────
   A photograph laid on the paper casts the plate's own shadow, the
   one shadow the house gives a picture. A panel is ink, not a print,
   so it casts nothing. */
.salon {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4.4cqi, 74px) clamp(22px, 3cqi, 52px);
  margin: clamp(34px, 4.4cqi, 74px) 0;
}
.home-template .salon .sitting:first-child { grid-column: 1 / -1; }
.sitting .frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: var(--shadow-plate); }
.home-template .salon .sitting:first-child .frame { aspect-ratio: 16 / 10; }
.sitting .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.sitting.is-panel .frame { box-shadow: none; }
.sitting .panel {
  display: flex; align-items: flex-end; height: 100%;
  padding: clamp(22px, 3cqi, 52px);
  background: var(--panel); color: var(--panel-ink);
}
.sitting .panel-title { font-size: clamp(26px, 3.4cqi, 46px); font-weight: 300; font-style: italic; line-height: 1.08; max-width: 14ch; }
.sitting .caption { padding-top: clamp(14px, 1.6cqi, 22px); }
.sitting h2 { font-weight: 400; font-style: italic; font-size: clamp(22px, 2.2cqi, 30px); line-height: 1.15; color: var(--ink); margin: 0 0 .35em; }
.sitting .meta { margin: 0; }
.sitting .excerpt { color: var(--text-muted); margin: .6em 0 0; max-width: 44ch; }
@container (max-width: 700px) { .salon { grid-template-columns: minmax(0, 1fr); } }

/* ── Letter: narrow and intimate ───────────────────────────── */
.letters { max-width: calc(var(--measure) - 8ch); margin: clamp(22px, 3cqi, 52px) auto clamp(34px, 4cqi, 74px); }
.letter { text-align: center; padding: clamp(34px, 4cqi, 52px) 0; }
.letter + .letter::before {
  content: ""; display: block; width: 22px; height: 1px;
  margin: 0 auto clamp(34px, 4cqi, 52px);
  background: var(--mark);
}
.letter .meta { margin: 0; }
.letter h2 { font-style: italic; font-weight: 300; font-size: clamp(28px, 3cqi, 40px); line-height: 1.12; color: var(--ink); margin: .4em 0 .5em; }
.letter .excerpt { margin: 0 auto; color: var(--text-body); }
.letter .more { margin: 1.4em 0 0; }
.letter .more a { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 1px; text-underline-offset: .6em; }

/* ── Folio: the contents, numbered in roman ────────────────────
   The count carries across pages: the list is told its page and its
   page size, and counter-reset does the arithmetic. Where a browser
   will not, the declaration falls away and each page counts from I —
   a folio of its own, which reads true. */
.folio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(34px, 5.4cqi, 74px); align-items: start;
  padding: clamp(34px, 5cqi, 74px) 0;
}
.folio-head { position: sticky; top: clamp(22px, 3cqi, 52px); }
.folio-title { font-weight: 300; font-size: clamp(34px, 4.6cqi, 62px); line-height: 1.04; letter-spacing: .01em; color: var(--ink); margin: .35em 0 0; }
.folio .lede { font-style: italic; color: var(--text-muted); font-size: clamp(17px, 1.5cqi, 22px); line-height: 1.55; margin: 1em 0 0; max-width: 34ch; }
.idx { list-style: none; margin: 0; padding: 0; counter-reset: entry calc((var(--from, 1) - 1) * var(--per, 12)); }
.idx li {
  counter-increment: entry;
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 0 clamp(14px, 1.6cqi, 22px); align-items: baseline;
  padding: clamp(14px, 1.8cqi, 22px) 0;
  border-bottom: 1px solid var(--rule);
}
.idx li:first-child { border-top: 1px solid var(--rule); }
.idx .n { font-style: italic; font-size: 26px; line-height: 1; color: var(--mark-type); }
.idx .n::before { content: counter(entry, upper-roman); }
.idx .t { font-size: clamp(20px, 1.9cqi, 26px); line-height: 1.2; color: var(--ink); }
.idx .t small { display: block; margin-top: .55em; }
.idx .excerpt { grid-column: 2; margin: .6em 0 0; color: var(--text-muted); font-style: italic; }
@container (max-width: 760px) {
  .folio { grid-template-columns: minmax(0, 1fr); }
  .folio-head { position: static; }
}

/* ════════════════════════════════════════════════════════════
   AN ISSUE — one post, in the hand of a room
   ════════════════════════════════════════════════════════════ */
.issue { max-width: var(--measure); margin: 0 auto; padding: clamp(34px, 6cqi, 74px) 0 clamp(34px, 4cqi, 52px); }
.issue-head { border-bottom: 1px solid var(--rule); padding-bottom: clamp(22px, 2.4cqi, 34px); margin-bottom: clamp(22px, 3cqi, 52px); }
.issue h1 {
  font-weight: 300; font-size: clamp(32px, 5cqi, 64px);
  line-height: 1.06; letter-spacing: -.02em; margin: .3em 0 0; color: var(--ink);
}
.issue .deck { font-size: clamp(19px, 1.6cqi, 25px); font-style: italic; line-height: 1.4; color: var(--text-muted); margin: .8em 0 0; }
.issue .byline { margin: 1.6em 0 0; }
.issue .byline:empty { display: none; }
.byline > * + *::before { content: "·"; margin: 0 .8em; }
.issue-head .dateline { display: none; margin: 0; }

/* The cover. Bleed: edge to edge, held from the top, so anything lost
   is lost from the bottom. Uncut: the whole photograph, contained. */
.cover { margin: 0 0 clamp(34px, 4cqi, 52px); }
.cover--bleed { width: 100cqi; max-width: none; margin-inline: calc(50% - 50cqi); }
.cover--bleed img { width: 100%; height: auto; max-height: 86svh; object-fit: cover; object-position: 50% 0%; }
.cover--uncut { width: min(96cqi, 1100px); max-width: none; margin-inline: calc(50% - min(48cqi, 550px)); }
.cover--uncut img { width: 100%; height: auto; max-height: 88svh; object-fit: contain; }
.cover figcaption { font-style: italic; color: var(--text-muted); font-size: .92em; max-width: var(--measure); margin: .8em auto 0; padding-inline: clamp(22px, 4cqi, 74px); }
.cover--uncut figcaption { padding-inline: 0; }

/* Journal — the dateline leads, in italic, and stands for the kicker. */
.issue[data-layout="Journal"] .issue-head .dateline { display: block; font-style: italic; font-size: clamp(19px, 1.8cqi, 26px); color: var(--text-body); }
.issue[data-layout="Journal"] .issue-head .kicker { display: none; }
.issue[data-layout="Journal"] h1 { font-size: clamp(30px, 4.2cqi, 52px); margin-top: .35em; }

/* Salon — the plate hangs first, under the masthead, and the words are
   centred beneath it. */
.issue[data-layout="Salon"] { padding-top: 0; }
.issue[data-layout="Salon"] .cover { margin-top: 0; }
.issue[data-layout="Salon"] .issue-head { text-align: center; padding-top: clamp(22px, 3cqi, 52px); }
.issue[data-layout="Salon"] .deck { margin-inline: auto; max-width: 44ch; }

/* Letter — narrower than the measure, the date above in italic, the
   title italic and centred, the signature to close. */
.issue[data-layout="Letter"] { max-width: calc(var(--measure) - 8ch); }
.issue[data-layout="Letter"] .issue-head { text-align: center; border-bottom: 0; }
.issue[data-layout="Letter"] .issue-head .dateline { display: block; text-align: right; font-style: italic; color: var(--text-muted); margin-bottom: clamp(22px, 3cqi, 52px); }
.issue[data-layout="Letter"] .issue-head .kicker { display: none; }
.issue[data-layout="Letter"] h1 { font-style: italic; font-size: clamp(30px, 3.6cqi, 46px); letter-spacing: -.01em; }
.issue[data-layout="Letter"] .issue-head::after {
  content: ""; display: block; width: 22px; height: 1px;
  margin: clamp(22px, 3cqi, 34px) auto 0; background: var(--mark);
}

/* Folio — the head opens to two columns over a hairline: the kicker and
   title on the left, the deck and byline answering on the right. */
.issue[data-layout="Folio"] .issue-head {
  width: min(96cqi, 1100px); max-width: none; margin-inline: calc(50% - min(48cqi, 550px));
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "kicker ." "title deck" "title byline";
  gap: 14px clamp(34px, 5cqi, 74px); align-items: end;
}
.issue[data-layout="Folio"] .issue-head .kicker { grid-area: kicker; }
.issue[data-layout="Folio"] .issue-head h1 { grid-area: title; margin: 0; }
.issue[data-layout="Folio"] .issue-head .deck { grid-area: deck; margin: 0; }
.issue[data-layout="Folio"] .issue-head .byline { grid-area: byline; margin: 0; }
@container (max-width: 760px) {
  .issue[data-layout="Folio"] .issue-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "deck" "byline"; }
}

/* ── The body of an issue ──────────────────────────────────── */
html[data-dropcap="on"] .issue:not([data-layout="Page"]) .body > p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: .82;
  padding: .06em .1em 0 0; color: var(--mark-type); font-weight: 300;
}
.body p { margin: 0 0 1.15em; }
.body h2, .body h3, .body h4 { font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; margin: 1.9em 0 .5em; }
.body h2 { font-size: clamp(24px, 2.4cqi, 34px); }
.body h3 { font-size: clamp(20px, 1.9cqi, 26px); }
.body h4 { font-size: 1.05em; font-style: italic; }
.body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--text-muted); }
.body a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.body ul, .body ol { padding-left: 1.2em; margin: 0 0 1.15em; }
.body li { margin: .3em 0; }
.body figure { margin-block: clamp(22px, 3cqi, 52px); }
.body figcaption { font-style: italic; color: var(--text-muted); margin-top: .7em; font-size: .92em; }

/* The pulled quote — the source's own sentence, set large, with a
   hairline above it: gold when the holder wants it, rule otherwise. */
.body blockquote {
  margin: clamp(34px, 3.4cqi, 52px) 0; padding: clamp(14px, 2cqi, 22px) 0 0;
  border-top: 1px solid var(--mark-quote);
  font-size: clamp(23px, 2.6cqi, 34px); line-height: 1.24;
  color: var(--ink); max-width: 26ch; font-weight: 300;
}
.body blockquote p { margin: 0; }
.body blockquote.kg-blockquote-alt { border-top: 0; padding: 0 1em; max-width: none; text-align: center; font-style: italic; }

/* The aphorism line — italic serif, set apart, under twenty words. */
.quiet { font-style: italic; color: var(--ink); font-size: 1.14em; margin: 1.8em 0; }

/* Section breaks — a divider in the text, set three ways. */
.body hr { border: 0; height: 1px; margin: 2.4em 0; background: var(--rule); }
html[data-break="Monogram"] .body hr { position: relative; height: 22px; margin: 2.6em 0; background: none; overflow: visible; }
html[data-break="Monogram"] .body hr::before {
  content: ""; position: absolute; top: 11px; left: calc(50% - 12px);
  width: 24px; height: 1px; background: var(--mark);
}
html[data-break="Monogram"] .body hr::after {
  content: ""; position: absolute; top: 3px; left: calc(50% - 8px);
  width: 16px; height: 16px; border: 1px solid var(--mark); border-radius: 50%;
}
html[data-break="Air"] .body hr { height: 0; margin: 3.4em 0; background: none; }

.body pre { background: var(--paper-2); color: var(--ink); padding: clamp(14px, 2cqi, 22px); overflow-x: auto; font-size: .82em; line-height: 1.6; margin: 0 0 1.15em; }
.body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; }
.body table { width: 100%; border-collapse: collapse; margin: 0 0 1.15em; font-variant-numeric: lining-nums tabular-nums; }
.body th, .body td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.body th { font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--text-muted); }

/* ── The editor's own classes ──────────────────────────────────
   Ghost's editor sets wide and full-bleed cards with these two class
   names: wide breaks the measure a little, full breaks the page. Its
   card stylesheet loads after this one and brings radii, coloured
   callouts and filled buttons, so the house answer is stated with the
   weight to hold: no radius on any card, callouts on the paper's own
   second tone, and a button is a word with a hairline under it. */
.body .kg-width-wide { width: min(96cqi, 1100px); max-width: none; margin-inline: calc(50% - min(48cqi, 550px)); }
.body .kg-width-full { width: 100cqi; max-width: none; margin-inline: calc(50% - 50cqi); }
.kg-width-full img, .kg-width-wide img { width: 100%; }
.body .kg-card { margin-block: clamp(22px, 3cqi, 52px); }
.body .kg-image-card figcaption, .body .kg-embed-card figcaption { font-style: italic; color: var(--text-muted); margin-top: .7em; }
html .body [class*="kg-"] { border-radius: var(--radius-none) !important; }
html .body .kg-callout-card, html .body [class*="kg-callout-card-"] { background: var(--paper-2) !important; color: var(--text-body) !important; }
html .body .kg-bookmark-container { border: 1px solid var(--rule) !important; color: var(--ink) !important; }
html .body :is(.kg-btn, .kg-button-card a, .kg-header-card-button, .kg-product-card-button, .kg-cta-button) {
  background: transparent !important; color: var(--ink) !important;
  border: 0 !important; padding: 14px 0 !important; height: auto !important;
  font-family: var(--font-sans) !important; font-size: 11px !important; font-weight: 500 !important;
  text-transform: uppercase; letter-spacing: .2em;
  text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 1px; text-underline-offset: .7em;
}

/* ── The close of an issue ─────────────────────────────────── */
.issue-close { margin-top: clamp(34px, 4cqi, 52px); }
.signature { font-style: italic; font-size: clamp(20px, 1.8cqi, 26px); color: var(--ink); text-align: right; margin: 0 0 1em; }
.issue-close .set { text-align: center; }
.mono { display: block; margin: clamp(34px, 4cqi, 74px) auto; width: 26px; height: 26px; }
.mono circle, .mono line { fill: none; stroke: var(--mark); stroke-width: .8; }

/* Further reading — three Magazine cells under the issue. */
.further { border-top: 1px solid var(--rule); padding-top: clamp(34px, 4cqi, 52px); margin-top: clamp(22px, 3cqi, 52px); }
.further .desk { margin-top: clamp(22px, 3cqi, 34px); }

/* ── The way on ────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; gap: 22px; padding: clamp(22px, 3cqi, 52px) 0; }
.pager:not(:has(a)) { display: none; }
.pager a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--mark);
  text-decoration-thickness: 1px; text-underline-offset: .7em;
}
.pager .older { margin-left: auto; }

/* ── The foot ──────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(34px, 3.4cqi, 52px) 0 max(clamp(52px, 5cqi, 74px), env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}

/* ── Nothing here yet, and it is spacious ──────────────────── */
.empty { padding: clamp(52px, 8cqi, 140px) 0; text-align: center; color: var(--text-muted); font-style: italic; }

/* On glass the hit area grows and the mark never does. */
html[data-surface="ios"] [data-hit], html[data-surface="android"] [data-hit], html[data-surface="app"] [data-hit] {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* On paper: no navigation, no grain, no way on. The words and the plates. */
@media print {
  html[data-grain="on"] body::after, .primary, .pager, .further { display: none; }
  .cover--bleed, .kg-width-full { width: 100%; margin-inline: 0; }
}