@layer astro.images {
:where([data-astro-image]) {
  height: auto;
}
:where([data-astro-image="full-width"]) {
  width: 100%;
}
:where([data-astro-image="constrained"]) {
  max-width: 100%;
}

[data-astro-image-fit="fill"] {
  object-fit: fill;
}

[data-astro-image-fit="contain"] {
  object-fit: contain;
}

[data-astro-image-fit="cover"] {
  object-fit: cover;
}

[data-astro-image-fit="scale-down"] {
  object-fit: scale-down;
}


[data-astro-image-pos="top"] {
  object-position: top;
}

[data-astro-image-pos="bottom"] {
  object-position: bottom;
}

[data-astro-image-pos="left"] {
  object-position: left;
}

[data-astro-image-pos="right"] {
  object-position: right;
}

[data-astro-image-pos="center"] {
  object-position: center;
}

[data-astro-image-pos="top-left"] {
  object-position: top left;
}

[data-astro-image-pos="top-right"] {
  object-position: top right;
}

[data-astro-image-pos="top-center"] {
  object-position: top center;
}

[data-astro-image-pos="bottom-left"] {
  object-position: bottom left;
}

[data-astro-image-pos="bottom-right"] {
  object-position: bottom right;
}

[data-astro-image-pos="bottom-center"] {
  object-position: bottom center;
}

[data-astro-image-pos="left-top"] {
  object-position: left top;
}

[data-astro-image-pos="left-bottom"] {
  object-position: left bottom;
}

[data-astro-image-pos="left-center"] {
  object-position: left center;
}

[data-astro-image-pos="right-top"] {
  object-position: right top;
}

[data-astro-image-pos="right-bottom"] {
  object-position: right bottom;
}

[data-astro-image-pos="right-center"] {
  object-position: right center;
}

[data-astro-image-pos="center-top"] {
  object-position: center top;
}

[data-astro-image-pos="center-bottom"] {
  object-position: center bottom;
}

[data-astro-image-pos="center-left"] {
  object-position: center left;
}

[data-astro-image-pos="center-right"] {
  object-position: center right;
}
}/* marcellus-latin-ext-400-normal */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/marcellus-latin-ext-400-normal.DkjSXVBo.woff2) format('woff2'), url(/_astro/marcellus-latin-ext-400-normal.D06jIo1e.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* marcellus-latin-400-normal */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/marcellus-latin-400-normal.86dSXJnk.woff2) format('woff2'), url(/_astro/marcellus-latin-400-normal.AvMY561b.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* crimson-pro-vietnamese-wght-normal */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-vietnamese-wght-normal.Djpar-EE.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* crimson-pro-latin-ext-wght-normal */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-latin-ext-wght-normal.4mBZvMWv.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* crimson-pro-latin-wght-normal */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-latin-wght-normal.C4R2PX-h.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* crimson-pro-vietnamese-wght-italic */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-vietnamese-wght-italic.Dpzp2Zc3.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* crimson-pro-latin-ext-wght-italic */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-latin-ext-wght-italic.BwehhlXF.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* crimson-pro-latin-wght-italic */
@font-face {
  font-family: 'Crimson Pro Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/_astro/crimson-pro-latin-wght-italic.CkPs-Rv6.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Unruly Corp website colour tokens (October 2026).
 * Generated by palette_check.py; every text/background pair is verified to WCAG 2.2 AA and APCA-W3 0.0.98G-4g
 * targets (see palette.md). Edit the dicts in palette_check.py and regenerate; do not hand-edit values here.
 *
 * Theming: light is the default. Dark follows the OS unless the user has chosen; a toggle sets
 * <html data-theme="light|dark">. Persist the choice and set the attribute in an inline <head> script
 * before first paint to avoid a flash.
 *
 * Usage rules the verification depends on:
 *  - Links are always underlined (text-decoration-color: var(--accent)); colour alone does not mark them.
 *  - Focus: outline: 2px solid var(--focus); outline-offset: 2px  (on the navy band use --focus-on-brand).
 *  - --rule is decorative only (hairlines between items). Inputs/controls use --border (>= 3:1).
 *  - --accent (gold) is for rules, markers and display numerals >= 24px; gold text below 24px uses --accent-ink.
 *  - Status is never colour alone: pair every status colour with an icon and a word (Note / Done / Caution / Alert).
 *  - Brand rust (--viz-cat-3) is a data colour and editorial accent, never a status colour; --danger is crimson.
 */

/* ---- Light (default) */
:root {
  color-scheme: light;
  --bg: #FCFAF6;
  --surface: #FFFFFF;
  --sunken: #F6F2EA;
  --ink: #1B2433;
  --heading: #14213D;
  --ink-2: #4A5468;
  --muted: #646A7A;
  --rule: #DDD8CD;
  --border: #8E8779;
  --accent: #B4833B;
  --accent-ink: #8A6328;
  --accent-strong: #6E4F21;
  --link: #1F4B8F;
  --link-visited: #6A3F6E;
  --focus: #1F4B8F;
  --selection: #EAD9B6;
  --brand: #14213D;
  --on-brand: #FFFFFF;
  --on-brand-2: #D9DEE8;
  --on-brand-accent: #DDB97F;
  --focus-on-brand: #E3C48E;
  --btn: #14213D;
  --on-btn: #FFFFFF;
  --btn-hover: #24365E;
  --success: #2F6B47;
  --success-tint: #E5EFE7;
  --warning: #8C5E00;
  --warning-tint: #FAEED6;
  --danger: #9E1F2E;
  --danger-tint: #F8E4E0;
  --info: #2B4E8C;
  --info-tint: #E5EBF5;
  --viz-cat-1: #14213D;
  --viz-cat-2: #B8873F;
  --viz-cat-3: #A4532B;
  --viz-cat-4: #287D79;
  --viz-cat-5: #7A6EB7;
  --viz-cat-6: #7D9B82;
  --viz-cat-7: #64424C;
  --viz-cat-8: #285077;
  --viz-other: #8A8F99;
  --viz-seq-warm-1: #F6F2EA;
  --viz-seq-warm-2: #E3CAA8;
  --viz-seq-warm-3: #CFA265;
  --viz-seq-warm-4: #BA7A48;
  --viz-seq-warm-5: #A4532B;
  --viz-seq-warm-6: #5A3D3C;
  --viz-seq-warm-7: #14213D;
  --viz-seq-navy-1: #EEF0F4;
  --viz-seq-navy-2: #CDD3DE;
  --viz-seq-navy-3: #ADB6C8;
  --viz-seq-navy-4: #8E9AB3;
  --viz-seq-navy-5: #626F8A;
  --viz-seq-navy-6: #394662;
  --viz-seq-navy-7: #14213D;
  --viz-div-n4: #1F3566;
  --viz-div-n3: #4B618E;
  --viz-div-n2: #7B8EB6;
  --viz-div-n1: #AFBFDD;
  --viz-div-0: #F4F0E7;
  --viz-div-p1: #D9B6A6;
  --viz-div-p2: #B0836E;
  --viz-div-p3: #86533B;
  --viz-div-p4: #5C2507;
}

/* ---- Dark: follow the OS unless the user picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121110;
    --surface: #1C1A18;
    --sunken: #0C0B0A;
    --ink: #EFE9DC;
    --heading: #F6F1E6;
    --ink-2: #D4CDBF;
    --muted: #BAB3A6;
    --rule: #2E2B27;
    --border: #7F786D;
    --accent: #CFA265;
    --accent-ink: #D7AE70;
    --accent-strong: #E9C98F;
    --link: #9DB6E4;
    --link-visited: #CCA8D2;
    --focus: #E9C98F;
    --selection: #4A3B22;
    --brand: #1A2A4C;
    --on-brand: #FFFFFF;
    --on-brand-2: #D9DEE8;
    --on-brand-accent: #E3C48E;
    --focus-on-brand: #E9C98F;
    --btn: #DDB57A;
    --on-btn: #121110;
    --btn-hover: #E9C98F;
    --success: #7CC4B0;
    --success-tint: #16241B;
    --warning: #E8B65E;
    --warning-tint: #2A2011;
    --danger: #FD9A86;
    --danger-tint: #2E1612;
    --info: #9AB7EA;
    --info-tint: #141D2E;
    --viz-cat-1: #7D9BD6;
    --viz-cat-2: #D8AE6A;
    --viz-cat-3: #D06A45;
    --viz-cat-4: #5BBDB4;
    --viz-cat-5: #806FCD;
    --viz-cat-6: #8F9976;
    --viz-cat-7: #9A747F;
    --viz-cat-8: #E6D3A3;
    --viz-other: #7B7F87;
    --viz-seq-warm-1: #22201D;
    --viz-seq-warm-2: #3D2D22;
    --viz-seq-warm-3: #5A3A26;
    --viz-seq-warm-4: #885F33;
    --viz-seq-warm-5: #B8873F;
    --viz-seq-warm-6: #D6B47F;
    --viz-seq-warm-7: #F3E2BC;
    --viz-seq-navy-1: #1D2230;
    --viz-seq-navy-2: #2D374F;
    --viz-seq-navy-3: #3E4E71;
    --viz-seq-navy-4: #4F6694;
    --viz-seq-navy-5: #768AB2;
    --viz-seq-navy-6: #9EAFD0;
    --viz-seq-navy-7: #C9D6EE;
    --viz-div-n4: #AAC4F9;
    --viz-div-n3: #8298C3;
    --viz-div-n2: #5E6E8F;
    --viz-div-n1: #3C475C;
    --viz-div-0: #25221F;
    --viz-div-p1: #594035;
    --viz-div-p2: #8A6453;
    --viz-div-p3: #BC8B75;
    --viz-div-p4: #F1B499;
  }
}

/* ---- Dark: explicit user choice */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121110;
  --surface: #1C1A18;
  --sunken: #0C0B0A;
  --ink: #EFE9DC;
  --heading: #F6F1E6;
  --ink-2: #D4CDBF;
  --muted: #BAB3A6;
  --rule: #2E2B27;
  --border: #7F786D;
  --accent: #CFA265;
  --accent-ink: #D7AE70;
  --accent-strong: #E9C98F;
  --link: #9DB6E4;
  --link-visited: #CCA8D2;
  --focus: #E9C98F;
  --selection: #4A3B22;
  --brand: #1A2A4C;
  --on-brand: #FFFFFF;
  --on-brand-2: #D9DEE8;
  --on-brand-accent: #E3C48E;
  --focus-on-brand: #E9C98F;
  --btn: #DDB57A;
  --on-btn: #121110;
  --btn-hover: #E9C98F;
  --success: #7CC4B0;
  --success-tint: #16241B;
  --warning: #E8B65E;
  --warning-tint: #2A2011;
  --danger: #FD9A86;
  --danger-tint: #2E1612;
  --info: #9AB7EA;
  --info-tint: #141D2E;
  --viz-cat-1: #7D9BD6;
  --viz-cat-2: #D8AE6A;
  --viz-cat-3: #D06A45;
  --viz-cat-4: #5BBDB4;
  --viz-cat-5: #806FCD;
  --viz-cat-6: #8F9976;
  --viz-cat-7: #9A747F;
  --viz-cat-8: #E6D3A3;
  --viz-other: #7B7F87;
  --viz-seq-warm-1: #22201D;
  --viz-seq-warm-2: #3D2D22;
  --viz-seq-warm-3: #5A3A26;
  --viz-seq-warm-4: #885F33;
  --viz-seq-warm-5: #B8873F;
  --viz-seq-warm-6: #D6B47F;
  --viz-seq-warm-7: #F3E2BC;
  --viz-seq-navy-1: #1D2230;
  --viz-seq-navy-2: #2D374F;
  --viz-seq-navy-3: #3E4E71;
  --viz-seq-navy-4: #4F6694;
  --viz-seq-navy-5: #768AB2;
  --viz-seq-navy-6: #9EAFD0;
  --viz-seq-navy-7: #C9D6EE;
  --viz-div-n4: #AAC4F9;
  --viz-div-n3: #8298C3;
  --viz-div-n2: #5E6E8F;
  --viz-div-n1: #3C475C;
  --viz-div-0: #25221F;
  --viz-div-p1: #594035;
  --viz-div-p2: #8A6453;
  --viz-div-p3: #BC8B75;
  --viz-div-p4: #F1B499;
}

/* ---- Higher contrast on request (macOS Increase Contrast, Windows contrast themes report via forced-colors) */
@media (prefers-contrast: more) {
  :root {
    --ink: #0B1220;
    --heading: #0B1220;
    --ink-2: #262E3D;
    --muted: #3E4555;
    --border: #4F4A40;
    --rule: #8E8779;
    --accent-ink: #5E4219;
    --link: #123672;
    --link-visited: #4E2852;
    --focus: #123672;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #FBF8F1;
    --heading: #FFFFFF;
    --ink-2: #E6E0D3;
    --muted: #D2CBBE;
    --border: #ABA394;
    --rule: #7F786D;
    --accent-ink: #EBCB93;
    --link: #C3D4F3;
    --link-visited: #E0C5E5;
    --focus: #F3DDB2;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --ink: #FBF8F1;
    --heading: #FFFFFF;
    --ink-2: #E6E0D3;
    --muted: #D2CBBE;
    --border: #ABA394;
    --rule: #7F786D;
    --accent-ink: #EBCB93;
    --link: #C3D4F3;
    --link-visited: #E0C5E5;
    --focus: #F3DDB2;
  }
}

/* ---- Forced colours (Windows High Contrast / contrast themes): the UA replaces our palette with system colours.
 * Keep structure visible with real borders/outlines (not box-shadow or background alone), and keep SVG charts
 * legible by mapping marks to CanvasText/Highlight; categorical charts must carry direct labels or patterns. */
@media (forced-colors: active) {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --focus: Highlight; --focus-on-brand: Highlight; --border: CanvasText; --rule: GrayText;
    --accent: CanvasText; --accent-ink: CanvasText; --link: LinkText; --link-visited: VisitedText;
  }
  .band[data-surface="brand"], .btn, .status { forced-color-adjust: auto; border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---- Print: always the light palette on white paper, no cream fills (saves toner, avoids muddy CMYK cream),
 * navy band becomes a navy rule, links print their URL in muted ink. */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #FCFAF6;
    --surface: #FFFFFF;
    --sunken: #F6F2EA;
    --ink: #1B2433;
    --heading: #14213D;
    --ink-2: #4A5468;
    --muted: #646A7A;
    --rule: #DDD8CD;
    --border: #8E8779;
    --accent: #B4833B;
    --accent-ink: #8A6328;
    --accent-strong: #6E4F21;
    --link: #1F4B8F;
    --link-visited: #6A3F6E;
    --focus: #1F4B8F;
    --selection: #EAD9B6;
    --brand: #14213D;
    --on-brand: #FFFFFF;
    --on-brand-2: #D9DEE8;
    --on-brand-accent: #DDB97F;
    --focus-on-brand: #E3C48E;
    --btn: #14213D;
    --on-btn: #FFFFFF;
    --btn-hover: #24365E;
    --success: #2F6B47;
    --success-tint: #E5EFE7;
    --warning: #8C5E00;
    --warning-tint: #FAEED6;
    --danger: #9E1F2E;
    --danger-tint: #F8E4E0;
    --info: #2B4E8C;
    --info-tint: #E5EBF5;
    --viz-cat-1: #14213D;
    --viz-cat-2: #B8873F;
    --viz-cat-3: #A4532B;
    --viz-cat-4: #287D79;
    --viz-cat-5: #7A6EB7;
    --viz-cat-6: #7D9B82;
    --viz-cat-7: #64424C;
    --viz-cat-8: #285077;
    --viz-other: #8A8F99;
    --viz-seq-warm-1: #F6F2EA;
    --viz-seq-warm-2: #E3CAA8;
    --viz-seq-warm-3: #CFA265;
    --viz-seq-warm-4: #BA7A48;
    --viz-seq-warm-5: #A4532B;
    --viz-seq-warm-6: #5A3D3C;
    --viz-seq-warm-7: #14213D;
    --viz-seq-navy-1: #EEF0F4;
    --viz-seq-navy-2: #CDD3DE;
    --viz-seq-navy-3: #ADB6C8;
    --viz-seq-navy-4: #8E9AB3;
    --viz-seq-navy-5: #626F8A;
    --viz-seq-navy-6: #394662;
    --viz-seq-navy-7: #14213D;
    --viz-div-n4: #1F3566;
    --viz-div-n3: #4B618E;
    --viz-div-n2: #7B8EB6;
    --viz-div-n1: #AFBFDD;
    --viz-div-0: #F4F0E7;
    --viz-div-p1: #D9B6A6;
    --viz-div-p2: #B0836E;
    --viz-div-p3: #86533B;
    --viz-div-p4: #5C2507;
    --bg: #FFFFFF; --surface: #FFFFFF; --sunken: #FFFFFF;
  }
  .band[data-surface="brand"] { background: none !important; color: var(--ink) !important; border-top: 2pt solid var(--brand); }
  a[href^="http"]::after { content: " (" attr(href) ")"; color: var(--muted); font-size: .85em; }
}

/* ---- Base application */
html { background: var(--bg); color: var(--ink); accent-color: var(--accent-ink); }
::selection { background: var(--selection); color: var(--ink); }
a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.band[data-surface="brand"] { background: var(--brand); color: var(--on-brand); }
.band[data-surface="brand"] :focus-visible { outline-color: var(--focus-on-brand); }
@media (prefers-contrast: more) { a { text-decoration-thickness: 2px; } }
/* Review variants: switchable design choices (src/config/review.ts). Each choice is an attribute
   on <html>: data-type, data-ground, data-hero. Theme uses tokens.css's own data-theme. */

/* ---- Typography ---------------------------------------------------------------------- */
:root,
:root[data-type="report"] {
  --font-display: var(--ff-serif);
  --font-body: var(--ff-serif);
  --font-ui: var(--ff-sans);
  --display-weight: 600;
  --display-tracking: -0.015em;
  --label-tracking: 0.2em;
  --body-size: 1.0625rem;
}
:root[data-type="boutique"] {
  --font-display: Marcellus, "Trajan Pro", Georgia, serif;
  --font-body: "Crimson Pro Variable", "Crimson Pro", Georgia, serif;
  --font-ui: Marcellus, Georgia, serif;
  --display-weight: 400;
  --display-tracking: 0.005em;
  --label-tracking: 0.24em;
  --body-size: 1.1875rem; /* Crimson Pro sets small */
}
:root[data-type="hybrid"] {
  --font-display: Marcellus, "Trajan Pro", Georgia, serif;
  --font-body: var(--ff-serif);
  --font-ui: var(--ff-sans);
  --display-weight: 400;
  --display-tracking: 0.005em;
  --label-tracking: 0.2em;
  --body-size: 1.0625rem;
}

/* ---- Dark ground: the report's navy instead of the live site's warm black ------------------
   Values verified with the same WCAG 2.2 / APCA thresholds as tokens.css (36 pairs pass). */
:root[data-theme="dark"][data-ground="navy"] {
  --bg: #0f1a30;
  --surface: #132039;
  --sunken: #0b1426;
  --rule: #25324f;
  --border: #8c8679;
  --muted: #c4bdb0;
  --accent-ink: #dcb477;
  --link: #a3bce8;
  --link-visited: #d5b4da;
  --danger: #fda08d;
  --brand: #1f3260;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-ground="navy"] {
    --bg: #0f1a30;
    --surface: #132039;
    --sunken: #0b1426;
    --rule: #25324f;
    --border: #8c8679;
    --muted: #c4bdb0;
    --accent-ink: #dcb477;
    --link: #a3bce8;
    --link-visited: #d5b4da;
    --danger: #fda08d;
    --brand: #1f3260;
  }
}

/* ---- Hero ----------------------------------------------------------------------------- */
:root[data-hero="plain"] .hero-rings {
  display: none;
}

/* Homepage story: the live site's sections or the Flagship deck's (src/content/narrative/) */
:root:not([data-narrative="deck"]) .narr-deck,
:root[data-narrative="deck"] .narr-live {
  display: none;
}

/* What we offer: elements for the expanded offer (class offer-x) show only when chosen;
   elements replaced by it (class offer-c) hide then */
:root:not([data-offer="expanded"]) .offer-x,
:root[data-offer="expanded"] .offer-c {
  display: none !important;
}

/* Light background ("paper"): light theme only; dark theme keeps its own ground.
   Cream darkens the two small-text colours that would otherwise drop below AA on sunken bands. */
:root[data-paper="white"][data-theme="light"] {
  --bg: #ffffff;
  --sunken: #f7f4ee;
}
:root[data-paper="cream"][data-theme="light"] {
  --bg: #f7f1e5;
  --sunken: #efe6d4;
  --surface: #fcf9f3;
  --rule: #dcd2bf;
  --muted: #5a6070;
  --accent-ink: #7c5822;
  --selection: #ead9b4;
}
@media (prefers-color-scheme: light) {
  :root[data-paper="white"]:not([data-theme="dark"]) {
    --bg: #ffffff;
    --sunken: #f7f4ee;
  }
  :root[data-paper="cream"]:not([data-theme="dark"]) {
    --bg: #f7f1e5;
    --sunken: #efe6d4;
    --surface: #fcf9f3;
    --rule: #dcd2bf;
    --muted: #5a6070;
    --accent-ink: #7c5822;
    --selection: #ead9b4;
  }
}

/* People (review choice): hidden by default */
:root:not([data-people="shown"]) .people-x {
  display: none !important;
}
/* Homepage register: quiet (default) shows .reg-quiet and hides .reg-full; full the reverse */
:root:not([data-register="full"]) .reg-full,
:root[data-register="full"] .reg-quiet {
  display: none !important;
}
/* Film on the homepage */
:root:not([data-film="on"]) .film-x {
  display: none !important;
}
/* Quiet register: outlined buttons, as a firm's letterhead rather than a product page */
:root:not([data-register="full"]) .btn {
  background: transparent;
  color: var(--heading);
  box-shadow: inset 0 0 0 1px currentColor;
  letter-spacing: 0.14em;
  font-weight: 600;
}
:root:not([data-register="full"]) .btn:hover {
  background: color-mix(in srgb, var(--heading) 8%, transparent);
}
:root:not([data-register="full"]) :is(.hero, .band[data-surface="brand"], .card) .btn {
  background: transparent;
  color: var(--on-brand-accent);
}
:root:not([data-register="full"]) :is(.hero, .band[data-surface="brand"], .card) .btn:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--on-brand);
}
/* Design system scale: fluid type, fluid space, motion. One source for every size on the site.
   Fluid values interpolate between a 360px and a 1280px viewport (Utopia method, utopia.fyi):
   body text 17px to 19px; type ratio 1.2 (minor third) to 1.25 (major third). Components use
   these steps, never ad-hoc clamp() or fixed rem padding. See docs/design/design-system.md. */
:root {
  /* type */
  --step--2: clamp(0.7378rem, 0.7292rem + 0.0385vw, 0.76rem); /* labels */
  --step--1: clamp(0.8854rem, 0.8601rem + 0.1123vw, 0.95rem); /* captions, notes */
  --step-0: clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem); /* body */
  --step-1: clamp(1.275rem, 1.1931rem + 0.3641vw, 1.4844rem); /* lede, h3 */
  --step-2: clamp(1.53rem, 1.4026rem + 0.566vw, 1.8555rem); /* small h2 */
  --step-3: clamp(1.836rem, 1.6469rem + 0.8406vw, 2.3193rem);
  --step-4: clamp(2.2032rem, 1.9309rem + 1.2104vw, 2.8992rem); /* section h2 */
  --step-5: clamp(2.6438rem, 2.2603rem + 1.7046vw, 3.624rem); /* band h2 */
  --step-6: clamp(3.1726rem, 2.6415rem + 2.3606vw, 4.53rem); /* page h1 */
  --step-7: clamp(3.8063rem, 3.08rem + 3.2283vw, 5.6623rem); /* hero h1 */

  /* space */
  --space-3xs: clamp(0.2656rem, 0.2534rem + 0.0543vw, 0.2969rem);
  --space-2xs: clamp(0.5312rem, 0.5068rem + 0.1087vw, 0.5938rem);
  --space-xs: clamp(0.7969rem, 0.7602rem + 0.163vw, 0.8906rem);
  --space-s: clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem);
  --space-m: clamp(1.5938rem, 1.5204rem + 0.3261vw, 1.7812rem);
  --space-l: clamp(2.125rem, 2.0272rem + 0.4348vw, 2.375rem);
  --space-xl: clamp(3.1875rem, 3.0408rem + 0.6522vw, 3.5625rem);
  --space-2xl: clamp(4.25rem, 4.0543rem + 0.8696vw, 4.75rem);
  --space-3xl: clamp(6.375rem, 6.0815rem + 1.3043vw, 7.125rem);
  /* one-up pairs: grow faster than the steps */
  --space-s-l: clamp(1.0625rem, 0.5489rem + 2.2826vw, 2.375rem); /* gutters */
  --space-m-xl: clamp(1.5938rem, 0.8234rem + 3.4239vw, 3.5625rem); /* grid gaps */
  --space-l-2xl: clamp(2.125rem, 1.0978rem + 4.5652vw, 4.75rem); /* a section that continues */
  --space-2xl-4xl: clamp(4.25rem, 2.1957rem + 9.1304vw, 9.5rem); /* between sections */

  /* roles */
  --section-space: clamp(4rem, 2.9rem + 4.9vw, 7.5rem); /* 64px to 120px, on each side of a seam */
  --section-continue: var(--space-l-2xl);
  --head-gap: var(--space-l); /* section heading to its content */
  --grid-gap: var(--space-m-xl);
  --seam: clamp(3rem, 8vw, 7rem); /* how far a surface change feathers */

  /* motion: one curve family (Apple-like); durations collapse under reduced motion */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 700ms;

  /* radius and elevation */
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px -2px rgb(0 0 0 / 0.08);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 28px -10px rgb(0 0 0 / 0.22);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}
/* Global styles. Colours come only from tokens.css; fonts from variants.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 6rem; /* anchors land below the sticky header */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* the footer sits at the bottom of the window on short pages (404, search) */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--body-size) / 1.6 var(--font-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--selection);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--link);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:visited {
  color: var(--link-visited);
}
a {
  transition:
    text-decoration-color var(--dur-2) var(--ease-out),
    text-decoration-thickness var(--dur-1) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--heading);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* text roles shared by every page: a section's italic standfirst, and small UI metadata */
.lede {
  text-wrap: balance;
  font: italic 400 var(--step-1) / 1.45 var(--font-body);
  color: var(--ink-2);
  max-width: 42rem;
  margin: var(--space-xs) 0 0;
}
.meta {
  font: 500 var(--step--1) / 1.4 var(--font-ui);
  color: var(--muted);
}

main {
  flex: 1 0 auto;
}

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}
.measure {
  max-width: 38rem;
}
.eyebrow {
  font: 600 var(--step--2)/1.2 var(--font-ui);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}
.rule {
  width: 3.5rem;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 1.75rem 0;
}

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* skip link */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--btn);
  color: var(--on-btn);
  font: 600 var(--step--1) var(--font-ui);
}
.skip:focus {
  top: 1rem;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 2px;
  background: var(--btn);
  color: var(--on-btn);
  font: 600 var(--step--1)/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn:active {
  transform: translateY(1px);
}
.btn:hover {
  background: var(--btn-hover);
}
.btn:visited {
  color: var(--on-btn);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* icon accents (src/components/Icon.astro) */
.icon .ia-s {
  stroke: var(--icon-accent, currentColor);
}
.icon .ia-f {
  fill: var(--icon-accent, currentColor);
}

/* draft pages (src/lib/visibility.ts) */
.draft-banner {
  margin: 0;
  padding: 0.55rem 1.25rem;
  text-align: center;
  font: 500 var(--step--1) / 1.4 var(--font-ui);
  color: var(--heading);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent) 16%, var(--bg)) 0 12px,
    color-mix(in srgb, var(--accent) 9%, var(--bg)) 12px 24px
  );
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.draft-note {
  display: block;
  margin-top: 0.15rem;
}
.draft-note a {
  color: var(--accent-ink);
}
.draft-banner strong {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.6rem;
  color: var(--accent-ink);
}
.draft-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font: 700 var(--step--2) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  vertical-align: middle;
}

/* print: content only, black on white */
@media print {
  :root {
    color-scheme: light;
  }
  .site-header,
  .site-footer,
  .review,
  .draft-banner,
  .read-progress,
  .share,
  .btn,
  .skip {
    display: none !important;
  }
  html,
  body {
    background: #fff !important;
  }
  body::before {
    display: none;
  }
  .band {
    padding-block: 1.5rem;
    background: none !important;
    box-shadow: none !important;
  }
}
/* Typesetting for running prose: the Markdown bodies in .prose and .bio, and .set.
   Headings, ledes, captions and labels stay ragged and never hyphenate.

   Justified with hyphenation wherever the column is at least 18em (about 36 characters), as
   newspapers set narrow columns; only columns narrower than that are set ragged right. Review choice
   "setting" (src/config/review.ts) switches justified, book-style indents, or ragged. */

:is(.prose, .bio, .set) {
  container-type: inline-size;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none;
  hanging-punctuation: first allow-end last; /* Safari: quotes and stops hang in the margin */
}

:is(.prose, .bio, .set) :is(p, li) {
  line-height: 1.58;
  /* Hyphenation is switched on only with justification (below): ragged text breaks cleaner
     on whole words. Break words of 6+ letters, keeping 2 letters before the hyphen (as
     book setting allows: "be-tween") and 3 after. */
  hyphenate-limit-chars: 6 2 3;
  -webkit-hyphenate-limit-before: 2;
  -webkit-hyphenate-limit-after: 3;
  /* never more than two hyphens in a row, and none on a paragraph's last full line */
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  text-wrap: pretty; /* no one-word last lines */
  orphans: 2;
  widows: 2;
}
:is(.prose, .bio, .set) p {
  margin: 0 0 0.72lh;
}
:is(.prose, .bio, .set) p:last-child {
  margin-bottom: 0;
}

/* Words that should never break or hyphenate: names, figures, URLs */
:is(.prose, .bio, .set) :is(a[href^="http"], code, .nobr) {
  -webkit-hyphens: manual;
  hyphens: manual;
}
:is(.prose, .bio, .set) a[href^="http"] {
  overflow-wrap: anywhere;
}

/* Acronyms in small capitals, lightly spaced, as in the report */
:is(.prose, .bio, .set) abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* Justified (default) and indented: justify once the measure can carry it */
@container (min-width: 18em) {
  :root:not([data-setting="ragged"]) :is(.prose, .bio, .set) :is(p, li) {
    text-align: justify;
    text-justify: inter-word; /* never stretch letter spacing */
    /* Browsers only ever widen spaces when justifying; start from a slightly tighter space
       so the widened ones land near the font's natural width. */
    word-spacing: -0.008em;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align-last: start;
  }
}

/* Book-style paragraphs: first-line indent of one em and a half, no gap between paragraphs */
:root[data-setting="indent"] :is(.prose, .bio, .set) p {
  margin-bottom: 0;
}
:root[data-setting="indent"] :is(.prose, .bio, .set) p + p {
  text-indent: 1.5em;
}

/* Display type never hyphenates */
:is(h1, h2, h3, h4, .lede, .sub, .eyebrow, .btn) {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Italic sets narrower spaces; never tighten them further */
:is(.prose, .bio, .set) :is(em, i) {
  word-spacing: normal;
}
/* Dark surfaces: charcoal cloth instead of flat black. Three layers, all decorative:
   1. the ground colour (--bg, from tokens.css),
   2. a woven texture tile (public/textures/cloth.svg) that scrolls with the page like cloth,
   3. a fixed soft light from above with a vignette at the edges, which gives depth.
   Light theme is untouched. Review choice "texture" switches cloth or flat. */

:root {
  --surface-cloth: none;
  --surface-light: none;
  --band-tint: var(--sunken); /* a sunken band: one tonal step from the paper */
}
/* dark: a sunken band darkens the cloth instead of covering it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-tint: rgb(0 0 0 / 0.26);
  }
}
:root[data-theme="dark"] {
  --band-tint: rgb(0 0 0 / 0.26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-texture="flat"]) {
    --surface-cloth: url(/textures/cloth.svg);
    --surface-light:
      radial-gradient(120% 75% at 50% -12%, rgb(255 246 230 / 0.055), transparent 62%),
      radial-gradient(140% 120% at 50% 40%, transparent 55%, rgb(0 0 0 / 0.38) 100%);
  }
}
:root[data-theme="dark"]:not([data-texture="flat"]) {
  --surface-cloth: url(/textures/cloth.svg);
  --surface-light:
    radial-gradient(120% 75% at 50% -12%, rgb(255 246 230 / 0.055), transparent 62%),
    radial-gradient(140% 120% at 50% 40%, transparent 55%, rgb(0 0 0 / 0.38) 100%);
}

html {
  background-image: var(--surface-cloth);
  background-size: 240px 240px;
}
body {
  background: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--surface-light);
  pointer-events: none;
}
/* Bands with their own colour (.flagship, .lane.hi) and the header set
   background-image: var(--surface-cloth) in their own component styles. */
/* Sections ("bands") and how they meet. A page is a stack of bands; each says which surface
   it sits on with data-surface:
     paper   the page ground (default)
     sunken  one tonal step away; feathers in and out over --seam, so there is no hard edge
     brand   the navy band; enters with a faded gold hairline and a soft upward shadow
   Bands on the same surface are separated by space alone; add .continues to a band that
   carries on from the one above (less space above). See docs/design/design-system.md. */

.band {
  position: relative;
  padding-block: var(--section-space);
}
/* two bands on the paper in a row: they read as one surface, so less space between */
.band[data-surface="paper"] + .band[data-surface="paper"],
.band[data-surface="sunken"] + .band[data-surface="paper"],
.band.continues {
  padding-block-start: var(--section-continue);
}

/* the last thing on a page that is not a band still gets a band's space before the footer */
main > :last-child:not(.band) {
  padding-block-end: var(--section-space);
}

/* sunken: a tint that fades in and out at both edges */
.band[data-surface="sunken"] {
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--band-tint) var(--seam),
    var(--band-tint) calc(100% - var(--seam)),
    transparent 100%
  );
}

/* brand: navy, carrying the cloth; a lighter top that settles into the navy */
.band[data-surface="brand"] {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--brand) 82%, #3a4f7f) 0, transparent 14rem),
    var(--brand) var(--surface-cloth) 0 0 / 240px 240px;
  color: var(--on-brand-2);
  box-shadow: 0 -20px 44px -34px rgb(20 33 61 / 0.4);
  isolation: isolate;
}
.band[data-surface="brand"]::before,
.band[data-surface="brand"]::after {
  /* gold hairlines that fade out at both ends */
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--on-brand-accent) 70%, transparent) 20%,
    color-mix(in srgb, var(--on-brand-accent) 70%, transparent) 80%,
    transparent
  );
}
.band[data-surface="brand"]::before {
  top: 0;
}
.band[data-surface="brand"]::after {
  bottom: 0;
  opacity: 0.45;
}
.band[data-surface="brand"] :is(h2, h3, strong, em) {
  color: var(--on-brand);
}
/* buttons on the navy band: gold with navy text, as in the hero and the Enquire card */
.band[data-surface="brand"] .btn {
  background: var(--on-brand-accent);
  color: var(--brand);
}
.band[data-surface="brand"] .btn:hover {
  background: var(--on-brand);
}
.band[data-surface="brand"] :focus-visible {
  outline-color: var(--focus-on-brand);
}
.band[data-surface="brand"] .eyebrow {
  color: var(--on-brand-accent);
}

/* Section heading: an FT-style lead-in, a short gold rule before the label */
.band .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.band .eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  opacity: 0.85;
}
.band .head {
  margin-bottom: var(--head-gap);
}
/* section headings: one size for every band, one step up on the navy band */
.band .head h2 {
  font-size: var(--step-4);
}
.band[data-surface="brand"] .head h2 {
  font-size: var(--step-5);
}
.band .head .h-link {
  color: inherit;
  text-decoration: none;
}
.band .head .h-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
/* a head with a figure beside it (Section slot="aside") */
.band .with-aside {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.band .with-aside > .head {
  margin-bottom: 0;
}
@media (max-width: 56rem) {
  .band .with-aside {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* Reveal: section heads and items rise gently into place as they enter the viewport. CSS
   scroll-driven animation only, so nothing runs where unsupported, with reduced motion, or
   before CSS loads; content is never hidden by default. */
@keyframes rise {
  from {
    opacity: 0.001;
    transform: translateY(1.25rem);
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band :is(.head, .reveal, .reveal-items > *) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}

/* Page to page: a short cross-fade; the masthead stays put. Cross-document view transitions,
   no JavaScript router. */
@view-transition {
  navigation: auto;
}
.site-header {
  view-transition-name: masthead;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Portraits: one treatment everywhere; review choice "portrait" = rounded | circle | square */
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--heading) 10%, transparent),
    var(--shadow-1);
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}
:root[data-portrait="circle"] .portrait {
  aspect-ratio: 1;
  border-radius: 50%;
  object-position: 50% 32%; /* the eye line sits at 40% of the 4:5 source */
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 4px color-mix(in srgb, var(--accent) 65%, transparent),
    var(--shadow-1);
}
:root[data-portrait="square"] .portrait {
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--accent);
}
a:hover > .portrait,
a:focus-visible > .portrait {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent),
    var(--shadow-2);
}
:root[data-portrait="circle"] a:hover > .portrait,
:root[data-portrait="circle"] a:focus-visible > .portrait {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 4px var(--accent),
    var(--shadow-2);
}
/* the paper-white highlights of the toned portraits glare on a dark page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portrait {
    filter: brightness(0.9);
  }
}
:root[data-theme="dark"] .portrait {
  filter: brightness(0.9);
}
/* Generated by scripts/gen_balanced_grid.py; edit that, not this. */
.bgrid {
  --bgrid-gap: 1.5rem;
  --m: 1;
  --c: 1;
  display: grid;
  grid-template-columns: repeat(var(--c), calc((100% - (var(--m) - 1) * var(--bgrid-gap)) / var(--m)));
  column-gap: var(--bgrid-gap);
}
.bgrid-wrap {
  container-type: inline-size;
}
@container (min-width: 26.5rem) {
  .bgrid[data-preset="people"] { --m: 2; --c: 2; }
  .bgrid[data-preset="people"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="people"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="3"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="4"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="5"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="6"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="7"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="8"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="9"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="10"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="11"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="12"] { --c: 2; }
}
@container (min-width: 40.5rem) {
  .bgrid[data-preset="people"] { --m: 3; --c: 3; }
  .bgrid[data-preset="people"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="people"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="4"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="5"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="6"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="7"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="8"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="9"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="10"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="11"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="12"] { --c: 3; }
}
@container (min-width: 54.5rem) {
  .bgrid[data-preset="people"] { --m: 4; --c: 4; }
  .bgrid[data-preset="people"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="people"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="5"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="6"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="7"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="8"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="9"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="10"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="11"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="12"] { --c: 4; }
}
@container (min-width: 68.5rem) {
  .bgrid[data-preset="people"] { --m: 5; --c: 5; }
  .bgrid[data-preset="people"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="people"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="people"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="people"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="5"] { --c: 5; }
  .bgrid[data-preset="people"][data-n="6"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="7"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="8"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="9"] { --c: 5; }
  .bgrid[data-preset="people"][data-n="10"] { --c: 5; }
  .bgrid[data-preset="people"][data-n="11"] { --c: 4; }
  .bgrid[data-preset="people"][data-n="12"] { --c: 4; }
}
@container (min-width: 18.5rem) {
  .bgrid[data-preset="faces"] { --m: 2; --c: 2; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 2; }
}
@container (min-width: 28.5rem) {
  .bgrid[data-preset="faces"] { --m: 3; --c: 3; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 3; }
}
@container (min-width: 38.5rem) {
  .bgrid[data-preset="faces"] { --m: 4; --c: 4; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 4; }
}
@container (min-width: 48.5rem) {
  .bgrid[data-preset="faces"] { --m: 5; --c: 5; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 4; }
}
@container (min-width: 58.5rem) {
  .bgrid[data-preset="faces"] { --m: 6; --c: 6; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 6; }
}
@container (min-width: 68.5rem) {
  .bgrid[data-preset="faces"] { --m: 7; --c: 7; }
  .bgrid[data-preset="faces"][data-n="1"] { --c: 1; }
  .bgrid[data-preset="faces"][data-n="2"] { --c: 2; }
  .bgrid[data-preset="faces"][data-n="3"] { --c: 3; }
  .bgrid[data-preset="faces"][data-n="4"] { --c: 4; }
  .bgrid[data-preset="faces"][data-n="5"] { --c: 5; }
  .bgrid[data-preset="faces"][data-n="6"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="7"] { --c: 7; }
  .bgrid[data-preset="faces"][data-n="8"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="9"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="10"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="11"] { --c: 6; }
  .bgrid[data-preset="faces"][data-n="12"] { --c: 6; }
}
@container (max-width: 36rem) {
  .bgrid[data-phone="stack"][data-n] { --m: 1; --c: 1; }
}