/* ==========================================================================
   THE CORDON — RULEBOOK (settings file) · v2 · 2026-09-28
   The single source for colour, type, sizes and layout for everything rebuilt
   in the new system.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* ---- COLOUR: the six ---- */
  --chalk:#edefeb;      /* the page                                   */
  --black:#1c1c18;      /* text, rules, marks on Chalk                */
  --claret:#9a2b2f;     /* the accent on Chalk — on Chalk ONLY        */
  --oxblood:#420202;    /* the signature brand colour — header, footer, buttons, banners, social + marketing grounds */
  --cream:#f4efe9;      /* text, masthead + icons on Oxblood */
  --gold:#d8a647;       /* the accent on Oxblood ONLY — thin rules/frames, short capitals labels, small marks */

  /* ---- COLOUR: the three approved greys (Black mixed into Chalk; Chalk pages only) ---- */
  --grey-text:#5a5a52;  /* secondary text: standfirst, captions, bylines, meta */
  --grey-line:#d2d4d0;  /* hairlines, dividers inside boxes, chart gridlines   */
  --grey-tint:#e5e7e3;  /* box / card fill; the second stripe of the image placeholder */

  /* ---- COLOUR: the three Oxblood shades (Cream mixed into Oxblood; Oxblood surfaces only) — approved 2026-09-28 ---- */
  --ox-text:#b09591;    /* secondary text on Oxblood (6.1:1) — the Oxblood-side Grey text */
  --ox-line:#693635;    /* hairlines / dividers on Oxblood                                */
  --ox-tint:#521717;    /* box fill, disabled fill, hover highlight on Oxblood            */

  /* RULES: each ground has ONE accent. Chalk → Claret. Oxblood → Gold.
     Claret never on Oxblood (2.2:1 fails). Gold never on Chalk (1.9:1 fails).
     On Oxblood, text is Cream; Gold only for small things (never large fills, never long text).
     No other colours, no opacity-made shades, no green. */

  /* ---- COLOUR BY LAYER (founder-approved 2026-09-30) ----
     Each layer follows only the layer directly beneath it.
     A page is built in layers: ground → card → what sits on the card (buttons, text, lines).
     Each layer uses only the colours approved for the colour it sits on:
       On Oxblood: Cream, Gold, the Oxblood shades, and Chalk cards.
       On Chalk:   Black, Oxblood, Claret, and the greys.
     What lies further down doesn't matter: a button on a Chalk card follows Chalk's pairings,
     even when the card sits on Oxblood.
     In code: every surface carries .on-chalk or .on-oxblood; pieces only ever use the
     --layer-* colours below, so they take their colours from the layer they sit on. */

  /* ---- TYPE: families ---- */
  --font-display:'Besley', Georgia, serif;          /* headlines, section heads, box titles, big numbers */
  --font-body:'Libre Caslon Text', Georgia, serif;  /* body text, pull-quotes, names                     */
  --font-label:'Old Standard TT', Georgia, serif;   /* labels, captions, bylines, numbers, meta          */

  /* ---- TYPE: sizes (desktop; phone values below) — nothing under 12px ---- */
  --fs-headline:48px;    --lh-headline:1.08;
  --fs-standfirst:22px;  --lh-standfirst:1.4;
  --fs-section:28px;     --lh-section:1.25;
  --fs-pull:26px;        --lh-pull:1.45;
  --fs-body:18px;        --lh-body:1.65;
  --fs-box-title:19px;
  --fs-box:16px;         --lh-box:1.55;
  --fs-caption:14px;     /* footnotes, captions */
  --fs-meta:13px;        /* bylines, card meta, footer links */
  --fs-label:12px;       --ls-label:.14em;   /* capitals labels: READ MORE, NOTE, kickers */

  /* ---- LAYOUT ---- */
  --measure:620px;       /* text column → 65–70 characters per line at 18px */
  --wide:952px;          /* cover image, read-next row, page furniture       */
  --gutter:20px;         /* phone side margin                                 */
  --radius:2px;
  --rule-section:2px solid var(--black);   /* full-column section divider */
  --rule-hair:1px solid var(--grey-line);  /* hairline                     */
  --accent-edge:2px solid var(--claret);   /* left edge of read-more boxes */

  /* spacing steps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* HEADING SPACING (founder-approved 2026-10-05, option A; section heading changed 2026-10-22 to option B in px).
     Small heading: measured in its own font size (em). Section heading: fixed px, phone values in the 720px block.
     "Above" is the whole visible gap from the text above to the heading block (it replaces, not adds to,
     the paragraph's own bottom margin); "below" is the gap from the heading to its text.
     A small capitals label above a heading (e.g. PART I) belongs to the heading block: the block's
     space above is the heading level's "above", and the label sits --h-eyebrow-gap above the heading. */
  --h-section-above:36px;   --h-section-below:30px;   /* section heading (--fs-section): founder 2026-10-22, option B — more space above than below, below = one body line; phone below */
  --h-small-above:1.6em;    --h-small-below:.6em;     /* small heading (--fs-box-title) */
  --h-eyebrow-gap:var(--s2);                          /* label → heading */

  /* header (founder-placed 2026-09-26, measured @1460px) */
  --hdr-h:63px; --hdr-mast-h:50.5px; --hdr-icon:31px;

  /* image placeholder (every empty picture slot) */
  --placeholder:repeating-linear-gradient(45deg, var(--chalk) 0 10px, var(--grey-tint) 10px 20px);
}

/* ---- THE TWO LAYERS: what each colour role is on Chalk and on Oxblood ---- */
:root,.on-chalk{
  --layer-ground:var(--chalk);        /* the layer's own colour                          */
  --layer-text:var(--black);          /* text, icons, marks                              */
  --layer-text-soft:var(--grey-text); /* secondary text, field edges                     */
  --layer-line:var(--grey-line);      /* hairlines, dividers                             */
  --layer-tint:var(--grey-tint);      /* box fill, hover highlight                       */
  --layer-accent:var(--claret);       /* the one accent: underlines, labels, frames      */
  --layer-action:var(--oxblood);      /* main button, current page, done steps, ticks    */
  --layer-action-text:var(--cream);   /* text on the action colour                       */
  --layer-action-hover:var(--black);  /* main button on hover                            */
  --layer-focus:var(--black);         /* keyboard focus outline                          */
  --layer-alert:var(--claret);        /* error edge + icon                               */
  --layer-alert-text:var(--claret);   /* error message text                              */
  --layer-field:transparent;          /* inside a form field                             */
  --layer-off:var(--grey-tint);       /* disabled field / box fill                       */
  --layer-off-line:var(--grey-tint);  /* disabled field / box edge                       */
  --layer-card-frame:var(--claret);  /* pricing card's thin inner frame: Claret on a Chalk card */
  --layer-google-fill:var(--chalk);   /* Google button: a Chalk button ...             */
  --layer-google-edge:var(--black);   /* ... with a Black edge                           */
  --layer-google-ink:var(--black);    /* Google button text                              */
  --layer-menu-edge:var(--grey-text); /* edge of an open list or menu panel (as the Stats database panels) */
}
.on-oxblood{
  --layer-ground:var(--oxblood);
  --layer-text:var(--cream);
  --layer-text-soft:var(--ox-text);
  --layer-line:var(--ox-line);
  --layer-tint:var(--ox-tint);
  --layer-accent:var(--gold);
  --layer-action:var(--cream);
  --layer-action-text:var(--oxblood);
  --layer-action-hover:var(--gold);
  --layer-focus:var(--cream);        /* keyboard focus on Oxblood is Cream everywhere, so Gold only ever means an error (founder 2026-10-16) */
  --layer-alert:var(--gold);
  --layer-alert-text:var(--cream);
  --layer-field:transparent;
  --layer-off:var(--ox-tint);
  --layer-off-line:var(--ox-tint);
  --layer-card-frame:transparent;    /* the Oxblood pricing card has no frame */
  --layer-google-fill:var(--cream);
  --layer-google-edge:var(--cream);
  --layer-google-ink:var(--black);
  --layer-menu-edge:var(--ox-line);  /* an open list on Oxblood: a thin edge in the line colour */
}
.on-chalk,.on-oxblood{background-color:var(--layer-ground);color:var(--layer-text);}

@media (max-width:720px){
  :root{
    --fs-headline:32px; --fs-standfirst:19px; --fs-section:23px; --fs-pull:22px;
    --fs-body:17px; --lh-body:1.6; --fs-box-title:16px;
    --h-section-above:33px; --h-section-below:27px;
  }
}