@import url('./assets/fonts/archivo.css');
@import url('./assets/fonts/noto-devanagari.css');

/* ═══════════════════════════════════════════════════════════════════════════
   Doctor Tower — Sales handbook, Awadh Bihari edition
   Landscape A5 (210 × 148 mm), bilingual English / Hindi.

   The combined edition: the Peacock book's complete 26-section spine,
   renumbered around the Investor edition's room gallery (the 27th section)
   and carrying its page devices, in a third theme — a disciplined corporate
   palette of Awadh Bihari maroon and gold on ivory, with the AB monogram
   and the company name on every sheet.

   The print machinery is the Peacock edition's, proven there: a FLOWING
   document — each section starts a fresh sheet and long sections continue
   across sheets at explicit .split points; a repeating <thead>/<tfoot>
   spacer pair reserves the top edge and the running-footer band; the footer
   stamps every sheet via position: fixed.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — the brand palette — maroon + gold, and nothing else asks for attention */
  --ivory: #faf7f0;         /* the page */
  --card: #fdfbf5;          /* panel fills */
  --ink: #23201c;           /* body text */
  --brand: #7e1013;         /* Awadh Bihari maroon — rules, fields, emphasis */
  --brand-2: #9c1418;       /* the brighter step, for small accents on ivory */
  --brand-tint: #f6e7e3;    /* the early-buyer callout fill */
  --gold: #b98a3d;          /* frame borders, secondary rules */
  --gold-deep: #8a6320;     /* gold as text, dark enough to read on ivory */
  --gold-light: #e9c87f;    /* rules and kickers on maroon fields */
  --slate: #3f3a33;         /* the neutral third voice in the charts */
  --paper: #f6f1e7;         /* reversed-out text on maroon */

  --line: rgba(35, 32, 28, 0.25);        /* hairline between spec rows */
  --line-table: rgba(35, 32, 28, 0.22);  /* table row rules */
  --line-strong: #23201c;                /* the 2px rule that closes a list */
  --muted: rgba(35, 32, 28, 0.62);       /* secondary copy, Hindi subheads */
  --muted-cap: rgba(35, 32, 28, 0.58);   /* figure captions */
  --muted-th: rgba(35, 32, 28, 0.6);     /* table headers */
  --foot: rgba(35, 32, 28, 0.5);         /* the running footer */
  --wm: rgba(185, 138, 61, 0.14);        /* the giant page watermarks, gold */

  /* the faint gold pinstripe behind every page — the brand weave */
  --weave: repeating-linear-gradient(135deg,
      rgba(185, 138, 61, 0.045) 0 1px, transparent 1px 22px);
  /* the bolder monogram-field texture on the maroon part openers */
  --field: radial-gradient(circle farthest-side at 50% 128%,
      rgba(233, 200, 127, 0.13) 18%, rgba(0, 0, 0, 0.12) 19% 34%, transparent 35%);

  --glow: 0 4px 18px rgba(126, 16, 19, 0.14); /* soft brand shadow on frames */

  --ts: 1; /* type scale — 1 in print/paged, stepped up on small screens */
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-hi: 'Noto Sans Devanagari', 'Archivo', system-ui, sans-serif;
}

/* The colour fields and tints are the design — ask print not to strip them.
   Chrome's "Background graphics" checkbox still wins; the README says to
   keep it on. */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: calc(11px * var(--ts));
  line-height: 1.55;
  color: var(--ink);
  background: #57534b; /* the desk, screen only */
}

p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
strong { font-weight: 800; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-2); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: rgba(126, 16, 19, 0.2); }

/* ── The monogram — the AB device that brands every page ────────────────── */

.mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--brand);
  color: var(--gold-light);
  font-weight: 800;
  font-size: calc(9.5px * var(--ts));
  letter-spacing: 0.02em;
  flex: none;
  user-select: none;
}
/* reversed, for maroon grounds */
.mono--reverse { background: var(--gold-light); color: var(--brand); }

/* the full company lockup — monogram beside the stacked wordmark */
.lockup { display: flex; align-items: center; gap: 10px; }
.lockup__name {
  font-weight: 800;
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* ── The book ───────────────────────────────────────────────────────────── */

.book {
  max-width: 210mm;
  margin: 24px auto;
  background-color: var(--ivory);
  background-image: var(--weave);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); /* screen only */
}
.book__body { padding-bottom: 40px; }

/* Sheet-edge spacers — see the header comment; collapsed on screen,
   repeating per printed sheet. */
.sheet, .sheet > thead, .sheet > tbody, .sheet > tfoot,
.sheet > thead > tr, .sheet > tbody > tr, .sheet > tfoot > tr,
.sheet > thead > tr > th, .sheet > tbody > tr > td,
.sheet > tfoot > tr > td { display: block; width: 100%; padding: 0; border: 0; }
.sheet .edge-top, .sheet .edge-bottom { display: none; }

/* The running footer: the company name under every sheet. */
.running-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 30px 14px;
  font-size: calc(7.5px * var(--ts));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foot);
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.sec { padding: 24px 30px 30px; position: relative; }
.sec--cover { padding-top: 26px; }

/* The section head: maroon 3px rule, AB device + number + label left,
   Hindi right. One rule colour — the brand — for the whole book. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 3px solid var(--brand);
  padding-top: 8px;
}
.sec-head--thin { border-top-width: 2px; }
.sec-head__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(9.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the decorative AB device on every head — empty alt, it repeats the
   wordmark in the footer */
.sec-head__label::before {
  content: 'AB' / '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: var(--brand);
  color: var(--gold-light);
  font-size: calc(7.5px * var(--ts));
  letter-spacing: 0.02em;
  flex: none;
}
.sec-head__n { color: var(--brand); }

.hindi { font-family: var(--font-hi); }
.sec-head__hi { font-family: var(--font-hi); font-size: calc(10.5px * var(--ts)); color: var(--muted); }

.sec-title { font-size: calc(22px * var(--ts)); margin: 12px 0 20px; }
.sec-title--tight { margin-bottom: 16px; }
.sec-title--close { margin-bottom: 8px; }
.sec-title--w480 { max-width: 480px; }
.sec-title--w520 { max-width: 520px; }
.sec-title--w540 { max-width: 540px; }
.sec-title--w560 { max-width: 560px; }

.lede { font-size: calc(12px * var(--ts)); max-width: 600px; }
.lede--wide { max-width: 620px; }

.kicker {
  font-size: calc(9.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker--brand { color: var(--brand-2); }
.kicker--space { margin-bottom: 4px; }
.kicker--space-md { margin-bottom: 6px; }
.kicker--space-lg { margin-bottom: 8px; }
.kicker--space-xl { margin-bottom: 10px; }

.muted { color: var(--muted); }
.fine { font-size: calc(10px * var(--ts)); color: var(--muted); }
.note { font-size: calc(11px * var(--ts)); }
.note--sm { font-size: calc(10.5px * var(--ts)); }

/* The oversized gold figure set into a page's corner — the Investor
   edition's device. It anchors to the section's end, so on a multi-sheet
   section it lands on the final sheet. */
.wm {
  position: absolute;
  right: 16px;
  bottom: 0;
  font-weight: 800;
  font-size: calc(120px * var(--ts));
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wm);
  pointer-events: none;
  user-select: none;
}
.wm--sm { font-size: calc(84px * var(--ts)); }

/* ── Page grounds — a faint pattern tied to each page's content, over the
   book's gold weave: rules for lists and legal, highway diagonals for the
   place, a drafting grid for the building, drafting dots for the plans,
   ledger rules for the money, ripples for water and living. All at 5–12%
   so the type stays clean. ─────────────────────────────────────────────── */

.g-rules  { background-image: linear-gradient(rgba(35, 32, 28, 0.05) 1px, transparent 1px); background-size: 100% 24px; }
.g-diag   { background-image: repeating-linear-gradient(45deg, rgba(126, 16, 19, 0.05) 0 2px, transparent 2px 28px); }
.g-grid   { background-image: linear-gradient(rgba(126, 16, 19, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 16, 19, 0.06) 1px, transparent 1px); background-size: 26px 26px; }
.g-dots   { background-image: radial-gradient(rgba(35, 32, 28, 0.08) 1px, transparent 1.5px); background-size: 18px 18px; }
.g-ledger { background-image: linear-gradient(rgba(138, 99, 32, 0.12) 1px, transparent 1px); background-size: 100% 26px; }
.g-ripple { background-image: radial-gradient(circle farthest-side at 50% 132%, rgba(138, 99, 32, 0.10) 20%, transparent 35%); background-size: 44px 30px; }

/* ── Stat grids ─────────────────────────────────────────────────────────── */

.statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border-top: 2px solid var(--line-strong);
  padding-top: 12px;
}
.statgrid--bare { border-top: 0; padding-top: 0; }
.stat__v { font-weight: 800; font-size: calc(16.5px * var(--ts)); }
.stat__v--xs { font-size: calc(14px * var(--ts)); }
.stat__v--sm { font-size: calc(15.5px * var(--ts)); }
.stat__v--md { font-size: calc(18px * var(--ts)); }
.stat__v--lg { font-size: calc(19.5px * var(--ts)); letter-spacing: -0.01em; }
.stat__c { font-size: calc(10.5px * var(--ts)); color: var(--muted); }
.stat__c--sm { font-size: calc(10px * var(--ts)); }
.stat__k {
  font-size: calc(9px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 6px;
}
.tile { border-top: 2px solid var(--line-strong); padding-top: 8px; }
.tile--roomy { padding-top: 10px; }
.tile__t { font-weight: 800; font-size: calc(12px * var(--ts)); }
.tile__c { font-size: calc(10.5px * var(--ts)); color: var(--muted); }
.tile__c--upper { font-size: calc(10px * var(--ts)); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Spec rows ──────────────────────────────────────────────────────────── */

.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.row--sm { padding: 6px 0; }
.row--lg { padding: 8px 0; }
.row--xl { padding: 10px 0; align-items: baseline; }
.row--wide { gap: 16px; }
.row--last { border-bottom-width: 2px; border-bottom-color: var(--line-strong); }
.row dt, .row dd { margin: 0; }
.row__v { font-weight: 800; }
.row__l { color: var(--muted); }
.row__l--fix { flex: none; }
.row__r { text-align: right; }
.rows { font-size: calc(11.5px * var(--ts)); margin: 0; }
.rows--sm { font-size: calc(11px * var(--ts)); }

/* ── Framed images — gold border on an ivory mat, soft brand shadow ─────── */

.frame { break-inside: avoid; }
/* fit-content: the gold rule hugs the drawing. On the dark editions a wide
   mat read as a mount; on ivory a letterboxed portrait blueprint inside a
   full-width white mat read as a broken image. The figure shrinks with it
   (via :has) so the caption wraps to the frame's width, not the page's. */
figure.frame:has(> .frame__mat) { width: fit-content; max-width: 100%; margin-inline: auto; }
.frame__mat {
  width: fit-content;
  margin: 0 auto;
  border: 2px solid var(--gold);
  background: #fff;
  box-shadow: var(--glow);
}
.frame__mat img { width: auto; }
.frame figcaption { font-size: calc(11px * var(--ts)); margin-top: 4px; color: var(--muted-cap); }
.frame--h300 .frame__mat img { height: 300px; }
.frame--h330 .frame__mat img { height: 330px; }
.frame--h370 .frame__mat img { height: 370px; }
.frame--h420 .frame__mat img { height: 420px; }

/* the room-gallery crops — full-width cover crops inside the gold rule,
   three to a sheet so each keeps real size beside its caption */
.frame__crop { border: 2px solid var(--gold); background: #fff; box-shadow: var(--glow); }
.frame__crop img { width: 100%; height: 190px; object-fit: cover; object-position: center; }

/* ── Panels and callouts ────────────────────────────────────────────────── */

.panel {
  border: 2px solid var(--gold);
  background: var(--card);
  padding: 14px 16px;
  break-inside: avoid;
}
.panel--roomy { padding: 16px 18px; }
.panel--wide { padding: 18px 20px; }
.panel--tight { padding: 12px 14px; }
.panel__k {
  font-size: calc(9.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.panel__body { font-size: calc(11px * var(--ts)); margin: 0; }

.offer { border-color: var(--brand); background: var(--brand-tint); }
.offer__line { font-weight: 800; font-size: calc(13.5px * var(--ts)); margin-bottom: 4px; }

.badge {
  border: 2px solid var(--gold);
  background: var(--card);
  padding: 12px 14px;
  font-weight: 800;
  font-size: calc(11.5px * var(--ts));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table { color: var(--ink); font-size: calc(11px * var(--ts)); }
.table--md { font-size: calc(11.5px * var(--ts)); }
.table th {
  text-align: left;
  font-size: calc(9px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-th);
  padding: 6px 8px;
  border-bottom: 2px solid var(--line);
}
.table td { padding: 6px 8px; border-bottom: 1px solid var(--line-table); }
/* numeric cells never wrap — "2,088 sq ft" splitting across lines reads as
   a misaligned column; every .num value in the book is short */
.num { text-align: right; white-space: nowrap; }
.fig-cell { font-weight: 800; }
.fig-cell--brand { color: var(--brand-2); }
.share { height: 8px; background: var(--brand); }

/* ── Proportion bars — maroon / gold / slate ────────────────────────────── */

.bar { display: flex; height: 26px; border: 1px solid var(--line-strong); }
.bar--slim { height: 24px; }
.bar__seg {
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: calc(9.5px * var(--ts));
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
}
.bar__seg--brand { background: var(--brand); font-weight: 800; }
.bar__seg--brand-solid { background: var(--brand); padding: 0; }
.bar__seg--slate { background: var(--slate); }
.bar__seg--gold { background: var(--gold); color: var(--ink); font-weight: 800; }
.bar__seg--gold-solid { background: var(--gold); padding: 0; }
.bar-head {
  display: flex;
  justify-content: space-between;
  font-size: calc(10.5px * var(--ts));
  margin-bottom: 4px;
}
.bar-caption {
  display: flex;
  justify-content: space-between;
  font-size: calc(10px * var(--ts));
  margin-top: 5px;
  color: var(--muted);
}
.bar-block { break-inside: avoid; margin-bottom: 8px; }

.legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: calc(10px * var(--ts)); color: var(--muted); }
.legend__item { display: flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; display: inline-block; }
.legend__swatch--brand { background: var(--brand); }
.legend__swatch--gold { background: var(--gold); }
.legend__swatch--slate { background: var(--slate); }

/* ── Grids ──────────────────────────────────────────────────────────────── */

.cols { display: grid; align-items: start; gap: 24px; }
.cols--2 { grid-template-columns: 1fr 1fr; }
.cols--2-20 { grid-template-columns: 1fr 1fr; gap: 20px; }
.cols--2-28 { grid-template-columns: 1fr 1fr; gap: 28px; }
.cols--2-32 { grid-template-columns: 1fr 1fr; gap: 32px; }
.cols--3-20 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cols--3-24 { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.cols--gallery { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.cols--rooms { grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.cols--amenity { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cols--faq { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.cols--contact { grid-template-columns: 1fr auto; gap: 32px; }
.cols--boundary { grid-template-columns: 1fr 1fr; gap: 12px; }
.cols--toc { grid-template-columns: 1fr 1fr 1fr; gap: 28px 40px; }
.stack { display: grid; gap: 16px; }
.stack--sm { gap: 10px; }

/* ── Full-bleed cover ────────────────────────────────────────────────────── */

.cover-bleed {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--paper);
  min-height: calc(148mm - 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover-bleed > .masthead { position: relative; z-index: 2; margin: 0 0 0 0; }
.cover-bleed__body { position: relative; z-index: 2; padding: 0 30px 24px; }
.cover-bleed .cover__title { color: var(--paper); margin-top: 0; }
.cover-bleed .cover__hi { color: rgba(246, 241, 231, 0.75); margin-bottom: 22px; }
.cover-bleed .statgrid { border-top-color: var(--gold-light); }
.cover-bleed .stat__k { color: var(--gold-light); }
.cover-bleed .stat__c { color: rgba(246, 241, 231, 0.75); }
.cover-bleed .cover__strip { border-top-color: rgba(246, 241, 231, 0.35); color: rgba(246, 241, 231, 0.7); }

/* a full-bleed hero as a section's first sheet (the duplex concept) */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--paper);
  min-height: calc(148mm - 44px);
  padding: 24px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero > :not(.part__bleed):not(.part__scrim) { position: relative; z-index: 2; }
.hero .sec-head { border-top-color: var(--gold-light); }
.hero .sec-head__n { color: var(--gold-light); }
.hero .sec-head__hi { color: rgba(246, 241, 231, 0.72); }
.hero .sec-title { color: var(--paper); }
.hero .lede { color: rgba(246, 241, 231, 0.92); }
.hero .statgrid { border-top-color: var(--gold-light); }
.hero .stat__c { color: rgba(246, 241, 231, 0.75); }

/* ── Cover ──────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--brand);
  color: var(--paper);
  padding: 9px 14px;
}
.masthead__book {
  font-weight: 800;
  font-size: calc(9.5px * var(--ts));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cover__title {
  font-size: calc(52px * var(--ts));
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 26px 0 14px;
  text-transform: uppercase;
}
.cover__lead { font-size: calc(16.5px * var(--ts)); line-height: 1.35; margin: 0 0 6px; max-width: 460px; text-wrap: balance; }
.cover__hi { font-family: var(--font-hi); font-size: calc(12px * var(--ts)); margin: 0 0 30px; color: var(--muted); }
.cover__strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: calc(9.5px * var(--ts));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 2px solid var(--line);
  margin-top: 16px;
  padding-top: 8px;
  color: var(--muted);
}

/* ── Contents ───────────────────────────────────────────────────────────── */

.toc-group {
  font-size: calc(9.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.toc-group--gap { margin-top: 14px; }
.toc-list { font-size: calc(11.5px * var(--ts)); display: grid; gap: 4px; }
.toc-list .n { color: var(--muted); }

/* ── Part openers — full-bleed image plates on the brand field ──────────────
   Each opener fills the sheet's whole content region (the 14px top band and
   the 26px footer band stay, so nothing fights the running footer) with a
   photograph or drawing behind a deep maroon scrim. The image is a real
   <img>, not a CSS background, so it prints even with background graphics
   off and carries alt text. */

.part {
  position: relative;
  overflow: hidden;
  background-color: var(--brand);
  background-image: var(--field);
  background-size: 48px 36px;
  color: var(--paper);
  padding: 30px 26px;
  min-height: calc(148mm - 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
}
.part__bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.part__bleed--top { object-position: center 30%; }
/* the brand scrim: dark maroon-ink, light at the head so the image shows,
   heavy at the foot where the statement sits. --deep for bright interior
   renders whose whites would otherwise fight the reversed type. */
.part__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(24, 6, 7, 0.30) 0%, rgba(24, 6, 7, 0.48) 45%, rgba(24, 6, 7, 0.88) 100%);
}
.part__scrim--deep {
  background: linear-gradient(rgba(24, 6, 7, 0.52) 0%, rgba(24, 6, 7, 0.66) 45%, rgba(24, 6, 7, 0.92) 100%);
}
.part > :not(.part__bleed):not(.part__scrim) { position: relative; z-index: 2; }
/* the giant monogram set into the field's corner */
.part__mono {
  position: absolute;
  right: -10px;
  bottom: -34px;
  font-weight: 800;
  font-size: calc(190px * var(--ts));
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(233, 200, 127, 0.14);
  pointer-events: none;
  user-select: none;
}
.part__k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: calc(8.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.part__title {
  font-weight: 800;
  font-size: calc(46px * var(--ts));
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 380px;
}
.part__hi { font-family: var(--font-hi); font-size: calc(12px * var(--ts)); margin-top: 10px; opacity: 0.85; }
.part__lede {
  font-size: calc(11.5px * var(--ts));
  margin: 16px 0 0;
  max-width: 300px;
  border-top: 2px solid var(--gold-light);
  padding-top: 10px;
  text-wrap: pretty;
}

/* ── Steps, FAQ, amenities, plan points ─────────────────────────────────── */

.step__n { font-weight: 800; font-size: calc(18px * var(--ts)); color: var(--brand-2); }
.step__t { font-weight: 800; font-size: calc(12.5px * var(--ts)); margin: 4px 0; }
.step__b { font-size: calc(10.5px * var(--ts)); margin: 0; }

.amen { border-top: 2px solid var(--line-strong); padding-top: 8px; break-inside: avoid; }
.amen__cat {
  font-size: calc(8.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.amen__t { font-weight: 800; font-size: calc(12.5px * var(--ts)); margin: 3px 0; }
.amen__b { font-size: calc(10px * var(--ts)); margin: 0; color: var(--muted); }

.faq { border-top: 2px solid var(--line-strong); padding-top: 10px; break-inside: avoid; }
.faq__q {
  font-size: calc(9px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.faq__a { font-weight: 800; font-size: calc(14px * var(--ts)); color: var(--brand-2); margin: 4px 0; }
.faq__b { font-size: calc(10.5px * var(--ts)); margin: 0; }

.point { break-inside: avoid; }
.point__t { font-weight: 800; font-size: calc(12px * var(--ts)); }
.point__t .n { color: var(--brand-2); }
.point__b { font-size: calc(11px * var(--ts)); margin: 4px 0 0; }

.works { border-top: 2px solid var(--line-strong); padding-top: 10px; }
.works__t { font-weight: 800; font-size: calc(13px * var(--ts)); margin-bottom: 6px; }
.works__b { font-size: calc(10.5px * var(--ts)); margin: 0 0 6px; }
.works__b:last-child { margin-bottom: 0; }

/* ── Enquiries ──────────────────────────────────────────────────────────── */

.banner {
  background: var(--brand);
  background-image: var(--field);
  background-size: 48px 36px;
  color: var(--paper);
  padding: 24px 22px;
  margin: 14px 0 18px;
  break-inside: avoid;
}
.banner__t {
  font-weight: 800;
  font-size: calc(30px * var(--ts));
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 480px;
}
.banner__hi { font-family: var(--font-hi); font-size: calc(13px * var(--ts)); margin-top: 12px; opacity: 0.9; }

.qr img {
  width: 92px;
  height: 92px;
  border: 2px solid var(--gold);
  background: #fff;
}
.qr figcaption { font-size: calc(9.5px * var(--ts)); max-width: 92px; margin-top: 6px; color: var(--muted); }

.colophon {
  border-top: 2px solid var(--line-strong);
  margin-top: 14px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: calc(9.5px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── The closing field — Enquiries as a full maroon page ────────────────── */

.sec--close {
  background-color: var(--brand);
  background-image: var(--field);
  background-size: 48px 36px;
  color: var(--paper);
  min-height: calc(148mm - 44px);
  display: flex;
  flex-direction: column;
}
.sec--close .sec-head { border-top-color: var(--gold-light); }
.sec--close .sec-head__n { color: var(--gold-light); }
.sec--close .sec-head__label::before { background: var(--gold-light); color: var(--brand); }
.sec--close .sec-head__hi { color: rgba(246, 241, 231, 0.72); }
.sec--close .banner { background: none; padding: 0; margin: 22px 0 20px; }
.sec--close .banner__t { font-size: calc(34px * var(--ts)); max-width: 540px; }
.sec--close .row { border-bottom-color: rgba(246, 241, 231, 0.35); }
.sec--close .row__l { color: rgba(246, 241, 231, 0.72); }
.sec--close .qr figcaption { color: rgba(246, 241, 231, 0.75); }
.sec--close .qr img { border-color: var(--gold-light); }
.sec--close .colophon { border-top-color: rgba(246, 241, 231, 0.5); margin-top: auto; }
.sec--close .colophon .muted { color: rgba(246, 241, 231, 0.7); }
.sec--close .mono { background: var(--gold-light); color: var(--brand); }
.sec--close .fine { color: rgba(246, 241, 231, 0.65); }
.sec--close a:hover { color: var(--gold-light); }

/* ── Disclaimer columns ─────────────────────────────────────────────────── */

.legalese {
  font-size: calc(10px * var(--ts));
  column-count: 2;
  column-gap: 28px;
  color: var(--muted);
}
.legalese p { margin: 0 0 8px; }
.legalese p:last-child { margin-bottom: 0; }

.closer { border-top: 2px solid var(--line-strong); padding-top: 10px; }
.closer--faint { border-top-color: var(--line); }

/* ── Break hygiene ──────────────────────────────────────────────────────── */

p, li { orphans: 3; widows: 3; }
.frame, .panel, .badge, .bar-block, .faq, .amen, .point, .tile, .step, .banner { break-inside: avoid; }
.sec-head { break-after: avoid; }
h2 { break-after: avoid; }
.keep { break-inside: avoid; }

/* ═══ REFLOW — below the printed width, fluid single-column ══════════════ */

@media screen and (max-width: 840px) {
  :root { --ts: 1.35; }
  .book { margin: 0; max-width: none; box-shadow: none; }
  .sec { padding: 22px 20px 26px; }
  .sec--cover { padding-top: 22px; }
  .part { padding: 26px 20px; }

  .cols--2,
  .cols--2-20, .cols--2-28, .cols--2-32,
  .cols--3-20, .cols--3-24,
  .cols--gallery, .cols--faq, .cols--toc { grid-template-columns: 1fr; }
  .cols--rooms { grid-template-columns: 1fr 1fr; }
  .cols--amenity, .cols--boundary { grid-template-columns: 1fr 1fr; }
  .cols--contact { grid-template-columns: 1fr; }
  .legalese { column-count: 1; }

  .frame__mat { width: auto; }
  .frame--h300 .frame__mat img,
  .frame--h330 .frame__mat img, .frame--h370 .frame__mat img,
  .frame--h420 .frame__mat img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
  }
  .frame__crop img { height: auto; aspect-ratio: 16 / 9; }
  .cover__title { font-size: calc(40px * var(--ts) / 1.35); }
  .part__title { font-size: calc(38px * var(--ts) / 1.35); }
  .sec-title--w480, .sec-title--w520, .sec-title--w540, .sec-title--w560 { max-width: none; }
  .lede, .lede--wide, .cover__lead { max-width: none; }
  .wm { font-size: calc(90px * var(--ts)); }
}

@media screen and (max-width: 480px) {
  .cols--rooms, .cols--amenity, .cols--boundary, .statgrid { grid-template-columns: 1fr; }
}

/* ═══ PRINT — flowing pagination onto 210 × 148 mm sheets ════════════════ */

@page {
  size: 210mm 148mm;
  margin: 0;
}

@media print {
  :root { --ts: 1; }

  /* the canvas is painted the book's ivory, so a partly-covered sheet
     stays the page colour instead of showing bare white below the weave */
  html, body { background: var(--ivory); }
  .book { max-width: none; margin: 0; box-shadow: none; }

  .page-start { break-before: page; }
  .split { break-before: page; }

  .sheet { display: table; width: 100%; }
  .sheet > thead { display: table-header-group; }
  .sheet > tbody { display: table-row-group; }
  .sheet > tfoot { display: table-footer-group; }
  .sheet > thead > tr, .sheet > tbody > tr, .sheet > tfoot > tr { display: table-row; }
  .sheet > thead > tr > th, .sheet > tbody > tr > td,
  .sheet > tfoot > tr > td { display: table-cell; padding: 0; vertical-align: top; }
  .sheet .edge-top { display: block; height: 14px; }
  .sheet .edge-bottom { display: block; height: 26px; }

  .running-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .sec { padding-top: 10px; }
  .sec--cover { padding-top: 12px; }

  /* the screen-only tail; at print it (plus a final paragraph's margin)
     pushed the closing line onto an extra sheet in the Peacock build */
  .book__body { padding-bottom: 0; }
  .sec:last-of-type > :last-child { margin-bottom: 0; }
}