@charset "utf-8";

/* ==========================================================================
   Londolozi — demonstration mock-up by Octoco AI.
   Not affiliated with, endorsed by, or approved by this property.

   Character notes, taken from the live site on 2026-08-16 rather than guessed:
     * Display face is Trajan, and their own @font-face rule ships it with
       `letter-spacing: .5em`. The extreme tracking on Roman capitals IS the
       Londolozi look. Reproduced here at 0.32em/0.16em — 0.5em is unreadable
       on a 390px phone, and the tracking is scaled down as the size goes up.
     * Meta strips ("10 CHALETS | FROM R27,950 PP PER NIGHT") are DIN, uppercase.
     * Body is Open Sans.
     * Their own colour tokens: --gold #bd9e57, --bronze #cbb4a4,
       --grey-800 #413f3d, --grey-900 #212121, cream #fcf0de, near-black #0e1012.

   No webfonts: a static S3 site with no CDN, so each stack names the real face
   first (free win if the viewer happens to have it) then the closest thing a
   Mac or Windows machine ships. Palatino stands in for Trajan; macOS's own
   "DIN Condensed"/"DIN Alternate" stand in for DIN.

   Contrast: every text/background pair below was computed, not eyeballed.
   Values are in comments beside the tokens. Nothing ships under 4.5:1 for
   body text or 3:1 for large text and non-text boundaries.
   ========================================================================== */

@layer reset, base, layout, components;

@layer reset {
  html { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, li, figure, figcaption, table, caption {
    margin: 0;
    padding: 0;
  }
  ul, ol { list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  table { border-collapse: collapse; }
  :where(div, section, header, footer, nav, main, article, aside,
         h1, h2, h3, p, ul, li, figure, img, table, td, th, a, span) {
    box-sizing: inherit;
  }
}

@layer base {
  :root {
    color-scheme: light;

    /* --- ground ------------------------------------------------------ */
    --cream:      #fcf0de;
    --cream-2:    #f6ecdb;
    --paper:      #ffffff;
    --night:      #0e1012;

    /* --- ink ---------------------------------------------------------- */
    --ink:        #212121;   /* 14.3:1 on cream */
    --body-ink:   #413f3d;   /*  9.3:1 on cream */
    --muted:      #5f6163;   /*  5.5:1 on cream — NOT their #75777a, which is 4.0 */
    --gold-ink:   #7a6228;   /*  5.2:1 on cream — the readable cousin of --gold */

    /* --- accents (decorative only, never text on a light ground) ------- */
    --gold:       #bd9e57;   /*  2.3:1 on cream → rules and borders only.
                                 7.4:1 on --night → safe as text there. */
    --bronze:     #cbb4a4;   /*  9.6:1 on --night */
    --sand:       #d8cbb4;   /* 11.9:1 on --night */
    --rule:       #ddd0b8;
    --rule-dark:  #2a2c2e;

    /* --- type --------------------------------------------------------- */
    --font-display: Trajan, "Trajan Pro", "Trajan Pro 3", Palatino,
                    "Palatino Linotype", "Book Antiqua", "URW Palladio L",
                    Georgia, serif;
    --font-meta:    "DIN Condensed", "DIN Alternate", "Avenir Next Condensed",
                    "Roboto Condensed", "Helvetica Neue", Helvetica, Arial,
                    sans-serif;
    --font-body:    "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
                    "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* --- rhythm ------------------------------------------------------- */
    --gutter:  clamp(1.25rem, 5.5vw, 4rem);
    --wide:    76rem;
    --measure: 38rem;
    --section: clamp(3.5rem, 9vw, 7.5rem);
  }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--body-ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.72;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.14;
    text-wrap: balance;
  }

  p { text-wrap: pretty; overflow-wrap: break-word; }
  p + p { margin-block-start: 1.15em; }

  a { color: inherit; }

  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--gold-ink);   /* 5.2:1 on cream, 5.8:1 on white */
    outline-offset: 3px;
    border-radius: 1px;
  }
  /* On the dark surfaces --gold-ink is only 3.3:1 — over the 3:1 floor but
     not by much. --gold is 7.4:1 there, so swap it rather than squeak past. */
  :is(.masthead, .plan, .hero) a:focus-visible,
  .skip-link:focus-visible {
    outline-color: var(--gold);
  }

  ::selection { background: var(--gold); color: var(--night); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
}

@layer layout {
  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 50;
    padding: 0.9rem 1.25rem;
    background: var(--night);
    color: var(--cream);
    font-family: var(--font-meta);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    translate: 0 -120%;
  }
  .skip-link:focus-visible { translate: 0 0; }

  .eyebrow {
    margin-block-end: 0.9rem;
    color: var(--gold-ink);
    font-family: var(--font-meta);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .eyebrow--light { color: var(--gold); }   /* 7.4:1 on --night */

  .section-head {
    max-inline-size: var(--measure);
    margin-block-end: clamp(2rem, 5vw, 3.5rem);
  }
  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }
  .section-head h2 {
    font-size: clamp(1.65rem, 1.05rem + 2.6vw, 2.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .section-head__note {
    margin-block-start: 1rem;
    color: var(--muted);
    font-size: 0.9375rem;
  }

  .lede {
    color: var(--ink);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    line-height: 1.65;
  }
}

/* ==========================================================================
   Masthead
   ========================================================================== */
@layer components {
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.1rem;
    padding: 1.5rem var(--gutter) 1.25rem;
    background: var(--night);
    color: var(--cream);
    text-align: center;
  }

  .wordmark {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    justify-items: center;
    text-decoration: none;
  }
  /* The property's own lockup, as an <img>. It is gold artwork on transparency, so it needs the
     dark masthead behind it; #b5901c on --night is 6.1:1, and as a logotype it is exempt from
     1.4.3 anyway. The accessible name lives in the alt attribute, not in a sibling span. */
  .wordmark__img {
    inline-size: clamp(10.5rem, 34vw, 15.5rem);
    block-size: auto;
  }

  .wordmark__name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem);
    letter-spacing: 0.32em;
    /* tracking adds a trailing gap; pull it back so the mark stays centred */
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--cream);
  }
  .wordmark__sub {
    font-family: var(--font-meta);
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--bronze);   /* 9.6:1 on --night */
  }

  .masthead__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.35rem;
  }
  .masthead__nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;      /* 44px touch target */
    padding-inline: 0.7rem;
    color: var(--sand);           /* 11.9:1 on --night */
    font-family: var(--font-meta);
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-block-end: 1px solid transparent;
  }
  .masthead__nav a:hover { color: var(--gold); border-block-end-color: var(--gold); }

  /* ========================================================================
     Hero
     ==================================================================== */
  .hero {
    position: relative;
    isolation: isolate;
    background: var(--night);
  }
  .hero__img {
    inline-size: 100%;
    block-size: min(72svh, 40rem);
    object-fit: cover;
    object-position: center 45%;
  }
  .hero__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 5rem var(--gutter) clamp(2rem, 5vw, 3.5rem);
    /* ⚠️ The old comment here read "the scrim is sized so no text ever sits above the 78% alpha
       stop", and it was measured false. The stops were percentages of the *body's own height*, so
       whether a line cleared the fade depended on how tall the body happened to be. At 390x844 the
       eyebrow's top edge landed at 76.5% — above the 72% stop — where the effective alpha is .65,
       and pixel-sampling the photograph behind it gave a worst case of 2.47:1 against 4.5 required.

       Two changes, and the first is what makes the claim structural instead of coincidental:

       1. The stops are now in `rem` from the TOP of the box, and the fade finishes at 4.5rem, which
          is inside the 5rem of top padding. No text can be in the fade at any body height, any
          breakpoint, any root font size. It is the padding that guarantees it, not an arithmetic
          coincidence that has to be rechecked whenever the type scale moves.
       2. The plateau is .84, not .78, because the eyebrow is `--gold #BD9E57` rather than white.
          Over a worst-case pure-white photograph, .84 gives an effective ground of #363738 and
          `--gold` on it is 4.74:1; at .78 it was 3.72:1. White and `--sand` clear both comfortably —
          it is the small gold caps that set the floor, and they are the line the eyebrow uses. */
    background: linear-gradient(to bottom,
                  rgb(14 16 18 / 0) 0,
                  rgb(14 16 18 / 0.84) 4.5rem,
                  rgb(14 16 18 / 0.94) 100%);
    color: var(--cream);
  }
  .hero__title {
    font-size: clamp(2.15rem, 1.2rem + 4vw, 4.5rem);
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    color: var(--cream);
    /*
     * 1.4.4 Resize Text, on the one word on the page that has no wrap opportunity in it.
     *
     * The clamp's *lower* bound is in `rem`, so it follows the reader's default font size, but the
     * media queries below are in `rem` too and those resolve against the initial 16px and do not
     * move. A reader who has set a 200% default font therefore gets a 68.8px wordmark inside a
     * layout still built for 16px: measured in WebKit at 320px, "Londolozi" at 0.16em of tracking
     * has a min-content width of 536px, which pushed the document to 576px and scrolled the page
     * sideways by 256px. Every other block on the page wraps out of the problem; a single word
     * cannot.
     *
     * `break-word` is inert until the word genuinely cannot fit — so the wordmark is untouched at
     * every normal font size, and at 200% it wraps instead of scrolling the page. Breaking a
     * property's name across two lines is not lovely; a marketing page that only scrolls sideways
     * for readers who need large text is worse, and is a conformance failure rather than a taste
     * one.
     */
    overflow-wrap: break-word;
  }
  .hero__lede {
    max-inline-size: 34rem;
    margin-block-start: 1.1rem;
    color: var(--sand);
    font-size: clamp(0.9375rem, 0.9rem + 0.35vw, 1.125rem);
    line-height: 1.6;
  }
  .hero__meta {
    margin-block-start: 1.4rem;
    color: var(--gold);
    font-family: var(--font-meta);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* ========================================================================
     The Reserve
     ==================================================================== */
  .reserve {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }
  .reserve__text { max-inline-size: var(--measure); }
  .reserve__text h2 {
    font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .reserve__text .lede { margin-block-start: 1.4rem; }
  .reserve__text p + p { margin-block-start: 1.15em; }

  .reserve__figure img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--cream-2);
  }

  /* The staged frame here is portrait (1457x2000). Forcing it into the 3:2 slot would crop the
     subject out, so the slot follows the picture instead of the picture following the slot —
     and the figure is capped so a portrait does not run away with the column. */
  .reserve__figure--portrait {
    max-inline-size: 26rem;
    margin-inline: auto;
  }
  .reserve__figure--portrait img { aspect-ratio: 3 / 4; }

  @media (min-width: 56rem) {
    .reserve {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      align-items: center;
      gap: clamp(3rem, 6vw, 5.5rem);
    }
  }

  /* ========================================================================
     Camps
     ==================================================================== */
  .camps {
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: 0 var(--gutter) var(--section);
  }
  .camp-list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }

  .camp {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
    border-block-start: 1px solid var(--rule);
  }
  .camp:first-child { padding-block-start: 0; border-block-start: 0; }

  .camp__figure img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--cream-2);
  }

  .camp__name {
    font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .camp__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin-block: 0.85rem 1.1rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--rule);
    color: var(--muted);
    font-family: var(--font-meta);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .camp__from { color: var(--gold-ink); white-space: nowrap; }
  .camp__note {
    margin-block-start: 1.1rem;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .badge {
    display: inline-block;
    margin-inline-start: 0.6rem;
    padding: 0.3em 0.7em;
    border: 1px solid var(--gold);
    color: var(--gold-ink);
    font-family: var(--font-meta);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    vertical-align: 0.35em;
    white-space: nowrap;
  }

  /* A camp with no photograph of its own (see the note in index.html) is a single text column,
     held to a readable measure rather than left as one filled cell beside an empty one. */
  /* Unused since 2026-08-23, when Founders and Pioneer were staged and all five camps gained a
     photograph. Kept, not deleted: the state is a real one for any property whose set is partly
     photographed, and this mock is the template the next one is cut from. */
  .camp--noimg .camp__body { max-inline-size: var(--measure); }

  @media (min-width: 52rem) {
    .camp {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(2rem, 4vw, 3.5rem);
    }
    .camp--noimg { grid-template-columns: minmax(0, 1fr); }
    /* The image side alternates. With two camps carrying no picture, `nth-child(even)` no longer
       lands on a figure, so the flip is declared on the card that needs it. */
    .camp--flip .camp__figure { order: 2; }
  }

  /* ========================================================================
     Experience
     ==================================================================== */
  .experience {
    padding: var(--section) 0;
    background: var(--paper);
    border-block: 1px solid var(--rule);
  }
  .experience > .section-head {
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .exp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  @media (min-width: 40rem) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 66rem) { .exp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .exp__figure { margin-block-end: 1.1rem; }
  .exp__figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--cream-2);
  }
  .exp h3 {
    margin-block: 0.55rem 0.7rem;
    font-size: 1.1875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .exp p { font-size: 0.9375rem; line-height: 1.7; }
  .exp__fine {
    margin-block-start: 0.9rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.6;
  }
  .exp--plain {
    align-self: start;
    padding: 1.75rem;
    background: var(--cream);
    border: 1px solid var(--rule);
  }

  .tag {
    display: inline-block;
    color: var(--muted);
    font-family: var(--font-meta);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .tag--in  { color: var(--gold-ink); }
  .tag--out { color: var(--muted); }
  .tag::before {
    content: "";
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1px;
    margin-inline-end: 0.6rem;
    background: currentcolor;
    vertical-align: 0.3em;
  }

  /* --- the photography band ---------------------------------------- */
  .band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    max-inline-size: var(--wide);
    margin: clamp(3rem, 7vw, 5rem) auto 0;
    padding-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-inline: var(--gutter);
    border-block-start: 1px solid var(--rule);
  }
  .band__figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--cream-2);
  }
  .band__body h3 {
    margin-block-end: 1rem;
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .band__body p { font-size: 0.9375rem; }
  .band__fine {
    margin-block-start: 1.2rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.65;
  }
  @media (min-width: 56rem) {
    .band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  }

  /* ========================================================================
     Rates
     ==================================================================== */
  .rates {
    max-inline-size: 62rem;
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }

  .table-wrap { overflow-x: auto; }
  .table-wrap:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }

  .rate-table {
    inline-size: 100%;
    font-variant-numeric: tabular-nums;
  }
  .rate-table caption {
    margin-block-end: 1.25rem;
    color: var(--muted);
    font-family: var(--font-meta);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-align: start;
    text-transform: uppercase;
  }
  .rate-table th,
  .rate-table td {
    padding: 0.75rem 0.5rem;
    font-weight: 400;
    text-align: start;
    vertical-align: baseline;
  }
  .rate-table th:first-child, .rate-table td:first-child { padding-inline-start: 0; }
  .rate-table th:last-child,  .rate-table td:last-child  { padding-inline-end: 0; }

  .rate-table thead th {
    color: var(--muted);
    font-family: var(--font-meta);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-block-end: 1px solid var(--ink);
  }
  .rate-table .num { text-align: end; }

  .rate-group th {
    padding-block: 1.5rem 0.4rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .rate-table tbody tr:not(.rate-group) th,
  .rate-table tbody tr:not(.rate-group) td {
    border-block-start: 1px solid var(--rule);
    font-size: 0.9375rem;
  }
  .rate-table tbody tr:not(.rate-group) td:last-child { color: var(--ink); }

  .fine-print {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin-block-start: 2rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.6;
  }
  .fine-print li { padding-inline-start: 1.1rem; position: relative; }
  .fine-print li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.62em;
    inset-inline-start: 0;
    inline-size: 0.5rem;
    block-size: 1px;
    background: var(--gold);
  }

  .incl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block-start: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1px solid var(--rule);
  }
  @media (min-width: 48rem) {
    .incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .incl__head {
    margin-block-end: 1.1rem;
    font-size: 0.9375rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .incl__list { display: grid; gap: 0.6rem; font-size: 0.875rem; line-height: 1.6; grid-template-columns: minmax(0, 1fr); }
  .incl__list li { padding-inline-start: 1.5rem; position: relative; }
  .incl__list li::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-family: var(--font-meta);
  }
  .incl__list--in  li::before { content: "\2014"; color: var(--gold-ink); }
  .incl__list--out li::before { content: "\00d7"; color: var(--muted); }

  .policy {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--paper);
    border: 1px solid var(--rule);
  }
  .policy__head {
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .policy__head + p { margin-block-start: 0.7rem; }
  .policy p {
    color: var(--body-ink);
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .policy p + .policy__head { margin-block-start: 1.6rem; }
  .policy__verbatim {
    font-family: var(--font-meta);
    letter-spacing: 0.08em;
  }

  /* ========================================================================
     Plan — where the Honeyguide takeover begins
     ==================================================================== */
  .plan {
    padding: var(--section) var(--gutter);
    background: var(--night);
    color: var(--sand);
    text-align: center;
  }
  .plan h2 {
    max-inline-size: 22ch;
    margin-inline: auto;
    color: var(--cream);
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .plan__lede {
    max-inline-size: 34rem;
    margin: 1.25rem auto 0;
    color: var(--bronze);
    font-size: clamp(0.9375rem, 0.9rem + 0.35vw, 1.0625rem);
  }
  .plan__slot:not(:empty) { margin-block-start: clamp(2rem, 5vw, 3rem); }

  /* ------------------------------------------------------------------------
     The Honeyguide call to action, inside .plan__slot — the launcher task's
     `data-hg-launcher` anchor.

     The property's own words, in the property's own design language: this is
     the inline CTA the floating launcher is being trialled AGAINST, so it is
     styled as a first-class control rather than as a vendor's badge. It is
     also the no-JS path — a plain link to /plan — so it has to look finished
     whether or not the script ever runs.

     Gold on --night is 7.4:1; the border is the same gold, which clears 3:1
     for a non-text boundary (1.4.11). `inline-flex` + `min-block-size` keeps
     the target well over 2.5.8's floor without pinning the height.
     -------------------------------------------------------------------- */
  .plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;             /* 2.5.8 Target Size (Minimum) with room */
    padding: 0.85rem 2.25rem;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-meta);    /* the page's label face, not the body face */
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;               /* re-centre against the trailing tracking gap */
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .plan__cta:hover {
    background: var(--gold);
    color: var(--night);              /* 7.4:1, the same pair inverted */
  }

  /* ========================================================================
     Colophon
     ==================================================================== */
  .colophon {
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
    background: var(--cream-2);
    border-block-start: 1px solid var(--rule);
    text-align: center;
  }
  .colophon__mark {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .colophon__line {
    margin-block-start: 0.85rem;
    color: var(--muted);
    font-size: 0.8125rem;
  }
  .colophon__disclaimer {
    max-inline-size: 44rem;
    margin: 1.75rem auto 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--rule);
    color: var(--body-ink);   /* 9.0:1 on --cream-2 */
    font-family: var(--font-meta);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.7;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Forced colours: the gold rules and scrims disappear, so restore the
   boundaries they were carrying with system colours.
   ========================================================================== */
@media (forced-colors: active) {
  .hero__body { background: Canvas; color: CanvasText; }
  .badge, .exp--plain, .policy { border: 1px solid CanvasText; }
  .camp, .band, .incl-grid { border-block-start: 1px solid CanvasText; }
  .tag::before, .fine-print li::before { background: CanvasText; }
  a:focus-visible { outline: 2px solid Highlight; }
}