/* =========================================================================
   ABPV — AB Photo & Video
   Colors & Type foundations
   Hotel Brand Narrative Studio
   ========================================================================= */

/* Two-family editorial system:
   SERIF — Cormorant Garamond (voice, display, headlines, numerals)
   SANS  — IBM Plex Sans (body, labels, eyebrows, UI)
   Both self-hosted as variable fonts. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: italic;
  font-display: swap;
}

/* ---------- Root tokens ------------------------------------------------- */

:root {
  /* ===== Brand palette (5 colors, one adjacency rule) =====
     One base, one dark, one warm accent, one cool section tint, one action.
     That's it. Everything else is hairlines, type weight, and photography.

     THE ONE RULE: Sage and Clay never touch. Off-White always sits between.
     Reason: both are mid-value (luminance ~0.4–0.5). Adjacent they read muddy.

     Retired surfaces (Bone, Soft Blue Gray, Taupe) survive as aliases that
     resolve into one of the five so older markup still renders — do not
     reach for them in new work. */

  /* ---- The five ---- */
  --abpv-off-white:      #f8f6f1; /* 60% — default page base */
  --abpv-sage-gray:      #b7bdb1; /* cool section tint */
  --abpv-clay:           #c9b299; /* warm accent — eyebrows, small marks */
  --abpv-moss:           #677262; /* action accent — hairlines, underlines, link marks on off-white. 4.67:1 AA. Never a button fill; never on sage. */
  --abpv-charcoal:       #24231f; /* body text + the one dark block */

  /* ---- Supporting (used sparingly, not surfaces) ---- */
  --abpv-ink:            #1a1917; /* deepest type only */
  --abpv-fog:            #e5e2db; /* hairline tint on off-white */
  --abpv-umber:          #4a3b2e; /* deep warm brown — eyebrow/meta type on off-white & sage. Never a surface. */
  --abpv-paper:          #ffffff; /* pure white. Photography mats and image frames; real-press print output; rare inverted accents on charcoal. Never a page/card/section/form fill. If you can't name the physical material you're simulating (paper, mat, gallery wall), use --abpv-off-white instead. */

  /* ---- Back-compat aliases — all resolve into the five ---- */
  --abpv-cream:          var(--abpv-off-white);  /* retired → off-white */
  --abpv-bone:           var(--abpv-off-white);  /* retired → off-white */
  --abpv-cream-deep:     var(--abpv-off-white);  /* retired → off-white */
  --abpv-soft-blue-gray: var(--abpv-sage-gray);  /* retired → sage gray */
  --abpv-light-gray:     var(--abpv-sage-gray);  /* retired → sage gray */
  --abpv-sky-blue:       var(--abpv-sage-gray);  /* retired → sage gray */
  --abpv-taupe:          var(--abpv-clay);       /* retired → clay */
  --abpv-warm-taupe:     var(--abpv-clay);       /* retired → clay */
  --abpv-sand:           var(--abpv-clay);       /* retired → clay */
  --abpv-forest:         var(--abpv-charcoal);   /* retired → charcoal */
  --abpv-slate-green:    var(--abpv-charcoal);   /* retired → charcoal */
  --abpv-official-blue:  var(--abpv-charcoal);   /* retired → charcoal */

  /* ===== Semantic: surfaces & foreground ===== */
  --bg:            var(--abpv-off-white);    /* default page */
  --bg-alt:        var(--abpv-sage-gray);    /* alternating cool tint */
  --bg-deep:       var(--abpv-clay);         /* warm tinted surface */
  --bg-hero:       var(--abpv-charcoal);     /* the one dark hero */
  --bg-ink:        var(--abpv-ink);          /* when true darkness is needed */
  --bg-mark:       var(--abpv-clay);         /* warm accent surface */

  --fg:            var(--abpv-charcoal);     /* body text on light */
  --fg-muted:      #6b675e;                  /* secondary text on off-white */
  --fg-muted-dark: #3d3a33;                  /* secondary on sage/clay tints — passes AA */
  --fg-soft:       #8a867c;                  /* meta / timestamps on off-white */
  --fg-on-dark:    var(--abpv-off-white);    /* body text on dark */
  --fg-on-dark-muted: #b0aea6;               /* secondary on charcoal */

  --rule:          #d8d2c4;                  /* hairline on off-white */
  --rule-alt:      #cfc9bb;                  /* slightly darker hairline */
  --rule-dark:     rgba(244, 241, 234, 0.18);/* hairline on charcoal */

  /* ===== Accents ===== */
  --accent-clay:   var(--abpv-clay);
  --accent-sage:   var(--abpv-sage-gray);
  --accent-moss:   var(--abpv-moss);         /* primary green accent — links, buttons */
  --accent-warm:   var(--abpv-clay);
  --accent-cool:   var(--abpv-sage-gray);    /* retired → now sage */
  --accent-taupe:  var(--abpv-clay);         /* retired → now clay */
  --accent-forest: var(--abpv-moss);         /* old name → now moss */
  --accent-navy:   var(--abpv-charcoal);     /* old name → now charcoal */

  /* ===== Type families — two-family system =====
     SERIF (voice):  Cormorant Garamond. Display, headlines, numerals, monogram.
                     Weights 300/400; italics for soft fragments.
     SANS (structure): IBM Plex Sans. Body copy, ledes, eyebrows, labels, UI.
                     Weights 400/500 carry almost everything; 300 for light body;
                     600/700 reserved for emphasis. Differentiate roles with
                     weight + tracking + case — never by swapping family. */
  --font-display:    'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-editorial:  'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-label:      'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:       'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ===== Type scale ===== */
  /* Display is sentence-case, never tight-tracked. Body is IBM Plex Sans, roomy. */
  --fs-eyebrow:   11px;   /* uppercase tracked tag */
  --fs-caption:   13px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-lead:      20px;   /* intro paragraph */
  --fs-h6:        16px;
  --fs-h5:        20px;
  --fs-h4:        26px;
  --fs-h3:        34px;
  --fs-h2:        46px;
  --fs-h1:        64px;
  --fs-display:   88px;   /* editorial splash */

  /* ===== Tracking ===== */
  --tr-eyebrow:   0.18em; /* uppercase eyebrow */
  --tr-label:     0.08em;
  --tr-normal:    0;
  --tr-tight:     -0.015em;

  /* ===== Leading ===== */
  --lh-tight:     1.08;
  --lh-heading:   1.18;
  --lh-body:      1.6;
  --lh-loose:     1.75;

  /* ===== Spacing scale (8px base, with editorial breathing room) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* ===== Negative space — the fourth palette color =====
     Empty area is a positive design element, not absence. Use these tokens
     for section padding. Defaults lean generous on purpose.
       --section-y-sm   light rhythm section, tight content
       --section-y-md   standard named section
       --section-y-lg   hero + featured sections
       --section-y-xl   single-statement sections (one headline, nothing else)
     Editorial measure tokens cap line length so the right margin becomes
     its own negative-space element, even on wide screens. */
  --section-y-sm: var(--sp-9);        /* 96px  */
  --section-y-md: var(--sp-10);       /* 128px */
  --section-y-lg: var(--sp-11);       /* 160px */
  --section-y-xl: var(--sp-12);       /* 200px */

  --measure-tight:     42ch;  /* pull quote, display caption */
  --measure-editorial: 52ch;  /* lede, editorial body */
  --measure-body:      62ch;  /* long-form body copy */

  /* ===== Radii — restrained. Editorial, not app-y ===== */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    10px;     /* largest default — ABPV stays square-ish */
  --r-pill:  999px;

  /* ===== Elevation — subtle, warm, no blue-cast shadows ===== */
  --shadow-1: 0 1px 2px rgba(36, 35, 31, 0.04),
              0 1px 1px rgba(36, 35, 31, 0.03);
  --shadow-2: 0 4px 16px rgba(36, 35, 31, 0.06),
              0 1px 2px rgba(36, 35, 31, 0.04);
  --shadow-3: 0 18px 40px rgba(36, 35, 31, 0.08),
              0 4px 10px rgba(36, 35, 31, 0.05);
  --shadow-hero: 0 30px 80px rgba(26, 25, 23, 0.20);

  /* ===== Motion ===== */
  --ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-quiet:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-mid:      240ms;
  --dur-slow:     420ms;
}

/* ---------- Base semantic styles --------------------------------------- */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sentence-case rule applies everywhere. Never Title Case.
   Headings are serif (Cormorant Garamond), thin weights (300/400), never bold.
   All UI and body copy is IBM Plex Sans — roles differentiated by weight,
   tracking, and case, never by swapping family. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.12;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); font-weight: 400; }
h5 { font-size: var(--fs-h5); font-weight: 500; letter-spacing: 0; }
h6 { font-size: var(--fs-h6); font-weight: 500; letter-spacing: 0; }

p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  font-weight: 300;
  color: var(--fg);
  max-width: 58ch;
}

/* Eyebrow — uppercase tracked tag that introduces a block.
   Plex Sans Medium 500, tracked tight enough to read as a tag, not a word. */
.eyebrow,
.abpv-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--abpv-umber);
}

/* Editorial pull quote — serif, thin, italic-friendly */
.pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg);
  max-width: 22ch;
  text-wrap: balance;
}

/* Stacked single-line fragment rhythm */
.fragments {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}
.fragments > * { display: block; }

/* Meta / caption — IBM Plex Sans, small, tracked */
.meta {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  color: var(--fg-soft);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
}

/* Hairline rules — our default divider */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Links — quiet, underlined on hover */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-quiet),
              border-color var(--dur-fast) var(--ease-quiet),
              opacity var(--dur-fast) var(--ease-quiet);
}
a:hover { color: var(--abpv-moss); border-color: var(--abpv-moss); }

/* Monospace for specs, codes, and internal docs */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- On-dark (navy hero) surface -------------------------------- */
.on-dark {
  background: var(--bg-hero);
  color: var(--fg-on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6,
.on-dark p { color: var(--fg-on-dark); }
.on-dark .eyebrow, .on-dark .abpv-eyebrow { color: var(--accent-warm); }
.on-dark a { color: var(--fg-on-dark); }
.on-dark a:hover { color: var(--accent-warm); border-color: var(--accent-warm); }
.on-dark .rule { border-top-color: var(--rule-dark); }

/* ---------- Quiet CTA treatments --------------------------------------- */
/* Two forms only: text link with arrow, and thin-outline button. */

.cta-link {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.cta-link::after {
  content: "→";
  font-weight: 300;
  transition: transform var(--dur-mid) var(--ease);
}
.cta-link:hover { color: var(--abpv-moss); }
.cta-link:hover::after { transform: translateX(4px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1px solid var(--fg);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-mid) var(--ease-quiet),
              color var(--dur-mid) var(--ease-quiet);
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }
.on-dark .btn-outline { color: var(--fg-on-dark); border-color: var(--fg-on-dark); }
.on-dark .btn-outline:hover { background: var(--fg-on-dark); color: var(--bg-hero); }

/* Filled button — charcoal on cream. Editorial, not commercial.
   Moss is the hover state — a quiet warm shift on interaction, never the resting state. */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-on-dark);
  background: var(--abpv-charcoal);
  border: 1px solid var(--abpv-charcoal);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-mid) var(--ease-quiet),
              border-color var(--dur-mid) var(--ease-quiet),
              transform var(--dur-fast) var(--ease);
}
.btn-solid:hover { background: var(--abpv-moss); border-color: var(--abpv-moss); }
.btn-solid:active { transform: translateY(1px); }

/* ---------- Cards — editorial, not app-y ------------------------------- */
.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: var(--sp-6);
  border-radius: var(--r-none); /* square by default */
}
.card--tinted { background: var(--bg-deep); border-color: transparent; }
.card--hero { background: var(--bg-hero); color: var(--fg-on-dark); border-color: transparent; }

/* ---------- Utility containers ---------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.container-narrow { max-width: 880px; }

/* Selection — warm, not blue */
::selection { background: var(--accent-warm); color: var(--fg); }

/* =========================================================================
   Editorial voice — Cormorant Garamond serif display
   Opt-in per page or section. Put .is-editorial on a container to flip all
   descendant headings to the serif voice.
   ========================================================================= */

/* Load moved to top of file — @import must be before any other rules. */

.is-editorial h1,
.is-editorial h2,
.is-editorial h3,
.is-editorial h4,
.is-editorial h5,
.is-editorial h6,
.is-editorial .pull,
.is-editorial .fragments,
.editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.is-editorial h1 { font-weight: 500; letter-spacing: -0.01em; }
.is-editorial .eyebrow,
.is-editorial .abpv-eyebrow { /* eyebrows stay sans */ font-family: var(--font-label); }

/* Italic fragment inside a headline — the Belmond/Rosewood move */
.italic-frag {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-muted);
}
.on-dark .italic-frag { color: var(--fg-on-dark-muted); }

/* =========================================================================
   Layout patterns — the composition vocabulary from Aman / Heckfield / Aesop
   ========================================================================= */

/* Tinted section block. Full-bleed color surface between image sections —
   creates vertical rhythm (Heckfield sage, Rosewood green, Aesop taupe).

   Default padding is --section-y-md (128px). Use the modifiers below to
   reach for tighter or more generous space. Negative space is a design
   element — prefer --sm/--lg/--xl intentionally, not by accident. */
.section {
  padding-block: var(--section-y-md);
  padding-inline: var(--sp-6);
}
.section--pad-sm  { padding-block: var(--section-y-sm); }
.section--pad-lg  { padding-block: var(--section-y-lg); }
.section--pad-xl  { padding-block: var(--section-y-xl); }
/* Section ground colors — one per role, no duplicates.
   base (off-white), bone (warm), cool (soft blue-gray), sage (cool ground),
   charcoal (dark). Everything else resolves to one of these. */
.section--base      { background: var(--abpv-off-white); }
.section--bone      { background: var(--abpv-off-white); color: var(--fg); }
.section--cool      { background: var(--abpv-sage-gray); color: var(--fg); }
.section--sage      { background: var(--abpv-sage-gray); color: var(--fg); }
.section--charcoal  { background: var(--abpv-charcoal); color: var(--fg-on-dark); }

/* Back-compat aliases → resolve to the five */
.section--cream     { background: var(--abpv-off-white); }
.section--light     { background: var(--abpv-off-white); }
.section--taupe     { background: var(--abpv-off-white); color: var(--fg); }   /* retired surface */
.section--clay      { background: var(--abpv-off-white); color: var(--fg); }   /* clay is accent-only */
.section--sand      { background: var(--abpv-off-white); color: var(--fg); }
.section--forest    { background: var(--abpv-charcoal); color: var(--fg-on-dark); }
.section--slate     { background: var(--abpv-charcoal); color: var(--fg-on-dark); }
.section--navy      { background: var(--abpv-charcoal); color: var(--fg-on-dark); }
.section--ink       { background: var(--abpv-ink); color: var(--fg-on-dark); }

.section--sage .eyebrow,
.section--bone .eyebrow,
.section--cool .eyebrow,
.section--taupe .eyebrow,
.section--sand .eyebrow,
.section--clay .eyebrow  { color: var(--abpv-charcoal); opacity: 0.7; }
.section--charcoal .eyebrow,
.section--forest .eyebrow,
.section--slate .eyebrow,
.section--navy .eyebrow,
.section--ink .eyebrow   { color: var(--accent-clay); }

/* Centered editorial beat — the Belmond / Soho House / Six Senses pattern.
   Short eyebrow, one-line statement, optional lede, one CTA. */
.beat {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.beat .eyebrow { margin-bottom: var(--sp-5); }
.beat h2, .beat h3 { margin-bottom: var(--sp-5); }
.beat .lead { margin-inline: auto; margin-bottom: var(--sp-6); }

/* Editorial column — narrow centered prose (Aman article intros). */
.column {
  max-width: 56ch;
  margin-inline: auto;
}

/* =========================================================================
   Negative-space utilities — treat empty area as a palette color
   =========================================================================
   Line-length caps. Short measures leave intentional right-margin space
   even in wide containers — that empty strip is part of the composition. */
.measure-tight     { max-width: var(--measure-tight); }     /* ~42ch */
.measure-editorial { max-width: var(--measure-editorial); } /* ~52ch */
.measure-body      { max-width: var(--measure-body); }      /* ~62ch */

/* Asymmetric placement — content sits in a narrow column offset from
   the edge, leaving wide empty space on the other side. The blank area
   is the point; do not fill it. */
.offset-left  { margin-right: auto; margin-left: 0; }
.offset-right { margin-left: auto;  margin-right: 0; }

/* Breathing block — vertical space reserved *between* elements. Use when
   a single headline or quote should sit alone inside a section. */
.breath-sm { margin-block: var(--sp-8); }
.breath-md { margin-block: var(--sp-9); }
.breath-lg { margin-block: var(--sp-10); }

/* Solitary — a single element (headline, quote, numeral) as the entire
   content of a section. Caps measure, centers, and reserves block space. */
.solitary {
  max-width: var(--measure-tight);
  margin-inline: auto;
  padding-block: var(--sp-7);
  text-align: center;
}

/* Monogram — single-glyph brand mark in the footer (Heckfield "H", Aman "Ā").
   Use the wordmark initial, never a full logo lockup. */
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fg);
  border: 0;
}
.monogram--rule {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  width: 72px;
  padding: 14px 0;
}

/* Full-bleed image container — photography runs edge to edge. */
.bleed {
  width: 100vw;
  max-width: 100%;
  margin-inline: calc(50% - 50vw);
}
.bleed img { width: 100%; height: auto; display: block; }

/* Duotone filter for brand imagery — grayscale + subtle warm cast. */
.duotone {
  filter: grayscale(1) contrast(1.02) sepia(0.08);
}

/* =========================================================================
   Copy voice — utility classes that enforce the rules
   ========================================================================= */

/* Fragment — sentence-fragment headline. Period at the end is allowed. */
.fragment {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 18ch;
}
.fragment em { font-weight: 300; color: var(--fg-muted); }

/* Numeral — plainspoken number callout. "Forty-two rooms." */
.numeral {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.numeral + .numeral-label {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-soft);
}