/* =========================================================================
   NewCMS — Default theme
   Hand-written, no build step, no framework, no CDN.

   ART DIRECTION — the short version of why this looks the way it does.

   Palette: "ink & signal". The page is cool off-white paper (#FBFBF9), not
   cream, and the neutrals are deliberately blue-shifted (#12151C…#E9EBEF) so
   the theme never drifts into sepia. Two accents do separate jobs: a saturated
   cobalt (--signal, #2B50C8) owns everything interactive — links, buttons,
   focus — and a brass ochre (--ember, #9C6716/#C8892B) owns emphasis that is
   NOT clickable: pull-quote marks, the featured price, stat figures. One
   accent doing both jobs is what makes most themes read as generic; splitting
   them means colour carries real meaning. Both accents are contrast-checked
   against paper (cobalt 6.7:1, ochre 4.6:1) so either can set body text.

   Type: the pairing is inverted from the usual. Headings and all UI chrome use
   a tight system grotesque with negative tracking; running prose is a system
   serif at 1.7 leading on a slightly longer measure. A CMS exists to publish
   text, so the reading face gets the serif and the furniture stays quiet.
   System stacks only — the no-CDN rule means no webfonts, and both stacks
   resolve to faces with full Cyrillic coverage (the default locale is ru).

   Three principles that keep this off the shelf:
   1. Rules, not cards. Structure comes from 1px hairlines and whitespace.
      There is exactly ONE drop shadow in the whole stylesheet, on the featured
      pricing plan, where elevation means "this one".
   2. The measure is sacred. Prose is clamped to ~38rem and stays left-aligned
      inside a wider canvas; blocks that need width break out on purpose, so
      the page has an obvious two-width rhythm instead of one flat column.
   3. Asymmetric heading rhythm. Headings sit tight to what they own — big
      space above, small below — so scanning reveals groups. No eyebrow labels,
      no decorative 01/02/03 (the timeline is the one place order is meaning).

   Motion responds to the user and never runs on its own: no scroll animation
   anywhere, ~140ms on state change only, all of it off under reduced-motion.

   Radii encode hierarchy rather than being one rounded value everywhere:
   0 for rules and tables, 3px for inline chips, 6px for controls, 10px for
   cards, 18px for media and the featured plan.
   ========================================================================= */

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

:root {
    /* --- neutral ramp (blue-shifted) --- */
    --ink-950: #12151c;
    --ink-900: #1b2029;
    --ink-700: #39414f;
    --ink-600: #4a5362;
    --ink-500: #5d6675;
    --ink-400: #858d9b;
    --ink-300: #b3b9c4;
    --ink-200: #d7dae1;
    --ink-100: #e9ebef;
    --ink-50:  #f4f5f7;
    --paper:   #fbfbf9;

    /* --- signal: cobalt, interactive only --- */
    --signal-700: #1f3fa8;
    --signal-600: #2b50c8;
    --signal-500: #3a62e0;
    --signal-300: #8fa6f0;
    --signal-100: #dee5fc;

    /* --- ember: brass ochre, emphasis only (never a link) --- */
    --ember-700: #7e520f;
    --ember-600: #9c6716;
    --ember-500: #c8892b;
    --ember-100: #f7ead1;

    /* --- semantic surface + text --- */
    --c-bg:            var(--paper);
    --c-surface:       #ffffff;
    --c-surface-sunk:  var(--ink-50);
    --c-text:          var(--ink-900);
    --c-text-strong:   var(--ink-950);
    --c-text-muted:    var(--ink-500);
    --c-text-faint:    var(--ink-400);
    --c-border:        var(--ink-200);
    --c-border-strong: var(--ink-300);

    --c-accent:          var(--signal-600);
    --c-accent-hover:    var(--signal-700);
    --c-accent-soft:     var(--signal-100);
    --c-accent-contrast: #ffffff;

    --c-mark:      var(--ember-500);
    --c-mark-text: var(--ember-700);
    --c-mark-soft: var(--ember-100);

    /* the inverted slab used by hero / cta — dark in both schemes on purpose */
    --c-slab:      var(--ink-950);
    --c-slab-text: #f4f5f7;
    --c-slab-muted: #a8b0bd;

    --c-danger:  #b3261e;
    --c-success: #1f6b3b;

    /* --- type --- */
    --font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-prose: Georgia, 'PT Serif', Charter, 'Times New Roman', serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;

    --t-xs:   0.8125rem;
    --t-sm:   0.875rem;
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --t-md:   clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --t-lg:   clamp(1.3rem, 1.19rem + 0.5vw, 1.6rem);
    --t-xl:   clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
    --t-2xl:  clamp(2rem, 1.65rem + 1.7vw, 3rem);
    --t-3xl:  clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

    --lh-tight: 1.08;
    --lh-snug:  1.25;
    --lh-ui:    1.45;
    --lh-prose: 1.7;

    --tr-tight: -0.022em;   /* display sizes only */
    --tr-snug:  -0.012em;

    /* --- spacing (4px base) --- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    /* --- measure + container --- */
    --w-prose:     38rem;
    --w-container: 68rem;
    --w-wide:      82rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* --- radii, by hierarchy --- */
    --r-xs:   3px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   18px;
    --r-pill: 999px;

    /* --- the one shadow --- */
    --shadow-lift: 0 1px 2px rgba(18, 21, 28, 0.06), 0 18px 40px -18px rgba(18, 21, 28, 0.28);

    /* --- motion --- */
    --dur: 140ms;
    --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

    /* grid default, overridden by --cols-N modifiers */
    --cols: 3;

    /* --- design-system tokens: defaults, overridden by /design.css --- */
    --c-link:       var(--c-accent);
    --c-link-hover: var(--c-accent-hover);
    --r-btn:        var(--r-sm);
    --fw-heading:   650;
    --sp-xs: 1.5rem;
    --sp-sm: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --sp-md: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
    --sp-lg: clamp(5rem, 3.5rem + 6vw, 7.5rem);
    --sp-xl: clamp(6rem, 4rem + 9vw, 10rem);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: var(--shadow-lift);
    --card-bg:     var(--c-surface);
    --card-border: 1px solid var(--c-border);
    --card-shadow: none;
    --card-radius: var(--r-md);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:            #0e1117;
        --c-surface:       #161a22;
        --c-surface-sunk:  #1d222c;
        --c-text:          #dde1e8;
        --c-text-strong:   #f4f6f9;
        --c-text-muted:    #9aa3b2;
        --c-text-faint:    #78818f;
        --c-border:        #2a303b;
        --c-border-strong: #3a4150;

        --c-accent:          #7d9bff;
        --c-accent-hover:    #a0b6ff;
        --c-accent-soft:     #1b2440;
        --c-accent-contrast: #0b0e14;

        --c-mark:      #e0a64a;
        --c-mark-text: #e8b968;
        --c-mark-soft: #2a2113;

        --c-slab:       #070a0f;
        --c-slab-text:  #f4f6f9;
        --c-slab-muted: #9aa3b2;

        --c-danger:  #f2857c;
        --c-success: #6dc48d;

        --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
    }
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: var(--lh-ui);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* iOS notch safety without breaking the desktop gutter */
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    overflow-wrap: break-word;
}

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

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

:target {
    scroll-margin-block-start: var(--s-7);
}

/* Focus: one visible treatment everywhere, never removed without replacement */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background-color: var(--c-accent-soft);
    color: var(--c-text-strong);
}

/* -------------------------------------------------------------------------
   3. Base typography
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-snug);
    color: var(--c-text-strong);
    text-wrap: balance;
}

h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
h5, h6 { font-size: var(--t-base); }

a {
    color: var(--c-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur) var(--ease);
}

a:hover {
    color: var(--c-link-hover);
}

strong, b { font-weight: 650; }

small { font-size: var(--t-sm); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.925em;
}

:not(pre) > code {
    background-color: var(--c-surface-sunk);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xs);
    padding: 0.1em 0.34em;
}

/* Prose: the serif reading face, used by text-ish blocks and entry bodies */
.prose,
.entry__excerpt,
.cms-block--text,
.cms-block--list,
.cms-block--html {
    font-family: var(--font-prose);
    font-size: var(--t-md);
    line-height: var(--lh-prose);
    color: var(--c-text);
}

.prose > * + *,
.cms-block--text > * + *,
.cms-block--html > * + * {
    margin-block-start: var(--s-5);
}

.prose :is(h2, h3, h4),
.cms-block--text :is(h2, h3, h4),
.cms-block--html :is(h2, h3, h4) {
    font-family: var(--font-display);
    margin-block-start: var(--s-7);
    margin-block-end: var(--s-3);
}

.prose :is(p, ul, ol, blockquote),
.cms-block--text :is(p, ul, ol),
.cms-block--html :is(p, ul, ol) {
    max-width: var(--w-prose);
}

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

.container {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main {
    display: block;
}

.site-main:focus {
    outline: none;
}

/* -------------------------------------------------------------------------
   5. Skip link and visually-hidden text
   ------------------------------------------------------------------------- */

/* Removed from the page, kept for assistive technology. Not `display: none`
   and not `visibility: hidden` — both of those take the text out of the
   accessibility tree as well, which is the opposite of what this is for. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: var(--r-sm);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
    transform: translateY(0);
    color: var(--c-accent-contrast);
    outline-color: var(--c-text-strong);
}

/* -------------------------------------------------------------------------
   6. Header / nav
   ------------------------------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--c-border);
    background-color: var(--c-bg);
}

.site-header__inner {
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--s-4) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
}

.site-header__brand {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 680;
    letter-spacing: var(--tr-snug);
    color: var(--c-text-strong);
    text-decoration: none;
}

.site-header__brand:hover {
    color: var(--c-accent);
}

/* Modules' header links (the shop's cart, an account) at the far end; the
   nav moves over beside them. Empty when no module adds anything. */
.site-header__actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--s-3);
}

.site-header__actions:empty {
    display: none;
}

.site-header__inner:has(> .site-header__actions:not(:empty)) .site-nav {
    margin-inline-start: auto;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: inline-block;
    /* 44px touch target without inflating the visual row */
    padding-block: var(--s-3);
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--c-text-muted);
    text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--c-text-strong);
}

/* A cobalt underline grows from the left on hover — the only nav decoration */
.site-nav__link {
    background-image: linear-gradient(var(--c-accent), var(--c-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    background-size: 100% 2px;
}

/* The page you are on keeps that underline permanently. Colour alone would
   not carry it — the current item also gets aria-current in the markup, so
   this is the visual half of a pair, not the whole signal. */
.site-nav__link--current {
    color: var(--c-text-strong);
    background-size: 100% 2px;
}

/* -------------------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------------------- */

.site-footer {
    margin-block-start: var(--s-10);
    border-top: 1px solid var(--c-border);
}

.site-footer__inner {
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--s-6) var(--gutter) var(--s-8);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
}

.site-footer__copy {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.site-footer__slot:empty {
    display: none;
}

/* -------------------------------------------------------------------------
   8. Buttons + form controls (shared by chrome and by blocks)
   ------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: var(--s-3) var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.button:hover {
    background-color: var(--c-accent-hover);
    color: var(--c-accent-contrast);
}

.button:active {
    transform: translateY(1px);
}

.button[disabled],
.button[aria-disabled='true'] {
    background-color: var(--c-border);
    color: var(--c-text-faint);
    cursor: not-allowed;
    transform: none;
}

/* Secondary: hairline, not a filled slab */
.button--ghost {
    background-color: transparent;
    border-color: var(--c-border-strong);
    color: var(--c-text-strong);
}

.button--ghost:hover {
    background-color: transparent;
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.button--link {
    min-height: 0;
    padding: 0;
    background-color: transparent;
    color: var(--c-accent);
    text-decoration: underline;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.field__label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
input[type='number'],
input[type='date'],
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: var(--s-3) var(--s-4);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: var(--t-base);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea {
    min-height: 8rem;
    resize: vertical;
    line-height: var(--lh-ui);
}

input::placeholder,
textarea::placeholder {
    color: var(--c-text-faint);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--c-text-faint);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--c-accent);
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
}

input[disabled],
textarea[disabled],
select[disabled] {
    background-color: var(--c-surface-sunk);
    color: var(--c-text-faint);
    cursor: not-allowed;
}

/* Error state carries colour AND text, never colour alone */
input[aria-invalid='true'],
textarea[aria-invalid='true'] {
    border-color: var(--c-danger);
}

.field__error {
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--c-danger);
}

/* -------------------------------------------------------------------------
   9. Entry
   ------------------------------------------------------------------------- */

.entry__header {
    width: 100%;
    max-width: var(--w-container);
    margin: var(--s-9) auto var(--s-7);
    padding-inline: var(--gutter);
}

.entry__title {
    font-size: var(--t-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    font-weight: 700;
    max-width: 18em;
}

.entry__meta {
    margin-block-start: var(--s-4);
}

.entry__date {
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.entry__excerpt {
    margin-block-start: var(--s-5);
    max-width: var(--w-prose);
    color: var(--c-text-muted);
    font-style: italic;
}

.entry__blocks {
    display: block;
}

/* Landing pages: the block canvas is the page */
.landing {
    display: block;
}

.page--landing .site-main {
    /* hero sits flush against the header on a landing */
    margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   10. Archive + cards + pager + states
   ------------------------------------------------------------------------- */

.archive {
    width: 100%;
    max-width: var(--w-container);
    margin: var(--s-9) auto var(--s-8);
    padding-inline: var(--gutter);
}

.archive__header {
    padding-block-end: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}

.archive__title {
    font-size: var(--t-2xl);
    letter-spacing: var(--tr-tight);
}

.archive__count {
    margin-block-start: var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Rules, not cards: entries are separated by hairlines */
.archive__list {
    display: grid;
    gap: 0;
}

.entry-card {
    position: relative;
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--c-border);
    transition: background-color var(--dur) var(--ease);
}

.entry-card:hover {
    background-color: var(--c-surface-sunk);
}

.entry-card__title {
    font-size: var(--t-lg);
    font-weight: 620;
}

.entry-card__link {
    color: var(--c-text-strong);
    text-decoration: none;
}

.entry-card__link::after {
    /* card-sized hit area, title-sized accessible name */
    content: '';
    position: absolute;
    inset: 0;
}

.entry-card:hover .entry-card__link,
.entry-card__link:focus-visible {
    color: var(--c-accent);
}

.entry-card__date {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.entry-card__excerpt {
    margin-block-start: var(--s-3);
    max-width: var(--w-prose);
    font-family: var(--font-prose);
    line-height: var(--lh-prose);
    color: var(--c-text-muted);
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-start: var(--s-7);
}

.pager__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 550;
    text-decoration: none;
    color: var(--c-text-strong);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pager__link:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.pager__link[aria-disabled='true'] {
    border-color: var(--c-border);
    color: var(--c-text-faint);
    cursor: not-allowed;
}

.pager__status {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Empty state: an invitation, not an apology */
.state {
    padding: var(--s-8) 0;
}

.state__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 620;
    color: var(--c-text-strong);
}

.state__hint {
    margin-block-start: var(--s-3);
    max-width: var(--w-prose);
    color: var(--c-text-muted);
}

.state--empty {
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 404 */
.notfound {
    max-width: var(--w-container);
    margin: var(--s-10) auto;
    padding-inline: var(--gutter);
}

.notfound__code {
    font-family: var(--font-display);
    font-size: var(--t-3xl);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    line-height: 1;
    color: var(--c-mark-text);
    font-variant-numeric: tabular-nums;
}

.notfound__title {
    margin-block-start: var(--s-4);
    font-size: var(--t-2xl);
}

.notfound__text {
    margin-block-start: var(--s-4);
    max-width: var(--w-prose);
    font-family: var(--font-prose);
    font-size: var(--t-md);
    line-height: var(--lh-prose);
    color: var(--c-text-muted);
}

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-start: var(--s-6);
}

/* =========================================================================
   11. BLOCKS

   Contract (produced by the block templates in themes/default/blocks/):
     root:      <section class="cms-block cms-block--{code}" id="blk-{uid}">
     children:  class="cms-{code}__{part}"
     modifiers: class="cms-{code}--center", "cms-{code}--cols-3"

   Two conventions keep this resilient to part names I cannot see from here:
   - grids are selected with [class$="__grid"] / __items / __list / __cards,
     so any of those wrapper names works;
   - full-bleed blocks contain their own children with `> *`, so no inner
     wrapper name is required at all.
   If the block agent settles on different part names, only the selector lists
   in this section need touching.
   ========================================================================= */

/* --- icons ------------------------------------------------------------------
   From the theme's sprite (cms_icon()). Sized by the text around them and
   coloured by it, so an icon in a button, a heading or a list item needs no
   rules of its own. */
.cms-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke: currentColor;
    fill: none;
    /* Set here, not only on the sprite: a <use> inherits from where it is
       used, so the sprite root's stroke attributes never reach the icon. */
    stroke-width: var(--icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- shared block components ------------------------------------------------
   The pieces blocks are built from (templates/partials/blocks/). Every value
   is a token, so a preset, a section tone or a site's own brand colour
   restyles all of them together — a block never has a colour of its own. */

/* Buttons: primary is the brand fill, ghost an outline, link a bare link.
   Inside a coloured section the tokens are already inverted, so a primary
   button on a brand-coloured band is automatically the light one. */
.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-btn);
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cms-btn--primary {
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
    box-shadow: var(--shadow-sm);
}

.cms-btn--primary:hover {
    background-color: var(--c-accent-hover);
    color: var(--c-accent-contrast);
}

.cms-btn--ghost {
    background-color: transparent;
    border-color: var(--c-border-strong);
    color: var(--c-text-strong);
}

.cms-btn--ghost:hover {
    border-color: var(--c-text);
    color: var(--c-text-strong);
}

.cms-btn--link {
    min-height: 0;
    padding: 0.25rem 0;
    background: none;
    color: var(--c-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cms-btn--link:hover { color: var(--c-link-hover); }

.cms-btn:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .cms-btn--primary:active,
    .cms-btn--ghost:active { transform: translateY(1px); }
}

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
}

/* Lists of items. `--cols` is the most that fit at full width; each track
   also has a floor, so the grid wraps on its own as space runs out — no
   breakpoint per column count. */
.cms-cols-1 { --cols: 1; }
.cms-cols-2 { --cols: 2; }
.cms-cols-3 { --cols: 3; }
.cms-cols-4 { --cols: 4; }
.cms-cols-5 { --cols: 5; }
.cms-cols-6 { --cols: 6; }

.cms-items {
    --gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-items--grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(
        auto-fit,
        minmax(max(var(--col-min, 13rem), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))), 1fr)
    );
}

.cms-items__item { min-width: 0; display: flex; }
.cms-items__item > * { flex: 1 1 auto; min-width: 0; }

/* Slider: a scroll-snapping row. Works as-is by swipe, trackpad and keys;
   slider.js adds the buttons. */
.cms-slider { position: relative; }

.cms-items--slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 2px 4px;
}

.cms-items--slider::-webkit-scrollbar { display: none; }
.cms-items--slider > .cms-items__item { scroll-snap-align: start; }

.cms-items--slider:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 4px;
}

@media (max-width: 63.99rem) {
    .cms-items--slider.cms-cols-3,
    .cms-items--slider.cms-cols-4,
    .cms-items--slider.cms-cols-5,
    .cms-items--slider.cms-cols-6 { --cols: 2; }
}

@media (max-width: 39.99rem) {
    /* A peek of the next slide says "this scrolls" better than any arrow. */
    .cms-items--slider { grid-auto-columns: 85%; }
}

@media (prefers-reduced-motion: no-preference) {
    .cms-items--slider { scroll-behavior: smooth; }
}

.cms-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-block-start: var(--s-5);
}

.cms-slider__btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-strong);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.cms-slider__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cms-slider__btn:hover:not(:disabled) { background: var(--c-surface-sunk); }
.cms-slider__btn:disabled { opacity: 0.35; cursor: default; }

.cms-slider__dots { display: flex; gap: 6px; }

.cms-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-border-strong);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.cms-slider__dot[aria-current='true'] {
    width: 22px;
    background: var(--c-accent);
}

/* Running line: two copies side by side, drifting left, seamless. Stops
   under the pointer or focus; a plain wrapped list for reduced motion. */
.cms-marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cms-items--marquee {
    display: flex;
    flex: 0 0 auto;
    gap: var(--s-7);
    padding-inline-end: var(--s-7);
    animation: cms-marquee 38s linear infinite;
}

.cms-items--marquee > .cms-items__item { flex: 0 0 auto; }

.cms-marquee:hover .cms-items--marquee,
.cms-marquee:focus-within .cms-items--marquee { animation-play-state: paused; }

@keyframes cms-marquee { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
    .cms-marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
    .cms-items--marquee { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; animation: none; padding: 0; }
    .cms-items--echo { display: none; }
}

/* Cards. What a card *looks like* is the preset's decision (--card-*); a
   block only chooses whether its items are cards, framed, or plain. */
.cms-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    height: 100%;
    padding: var(--card-pad, var(--s-6));
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: var(--c-text);
}

.cms-card--bordered {
    background: transparent;
    border: 1px solid var(--c-border);
    box-shadow: none;
}

.cms-card--plain {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Inside a coloured section the page's card colours would clash; cards take
   the section's own surface instead. */
:is(.cms-tone-dark, .cms-tone-primary, .cms-tone-accent, .cms-on-dark) .cms-card:not(.cms-card--plain) {
    background: var(--c-surface);
    border-color: var(--c-border);
}

.cms-card__title {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.cms-card__text {
    color: var(--c-text-muted);
    line-height: 1.6;
}

.cms-card__text > * + * { margin-block-start: var(--s-2); }

.cms-card__footer { margin-block-start: auto; padding-block-start: var(--s-2); }

/* Media ratios, shared by gallery, video, text-with-image and cards. */
.cms-ratio { position: relative; overflow: hidden; }
.cms-ratio > img,
.cms-ratio > iframe,
.cms-ratio > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-ratio--1x1  { aspect-ratio: 1; }
.cms-ratio--4x3  { aspect-ratio: 4 / 3; }
.cms-ratio--3x2  { aspect-ratio: 3 / 2; }
.cms-ratio--16x9 { aspect-ratio: 16 / 9; }
.cms-ratio--3x4  { aspect-ratio: 3 / 4; }
.cms-ratio--auto > img { height: auto; }

/* An icon in a badge: circle, square or bare. */
.cms-badge-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    font-size: 1.375rem;
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

.cms-badge-icon--circle { border-radius: 999px; }
.cms-badge-icon--square { border-radius: var(--r-md); }
.cms-badge-icon--plain  { width: auto; height: auto; background: none; font-size: 1.75rem; }
.cms-badge-icon--accent { color: var(--c-mark-text); background: var(--c-mark-soft); }
.cms-badge-icon--dark   { color: var(--c-bg); background: var(--c-text-strong); }
.cms-badge-icon--plain.cms-badge-icon--accent { background: none; color: var(--c-mark); }
.cms-badge-icon--plain.cms-badge-icon--dark { background: none; color: var(--c-text-strong); }

/* Rich text inside blocks. */
.cms-prose { line-height: var(--lh-prose); }
.cms-prose > * + * { margin-block-start: var(--s-4); }
.cms-prose :is(ul, ol) { padding-inline-start: 1.25em; }
.cms-prose li + li { margin-block-start: var(--s-2); }

/* --- forms (built in the admin) ------------------------------------------- */
/* The honeypot: off screen, out of the tab order, hidden from assistive
   tech — a person never meets it, a script filling every field does. It
   lives here, beside the forms, and not in any one block's styles: every
   form on the site depends on it staying invisible. */
.cms-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cms-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--s-4) var(--s-5);
}

.cms-form__field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cms-form__field--wide,
.cms-form__field--check,
.cms-form__actions { grid-column: 1 / -1; }

.cms-form__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-text-strong); }
.cms-form__req { margin-inline-start: 0.2em; color: var(--c-danger); }

.cms-form__input {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea.cms-form__input { min-height: 7rem; resize: vertical; }

.cms-form__input:focus-visible {
    outline: none;
    border-color: var(--c-link);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.is-invalid .cms-form__input { border-color: var(--c-danger); }

.cms-form__check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    line-height: 1.5;
    cursor: pointer;
}

.cms-form__check input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--c-accent);
}

.cms-form__error { font-size: var(--t-sm); font-weight: 550; color: var(--c-danger); }

.cms-form__alert,
.cms-form__success {
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border-inline-start: 3px solid var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface));
    color: var(--c-text-strong);
}

.cms-form__alert { margin-block-end: var(--s-4); }

.cms-form__success {
    border-inline-start-color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 9%, var(--c-surface));
}

/* The lead-form popover. Native [popover] sits in the top layer; the
   --open variant is the no-script fallback after a submission. */
.cms-popover {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    overflow: auto;
}

.cms-popover::backdrop { background: rgb(8 10 14 / 0.55); backdrop-filter: blur(2px); }

.cms-popover--open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-shadow: 0 0 0 100vmax rgb(8 10 14 / 0.55), 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}

.cms-popover__panel { position: relative; padding: var(--s-6); }

.cms-popover__close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.cms-popover__close:hover { background: var(--c-surface-sunk); color: var(--c-text-strong); }

.cms-popover__title {
    padding-inline-end: var(--s-6);
    font-size: var(--t-lg);
}

.cms-popover__text { margin-block: var(--s-2) var(--s-5); color: var(--c-text-muted); }

@media (prefers-reduced-motion: no-preference) {
    .cms-popover:popover-open { animation: cms-pop-in 180ms var(--ease); }
}

@keyframes cms-pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* --- sections -------------------------------------------------------------
   Every block is wrapped by the engine in a section (templates/partials/
   block-section.twig). The section owns everything that is the same for all
   blocks: background and tone, spacing, content width, the heading, shapes,
   the appear animation and per-device visibility. A block's own markup only
   fills the space it is given — which is why a block written next year gets
   all of this for nothing.

   Tones work by redefinition: .cms-tone-dark (in /design.css) re-declares
   --c-text, --c-bg, --c-accent… and everything inside reads those same names.
   No rule below mentions a tone. */
.cms-section {
    position: relative;
    isolation: isolate;
    z-index: 1;
    background-color: var(--section-bg, transparent);
    background-image: var(--section-bg-image, none);
    color: var(--c-text);
}

/* Shapes overhang the neighbour, so their section must paint above it. */
.cms-section--shape-bottom { z-index: 2; }
.cms-section--shape-top    { z-index: 3; }

.cms-pt-none { padding-top: 0; }
.cms-pt-xs   { padding-top: var(--sp-xs); }
.cms-pt-sm   { padding-top: var(--sp-sm); }
.cms-pt-md   { padding-top: var(--sp-md); }
.cms-pt-lg   { padding-top: var(--sp-lg); }
.cms-pt-xl   { padding-top: var(--sp-xl); }
.cms-pb-none { padding-bottom: 0; }
.cms-pb-xs   { padding-bottom: var(--sp-xs); }
.cms-pb-sm   { padding-bottom: var(--sp-sm); }
.cms-pb-md   { padding-bottom: var(--sp-md); }
.cms-pb-lg   { padding-bottom: var(--sp-lg); }
.cms-pb-xl   { padding-bottom: var(--sp-xl); }

.cms-section__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.cms-w-narrow > .cms-section__inner { max-width: 48rem; }
.cms-w-wide   > .cms-section__inner { max-width: var(--w-wide); }
.cms-w-full   > .cms-section__inner { max-width: none; padding-inline: 0; }
/* Full-width content (a gallery, a map) still keeps its heading off the edge. */
.cms-w-full .cms-section__head { padding-inline: var(--gutter); }

/* A block fills its section; the section decided the width already. */
.cms-section__inner > .cms-block {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
}

/* The shared heading. */
.cms-section__head {
    max-width: 46rem;
    margin-block-end: var(--s-6);
}

.cms-section__head--center { margin-inline: auto; text-align: center; }
.cms-section__head--right  { margin-inline-start: auto; text-align: right; }

.cms-section__title {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    font-size: var(--t-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-snug);
    color: var(--c-text-strong);
    text-wrap: balance;
}

h1.cms-section__title {
    font-size: var(--t-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
}

h3.cms-section__title { font-size: var(--t-lg); }

.cms-section__subtitle {
    margin-block-start: var(--s-3);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--c-text-muted);
    text-wrap: pretty;
}

/* --- background media ------------------------------------------------------ */
.cms-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.cms-section__bg--fixed { background-attachment: fixed; }

/* iOS ignores fixed attachment and scales the picture to the whole page. */
@supports (-webkit-touch-callout: none) {
    .cms-section__bg--fixed { background-attachment: scroll; }
}

.cms-section__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-section__overlay { position: absolute; inset: 0; }
.cms-section__overlay--dark  { background: rgb(8 10 14 / var(--overlay, 0.55)); }
.cms-section__overlay--light { background: rgb(255 255 255 / var(--overlay, 0.55)); }

/* Until the picture arrives, a colour close to what it will be under the
   overlay, so light text is never briefly on white. */
.cms-section--media.cms-on-dark  { background-color: #11141a; }
.cms-section--media.cms-on-light { background-color: #eef0f3; }

@media (prefers-reduced-motion: reduce) {
    .cms-section__video { display: none; }
}

/* --- shapes -------------------------------------------------------------- */
.cms-section__shape {
    position: absolute;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: clamp(24px, 5vw, 80px);
    color: var(--section-bg, var(--c-bg));
    pointer-events: none;
}

.cms-section__shape--top    { bottom: 100%; margin-bottom: -1px; }
.cms-section__shape--bottom { top: 100%; margin-top: -1px; transform: scaleY(-1); }

/* --- appear animation -------------------------------------------------------
   Scroll-driven, so no script decides when to reveal anything, and nothing
   is ever left invisible because a script did not run. Where the browser
   cannot do it, or the visitor has asked for less motion, content is simply
   there. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .cms-anim > .cms-section__inner {
            animation-name: var(--anim-name);
            animation-duration: 1ms;
            animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }

        .cms-anim-fade  { --anim-name: cms-reveal-fade; }
        .cms-anim-up    { --anim-name: cms-reveal-up; }
        .cms-anim-left  { --anim-name: cms-reveal-left; }
        .cms-anim-right { --anim-name: cms-reveal-right; }
        .cms-anim-zoom  { --anim-name: cms-reveal-zoom; }
    }
}

@keyframes cms-reveal-fade  { from { opacity: 0; } }
@keyframes cms-reveal-up    { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes cms-reveal-left  { from { opacity: 0; transform: translateX(-2.5rem); } }
@keyframes cms-reveal-right { from { opacity: 0; transform: translateX(2.5rem); } }
@keyframes cms-reveal-zoom  { from { opacity: 0; transform: scale(0.95); } }

/* --- per-device visibility ------------------------------------------------- */
@media (min-width: 64rem) {
    .cms-hide-desktop { display: none !important; }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .cms-hide-tablet { display: none !important; }
}

@media (max-width: 47.99rem) {
    .cms-hide-mobile { display: none !important; }
}

/* --- rows with columns ------------------------------------------------------
   A row the author split into columns. Its cells hold sections too, marked
   --in-column: a plain one is just its content, a coloured one becomes a
   panel inside the cell rather than a full-bleed band. */
.cms-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-6);
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--sp-sm);
}

.cms-row__col {
    display: grid;
    align-content: start;
    gap: var(--s-6);
    min-width: 0;          /* a long URL must not blow the grid track open */
    grid-column: span 12;  /* phones: one column, in reading order */
}

/* Two narrow columns side by side read badly below this width, so the split
   only happens once each 6/12 half is still a comfortable measure. */
@media (min-width: 48rem) {
    .cms-row__col--span-1  { grid-column: span 1; }
    .cms-row__col--span-2  { grid-column: span 2; }
    .cms-row__col--span-3  { grid-column: span 3; }
    .cms-row__col--span-4  { grid-column: span 4; }
    .cms-row__col--span-5  { grid-column: span 5; }
    .cms-row__col--span-6  { grid-column: span 6; }
    .cms-row__col--span-7  { grid-column: span 7; }
    .cms-row__col--span-8  { grid-column: span 8; }
    .cms-row__col--span-9  { grid-column: span 9; }
    .cms-row__col--span-10 { grid-column: span 10; }
    .cms-row__col--span-11 { grid-column: span 11; }
    .cms-row__col--span-12 { grid-column: span 12; }
}

.cms-section--in-column > .cms-section__inner {
    max-width: none;
    padding-inline: 0;
}

.cms-section--in-column.cms-section--plain { padding-block: 0; }

.cms-section--in-column:not(.cms-section--plain) {
    padding-block: var(--s-6);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.cms-section--in-column:not(.cms-section--plain) > .cms-section__inner {
    padding-inline: var(--s-6);
}

/* A grid inside a narrow cell (features, gallery) must not insist on three
   tracks of 16rem in a 4/12 column. */
.cms-row .cms-block :is([class$='__grid'], [class$='__items'], [class$='__cards']) {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 12rem), 100%), 1fr));
}

/* Column count from the --cols-N modifier, whatever block code carries it */
[class*='--cols-1'] { --cols: 1; }
[class*='--cols-2'] { --cols: 2; }
[class*='--cols-3'] { --cols: 3; }
[class*='--cols-4'] { --cols: 4; }
[class*='--cols-5'] { --cols: 5; }
[class*='--cols-6'] { --cols: 6; }

/* Centred variant, any block */
[class*='--center'] {
    text-align: center;
}

[class*='--center'] :is([class$='__grid'], [class$='__items'], [class$='__list'], [class$='__actions']) {
    justify-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   12. Narrow screens — verified down to 360px, no horizontal scroll
   ------------------------------------------------------------------------- */

@media (max-width: 40rem) {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-1);
    }

    /* With header actions: brand and actions share the first row, the nav
       wraps under them. */
    .site-header__inner:has(> .site-header__actions:not(:empty)) {
        flex-direction: row;
        align-items: center;
    }

    .site-header__inner:has(> .site-header__actions:not(:empty)) .site-nav {
        order: 3;
        flex-basis: 100%;
        margin-inline-start: 0;
    }

    .site-nav__list {
        gap: 0 var(--s-4);
    }

    .entry__header {
        margin-block: var(--s-7) var(--s-6);
    }


    .pager {
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------------
   13. Reduced motion — decorative transitions off, state still legible
   ------------------------------------------------------------------------- */

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

    .site-nav__link {
        background-size: 0 2px;
    }

    .site-nav__link:hover,
    .site-nav__link:focus-visible {
        background-size: 100% 2px;
    }

    .button:active {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   14. Print
   ------------------------------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .pager {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}