/* ===========================================================================
   Advocate Portfolio — shared design system
   ---------------------------------------------------------------------------
   This file defines structure and behaviour only, entirely in terms of
   semantic design tokens. It never contains a raw palette value: each theme
   maps its own colours onto the same token names, which is what allows one set
   of components to be reused across all five themes without duplication.

   Contents
     1. Tokens
     2. Reset and base elements
     3. Typography and prose
     4. Layout primitives
     5. Buttons — the 3D system
     6. Forms
     7. Components
     8. Utilities, motion and print
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
    /* Neutral foundation shared by every theme. Themes override the semantic
       tokens below, not these. */
    --absolute-black: #050505;
    --carbon-black:   #111111;
    --graphite:       #242424;
    --charcoal:       #3B3B3B;
    --slate-grey:     #5E5E5E;
    --steel-grey:     #858585;
    --silver:         #B8B8B5;
    --mist:           #DADAD6;
    --warm-ivory:     #F2EFE7;
    --soft-paper:     #F8F7F2;
    --off-white:      #FAFAF8;
    --pure-white:     #FFFFFF;

    /* Semantic colour roles — the only colours components reference. */
    --color-background:        var(--off-white);
    --color-background-alt:    var(--soft-paper);
    --color-surface:           var(--pure-white);
    --color-surface-elevated:  var(--pure-white);
    --color-text:              var(--carbon-black);
    --color-text-muted:        var(--slate-grey);
    --color-border:            var(--mist);
    --color-border-strong:     var(--steel-grey);
    --color-action:            var(--carbon-black);
    --color-action-text:       var(--off-white);
    --color-action-edge:       var(--absolute-black);
    --color-action-highlight:  var(--charcoal);
    --color-secondary-bg:      transparent;
    --color-secondary-text:    var(--carbon-black);
    --color-secondary-border:  var(--charcoal);
    --color-focus:             var(--carbon-black);
    --color-focus-outer:       var(--off-white);
    --color-shadow:            #8B8B88;

    /* Status colours. Small badges and notices only; never large surfaces, and
       always paired with text so meaning never depends on colour alone. */
    --color-success:    #216E39;
    --color-success-bg: #EAF6ED;
    --color-info:       #2457A6;
    --color-info-bg:    #EAF1FB;
    --color-warning:    #9A5B00;
    --color-warning-bg: #FFF3D9;
    --color-error:      #B42318;
    --color-error-bg:   #FDECEA;

    /* Typography.
       These are the ultimate fallbacks. Every request also carries an inline
       :root block from the active theme (ThemeService::cssVariables) that
       overrides --font-heading/-body/-ui and the role tokens below with the
       administrator's per-theme choices. System stacks here mean text renders
       instantly even if a theme fails to resolve. */
    --font-heading: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Noto Serif Devanagari', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Devanagari', sans-serif;
    --font-ui: var(--font-body);
    --base-font-size: 17px;
    --base-font-size-tablet: 17px;
    --base-font-size-mobile: 16px;
    --line-height: 1.65;
    --tracking-tight: -0.015em;
    --tracking-wide: 0.08em;

    /* Per-role typography, overridden per theme by the customiser's
       Typography tab. Body stays at a readable weight and line height. */
    --heading-weight: 600;
    --heading-leading: 1.15;
    --heading-tracking: var(--tracking-tight);
    --body-weight: 400;
    --body-leading: var(--line-height);
    --body-tracking: normal;
    --ui-weight: 500;
    --heading-scale: 1;
    --heading-scale-tablet: 0.96;
    --heading-scale-mobile: 0.9;

    /* A fluid modular scale so headings stay proportionate from 320px up. */
    /* Body/caption steps are unscaled; heading steps (1–5) are multiplied by
       --heading-scale, which the customiser remaps per breakpoint. */
    --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
    --step-0:  1rem;
    --step-1:  calc(clamp(1.13rem, 1.05rem + 0.38vw, 1.33rem) * var(--heading-scale));
    --step-2:  calc(clamp(1.27rem, 1.13rem + 0.68vw, 1.78rem) * var(--heading-scale));
    --step-3:  calc(clamp(1.42rem, 1.2rem + 1.12vw, 2.37rem) * var(--heading-scale));
    --step-4:  calc(clamp(1.6rem, 1.24rem + 1.76vw, 3.16rem) * var(--heading-scale));
    --step-5:  calc(clamp(1.8rem, 1.25rem + 2.68vw, 4.21rem) * var(--heading-scale));

    /* Spacing and geometry */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --content-width: 1200px;
    --measure-width: 68ch;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-spacing: clamp(3.5rem, 8vw, 6.5rem);
    --border-radius: 2px;

    /* 3D button geometry. The solid offset shadow is what gives the button its
       physical face; the ambient shadow sits it on the page. */
    --button-depth: 6px;
    --button-depth-hover: 8px;
    --button-depth-pressed: 1px;
    --button-press-travel: 5px;
    --shadow-alpha: 0.34;
    --transition: 200ms cubic-bezier(0.32, 0.72, 0.36, 1);

    --header-height: 4.5rem;
}

/* --------------------------------------------- 2. Reset and base elements */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

/* A safety net against sideways scroll from an off-canvas panel.
   `clip` rather than `hidden` on purpose: `hidden` would make this element a
   scroll container and break `position: sticky` for the header inside it,
   which is exactly the bug this file used to have. */
@supports (overflow-x: clip) {
    html { overflow-x: clip; }
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: var(--body-weight);
    font-size: var(--base-font-size);
    line-height: var(--body-leading);
    letter-spacing: var(--body-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Deliberately no overflow-x:hidden. It masks real layout overflow and
       breaks position:sticky for descendants in Chrome and Safari. Section 10
       removes the causes instead. */
}

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* Reserve space so a loading image cannot shift the layout. */
img[width][height] { height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

figure, blockquote, dl, dd { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

button, input, select, textarea { font: inherit; font-family: var(--font-ui); color: inherit; }

/* Dual focus ring: an inner ring in the text colour and an outer ring in the
   background colour, so focus stays visible on light and dark surfaces alike. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus-outer);
    border-radius: var(--border-radius);
}

:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--color-text); color: var(--color-background); }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-xl) 0;
}

/* ------------------------------------------- 3. Typography and prose */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    line-height: var(--heading-leading);
    letter-spacing: var(--heading-tracking);
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 650; }

.prose { max-width: 100%; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.prose h4 { font-size: var(--step-0); margin-top: 1.4em; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.prose p { line-height: var(--line-height); }
.prose a { color: var(--color-text); text-decoration: underline; }
.prose a:hover { text-decoration-thickness: 2px; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li { list-style: disc; margin-bottom: 0.45em; }
.prose ol li { list-style: decimal; margin-bottom: 0.45em; }
.prose li::marker { color: var(--color-text-muted); }

.prose blockquote {
    border-left: 3px solid var(--color-border-strong);
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
    font-style: normal;
}

.prose figure { margin: var(--space-lg) 0; }
.prose figcaption {
    font-size: var(--step--1);
    color: var(--color-text-muted);
    margin-top: var(--space-2xs);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
}
.prose th, .prose td {
    border: 1px solid var(--color-border);
    padding: var(--space-2xs) var(--space-xs);
    text-align: left;
}
.prose th { background: var(--color-background-alt); font-weight: 650; }

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--color-background-alt);
    padding: 0.1em 0.35em;
    border-radius: var(--border-radius);
}

.measure { max-width: var(--measure-width); }

/* ------------------------------------------------ 4. Layout primitives */

.shell {
    width: min(100% - (var(--gutter) * 2), var(--content-width));
    margin-inline: auto;
}

.site-main { display: block; min-height: 40vh; }
.site-main:focus { outline: none; }

.section { padding-block: var(--section-spacing); }
.section + .section { padding-top: 0; }
.section--hero { padding-block: clamp(3rem, 7vw, 5.5rem); }

.section__head { margin-bottom: var(--space-xl); max-width: var(--measure-width); }
.section__title { font-size: var(--step-3); }
.section__subtitle {
    margin-top: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--step-0);
}
.section__footer { margin-top: var(--space-xl); }
.section__note {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    max-width: var(--measure-width);
}

.grid { display: grid; gap: var(--space-lg); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* ------------------------------------------ 5. Buttons — the 3D system */

/*
   Every button in the project is one of five reusable variants:
   primary, secondary, text, destructive and disabled.

   The raised effect is built from two shadows: a solid offset that forms the
   button's side face, and a soft ambient shadow that grounds it. On hover the
   face grows slightly; on press the button travels down and the face compresses
   to almost nothing, which reads as a physical click.
*/

.btn {
    --btn-depth: var(--button-depth);
    font-family: var(--font-ui);
    font-weight: var(--ui-weight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transform: translateY(0);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.btn--sm {
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: var(--step--1);
    --btn-depth: max(0px, calc(var(--button-depth) - 3px));
}

.btn--block { width: 100%; }

/* ---- primary: raised solid face */
.btn--primary {
    background: var(--color-action);
    color: var(--color-action-text);
    border-color: var(--color-action-edge);
    box-shadow:
        inset 0 1px 0 var(--color-action-highlight),
        0 var(--btn-depth) 0 var(--color-action-edge),
        0 calc(var(--btn-depth) * 2) calc(var(--btn-depth) * 4) rgba(0, 0, 0, var(--shadow-alpha));
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 var(--color-action-highlight),
        0 var(--button-depth-hover) 0 var(--color-action-edge),
        0 calc(var(--button-depth-hover) * 2) calc(var(--button-depth-hover) * 4) rgba(0, 0, 0, calc(var(--shadow-alpha) + 0.06));
}

.btn--primary:active {
    transform: translateY(var(--button-press-travel));
    box-shadow:
        inset 0 1px 0 transparent,
        0 var(--button-depth-pressed) 0 var(--color-action-edge),
        0 2px 4px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.5));
}

/* ---- secondary: outlined, shallower face */
.btn--secondary {
    background: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border-color: var(--color-secondary-border);
    box-shadow:
        0 calc(var(--btn-depth) - 2px) 0 var(--color-secondary-border),
        0 calc(var(--btn-depth) * 1.5) calc(var(--btn-depth) * 3) rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.5));
}

.btn--secondary:hover {
    transform: translateY(-1px);
    border-color: var(--color-text);
    box-shadow:
        0 calc(var(--button-depth-hover) - 2px) 0 var(--color-secondary-border),
        0 calc(var(--button-depth-hover) * 1.5) calc(var(--button-depth-hover) * 3) rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.6));
}

.btn--secondary:active {
    transform: translateY(calc(var(--button-press-travel) - 2px));
    box-shadow: 0 var(--button-depth-pressed) 0 var(--color-secondary-border);
}

/* ---- text: a link that keeps the 44px target */
.btn--text {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
    padding-inline: 0.5rem;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    font-weight: 500;
}
.btn--text:hover { color: var(--color-text); text-decoration-thickness: 2px; }
.btn--text:active { transform: translateY(1px); }

/* ---- destructive: admin only */
.btn--destructive {
    background: var(--color-error);
    color: #FFFFFF;
    border-color: #8E1D12;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 var(--btn-depth) 0 #8E1D12,
        0 calc(var(--btn-depth) * 2) calc(var(--btn-depth) * 3) rgba(0, 0, 0, 0.25);
}
.btn--destructive:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn--destructive:active {
    transform: translateY(var(--button-press-travel));
    box-shadow: 0 var(--button-depth-pressed) 0 #8E1D12;
}

/* ---- disabled */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none !important;
    box-shadow: 0 1px 0 var(--color-border-strong) !important;
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------- 6. Forms */

.form__row {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.form__group { margin-bottom: var(--space-md); }

.form__label {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.02em;
}

.form__required { color: var(--color-error); }
.form__optional { color: var(--color-text-muted); font-weight: 400; }

.form__input {
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form__input::placeholder { color: var(--color-text-muted); opacity: 1; }

.form__input:hover { border-color: var(--color-text-muted); }

.form__input:focus-visible {
    border-color: var(--color-focus);
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.form__input.has-error {
    border-color: var(--color-error);
    border-width: 2px;
}

.form__textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }

.form__hint {
    margin: var(--space-3xs) 0 0;
    font-size: var(--step--1);
    color: var(--color-text-muted);
}

/* Errors carry an icon as well as colour, so the state never relies on hue. */
.form__error {
    margin: var(--space-3xs) 0 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-error);
    display: flex;
    gap: 0.4em;
    align-items: flex-start;
}
.form__error::before { content: "!"; font-weight: 800; }

.form__checkbox {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--step--1);
    line-height: 1.5;
}

.form__checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--color-action);
    cursor: pointer;
}

.form__group--consent {
    padding: var(--space-md);
    background: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-lg);
}

.form__legal {
    margin-top: var(--space-md);
    font-size: var(--step--1);
    color: var(--color-text-muted);
}

/* The honeypot must be reachable by a bot but invisible and unfocusable
   for a person, including screen-reader users. */
.form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------- 7. Components */

/* ---- skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--color-action);
    color: var(--color-action-text);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: top 150ms ease;
}
.skip-link:focus { top: var(--space-sm); }

/* ---- header */
.site-header {
    position: relative;
    z-index: 60;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

[data-header="sticky"] .site-header { position: sticky; top: 0; }

[data-header="collapse"] .site-header {
    position: sticky;
    top: 0;
    transition: transform 280ms ease;
}
[data-header="collapse"] .site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: inherit;
    padding-block: 0.35rem;
}

.brand__logo { max-height: 3rem; width: auto; }

.brand__mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.01em; }
.brand__tagline {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

[data-logo="stacked"] .brand { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
[data-logo="monogram"] .brand__text { display: none; }

/* ---- navigation */
.site-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.site-nav__link {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: var(--ui-weight);
    padding: 0.5rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.site-nav__link:hover { color: var(--color-text); border-bottom-color: var(--color-border-strong); }
.site-nav__link.is-current { color: var(--color-text); border-bottom-color: var(--color-text); font-weight: 600; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
    display: block;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: fixed;
        inset: var(--header-height) 0 0;
        z-index: 55;
        padding: var(--space-xl) var(--gutter);
        background: var(--color-background);
        border-top: 1px solid var(--color-border);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 260ms ease, visibility 260ms;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-nav.is-open { transform: translateX(0); visibility: visible; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .site-nav__item + .site-nav__item { border-top: 1px solid var(--color-border); }

    .site-nav__link {
        display: block;
        padding: var(--space-md) 0;
        font-size: var(--step-1);
        font-family: var(--font-heading);
        border-bottom: none;
    }

    .site-nav__link.is-current { border-bottom: none; }
}

/* ---- hero */
.hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }

@media (min-width: 900px) {
    .hero__inner--split { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.hero__title { font-size: var(--step-5); }

.hero__subtitle {
    margin-top: var(--space-md);
    font-size: var(--step-1);
    color: var(--color-text-muted);
    max-width: 34ch;
}

.hero__body { margin-top: var(--space-md); max-width: 52ch; color: var(--color-text-muted); }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.hero__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--border-radius); }

.portrait-placeholder {
    display: grid;
    place-content: center;
    gap: var(--space-sm);
    aspect-ratio: 4 / 5;
    background: var(--color-background-alt);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--border-radius);
    text-align: center;
    padding: var(--space-lg);
}

.portrait-placeholder__initials {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--color-border-strong);
    letter-spacing: 0.08em;
}

.portrait-placeholder__note {
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---- page header */
.page-header {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background-alt);
}

.page-header__title { font-size: var(--step-4); margin-top: var(--space-sm); }

.page-header__subtitle {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    max-width: var(--measure-width);
    font-size: var(--step-1);
}

/* ---- breadcrumbs */
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--step--1); }
.breadcrumbs__item { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--color-text-muted); }
.breadcrumbs__item a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs__separator { color: var(--color-border-strong); }

/* ---- cards */
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong);
    box-shadow: 0 12px 28px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.35));
}

.card__media { display: block; overflow: hidden; }
.card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }

.card__eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin: 0;
}

.card__title { font-size: var(--step-1); }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }

/* The whole card is clickable, while the link text stays the accessible name. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.card__excerpt { color: var(--color-text-muted); font-size: var(--step--1); margin: 0; }

.card__meta {
    margin: auto 0 0;
    padding-top: var(--space-xs);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.card__icon { color: var(--color-text-muted); }
.card__icon .icon { width: 1.75rem; height: 1.75rem; }

.card__action {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
}
.card__action::after { content: " →"; }

/* ---- credentials */
.credentials {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.credentials__heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
}

.credentials__item { padding-block: var(--space-2xs); display: flex; flex-direction: column; gap: 0.1rem; }
.credentials__item + .credentials__item { border-top: 1px solid var(--color-border); }
.credentials__title { font-weight: 600; }
.credentials__institution, .credentials__year { font-size: var(--step--1); color: var(--color-text-muted); }

/* ---- values */
.values { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .values { grid-template-columns: 1fr 1fr; align-items: start; } }

.values__list { display: grid; gap: var(--space-md); }
.values__item { padding-left: var(--space-md); border-left: 2px solid var(--color-border-strong); }
.values__title { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em; }
.values__text { margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: var(--step--1); }

/* ---- contact */
.contact-preview { display: grid; gap: var(--space-2xl); }
@media (min-width: 900px) { .contact-preview { grid-template-columns: 1fr 1fr; align-items: center; } }

.contact-layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: 0.85fr 1.15fr; } }

.contact-details { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-details__item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.contact-details__icon { color: var(--color-text-muted); flex: 0 0 auto; margin-top: 0.15rem; }
.contact-details__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-details__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    margin-bottom: 0.1rem;
}
.contact-details__value address { font-style: normal; }
.contact-details__value address span,
.contact-details__line { display: block; }
.contact-details__value p { margin: 0; }
.contact-preview__action { margin-top: var(--space-xl); }

/* ---- map */
.map { margin-top: var(--space-lg); }
.map__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-background-alt);
}
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__caption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }

.map__placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-2xs);
    text-align: center;
    aspect-ratio: 16 / 10;
    padding: var(--space-lg);
    background: var(--color-background-alt);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--border-radius);
}
.map__placeholder-icon .icon { width: 2rem; height: 2rem; color: var(--color-border-strong); }
.map__placeholder-title { font-weight: 650; margin: 0; }
.map__placeholder-text { margin: 0; max-width: 34ch; font-size: var(--step--1); color: var(--color-text-muted); }

/* ---- enquiry */
.enquiry {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}
.enquiry__intro { margin-top: var(--space-sm); color: var(--color-text-muted); }
.enquiry .form { margin-top: var(--space-lg); }

/* ---- notices */
.notice {
    padding: var(--space-md);
    border-left: 3px solid var(--color-info);
    background: var(--color-info-bg);
    color: #1B1B1B;
    border-radius: var(--border-radius);
    margin-top: var(--space-xl);
}
.notice__title { font-size: var(--step-0); font-family: var(--font-body); margin-bottom: 0.3rem; }
.notice p { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.notice ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.notice li { list-style: disc; font-size: var(--step--1); }
.notice--success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.notice--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.notice--error   { border-left-color: var(--color-error);   background: var(--color-error-bg); }

/* ---- lists */
.detail-list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.detail-list__item { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.detail-list__title { display: block; font-weight: 650; }
.detail-list__meta, .detail-list__year { display: block; font-size: var(--step--1); color: var(--color-text-muted); }
.detail-list__text { margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--color-text-muted); }

.link-list { display: grid; gap: var(--space-2xs); }
.link-list a { text-decoration: none; border-bottom: 1px solid var(--color-border); display: block; padding: var(--space-2xs) 0; }
.link-list a:hover { border-bottom-color: var(--color-text); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.tag-list__item {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: var(--step--1);
    border: 1px solid var(--color-border-strong);
    border-radius: 100px;
    text-decoration: none;
    color: var(--color-text-muted);
}
.tag-list__item:hover { color: var(--color-text); border-color: var(--color-text); }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 100px;
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.chip:hover { color: var(--color-text); border-color: var(--color-text); }
.chip.is-active { background: var(--color-action); color: var(--color-action-text); border-color: var(--color-action-edge); font-weight: 600; }
.chip__count { font-size: 0.7rem; opacity: 0.75; }

/* ---- timeline */
.timeline { margin-top: var(--space-lg); position: relative; padding-left: var(--space-lg); }
.timeline::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--color-border);
}
.timeline__item { position: relative; padding-bottom: var(--space-lg); }
.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-lg) * -1);
    top: 0.55rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-background);
    border: 2px solid var(--color-text);
}
.timeline__year {
    display: block;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.timeline__title { font-size: var(--step-1); margin-top: 0.2rem; }
.timeline__institution { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--color-text-muted); }
.timeline__text { margin: 0.5rem 0 0; color: var(--color-text-muted); }

/* ---- filters */
.filters {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.filters__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3xs);
}
.filters__field { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.filters__field input[type="search"] {
    flex: 1 1 16rem;
    min-height: 46px;
    padding: 0.6rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    color: var(--color-text);
}
.filters__status { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }

/* ---- pagination */
.pagination { margin-top: var(--space-2xl); display: grid; gap: var(--space-sm); justify-items: center; }
.pagination__status { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }
.pagination__list { display: flex; flex-wrap: wrap; gap: var(--space-3xs); align-items: center; justify-content: center; }
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: var(--step--1);
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.pagination__link:hover { border-color: var(--color-text); color: var(--color-text); }
.pagination__link.is-current {
    background: var(--color-action);
    color: var(--color-action-text);
    border-color: var(--color-action-edge);
    font-weight: 700;
}
.pagination__link.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__link--gap { border-color: transparent; min-width: auto; }

/* ---- article */
.article__header { padding-block: clamp(2.5rem, 6vw, 4rem) var(--space-lg); }
.article__category { margin-top: var(--space-md); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; }
.article__category a { color: var(--color-text-muted); text-decoration: none; }
.article__category a:hover { color: var(--color-text); }
.article__title { font-size: var(--step-4); margin-top: var(--space-sm); }
.article__standfirst { margin-top: var(--space-md); font-size: var(--step-1); color: var(--color-text-muted); }
.article__meta {
    margin-top: var(--space-md);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.article__figure { margin-block: var(--space-lg); }
.article__figure figcaption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }
.article__image { width: 100%; max-height: 30rem; object-fit: cover; border-radius: var(--border-radius); }
.article__body { margin-inline: auto; }
.article__body > * + * { margin-top: 1.15em; }
.section--related { border-top: 1px solid var(--color-border); margin-top: var(--space-2xl); }

.share { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin-top: var(--space-lg); }
.share__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin-right: var(--space-3xs);
}
.share__icon .icon { width: 1rem; height: 1rem; }

.article-nav {
    display: grid;
    gap: var(--space-md);
    margin-block: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    margin-inline: auto;
}
@media (min-width: 720px) { .article-nav { grid-template-columns: 1fr 1fr; } }
.article-nav__link {
    display: block;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}
.article-nav__link:hover { border-color: var(--color-text); transform: translateY(-2px); }
.article-nav__link--next { text-align: right; }
.article-nav__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}
.article-nav__title { display: block; margin-top: 0.3rem; font-family: var(--font-heading); font-size: var(--step-0); }

/* ---- detail layout */
.detail { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 940px) { .detail { grid-template-columns: 1fr 16rem; } }
.detail__figure { margin-bottom: var(--space-lg); }
.detail__image { width: 100%; max-height: 24rem; object-fit: cover; border-radius: var(--border-radius); }
.detail__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.detail__aside {
    padding: var(--space-md);
    background: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}
.detail__aside-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

/* ---- about */
.about { display: grid; gap: var(--space-2xl); padding-block: var(--section-spacing); align-items: start; }
@media (min-width: 940px) { .about { grid-template-columns: 20rem 1fr; } }
.about__aside { position: sticky; top: calc(var(--header-height) + 1.5rem); }
.about__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--border-radius); }
.about__facts { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.about__fact { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.about__fact dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}
.about__fact dd { margin: 0.2rem 0 0; font-size: var(--step--1); }
.about__content { display: grid; gap: var(--space-2xl); }
.profile-module__title { font-size: var(--step-2); }
.profile-module__subtitle { margin-top: var(--space-2xs); color: var(--color-text-muted); font-size: var(--step--1); }
.profile-module .prose { margin-top: var(--space-md); }
.profile-module__figure { margin-top: var(--space-lg); }

/* ---- footer */
.site-footer {
    margin-top: var(--section-spacing);
    padding-block: var(--space-2xl) var(--space-lg);
    background: var(--color-background-alt);
    border-top: 1px solid var(--color-border);
    font-size: var(--step--1);
}

.site-footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 780px) {
    [data-footer="columns"] .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    [data-footer="split"] .site-footer__grid { grid-template-columns: 1fr auto; }
}
[data-footer="centered"] .site-footer__grid { justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }

.site-footer__heading {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.site-footer__text { color: var(--color-text-muted); max-width: 40ch; }
.site-footer__address { font-style: normal; display: grid; gap: 0.15rem; }
.site-footer__address a { color: inherit; }
.site-footer__links { display: grid; gap: var(--space-3xs); }
.site-footer__links a, .site-footer__social a { text-decoration: none; color: var(--color-text-muted); }
.site-footer__links a:hover, .site-footer__social a:hover { color: var(--color-text); text-decoration: underline; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.site-footer__disclaimer {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.site-footer__base {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: space-between;
    color: var(--color-text-muted);
}
.site-footer__base p { margin: 0; }

/* ---- disclaimer modal */
.disclaimer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.disclaimer[hidden] { display: none; }
.disclaimer__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.72); backdrop-filter: blur(2px); }

.disclaimer__dialog {
    position: relative;
    width: min(100%, 44rem);
    max-height: min(85vh, 46rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.disclaimer__title { font-size: var(--step-2); }
.disclaimer__body { margin-top: var(--space-md); font-size: var(--step--1); color: var(--color-text-muted); }
.disclaimer__body p { line-height: 1.6; }
.disclaimer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* ---- consent banner */
.consent-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 150;
    padding: var(--space-md) 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
.consent-banner__text { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); max-width: 52ch; }
.consent-banner__actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ---- preview bar */
.preview-bar {
    position: relative;
    z-index: 70;
    padding: var(--space-2xs) 0;
    background: var(--color-warning-bg);
    color: #3A2400;
    border-bottom: 2px solid var(--color-warning);
}
.preview-bar__inner { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.preview-bar__text { margin: 0; font-size: var(--step--1); }
.preview-bar__actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.preview-bar .btn--secondary { --color-secondary-text: #3A2400; --color-secondary-border: #9A5B00; }
.preview-bar .btn--text { color: #3A2400; }

/* ---- back to top */
.back-to-top {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 90;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--color-action);
    color: var(--color-action-text);
    border: 1px solid var(--color-action-edge);
    border-radius: var(--border-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--color-action-edge), 0 8px 18px rgba(0, 0, 0, var(--shadow-alpha));
    transition: transform var(--transition), opacity var(--transition);
}
.back-to-top[hidden] { display: none; }
.back-to-top:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-action-edge); }

/* ---- empty state */
.empty-state {
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--border-radius);
    color: var(--color-text-muted);
}
.empty-state h2 { font-size: var(--step-2); margin-bottom: var(--space-2xs); color: var(--color-text); }

.page-note { margin-top: var(--space-xl); font-size: var(--step--1); color: var(--color-text-muted); }

/* ------------------------------------ 8. Utilities, motion and print */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

body.nav-open { overflow: hidden; }

/* Respect a stated preference for reduced motion everywhere. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover, .btn:active, .card:hover, .article-nav__link:hover { transform: none !important; }
}

@media (prefers-contrast: more) {
    :root { --color-text-muted: var(--color-text); --color-border: var(--color-border-strong); }
    .btn { border-width: 2px; }
}

/* Printable article layout: drop the furniture, keep the substance. */
@media print {
    :root { --color-background: #FFFFFF; --color-text: #000000; --color-text-muted: #333333; }

    .site-header, .site-nav, .nav-toggle, .site-footer__grid, .share, .back-to-top,
    .disclaimer, .consent-banner, .preview-bar, .pagination, .article-nav,
    .section--related, .breadcrumbs, .skip-link, .filters, .detail__cta {
        display: none !important;
    }

    body { background: #FFFFFF; color: #000000; font-size: 11pt; }

    .shell { width: 100%; max-width: none; }
    .measure { max-width: none; }

    .article__title { font-size: 20pt; }
    .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    .prose a { text-decoration: none; }

    .site-footer { border-top: 1px solid #000; margin-top: 1.5rem; padding-top: 0.5rem; }
    .site-footer__disclaimer { border: 0; padding: 0; }

    img { max-width: 100% !important; page-break-inside: avoid; }
    h1, h2, h3 { page-break-after: avoid; }
    p, blockquote { page-break-inside: avoid; }
}

/* ---- error pages */
.error-page {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    padding-block: clamp(2rem, 6vw, 4rem);
}
.error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 1;
    margin: 0;
    color: var(--color-border-strong);
    letter-spacing: -0.04em;
}
.error-page__title { font-size: var(--step-3); margin-top: var(--space-sm); }
.error-page__message { margin-top: var(--space-md); color: var(--color-text-muted); }
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-xl);
}
.error-page__links { margin-top: var(--space-2xl); text-align: left; max-width: 22rem; margin-inline: auto; }
.error-page__links-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

/* ===========================================================================
   9. Premium detail layer
   ---------------------------------------------------------------------------
   Depth, rhythm and editorial refinement added on top of the structural rules
   above. Everything here is expressed in semantic tokens, so all five themes
   inherit it and each restyles it through its own palette.
   =========================================================================== */

:root {
    /* A finer-grained elevation scale than a single shadow value allows. */
    --elevation-1: 0 1px 2px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.28));
    --elevation-2: 0 4px 10px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.34));
    --elevation-3: 0 12px 28px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.40));
    --elevation-4: 0 24px 56px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.48));

    --hairline: 1px solid var(--color-border);
    --rule-strong: 1px solid var(--color-border-strong);

    /* Optical letter-spacing: display type wants less, small caps want more. */
    --tracking-display: -0.032em;
    --tracking-label: 0.16em;
}

/* ---------------------------------------------------- section furniture */

/* A small label above a heading. Sets the section's register before the eye
   reaches the title. */
.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* The rule is drawn with a border rather than a glyph so it inherits colour
   and never renders as a stray character to a screen reader. */
.section__eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 0;
    border-top: var(--rule-strong);
    opacity: 0.9;
}

.section__title { letter-spacing: var(--tracking-display); }

/* A centred ornamental divider for the more formal themes. */
.ornament {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-2xl);
    color: var(--color-border-strong);
}
.ornament::before,
.ornament::after {
    content: "";
    flex: 1;
    height: 0;
    border-top: var(--hairline);
}
.ornament__mark {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border: 1px solid currentColor;
}

/* ------------------------------------------------------ credential strip */

/* Factual particulars shown directly beneath the hero: qualification, Bar
   Council, practice location, languages. Only entries with a real value are
   rendered, so an unfinished site shows fewer chips rather than empty ones. */
.credential-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--hairline);
}

.credential {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.credential__label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.credential__value {
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--color-text);
    text-wrap: balance;
}

@media (max-width: 560px) {
    .credential-strip { gap: var(--space-sm) var(--space-md); }
}

/* --------------------------------------------------------- richer cards */

/* A hairline highlight along the top edge reads as a lit surface and gives
   the card a physical presence that a flat border cannot. */
.card {
    box-shadow: var(--elevation-1);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card:hover { box-shadow: var(--elevation-3); }

.card__body { gap: var(--space-xs); }

/* Numbered practice-area cards: the index is decorative and sits behind the
   content, so it is hidden from assistive technology. */
.card--practice { position: relative; overflow: hidden; }

.card--practice .card__index {
    position: absolute;
    top: calc(var(--space-sm) * -0.25);
    right: var(--space-sm);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1;
    color: var(--color-border);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--transition), color var(--transition);
}

.card--practice:hover .card__index { opacity: 0.85; color: var(--color-border-strong); }

.card--practice .card__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-2xs);
    border: var(--hairline);
    border-radius: var(--border-radius);
    color: var(--color-text);
    background: var(--color-background-alt);
}
.card--practice .card__icon .icon { width: 1.4rem; height: 1.4rem; }

/* The action label gains its arrow on hover rather than sitting static. */
.card__action { transition: gap var(--transition); }
.card__action::after { transition: transform var(--transition); display: inline-block; }
.card:hover .card__action::after { transform: translateX(4px); }

/* ------------------------------------------------------- editorial prose */

/* An opening paragraph set slightly larger draws the reader in without
   needing a separate standfirst field. */
.prose > p:first-of-type { font-size: 1.06em; line-height: 1.62; }

.prose--lead > p:first-of-type {
    font-size: 1.16em;
    line-height: 1.55;
    color: var(--color-text);
}

/* Pull quote: an editor writes <blockquote class="pull"> and gets a display
   quotation rather than an indented block. */
.prose blockquote.pull,
.pull-quote {
    border-left: 0;
    padding: var(--space-lg) 0;
    margin-block: var(--space-xl);
    border-top: var(--rule-strong);
    border-bottom: var(--hairline);
    font-family: var(--font-heading);
    font-size: var(--step-2);
    line-height: 1.32;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-wrap: balance;
}

.prose h2 { position: relative; padding-top: 0.35em; }

/* Tables read as data, not decoration. */
.prose table { margin-block: var(--space-lg); }
.prose tbody tr:nth-child(even) { background: var(--color-background-alt); }

.prose hr {
    border: 0;
    border-top: var(--hairline);
    margin-block: var(--space-2xl);
}

/* Footnote-style small print inside prose. */
.prose small { color: var(--color-text-muted); }

/* ------------------------------------------------------------ fact grid */

/* Used on About for the factual particulars. Reads as a record, not a stat
   display — no large numbers, no achievement framing. */
.fact-grid {
    display: grid;
    gap: 0;
    border-top: var(--hairline);
    margin-top: var(--space-lg);
}

.fact-grid__row {
    display: grid;
    gap: var(--space-2xs) var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: var(--hairline);
}

@media (min-width: 640px) {
    .fact-grid__row { grid-template-columns: 12rem 1fr; align-items: baseline; }
}

.fact-grid__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.fact-grid__value { font-size: var(--step-0); line-height: 1.5; }

/* ------------------------------------------------------------- process */

/* An ordered explanation of how a matter proceeds. Numbered by CSS counter so
   the markup stays a plain ordered list. */
.process { counter-reset: step; display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }

.process__step {
    position: relative;
    counter-increment: step;
    padding-left: 3.5rem;
}

.process__step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--rule-strong);
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-text);
}

.process__title { font-size: var(--step-1); margin-bottom: 0.25rem; }
.process__text { color: var(--color-text-muted); font-size: var(--step--1); margin: 0; }

/* ---------------------------------------------------------------- FAQ */

/* Built on <details> so it works with no JavaScript and is keyboard operable
   and screen-reader friendly by default. */
.faq { display: grid; gap: 0; border-top: var(--hairline); margin-top: var(--space-lg); }

.faq__item { border-bottom: var(--hairline); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 56px;
    padding-block: var(--space-sm);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--step-0);
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(-135deg); }

.faq__answer { padding-bottom: var(--space-md); color: var(--color-text-muted); font-size: var(--step--1); }

/* -------------------------------------------------------- hero refinement */

.hero__title { text-wrap: balance; }

.hero__lead {
    margin-top: var(--space-md);
    max-width: 46ch;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* The portrait sits on a plinth: a soft ground shadow plus a hairline frame,
   which reads as a physical print rather than a floating rectangle. */
.hero__portrait { position: relative; }

.hero__portrait::after {
    content: "";
    position: absolute;
    inset: auto 8% -1.25rem 8%;
    height: 2.5rem;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.55)), transparent 72%);
    filter: blur(6px);
    z-index: -1;
    pointer-events: none;
}

/* ---------------------------------------------------------- footer mark */

.site-footer__wordmark {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 7vw, 4rem);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: var(--color-border);
    margin-bottom: var(--space-lg);
    text-wrap: balance;
    user-select: none;
}

/* --------------------------------------------------------- article meta */

.article__meta { padding-top: var(--space-sm); border-top: var(--hairline); }

.article__body { font-size: 1.03rem; }

/* Give the reader a sense of progress on a long article. Purely decorative
   and skipped entirely when motion is reduced. */
.reading-rule {
    height: 2px;
    background: var(--color-border);
    margin-block: var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* ------------------------------------------------------------ polish */

/* Links inside prose get a considered underline rather than the browser's. */
.prose a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-border-strong);
    transition: text-decoration-color var(--transition);
}
.prose a:hover { text-decoration-color: currentColor; }

/* Selection and marker colours follow the theme rather than the browser. */
.prose ::selection { background: var(--color-text); color: var(--color-background); }

/* Buttons sit together on a shared baseline with consistent optical spacing. */
.hero__actions .btn + .btn,
.detail__cta .btn + .btn { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
    .card:hover { box-shadow: var(--elevation-1); }
    .card__action::after { transition: none; }
}

@media print {
    .credential-strip, .section__eyebrow::before, .ornament,
    .card--practice .card__index, .site-footer__wordmark { display: none !important; }
    .pull-quote, .prose blockquote.pull { border: 0; font-size: 12pt; font-style: italic; }
}

/* ===========================================================================
   10. Responsive hardening
   ---------------------------------------------------------------------------
   The page must never scroll sideways at any width from 320px upward, and no
   element may be clipped or unreachable on a phone.

   Section 2 deliberately does not set `overflow-x: hidden` on the body: that
   hides a layout bug rather than fixing it, and it breaks `position: sticky`
   for descendants in Chrome and Safari. The rules below remove the causes.
   =========================================================================== */

/* ------------------------------------------------- 10.1 overflow causes */

/* Long unbroken strings — an email address, a URL, a case citation, a German
   compound — are the most common source of sideways scroll. */
body {
    overflow-wrap: break-word;
    word-break: normal;
}

h1, h2, h3, h4, h5, h6,
.hero__title, .page-header__title, .article__title,
.card__title, .section__title, .site-footer__wordmark {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Values a visitor may need to copy: never truncate, always wrap. */
.contact-details__value,
.site-footer__address,
.credential__value,
.definition__value,
.breadcrumbs__item {
    overflow-wrap: anywhere;
}

/* An image or embed can never be wider than its column. */
img, svg, video, iframe, canvas, figure, picture { max-width: 100%; }

/* A table inside administrator prose can be any width. Let it scroll inside
   its own box rather than pushing the page sideways. The wrapper keeps the
   table semantics intact for assistive technology. */
.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Restore table semantics for the rows inside the scrolling block. */
    border-collapse: collapse;
}

@media (min-width: 700px) {
    /* Wide enough to lay out normally again. */
    .prose table { display: table; width: 100%; }
}

/* Long code or preformatted content scrolls rather than stretching the page. */
.prose pre { max-width: 100%; overflow-x: auto; }
.prose code { overflow-wrap: anywhere; }

/* ------------------------------------------ 10.2 dynamic viewport height */

/* On a phone, 100vh is the height *without* the browser chrome, so a 100vh
   element is taller than the visible area and the page jogs as the bar
   hides. dvh tracks the real viewport; vh stays as the fallback. */
.disclaimer__dialog { max-height: min(85vh, 46rem); }

@supports (height: 100dvh) {
    .disclaimer__dialog { max-height: min(85dvh, 46rem); }
    .site-nav { inset: var(--header-height) 0 0; }
}

/* -------------------------------------------------- 10.3 small screens */

@media (max-width: 640px) {
    :root {
        /* Tighter gutters and rhythm so content gets the width it needs. */
        --gutter: 1.15rem;
        --section-spacing: clamp(2.5rem, 9vw, 3.75rem);
        --space-2xl: 2.5rem;
        --space-3xl: 3.5rem;
    }

    /* Display type: keep it confident but stop it dominating a small screen. */
    .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.08; }
    .page-header__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
    .article__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
    .section__title { font-size: clamp(1.35rem, 6vw, 1.8rem); }
    .hero__subtitle, .hero__lead { font-size: var(--step-0); }

    /* Full-width buttons stack cleanly and give a large, certain tap target. */
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }

    .detail__cta { flex-direction: column; align-items: stretch; }
    .detail__cta .btn { width: 100%; }

    .form__actions .btn { width: 100%; }

    /* The credential strip becomes a stacked record rather than a wrapping row. */
    .credential-strip { flex-direction: column; gap: var(--space-sm); }

    /* Cards lose their hover lift (there is no hover) and tighten up. */
    .card:hover { transform: none; }
    .card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .card--practice .card__index { font-size: 2.75rem; top: 0.15rem; right: 0.6rem; }

    /* Reading measure: on a phone the column is the screen. */
    .measure, .prose { max-width: 100%; }

    /* Pagination: let the numbers wrap onto a second line rather than scroll. */
    .pagination__list { gap: 0.3rem; }
    .pagination__link { min-width: 42px; padding: 0 0.5rem; }

    /* Filters stack; the search field takes the full width. */
    .filters__field { flex-direction: column; align-items: stretch; }
    .filters__field .btn { width: 100%; }

    /* The footer reads as one column. */
    .site-footer__grid { gap: var(--space-lg); }
    .site-footer__base { flex-direction: column; gap: var(--space-2xs); }
    .site-footer__wordmark { font-size: clamp(1.5rem, 9vw, 2.25rem); }

    /* Article furniture. */
    .article__meta { gap: 0.35rem; }
    .article-nav__link--next { text-align: left; }
    .share { gap: 0.4rem; }
    .share .btn { flex: 1 1 auto; }

    /* Tables of contact details and definition lists stack. */
    .fact-grid__row { grid-template-columns: 1fr; }

    /* The disclaimer must be fully readable and dismissible on a small screen. */
    .disclaimer { padding: var(--space-sm); }
    .disclaimer__dialog { padding: var(--space-md); }
    .disclaimer__actions { flex-direction: column; align-items: stretch; }
    .disclaimer__actions .btn { width: 100%; }

    /* Consent banner stacks so both choices stay reachable. */
    .consent-banner__inner { flex-direction: column; align-items: stretch; }
    .consent-banner__actions .btn { flex: 1; }

    /* Preview bar wraps instead of squashing. */
    .preview-bar__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
}

@media (max-width: 380px) {
    /* The narrowest phones still in use. Body size and heading scale come from
       the responsive typography remap in section 11. */
    :root { --gutter: 0.9rem; }
    .hero__title { font-size: 1.75rem; }
    .brand__name { font-size: 1rem; }
    .brand__tagline { font-size: 0.62rem; }
    .nav-toggle__label { display: none; }
    .card--practice .card__index { display: none; }
}

/* ------------------------------------------------ 10.4 landscape phones */

@media (max-height: 460px) and (orientation: landscape) {
    /* A short viewport must not trap the reader inside a modal they cannot
       scroll or dismiss. */
    .disclaimer { align-items: start; padding-block: var(--space-sm); }
    .disclaimer__dialog { max-height: 92vh; }
    .section--hero { padding-block: var(--space-lg); }
}

/* ----------------------------------------------------- 10.5 tap targets */

@media (pointer: coarse) {
    /* Everything interactive reaches the 44px minimum on a touch screen. */
    .btn, .site-nav__link, .pagination__link, .chip,
    .tag-list__item, .link-list a, .faq__question {
        min-height: 44px;
    }

    .site-nav__link { display: flex; align-items: center; }

    .link-list a { display: flex; align-items: center; }

    .tag-list__item { display: inline-flex; align-items: center; padding-inline: 0.85rem; }

    /* Hover styling never sticks after a tap on touch devices. */
    .card:hover { transform: none; box-shadow: var(--elevation-1); }
}

/* --------------------------------------------------- 10.6 wide screens */

@media (min-width: 1600px) {
    /* Stop the measure stretching on a large monitor. */
    :root { --content-width: min(1440px, 90vw); }
}

/* ===========================================================================
   11. Typefaces and responsive typography
   ---------------------------------------------------------------------------
   The ten selectable families are self-hosted under the SIL Open Font License
   in /assets/fonts (see config/typography.php and config/font-faces.php).
   @font-face is declared per request by ThemeService, which emits blocks for
   only the families the active theme uses, so a visitor downloads at most the
   heading, body and UI faces that theme references — never all ten. Nothing is
   requested from a font CDN, which keeps the Content-Security-Policy tight and
   means no visitor's IP address reaches another company.

   The customiser stores a body size and a heading scale for each of three
   breakpoints. Desktop values arrive as --base-font-size / --heading-scale in
   the theme's inline block; the media queries below remap them to the tablet
   and mobile values, so responsive typography needs no per-element rules.
   =========================================================================== */

@media (max-width: 900px) {
    :root {
        --base-font-size: var(--base-font-size-tablet);
        --heading-scale: var(--heading-scale-tablet);
    }
}

@media (max-width: 600px) {
    :root {
        --base-font-size: var(--base-font-size-mobile);
        --heading-scale: var(--heading-scale-mobile);
    }
}

h1, h2, h3, h4, h5, h6 { font-optical-sizing: auto; }

body { font-feature-settings: 'kern' 1, 'liga' 1; }

/* Figures line up in tables and metadata. */
.table, .fact-grid, .article__meta, .card__meta, .credential__value,
.pagination, time { font-variant-numeric: tabular-nums; }