/* Voyage East China guides. Fixed A4 print system. */
:root {
  --navy: #16263A;
  --ivory: #F3EEE3;
  --terracotta: #BD5A3C;
  --charcoal: #2E2B27;
  --card: #EAE3D5;
  --hairline: rgba(46,43,39,0.12);

  --paper: var(--ivory);
  --ink: var(--charcoal);
  --muted: color-mix(in srgb, var(--charcoal) 66%, var(--ivory));
  --faint: color-mix(in srgb, var(--charcoal) 44%, var(--ivory));
  --light: color-mix(in srgb, var(--ivory) 88%, white);
  --line: var(--hairline);
  --page-x: 18mm;
  --page-y: 20mm;
  --safe-bottom: 21mm;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --font-cjk: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
}

@page {
  size: A4;
  margin: 0;
}

* {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  --running-tagline: "Voyage East";
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.guide-kit { --running-tagline: "Client pre-arrival manual"; }
body.guide-free { --running-tagline: "Practical arrival and culture guide"; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

svg.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.03) brightness(0.96);
}

h1,
h2,
h3,
.quote-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  max-width: 9ch;
  font-size: 74px;
  line-height: 0.92;
}

h2 {
  max-width: 14ch;
  font-size: 43px;
  line-height: 1.02;
}

h3 {
  font-size: 24px;
  line-height: 1.08;
}

p {
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 28px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark::after {
  content: ".";
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font: 500 10px var(--font-label);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.topbar nav a {
  text-decoration: none;
}

.print-btn {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--ivory);
  padding: 9px 12px;
  font: 500 10px var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.doc {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 18px 64px;
}

.page {
  position: relative;
  display: grid;
  width: 210mm;
  height: 297mm;
  margin: 0 auto 28px;
  padding: var(--page-y) var(--page-x) var(--safe-bottom);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(22, 38, 58, 0.10);
  break-after: page;
  page-break-after: always;
}

.page > * {
  position: relative;
  z-index: 1;
}

.page::before,
.page::after {
  position: absolute;
  z-index: 4;
  color: color-mix(in srgb, var(--charcoal) 48%, transparent);
  font: 500 8.5px var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.page:not(.cover):not(.back)::before {
  content: attr(data-section);
  top: 9mm;
  left: var(--page-x);
}

.page:not(.cover):not(.back)::after {
  content: var(--running-tagline) " / " attr(data-page);
  right: var(--page-x);
  bottom: 8mm;
  left: var(--page-x);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.card,
.block,
.table,
.visual-module,
table,
.note,
.flow,
.app-grid,
.check-grid,
.support-panel,
.station-card {
  break-inside: avoid;
  page-break-inside: avoid;
}

.cover,
.back,
.photo-page {
  padding: 0;
  color: var(--ivory);
  background: var(--navy);
}

.full-height-image,
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 38, 58, 0.04), rgba(22, 38, 58, 0.90)),
    linear-gradient(90deg, rgba(22, 38, 58, 0.45), rgba(22, 38, 58, 0.08) 68%);
}

.cover .wordmark,
.photo-page .wordmark {
  position: absolute;
  top: 20mm;
  left: 18mm;
  z-index: 2;
  color: var(--ivory);
}

.cover-content,
.photo-content {
  align-self: end;
  max-width: 150mm;
  padding: 0 18mm 24mm;
}

.photo-content.minimal {
  max-width: 102mm;
}

.cover h1,
.cover p,
.photo-page h2,
.photo-page p,
.back h1,
.back p,
.navy-panel h2,
.navy-panel h3,
.navy-panel p,
.navy-panel strong,
.flow.dark strong,
.flow.dark p {
  color: var(--ivory);
}

.cover .lead,
.photo-page .lead,
.back .lead,
.navy-panel .lead {
  color: color-mix(in srgb, var(--ivory) 84%, transparent);
}

.eyebrow,
.kicker,
.label,
th,
.meta,
.folio {
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cover .eyebrow,
.photo-page .eyebrow,
.back .eyebrow,
.navy-panel .eyebrow {
  color: color-mix(in srgb, var(--ivory) 72%, transparent);
}

.section-rule,
.rule {
  width: 46px;
  height: 1px;
  margin: 18px 0;
  background: var(--terracotta);
}

.lead {
  max-width: 50ch;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.42;
}

.small {
  font-size: 12px;
  line-height: 1.45;
}

.fineprint {
  color: var(--muted);
  font: 500 10px/1.5 var(--font-label);
  letter-spacing: 0.02em;
}

.stack {
  display: grid;
  gap: 15px;
  align-content: start;
}

.stack.loose {
  gap: 22px;
}

.corner {
  align-content: end;
  max-width: 106mm;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70mm;
  gap: 16mm;
  height: 100%;
  align-items: stretch;
}

.split.wide {
  grid-template-columns: 82mm minmax(0, 1fr);
}

.split.reverse {
  grid-template-columns: 72mm minmax(0, 1fr);
}

.side-image {
  margin: calc(var(--page-y) * -1) calc(var(--page-x) * -1) calc(var(--safe-bottom) * -1) 0;
  background: var(--navy);
  min-height: 100%;
}

.split.reverse .side-image {
  margin: calc(var(--page-y) * -1) 0 calc(var(--safe-bottom) * -1) calc(var(--page-x) * -1);
}

.banner-image {
  height: 62mm;
  margin: 4mm calc(var(--page-x) * -1) 0;
  background: var(--navy);
}

.navy-plate {
  display: grid;
  min-height: 62mm;
  padding: 11mm;
  align-content: end;
  background: var(--navy);
  color: var(--ivory);
}

.navy-plate p {
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
}

.glyph {
  position: absolute;
  z-index: 0;
  right: -13mm;
  top: 28mm;
  color: var(--navy);
  font: 600 118px var(--font-cjk);
  opacity: 0.07;
  pointer-events: none;
  writing-mode: vertical-rl;
}

.photo-page .glyph,
.back .glyph {
  color: var(--ivory);
}

.quote-mark {
  max-width: 15ch;
  color: var(--ink);
  font-size: 58px;
  font-style: italic;
  line-height: 0.98;
}

.quote-page {
  align-content: center;
}

.quote-page .quote-mark {
  margin-left: 12mm;
}

.quote-page .lead {
  margin-top: 10mm;
  margin-left: 12mm;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 74mm;
  background: var(--navy);
  color: var(--ivory);
}

.proof {
  display: grid;
  padding: 12mm 8mm;
  align-content: end;
  border-right: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
}

.proof:last-child {
  border-right: 0;
}

.proof strong {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 600;
  line-height: 0.86;
}

.proof strong::after {
  content: ".";
}

.proof span {
  margin-top: 8px;
  color: color-mix(in srgb, var(--ivory) 74%, transparent);
  font: 500 9px/1.35 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card,
.note,
.block {
  background: color-mix(in srgb, var(--card) 78%, var(--paper));
  border: 1px solid var(--line);
}

.card {
  padding: 13px 14px;
}

.card p,
.note,
li {
  font-size: 13px;
  line-height: 1.45;
}

.kicker,
.label {
  display: block;
  margin-bottom: 7px;
  color: color-mix(in srgb, var(--charcoal) 58%, var(--ivory));
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grid {
  display: grid;
  gap: 9px;
}

.two { grid-template-columns: repeat(2, 1fr); }
.three { grid-template-columns: repeat(3, 1fr); }
.four { grid-template-columns: repeat(4, 1fr); }

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0;
  margin: 0;
}

.check-grid li {
  display: grid;
  min-height: 22mm;
  margin: 0;
  padding: 10px 12px;
  list-style: none;
  align-content: start;
  background: color-mix(in srgb, var(--card) 70%, var(--paper));
  border: 1px solid var(--line);
}

.check-grid li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-bottom: 7px;
  border: 1px solid var(--navy);
}

.flow {
  display: grid;
  gap: 8px;
}

.flow.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.flow.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.step {
  min-height: 34mm;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--card) 75%, var(--paper));
  border: 1px solid var(--line);
}

.flow.dark .step {
  background: var(--navy);
  color: var(--ivory);
  border-color: color-mix(in srgb, var(--ivory) 18%, transparent);
}

.step strong {
  display: block;
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 600;
  line-height: 0.95;
}

.step strong::after {
  content: ".";
}

.step p {
  margin-top: 8px;
  font-size: 12.5px;
}

.fallback {
  display: grid;
  gap: 7px;
  padding-left: 0;
  margin: 0;
  counter-reset: fallback;
}

.fallback li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 13mm;
  padding: 8px 10px;
  list-style: none;
  background: color-mix(in srgb, var(--card) 72%, var(--paper));
  border: 1px solid var(--line);
  counter-increment: fallback;
}

.fallback li::before {
  content: counter(fallback);
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
}

.tile {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--ink);
}

.app-glyph {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app {
  display: grid;
  min-height: 36mm;
  padding: 10px;
  gap: 7px;
  align-content: start;
  background: color-mix(in srgb, var(--card) 72%, var(--paper));
  border: 1px solid var(--line);
}

.app strong {
  font-size: 13px;
}

.app p {
  font-size: 11.5px;
  line-height: 1.38;
}

.profile-list {
  display: grid;
  gap: 0;
}

.profile {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.profile p {
  font-size: 12.2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.7px;
}

th,
td {
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--faint);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

td:first-child {
  color: var(--ink);
  font-weight: 600;
}

.city-table td:first-child,
.phrase-table td:nth-child(2) {
  font-family: var(--font-cjk);
}

.phrase-table td:nth-child(2) {
  font-size: 16px;
  font-weight: 500;
}

.toc {
  display: grid;
  gap: 0;
}

.toc a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7.5px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
}

.toc span:last-child {
  color: var(--muted);
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
}

.station-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--card) 74%, var(--paper));
  border: 1px solid var(--line);
}

.station-card .hanzi {
  font-family: var(--font-cjk);
  font-size: 35px;
  font-weight: 600;
  line-height: 1.05;
}

.annotation {
  display: grid;
  gap: 6px;
}

.annotation div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.support-panel {
  display: grid;
  gap: 9px;
  padding: 13px;
  background: var(--navy);
  color: var(--ivory);
}

.support-panel p,
.support-panel strong {
  color: var(--ivory);
}

.support-row {
  display: grid;
  grid-template-columns: 34mm 1fr;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
}

.button-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.back {
  display: grid;
  align-content: center;
  padding: 24mm 18mm;
}

.back::after {
  content: "";
  position: absolute;
  right: var(--page-x);
  bottom: 8mm;
  left: var(--page-x);
  border-top: 1px solid color-mix(in srgb, var(--ivory) 20%, transparent);
}

.back-content {
  max-width: 138mm;
}

.contact {
  margin-top: 18px;
  color: color-mix(in srgb, var(--ivory) 76%, transparent);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.route {
  display: grid;
  gap: 8px;
}

.route-row {
  display: grid;
  grid-template-columns: 42mm 1fr;
  gap: 12px;
  align-items: center;
  min-height: 20mm;
  border-top: 1px solid var(--line);
}

.route-line {
  position: relative;
  height: 22px;
}

.route-line::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--navy);
}

.route-line::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    28mm 0 0 var(--paper),
    28mm 0 0 1px var(--navy);
}

@media screen and (max-width: 860px) {
  body {
    font-size: 16px;
  }

  .topbar nav {
    display: none;
  }

  .doc {
    padding: 0;
  }

  .page {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 44px 22px 78px;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  .cover,
  .back,
  .photo-page {
    min-height: 100vh;
    padding: 0;
  }

  .cover-content,
  .photo-content {
    padding: 0 24px 62px;
  }

  .cover .wordmark,
  .photo-page .wordmark {
    top: 26px;
    left: 24px;
  }

  .split,
  .split.wide,
  .split.reverse,
  .two,
  .three,
  .four,
  .flow.cols-4,
  .flow.cols-3,
  .check-grid,
  .app-grid,
  .proof-strip,
  .route-row {
    grid-template-columns: 1fr;
  }

  .side-image,
  .split.reverse .side-image,
  .banner-image {
    height: 420px;
    margin: 0;
  }

  .glyph {
    display: none;
  }

  h1 {
    font-size: clamp(56px, 15vw, 82px);
  }

  h2 {
    font-size: clamp(36px, 10vw, 50px);
  }
}

@media print {
  html,
  body,
  .doc,
  .page {
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--paper);
    font-size: 11pt;
  }

  .topbar {
    display: none;
  }

  .doc {
    max-width: none;
  }

  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: var(--page-y) var(--page-x) var(--safe-bottom);
    border: 0;
    box-shadow: none;
    break-before: auto;
    page-break-before: auto;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cover,
  .back,
  .photo-page {
    padding: 0;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* ==========================================================================
   Free guide additions. Scoped to body.guide-free so the client kit is
   unaffected. Adds: real app-logo tiles, day timeline, city chooser,
   photo strips and a single-action closing block.
   ========================================================================== */

body.guide-free {
  --running-tagline: "First Time in China";

  /* Match the "Celadon Ink" social carousel system (voyage east
     图文/ve-carousel/design-system.md): Cormorant Garamond for display,
     DM Sans for body copy and word labels, JetBrains Mono reserved for
     pure digit displays only. The client kit keeps Inter/IBM Plex Mono. */
  --font-body: 'DM Sans', 'PingFang SC', sans-serif;
  --font-label: 'DM Sans', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

.guide-free .eyebrow,
.guide-free .kicker,
.guide-free .label,
.guide-free th,
.guide-free .meta,
.guide-free .cover-edition,
.guide-free .topbar nav,
.guide-free .print-btn,
.guide-free .cover-foot {
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Headline weights, matched to the carousel type scale: cover 400, every
   other headline 500, quotes 300 italic. The base stylesheet sets 600
   uniformly for the client kit; this guide reads lighter throughout. */
.guide-free h1 {
  font-weight: 400;
}

.guide-free h2,
.guide-free h3 {
  font-weight: 500;
}

.guide-free .quote-mark {
  font-weight: 300;
}

/* The live site's own nav wordmark is Cormorant Garamond at weight 300
   (site.css .nav-wordmark) — match it exactly rather than the base
   stylesheet's 600, which was tuned for the client kit's heavier voice. */
.guide-free .wordmark {
  font-weight: 300;
}

/* Each free-guide page carries a designed eyebrow, so the margin running head
   would repeat the same words 11mm above it. Keep the footer, drop the head. */
.guide-free .page:not(.cover):not(.back)::before {
  content: none;
}

/* Brand marks must keep their own colour, unlike editorial photography. */
.guide-free .logo-tile img,
.guide-free .mark img {
  height: auto;
  object-fit: contain;
  filter: none;
}

.guide-free .logo-tile {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--line);
}

.guide-free .app-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.guide-free .app-logo-grid .app {
  grid-template-columns: 34px 1fr;
  gap: 11px;
  min-height: 0;
  padding: 11px 12px;
  align-content: center;
}

.guide-free .app-logo-grid .app div {
  display: grid;
  gap: 3px;
}

.guide-free .app-logo-grid .app strong {
  font-size: 13.5px;
  line-height: 1.15;
}

.guide-free .app-logo-grid .app p {
  font-size: 11.5px;
  line-height: 1.35;
}

.guide-free .app-logo-grid .app .cn {
  color: var(--faint);
  font-family: var(--font-cjk);
  font-size: 11px;
}

/* Day timeline: alternating photo and note, used on the Hangzhou page. */
.guide-free .daypart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.guide-free .daypart {
  display: grid;
  grid-template-rows: 41mm auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 72%, var(--paper));
  border: 1px solid var(--line);
}

.guide-free .daypart figure {
  margin: 0;
  overflow: hidden;
  background: var(--navy);
}

.guide-free .daypart .body {
  padding: 10px 12px 12px;
}

.guide-free .daypart .time {
  display: block;
  margin-bottom: 5px;
  color: var(--terracotta);
  font: 500 8.5px var(--font-mono);
  letter-spacing: 0.06em;
}

.guide-free .daypart strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.06;
}

.guide-free .daypart .cn {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-cjk);
  font-size: 11px;
}

.guide-free .daypart p {
  margin-top: 6px;
  font-size: 11.8px;
  line-height: 1.4;
}

/* City chooser. Denser than .card so nine cities fit one page. */
.guide-free .city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.guide-free .city {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 29mm;
  padding: 10px 11px;
  background: color-mix(in srgb, var(--card) 70%, var(--paper));
  border: 1px solid var(--line);
}

.guide-free .city h3 {
  font-size: 18px;
}

.guide-free .city .cn {
  color: var(--faint);
  font-family: var(--font-cjk);
  font-size: 10.5px;
}

.guide-free .city p {
  font-size: 11.3px;
  line-height: 1.38;
}

/* Three-up photo strip, full page width. */
.guide-free .photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  height: 40mm;
  margin: 0 calc(var(--page-x) * -1);
  background: var(--navy);
}

.guide-free .photo-strip figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.guide-free .photo-strip figcaption {
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  color: var(--ivory);
  font: 500 8px var(--font-label);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 6px rgba(22, 38, 58, 0.75);
  text-transform: uppercase;
}

/* Closing page: one primary action, everything else demoted to text links. */
.guide-free .cta-primary {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 22px;
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  color: var(--ivory);
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.guide-free .cta-secondary {
  display: grid;
  gap: 0;
  margin-top: 4mm;
}

.guide-free .cta-secondary a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  text-decoration: none;
}

.guide-free .cta-secondary a span:last-child {
  color: var(--faint);
}

/* Numbered contents rows. */
.guide-free .index-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.guide-free .index-row > span {
  color: var(--terracotta);
  font: 500 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.guide-free .index-row h3 {
  font-size: 20px;
}

.guide-free .index-row p {
  margin-top: 4px;
  font-size: 12.2px;
  line-height: 1.4;
}

@media screen and (max-width: 860px) {
  .guide-free .app-logo-grid,
  .guide-free .daypart-grid,
  .guide-free .city-grid,
  .guide-free .photo-strip {
    grid-template-columns: 1fr;
  }

  .guide-free .photo-strip {
    height: auto;
    margin: 0;
  }

  .guide-free .photo-strip figure {
    height: 260px;
  }

  .guide-free .daypart {
    grid-template-rows: 240px auto;
  }
}

/* Distribute blocks down the full A4 height instead of stacking from the top,
   which is what left the previous draft half-empty below the fold. */
.guide-free .spread {
  height: 100%;
  align-content: space-between;
}

/* --- free guide corrections ------------------------------------------- */

/* Full-bleed side images previously ran into the folio band, which put the
   running footer on top of dark photography on reverse-split pages. Stop the
   image at the content edge so the folio always sits on paper. */
.guide-free .side-image,
.guide-free .split.reverse .side-image {
  margin-bottom: 0;
}

/* .fallback rows inherit ivory text from .navy-plate but carry a light card
   background, which made them unreadable. Give them a dark treatment. */
.guide-free .navy-plate .fallback li {
  background: color-mix(in srgb, var(--ivory) 8%, transparent);
  border-color: color-mix(in srgb, var(--ivory) 22%, transparent);
  color: var(--ivory);
}

.guide-free .navy-plate .fallback li::before {
  border-color: color-mix(in srgb, var(--ivory) 45%, transparent);
  color: var(--ivory);
}

/* The eight-app page has room to breathe; the two-app payment page does not. */
.guide-free .app-logo-grid--tall .app {
  min-height: 28mm;
}

/* Keep the subject in frame where a centre crop would cut it out. */
.guide-free .pos-top img {
  object-position: top center;
}

/* Back cover: centred text landed on the busiest part of the photograph.
   Drop it into the darker lower band, as on the front cover. */
.guide-free .back {
  align-content: end;
  padding-bottom: 30mm;
}

.guide-free .back .scrim {
  background:
    linear-gradient(180deg, rgba(22, 38, 58, 0.20), rgba(22, 38, 58, 0.94)),
    linear-gradient(90deg, rgba(22, 38, 58, 0.60), rgba(22, 38, 58, 0.18) 72%);
}

/* ==========================================================================
   Seal-red palette for the free guide.
   The logo is exactly two colours: cinnabar #B0402E and ink #232320. This
   booklet is built from those, plus brand paper and white. Ink-teal is
   retired here. brand-spec.md reserves full-strength cinnabar for seal marks,
   so large fields use a darkened lacquer of the same hue and the full-strength
   red stays on rules, numerals and the single closing action.
   Scoped to body.guide-free: the client kit keeps its navy.
   ========================================================================== */

body.guide-free {
  --seal: #B0402E;       /* the logo red, at full strength */
  --seal-deep: #8E3122;  /* pressed state, matches --ve-cinnabar-deep */
  --lacquer: #8E3122;    /* --ve-cinnabar-deep, straight from the brand tokens */

  /* Remap the tokens the page system already reads. */
  --navy: var(--lacquer);
  --terracotta: var(--seal);
  --ivory: #F4EFE6;      /* --ve-paper */
  --charcoal: #232320;   /* --ve-ink, straight from the logo */
  --card: #EFE1D9;       /* warm blush tonal card, replaces the beige */
  --hairline: rgba(35, 35, 32, 0.14);

  /* These are derived on :root, so they inherit computed and need restating. */
  --paper: var(--ivory);
  --ink: var(--charcoal);
  --muted: color-mix(in srgb, var(--charcoal) 66%, var(--ivory));
  --faint: color-mix(in srgb, var(--charcoal) 44%, var(--ivory));
  --light: color-mix(in srgb, var(--ivory) 88%, white);
  --line: var(--hairline);
}

/* Photographic scrims were tinted blue-black. Warm them to the lacquer hue so
   covers read as red-black rather than navy. */
.guide-free .scrim {
  background:
    linear-gradient(180deg,
      rgba(58, 18, 12, 0) 0%,
      rgba(58, 18, 12, 0.08) 40%,
      rgba(58, 18, 12, 0.62) 74%,
      rgba(58, 18, 12, 0.93) 100%),
    linear-gradient(90deg, rgba(58, 18, 12, 0.32), rgba(58, 18, 12, 0) 58%);
}

.guide-free .back .scrim {
  background:
    linear-gradient(180deg,
      rgba(58, 18, 12, 0.10) 0%,
      rgba(58, 18, 12, 0.28) 34%,
      rgba(58, 18, 12, 0.80) 66%,
      rgba(58, 18, 12, 0.95) 100%),
    linear-gradient(90deg, rgba(58, 18, 12, 0.50), rgba(58, 18, 12, 0.06) 66%);
}

.guide-free .page {
  box-shadow: 0 18px 50px rgba(58, 18, 12, 0.12);
}

.guide-free .photo-strip figcaption {
  text-shadow: 0 1px 6px rgba(58, 18, 12, 0.8);
}

/* A seal mark under the folio, so the red reads as a stamp and not decoration. */
.guide-free .page:not(.cover):not(.back)::after {
  color: color-mix(in srgb, var(--seal) 72%, var(--ink));
}

/* A light shared warm grade so the photography sits with the seal-red palette
   instead of reading cool against it. App icons keep their true colour via the
   .logo-tile rule above, which sets filter: none. */
.guide-free .page img {
  filter: saturate(0.82) contrast(1.04) brightness(0.96) sepia(0.10);
}

.guide-free .logo-tile img {
  filter: none;
}

/* ==========================================================================
   Typographic covers. The first and last pages carry no photography and no
   solid colour field: paper background, ink type, and cinnabar used exactly
   the way the interior pages use it — rules, the folio, one seal — plus a
   lattice "window" panel referencing a Jiangnan chuanghua screen, standing in
   for the flat red field the earlier draft used.
   ========================================================================== */

.guide-free .cover--type,
.guide-free .back--type {
  background: var(--paper);
  color: var(--ink);
}

/* Hairline frame, inset from the trim. Cinnabar rather than the interior
   pages' plain hairline — a thin red-lacquer border, like the edge of a
   printed plate or a chop pad, is where the extra red on this page lives. */
.guide-free .cover--type::before,
.guide-free .back--type::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 11mm;
  border: 1px solid color-mix(in srgb, var(--seal) 62%, transparent);
  pointer-events: none;
}

.guide-free .back--type::after {
  content: none;
}

/* Revert the base .cover/.back rules, which assume dark photography and force
   ivory text. This cover is paper, so text goes back to ink. */
.guide-free .cover--type .wordmark,
.guide-free .cover--type h1,
.guide-free .cover--type p {
  color: var(--ink);
}

.guide-free .cover--type .lead,
.guide-free .back--type .lead {
  color: var(--ink);
}

.guide-free .cover--type .eyebrow,
.guide-free .back--type .eyebrow {
  color: var(--seal);
}

.guide-free .back--type .contact {
  margin-top: 14mm;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Ghosted vertical CJK — the same pale-cinnabar watermark the interior pages
   use (see .glyph), just larger and closer to the centre of the page. */
.guide-free .glyph--cover {
  top: 30mm;
  right: 27mm;
  color: var(--lacquer);
  font-family: var(--font-cjk);
  font-size: 128px;
  font-weight: 500;
  line-height: 1.04;
  opacity: 0.22;
  letter-spacing: 0.04em;
}

.guide-free .back--type .glyph--cover {
  color: var(--lacquer);
}

/* A lattice window: a diamond trellis in thin cinnabar lines, the structure
   of a Jiangnan chuanghua screen — real window lattices are lacquered red or
   dark wood, so red lines here are architectural, not decorative filler. The
   ghosted calligraphy sits inside it, as if seen through the screen. */
.guide-free .cover-window {
  position: absolute;
  z-index: 0;
  top: 28mm;
  right: 22mm;
  bottom: 26mm;
  width: 52mm;
  border: 1px solid color-mix(in srgb, var(--seal) 62%, transparent);
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--seal) 30%, transparent) 0 1px,
      transparent 1px 10.5mm),
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--seal) 30%, transparent) 0 1px,
      transparent 1px 10.5mm);
}

.guide-free .back--type .cover-window {
  top: 22mm;
}

/* .cover has no padding of its own, so the content block carries it, and is
   narrowed to clear the window panel on the right. */
.guide-free .cover--type .cover-content {
  max-width: 110mm;
  padding: 0 22mm 26mm;
}

.guide-free .back--type {
  padding: 24mm 22mm 26mm;
}

.guide-free .back--type .back-content {
  max-width: 110mm;
}

.guide-free .cover-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20mm;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 500 9px var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A chop mark: cinnabar outline, cinnabar character, no fill — the way a
   seal actually sits on paper, not a knocked-out block. */
.guide-free .seal-mark {
  display: grid;
  width: 17mm;
  height: 17mm;
  place-items: center;
  margin-bottom: 4mm;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  font-family: var(--font-cjk);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.guide-free .back-title {
  max-width: 11ch;
  font-size: 58px;
}

/* --- headings ---------------------------------------------------------- */
/* App and route names were the last heading-level items still set in the
   body font. Cormorant needs a size bump to hold the same optical weight,
   at 500 — the "list item title" tier in the carousel type scale. */
.guide-free .app-logo-grid .app strong,
.guide-free .route-row strong {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.guide-free .app-logo-grid .app strong {
  font-size: 17px;
  line-height: 1.1;
}

.guide-free .route-row strong {
  font-size: 16.5px;
}

/* Edition mark: styled like the interior pages' own running head, so the
   cover reads as page one of the same system rather than a separate slab. */
.guide-free .cover-edition {
  position: absolute;
  z-index: 2;
  top: 20mm;
  right: 22mm;
  color: var(--seal);
  font: 500 9.5px var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Coverlines: a real, short table of contents, the way a magazine cover
   promises three stories rather than describing the whole issue. The numeral
   is the one place on the cover that carries the full-strength seal red. */
.guide-free .cover-lines {
  display: grid;
  gap: 9px;
  margin: 13mm 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.guide-free .cover-lines li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: baseline;
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.guide-free .cover-lines li span {
  color: var(--seal);
  font: 500 10px var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 860px) {
  .guide-free .glyph--cover {
    display: block;
    right: 18px;
    top: 90px;
    font-size: 92px;
  }

  .guide-free .cover--type::before,
  .guide-free .back--type::before {
    inset: 16px;
  }

  .guide-free .cover--type .cover-content,
  .guide-free .back--type .back-content {
    max-width: none;
    padding: 0 32px 62px !important;
  }

  .guide-free .cover-window {
    display: none;
  }

  .guide-free .cover-edition {
    top: 26px;
    right: 24px;
  }

  .guide-free .cover-lines {
    margin-top: 24px;
  }
}