/* Fonts, self-hosted (OFL; @fontsource-variable/fraunces + inter 5.3.0). Was Google Fonts: render-blocking, and an EU privacy issue. latin-ext covers Romanian diacritics. */

/* gem — gabriela-elena-mech.com. Rules: DESIGN.md (repo root). The token block and the layout block are the whole system: below them no raw px/rem/clamp for font-size, margin, padding or gap,
   two breakpoints (720, 1061), three layouts (.l-text, .l-split, .l-cards). `python3 tools/qa/system_check.py lint` enforces it. */
/* @tokens */
:root {
  /* LIGHT base from the first build (round 2, 2026-10-25: Marius "use the same light theme that we had where color was only for accents rather than this darker theme").
     Surfaces unchanged: paper #F8F6F3, band tint (was lavender #EEEBF5, now a cool navy-grey #ECEEF5 so it doesn't read as purple next to the new accents), hairlines.
     Accents from Gabriela's 2026-10-25 front-page doc: navy 17/34/75 = #11224B; text #262626. Her bronze 190/170/70 (#BEAA46, OKLCH 0.736 0.122 98) read as mustard, so
     Marius picked "Gold" from /palettes/ on 2026-10-26: the same lightness and chroma (OKLCH 0.74 0.115) at hue 84. The bronze is a tonal family at that one hue: only L (and a little C) move.
     Contrast: navy on paper 14:1, #262626 on the fill 6.5:1, white on navy 15.5:1. The fill on a LIGHT surface is only 2.2:1 and white on it 2.3:1, so on light the fill is never text:
     it is a tick, a surface or a bento tile (with #262626 text). Rules on paper use --bronze-rule (L .60, 3.7:1). Links, headings and focus rings are navy.
     Hex values are the fallback; the @supports block below swaps in the OKLCH source of truth (custom properties don't fall back on their own). */
  --navy: #11224B; --navy-deep: #0A1533; --book: #4E3188;
  --bronze: #CDA44E; --bronze-wash: rgba(205, 164, 78, .16); --bronze-wash-2: rgba(205, 164, 78, .3); --bronze-dim: #EBD9B6; --bronze-rule: #A0791A; --bronze-ink: #775801;
  --glow-a: rgba(205, 164, 78, .45); --glow-b: rgba(205, 164, 78, .34); --glow-c: rgba(205, 164, 78, .2);
  --paper: #F8F6F3; --paper-2: #ECEEF5; --ink: #262626; --stone: #5A5F70;
  --brand: #11224B; --brand-deep: #0A1533; --brand-50: #E3E7F1; --accent: var(--bronze);
  --line: rgba(17, 34, 75, .14); --field: #7C8298;
  --serif: "Fraunces", "Fraunces Fallback Text", "Fraunces Fallback Text Android", Georgia, serif; --serif-display: "Fraunces", "Fraunces Fallback Display", "Fraunces Fallback Display Android", Georgia, serif; --sans: "Inter", "Inter Fallback", "Inter Fallback Android", system-ui, -apple-system, sans-serif;
  /* colour tokens that used to be literals (same values; the two secondary-text greys are merged into --ink-2) */
  --white: #FEFEFF; --shade: rgb(0 0 0 / .35); --ink-2: #3d4256; --navy-dim: #3E4C75; --field-bg: #fffdf8;
  --navy-rgb: 17 34 75; --navy-deep-rgb: 10 21 51; --debug-rgb: 255 0 80;
  --glass: rgb(251 250 247 / .88); --glass-edge: #ffffff5c;
  --ok: #2E7D5B; --ok-on-navy: #9FD8BD; --err: #B3261E; --err-on-navy: #F2B8B5;
  --on-navy: #cfd4e2; --on-navy-strong: #eef0f6; --on-navy-mute: #A3AABF; --on-navy-field: rgb(255 255 255 / .06); --on-navy-field-line: #6B7592; --on-navy-line: rgb(255 255 255 / .12);
  --book-deep: #2a1c52; --book-hi: #3b2670; --book-back: #3A2468; --page-a: #f6f2ea; --page-b: #e2dacb;
  --radius: 4px; --ease: cubic-bezier(.2, .7, .2, 1);

  /* grid: 12 columns, 1200px of content. --text-w = 7 of the 12 columns (the % is the containing block's width, so use it only as a width) */
  --wrap: 1200px; --gutter: var(--s2); --margin: var(--s3);
  --text-w: calc((100% - 11 * var(--gutter)) / 12 * 7 + 6 * var(--gutter));
  --text-w-wide: calc((100% - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter));  /* 10 of 12: the quote deck */
  --col8: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));  /* 8 of 12: the Reading head, wide editor cards */
  --col6: calc((100% - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter));  /* 6 of 12: the Reading body (~70 characters a line) */
  --measure: 65ch;
  --header-h: 4.8125rem;  /* the sticky header (76px + its 1px progress line): offset for the sticky Projects aside and counter */

  /* space: 4/8-based, fluid 360px → 1440px (Utopia). One section padding. */
  --s-1: .25rem; --s0: .5rem;
  --s1: clamp(.75rem, .6667rem + .3704vw, 1rem);
  --s2: clamp(1rem, .8333rem + .7407vw, 1.5rem);
  --s3: clamp(1.5rem, 1.3333rem + .7407vw, 2rem);
  --s4: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
  --s5: clamp(3rem, 2.6667rem + 1.4815vw, 4rem);
  --s6: clamp(4rem, 3.3333rem + 2.963vw, 6rem);
  --section: var(--s6);

  /* type: 6 steps + the eyebrow, fluid 360px → 1440px. Fraunces display / Inter text, weights 400 and 500. */
  --t-eyebrow: clamp(.75rem, .7292rem + .0926vw, .8125rem);
  --t-sm: clamp(.875rem, .8542rem + .0926vw, .9375rem);
  --t-base: clamp(1.0625rem, 1.0417rem + .0926vw, 1.125rem);
  --t-lg: clamp(1.25rem, 1.1667rem + .3704vw, 1.5rem);
  --t-lede: clamp(1.125rem, 1.0893rem + .1786vw, 1.25rem);  /* 18 -> 20px over 320-1440px: the running lede text (every Inter lede/intro paragraph); --t-lg is only for serif emphasis */
  --t-h3: clamp(1.5rem, 1.3333rem + .7407vw, 2rem);
  --t-h2: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
  --t-h1: clamp(2.5rem, 1.75rem + 3.3333vw, 4.75rem);
  --lh-body: 1.6; --lh-lead: 1.45; --lh-head: 1.15;
}
@supports (color: oklch(0.5 0.1 90)) {  /* one hue (84), one chroma (.115): only lightness steps. dim is the paler tint at lower chroma */
  :root {
    --bronze: oklch(0.74 0.115 84); --bronze-wash: oklch(0.74 0.115 84 / .16); --bronze-wash-2: oklch(0.74 0.115 84 / .3); --bronze-dim: oklch(0.89 0.05 84);
    --bronze-rule: oklch(0.60 0.115 84); --bronze-ink: oklch(0.48 0.10 84);
    --glow-a: oklch(0.74 0.115 84 / .45); --glow-b: oklch(0.74 0.115 84 / .34); --glow-c: oklch(0.74 0.115 84 / .2);
  }
}
/* @end-tokens */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* font gate: head.hbs holds the page invisible until Fraunces/Inter are ready (max 1.5s) so there's no fallback-font flash and re-layout */
body { transition: opacity .35s var(--ease); }
html.fonts-wait body { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/var(--lh-body) var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand); color: var(--paper); }
.glass-defs { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: 8px; transform: translateY(-300%); background: var(--ink); color: var(--paper); padding: var(--s0) var(--s2); z-index: 100; }
.skip:focus { transform: none; }

/* @layouts: the container and the three layouts. Every section is one of them. */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
/* 1 Text: full width below 1061px; from 1061px 7 of the 12 columns, always left on the grid (nothing is centred: left edges line up down the page) */
@media (min-width: 1061px) { .l-text { max-width: var(--text-w); } .l-text--wide { max-width: var(--text-w-wide); } }
/* 4 Reading (pages that are mostly prose: posts, generic pages, the 404, programme pages without a head image, Arts, the blog head; Marius 10-28: "not a big fan of the left aligned content on some inner pages"). From 1061px:
   .l-read-head = the head on 8 centred columns with centred text (lede capped at 36ch, actions centred); .l-read-body = the running text on 6 centred columns, text left-aligned; Ghost's wide card = 8 columns, full = 12.
   .l-read-col puts one whole block in the body column. Below 1061px nothing changes (full width, left). Landing sections and split heads (About, Contact, books, programme pages with an image) stay left on the grid. */
@media (min-width: 1061px) {
  .l-read-head { max-width: var(--col8); margin-inline: auto; margin-bottom: var(--s5); text-align: center; }  /* one head → body gap on every Reading page, whatever the head's last child is */
  .l-read-col { max-width: var(--col6); margin-inline: auto; }  /* a whole block (label, heading, form) in the body column, e.g. the post newsletter */
  .program-head:not(.l-split), .section-lead:has(.l-read-head) { padding-bottom: 0; }
  .arts-page .plates-wall { padding-top: 0; }
  .l-read-head .lede { max-width: 36ch; margin-inline: auto; }
  .l-read-head .actions { justify-content: center; }
  .l-read-body > * { max-width: var(--col6); margin-inline: auto; }
  .l-read-body.prose > * { max-width: var(--col6); margin-inline: auto; }
  .l-read-body > .kg-width-wide { max-width: var(--col8); }
  .l-read-body > .kg-width-full { max-width: none; }
}
/* 2 Split: stacked below 1061px; from 1061px on the 12 columns. Default 6/6 (card pairs); --6-5 text 6 + 1 empty + media 5; --5-6 media 5 + 1 empty + text 6. The empty column keeps text and picture apart. */
.l-split { display: grid; gap: var(--s4) var(--gutter); align-items: start; }
.l-split--center { align-items: center; }
.l-split--end { align-items: end; }
@media (min-width: 1061px) {
  .l-split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .l-split > :first-child { grid-column: 1 / span 6; }
  .l-split > :nth-child(2) { grid-column: 7 / span 6; }
  .l-split--6-5 > :nth-child(2) { grid-column: 8 / span 5; }
  .l-split--5-6 > :first-child { grid-column: 1 / span 5; }
  .l-split--5-6 > :nth-child(2) { grid-column: 7 / span 6; }
}
/* 3 Cards: 3 → 2 → 1 (a card is never narrower than 18.5rem; the same gutter everywhere keeps the cards on the 12-column lines). auto-fill: 1 or 2 cards keep their column width (books, the "also by" shelf); --fit: auto-fit, the few cards stretch to the row (the journal). --editorial: image + text cards get more air between rows. the stats strip (.proof-row > ul): 2 → 4 */
.l-cards { --fit: auto-fill; display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--fit), minmax(min(100%, 18.5rem), 1fr)); }
.l-cards--fit { --fit: auto-fit; }
.l-cards--editorial { row-gap: var(--s4); }
.proof-row > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* the stats strip: a Cards variant, 2 → 4 (no column gap on phones: the hairline between the two rows is then one continuous line) */
@media (min-width: 720px) { .proof-row > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); } }
/* dev only: the 12-column overlay (press G on localhost; the element is only created there, see site.js) */
.grid-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; }
html.show-grid .grid-overlay { display: block; }
.grid-overlay .wrap { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid-overlay i { background: rgb(var(--debug-rgb) / .08); box-shadow: inset 1px 0 rgb(var(--debug-rgb) / .3), inset -1px 0 rgb(var(--debug-rgb) / .3); }

/* type */
.label { font: 500 var(--t-eyebrow)/var(--lh-lead) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin: 0 0 var(--s1); }
.label a { color: inherit; text-decoration: none; }
h1, h2, h3, .display-xl, .display-l, .display-m { font-family: var(--serif-display); font-weight: 400; letter-spacing: -.015em; line-height: var(--lh-head); margin: 0 0 var(--s2); font-variation-settings: "opsz" 144; }
/* No hanging words: balance headlines, avoid one-word last lines in running text (progressive: ignored where unsupported). */
h1, h2, h3, h4, .display-xl, .display-l, .display-m, [class*="-title"], .pull { text-wrap: balance; }
p, li, blockquote, figcaption, .lede, .fineprint { text-wrap: pretty; }
p { margin: 0 0 var(--s1); }
strong, b { font-weight: 500; }
h1, .display-xl { font-size: var(--t-h1); }
h2, .display-l { font-size: var(--t-h2); }
h3, .display-m { font-size: var(--t-h3); }
/* headings are navy; the keyword (em) stays italic with a bronze rule under it (bronze can't be text on light: the hero headline is the one exception, large text in --bronze-rule, see .hero-text em) */
h1, h2, h3, .display-xl, .display-l, .display-m { color: var(--navy); }
.display-xl em, .display-l em, .display-m em { font-style: italic; color: inherit; text-decoration: underline; text-decoration-color: var(--bronze-rule); text-decoration-thickness: .07em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.lede { font-size: var(--t-lede); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--measure); }
.fineprint { font-size: var(--t-sm); color: var(--stone); margin: var(--s1) 0 0; }

/* buttons & links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s0); white-space: nowrap; min-height: 48px; background: var(--brand); color: var(--paper); border: 0; border-radius: 999px; padding: var(--s1) var(--s3); font: 500 var(--t-sm)/1 var(--sans); text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background .25s var(--ease), transform .25s var(--ease); }
.btn:active { transform: scale(.98); background: var(--brand-deep); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.link-arrow, .lang-switch, .site-nav ul a { white-space: nowrap; }
.btn-small { padding: 0 var(--s2); min-height: 44px; }
.link-arrow { font-weight: 500; text-decoration: none; color: var(--ink); background: linear-gradient(var(--bronze-ink), var(--bronze-ink)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); padding-bottom: var(--s-1); }
.link-arrow::after { content: " →"; color: var(--brand); }
/* text → button: --s3 */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.actions .link-arrow { font-size: var(--t-sm); line-height: 1; padding-block: var(--s0); }   /* the text link beside a button is set in the button's size (Marius 10-29: "different fontsizes on the buttons?") */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brand-deep); }
  .link-arrow:hover { background-size: 100% 1px; }
}

/* header: frosted glass + scroll progress (Karakeep picks) */
.site-header { position: sticky; top: 0; z-index: 50; transition: background .3s var(--ease), box-shadow .3s var(--ease); padding-top: env(safe-area-inset-top); }
/* frosted header: plain blur everywhere (Safari/iOS only support filter functions in backdrop-filter); the SVG refraction (url(#glass)) is Chromium-only, set via html.has-glass in site.js, because a url() in the list can cancel the blur in WebKit */
.site-header.is-scrolled { background: var(--glass); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 -1px 0 var(--line), inset 0 1px 0 var(--glass-edge); }
html.has-glass .site-header.is-scrolled { backdrop-filter: url(#glass) blur(14px) saturate(180%); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 76px; }
.js .header-inner { flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: var(--s1); color: var(--ink); text-decoration: none; min-height: 44px; }
.brand-mark { color: var(--brand); display: flex; }
.brand-name { font: 400 var(--t-base)/1 var(--serif); letter-spacing: -.01em; }
.brand-name em { font-style: italic; }
.lang-switch { font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .12em; color: var(--stone); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: var(--s0) var(--s1); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .lang-switch:hover { color: var(--brand); border-color: var(--brand); } }
.progress { height: 1px; background: transparent; }
.progress span { display: block; height: 1px; width: 100%; background: var(--bronze-rule); transform-origin: 0 50%; transform: scaleX(0); }
.header-cta { display: none; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.js .nav-toggle { display: block; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: transform .3s var(--ease); }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
[aria-expanded="true"] .bars { background: transparent; }
[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }
/* the nav: with scripting off it is a row under the brand; with it (html.js), below 1061px, a popover from the burger */
.site-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-bottom: var(--s2); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.site-nav ul a { color: var(--ink); text-decoration: none; font: 400 var(--t-sm)/var(--lh-body) var(--sans); }
.site-nav .nav-current a { color: var(--brand); }
.js .site-nav { flex-basis: auto; position: absolute; top: 70px; right: var(--margin); flex-direction: column; flex-wrap: nowrap; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: var(--s3); transform-origin: top right; transform: scale(.9); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s .3s; }
.js .site-nav.is-open { transform: scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .3s var(--ease), opacity .25s var(--ease); }
.js .site-nav ul { flex-direction: column; flex-wrap: nowrap; gap: var(--s1); }
.js .site-nav ul a { display: block; padding: var(--s0) 0; font: 400 var(--t-lg)/var(--lh-head) var(--serif); }
.js .site-nav .btn-small { width: 100%; }
@media (min-width: 1061px) {
  .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { flex-basis: auto; position: static; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--s3); background: none; border: 0; border-radius: 0; padding: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .site-nav ul, .js .site-nav ul { flex-direction: row; flex-wrap: nowrap; gap: var(--s3); }
  .site-nav ul a, .js .site-nav ul a { display: inline; padding: 0; font: 400 var(--t-sm)/var(--lh-body) var(--sans); }
  .js .site-nav .btn-small { width: auto; }
}

/* sections: one vertical padding for all of them */
section { padding-block: var(--section); }
.band { background: var(--paper-2); }
.section-head { margin-bottom: var(--s4); }
.hero { padding-top: var(--s4); min-height: min(92svh, 900px); display: flex; align-items: center; }
.hero-figure { margin: 0; max-width: 26.25rem; }
.hero-figure img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 15%; width: 100%; }
@media (min-width: 1061px) { .hero-figure img { max-height: max(calc(100svh - 22rem), 26rem); } }  /* the portrait is cropped, not shrunk, so the hero's buttons stay above the fold at 1280 × 800 */
.hero-figure figcaption { margin-top: var(--s1); }
@media (min-width: 1061px) { .hero-figure { max-width: none; } }
/* stats strip: four cells on the 12-column grid, a divider in the middle of each gutter */
.proof { padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-row { row-gap: 0; }
.proof-row li { position: relative; padding-block: var(--s3); display: flex; flex-direction: column; gap: var(--s0); }
.proof-row li:nth-child(odd) { padding-right: var(--gutter); }
.proof-row li:nth-child(even) { padding-left: var(--gutter); }
.proof-row li:nth-child(-n+2) { padding-top: var(--s4); }
.proof-row li:nth-child(n+3) { border-top: 1px solid var(--line); padding-bottom: var(--s4); }
.proof-row li::before { content: ""; position: absolute; left: calc(var(--gutter) / -2); top: var(--s4); bottom: var(--s4); border-left: 1px solid var(--line); display: none; }
.proof-row li { font-size: var(--t-sm); color: var(--stone); }
.proof-row strong { font: 400 var(--t-h3)/1 var(--serif); color: var(--navy); }
@media (min-width: 720px) {
  .proof-row li, .proof-row li:nth-child(n) { padding: var(--s4) 0; border-top: 0; }
  .proof-row li:not(:first-child)::before { display: block; }  /* a divider between every pair, in the middle of the gutter */
}

/* programmes: cascading slider (Karakeep: Osmo). Below 720px the cards stack and show their text; from 720px they are a row that opens on hover/tap. */
.cascade { display: flex; flex-direction: column; gap: var(--s1); container-type: inline-size; }
.cascade-item { position: relative; flex: none; min-width: 0; min-height: 15rem; display: flex; align-items: flex-end; border-radius: var(--radius); overflow: hidden; background: var(--brand-deep); color: var(--paper); text-decoration: none; }
.cascade-item::before { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 1; background: linear-gradient(transparent, rgb(var(--navy-deep-rgb) / .78)); pointer-events: none; }
.cascade-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; border-radius: 0; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.cascade-item.is-active img { opacity: .38; transform: scale(1.03); }
.cascade-body { position: relative; width: 100%; z-index: 2; box-sizing: border-box; padding: var(--s6) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.cascade-num { font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .14em; opacity: .75; }
.cascade-title { font: 400 var(--t-lg)/var(--lh-head) var(--serif); }
.cascade-item .link-arrow { color: var(--paper); }
.cascade-item .link-arrow::after { color: inherit; }
.cascade-short { display: none; }
/* the open text rises in line by line (number, title, excerpt, link: fade + 12px, the site's own reveal). Phones: the stack, each card's lines rise as it enters the viewport (site.js sets .is-in), 60ms apart. */
.js .cascade-body > * { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .cascade-item.is-in .cascade-body > * { opacity: 1; transform: none; }
.js .cascade-item.is-in .cascade-body > :nth-child(2) { transition-delay: .06s; } .js .cascade-item.is-in .cascade-body > :nth-child(3) { transition-delay: .12s; } .js .cascade-item.is-in .cascade-body > :nth-child(4) { transition-delay: .18s; }
@media (min-width: 720px) {
  .cascade { flex-direction: row; height: 520px; --cgap: var(--s1); gap: var(--cgap); --open: calc((100cqw - 2 * var(--cgap)) * 4 / 6); }
  /* width of an OPEN card for 3/4/5 cards (flex 4 vs 1 each): text is laid out at this width and revealed by the card, so it never reflows mid-animation */
  .cascade:has(> :nth-child(4)) { --open: calc((100cqw - 3 * var(--cgap)) * 4 / 7); }
  .cascade:has(> :nth-child(5)) { --open: calc((100cqw - 4 * var(--cgap)) * 4 / 8); }
  .cascade-item { flex: 1; min-height: 0; display: block; transition: flex .6s var(--ease); }
  .cascade-item.is-active { flex: 4; }
  /* open first, then write (Ray, 2026-10-28): the card opens with no text; once it has (nearly) settled the lines rise in one after another (.52s / .58s / .64s / .70s: Ray's .42-.60 left the number 9px short of settled). Closing: the lines fade out in .15s with no movement, before the card narrows. Nothing slides sideways, nothing animates layout (no max-height). */
  .cascade-body { position: absolute; inset: auto auto 0 0; width: var(--open); padding: var(--s3); }
  .js .cascade .cascade-item .cascade-body > * { opacity: 0; transform: translateY(12px); transition: opacity .15s linear, transform 0s .15s; }
  .js .cascade .cascade-item.is-active .cascade-body > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .cascade .cascade-item.is-active .cascade-body > :nth-child(1) { transition-delay: .52s; } .js .cascade .cascade-item.is-active .cascade-body > :nth-child(2) { transition-delay: .58s; } .js .cascade .cascade-item.is-active .cascade-body > :nth-child(3) { transition-delay: .64s; } .js .cascade .cascade-item.is-active .cascade-body > :nth-child(4) { transition-delay: .7s; }
  /* collapsed: number + short label (fade only: vertical text that rises reads as sliding), laid out at the card's own width; out in .15s when its card opens, back in .3s after a .45s delay once the card has narrowed */
  .cascade-short { position: absolute; inset: 0; z-index: 2; padding: var(--s3) var(--s2); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; opacity: 1; transition: opacity .3s var(--ease) .45s; pointer-events: none; }
  .cascade-item.is-active .cascade-short { opacity: 0; transition: opacity .15s linear; }
  .cascade-label { font: 400 var(--t-lg)/var(--lh-head) var(--serif); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .cascade-label:empty { display: none; }
}

/* book: cover + copy (Split 5 + 1 + 6) */
.book-cover { margin: 0; max-width: 22.5rem; }
@media (min-width: 1061px) { .book-cover { max-width: none; } }
.pull { font: italic 400 var(--t-lg)/var(--lh-lead) var(--serif); margin: 0 0 var(--s2); padding-left: var(--s2); border-left: 2px solid var(--bronze-rule); }

/* books: detail page (Split 5 + 1 + 6), index grid (Cards), "also by" shelf (Cards) */
.book-page { padding: var(--s5) 0 var(--section); }
.book-page-cover { margin: 0; max-width: 18.75rem; }
.book-page-cover img { width: 100%; max-width: 440px; margin: 0 auto; box-shadow: 0 30px 60px -30px rgb(var(--navy-rgb) / .45); }
.book-page-copy .prose { padding-bottom: 0; }
.book-page-copy h1 { overflow-wrap: anywhere; }
@media (min-width: 1061px) { .book-page-cover { position: sticky; top: 110px; max-width: none; } }
.books { padding-top: 0; }
.book-card { display: flex; flex-direction: column; gap: var(--s1); color: var(--ink); text-decoration: none; }
.book-card-cover { display: grid; place-items: center; background: var(--paper-2); border-radius: 14px; padding: var(--s4); aspect-ratio: 4 / 5; }
.book-card-cover > img { max-height: 100%; width: auto; box-shadow: 0 22px 40px -22px rgb(var(--navy-rgb) / .5); transition: transform .5s var(--ease); }
.book-card-title { font: 400 var(--t-h3)/var(--lh-head) var(--serif); margin-top: var(--s0); }
.book-card-excerpt { color: var(--ink-2); font-size: var(--t-sm); }
@media (hover: hover) and (pointer: fine) { .book-card:hover .book-card-cover > img { transform: translateY(-6px) rotate(-1.5deg); } .book-card:hover .book-card-title { color: var(--brand); } }
.shelf .book-card-cover { background: var(--paper); }
/* the "Also by" shelf with exactly one book: a 12-column Split 6/6 from 1061px (cover left; title, text and link on the right, vertically centred), like the journal's single featured card */
@media (min-width: 1061px) {
  .shelf-row:has(> :only-child) { display: block; }
  .shelf-row > .book-card:only-child { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--gutter); row-gap: var(--s1); align-items: start; }
  .shelf-row > .book-card:only-child .book-card-cover { grid-column: 1 / span 6; grid-row: 1 / -1; aspect-ratio: 5 / 4; }
  .shelf-row > .book-card:only-child .book-card-title { grid-column: 7 / -1; grid-row: 2; margin-top: 0; }
  .shelf-row > .book-card:only-child .book-card-excerpt { grid-column: 7 / -1; grid-row: 3; }
  .shelf-row > .book-card:only-child .link-arrow { grid-column: 7 / -1; grid-row: 4; justify-self: start; }
}
/* the Books index: few books share the full container (l-cards--fit), so the cover boxes are one fixed height (whatever the cover's own proportions) and the 3D book a little larger than in the "also by" shelf */
@media (min-width: 720px) { .book-grid-list .book-card-cover { aspect-ratio: auto; height: 32rem; } .book-grid-list .book-card-cover .book3d { --bw: 15rem; } }

/* Ghost button cards (buy links on book pages) */
.kg-button-card { margin-top: var(--s2); display: flex; }
.kg-button-card + .kg-button-card { margin-top: var(--s1); }
.gh-content .kg-button-card a.kg-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 var(--s3); border-radius: 999px; font: 500 var(--t-sm)/1 var(--sans); text-decoration: none; white-space: nowrap; }
@media (min-width: 720px) { .gh-content .kg-button-card a.kg-btn { width: auto; } }
.gh-content .kg-button-card a.kg-btn-accent { background: var(--brand); color: var(--paper); border: 1px solid var(--brand); }
/* Ghost's button card has one style; the first buy button is primary, any following ones are secondary (outline) */
.gh-content .kg-button-card + .kg-button-card a.kg-btn { border: 1px solid var(--brand); color: var(--brand); background: transparent; }
@media (hover: hover) and (pointer: fine) { .gh-content .kg-button-card a.kg-btn-accent:hover { background: var(--brand-deep); } .gh-content .kg-button-card + .kg-button-card a.kg-btn:hover { background: var(--brand-50); } }

/* quotes: flick cards (Karakeep: Osmo) — a deck: cards keep fixed slots (data-pos), a flicked card flies off then slides in behind the stack */
.flick { position: relative; min-height: 260px; margin-top: var(--s1); margin-right: var(--s3); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.flick:active { cursor: grabbing; }
.flick-card { --x: 0px; --y: 0px; --r: 0deg; --s: 1; position: absolute; inset: 0; margin: 0; background: var(--paper-2); border-radius: 18px; padding: var(--s4); font: 400 var(--t-h3)/var(--lh-lead) var(--serif); display: flex; align-items: center; box-shadow: 0 1px 0 rgb(var(--navy-rgb) / .04), 0 18px 40px -26px rgb(var(--navy-rgb) / .35); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transition: transform .6s var(--ease), opacity .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease); will-change: transform; }
.flick-card[data-pos="1"], .flick-card[data-pos="2"], .flick-card[data-pos="3"] { color: transparent; }
.flick-card[data-pos="1"] { --x: 14px; --y: 14px; --r: 1.5deg; --s: .99; background: color-mix(in srgb, var(--paper-2) 88%, var(--brand) 12%); }
.flick-card[data-pos="2"], .flick-card[data-pos="3"] { --x: 26px; --y: 26px; --r: -1.2deg; --s: .97; background: color-mix(in srgb, var(--paper-2) 78%, var(--brand) 22%); }
.flick-card[data-pos="3"] { opacity: 0; }
.flick-card.is-out { --x: -115%; --y: 8px; --r: -4deg; transition: transform .42s cubic-bezier(.5, 0, .75, 0), opacity .42s var(--ease); }
.flick-card.is-out.to-right { --x: 115%; --r: 4deg; }
.flick:focus-visible .flick-card[data-pos="0"] { outline: 2px solid var(--brand); outline-offset: 4px; }

/* journal cards (Cards; with one post it is a featured Split 6/6, with two they stretch to two columns) */
.card-link { color: var(--ink); text-decoration: none; display: block; }
.card-img { aspect-ratio: 3/2; object-fit: cover; width: 100%; margin-bottom: var(--s2); }
.card-title { font-size: var(--t-h3); margin-bottom: var(--s1); }
.card-excerpt { color: var(--ink-2); font-size: var(--t-sm); }
.more { margin-top: var(--s4); }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-bottom: var(--s4); }
.section-head--row h2 { margin-bottom: 0; }
.card-art, .card-more { display: none; }
.card-body > :last-child { margin-bottom: 0; }
.cards > :only-child .card-link { display: grid; gap: var(--s4) var(--gutter); align-items: center; }
.cards > :only-child .card-img, .cards > :only-child .card-art { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; border-radius: 12px; object-fit: cover; }
.cards > :only-child .card-art { background:radial-gradient(circle at 78% 22%, var(--glow-a) 0 3px, transparent 4px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M168 64A76 76 0 1 1 105 25' fill='none' stroke='%23FFFFFF' stroke-opacity='.16' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") 60% 35% / 150% no-repeat,
  linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); }
.cards > :only-child .card-title { font-size: var(--t-h2); margin-bottom: var(--s2); }
.cards > :only-child .card-excerpt { font-size: var(--t-lede); line-height: var(--lh-lead); max-width: var(--measure); }
.cards > :only-child .card-more { display: inline-block; margin-top: var(--s2); font-weight: 500; }
.cards > :only-child .card-more::after { content: " →"; color: var(--brand); }
@media (min-width: 1061px) {
  .cards > :only-child .card-link { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cards > :only-child .card-body { grid-column: 1 / span 6; grid-row: 1; }
  .cards > :only-child .card-img, .cards > :only-child .card-art { grid-column: 7 / span 6; grid-row: 1; aspect-ratio: 4 / 3; }
}
@media (hover: hover) and (pointer: fine) { .card-link:hover .card-title { color: var(--brand); } }
.pagination { display: flex; justify-content: space-between; margin-top: var(--s5); color: var(--stone); font-size: var(--t-sm); }

/* articles & pages */
.section-lead { padding-bottom: var(--s4); }
.section-lead + section { padding-top: 0; }
.article-head { padding-top: var(--s5); }
.article-image { margin: var(--s4) auto var(--s5); }
.prose { font-size: var(--t-base); line-height: var(--lh-body); padding-bottom: var(--section); }
.prose > * + * { margin-top: var(--s2); }
.prose h2 { font-size: var(--t-h3); margin: var(--s4) 0 var(--s1); }
.prose h3 { font-size: var(--t-lg); margin: var(--s3) 0 var(--s1); }
.prose blockquote { font: italic 400 var(--t-lg)/var(--lh-lead) var(--serif); margin: var(--s3) 0; padding-left: var(--s2); border-left: 2px solid var(--bronze-rule); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
/* Open fields in a draft page (the privacy policy example): each [BRACKET] is a highlight to fill in or delete */
.prose mark { background: var(--bronze-wash-2); color: var(--ink); padding: .05em .3em; border-radius: .25em; box-shadow: inset 0 0 0 1px var(--bronze-rule); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose code { font-size: .9em; background: var(--brand-50); padding: .05em .35em; border-radius: .25em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.post-news { padding-bottom: var(--section); }
.program-head { padding-top: var(--s5); padding-bottom: var(--s5); }
.program-image { margin: 0; max-width: 26.25rem; } .program-image img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
@media (min-width: 1061px) { .program-image { max-width: none; } }
/* Ghost's wide / full editor cards: the width of the column on phones; in a Reading body they are 8 / 12 columns (see layout 4) */
.kg-width-wide, .kg-width-full { width: 100%; }
:where(.gh-content) figure { margin: var(--s3) 0; }  /* Ghost image cards are <figure>s: the browser's 1em 40px margin pushed them off the text column below 1061px (:where keeps it under the Reading body's centring rules) */
.kg-image-card figcaption, .kg-gallery-card figcaption { font-size: var(--t-sm); color: var(--stone); margin-top: var(--s0); text-align: center; }

/* forms */
input, select, textarea { min-height: 48px; font: 400 var(--t-base)/var(--lh-lead) var(--sans); color: var(--ink); background: var(--field-bg); border: 1px solid var(--field); border-radius: 10px; padding: var(--s1) var(--s2); width: 100%; }
textarea { resize: vertical; }
.newsletter { display: flex; flex-direction: column; gap: var(--s1); max-width: 520px; }
.newsletter input { border-radius: 999px; padding: 0 var(--s2); height: 48px; }
.newsletter .btn { height: 48px; }
.newsletter .fineprint { flex-basis: 100%; }
@media (min-width: 720px) { .newsletter { flex-direction: row; flex-wrap: wrap; } .newsletter input { flex: 1 1 220px; width: auto; } .newsletter .btn { flex: none; } }
.contact-copy .prose { padding-bottom: 0; }
.contact-copy .link-arrow { font-size: var(--t-sm); }
@media (min-width: 720px) { .contact-copy .link-arrow { font-size: var(--t-base); } }
.site-footer .plain a[href^="mailto"] { font-size: var(--t-sm); white-space: nowrap; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); background: var(--paper-2); padding: var(--s3); border-radius: 18px; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s0); }
.field.half { grid-column: 1 / -1; }
@media (min-width: 720px) { .field.half { grid-column: span 1; } }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field label span { color: var(--stone); font-weight: 400; }
.contact-form .btn { justify-self: stretch; }
.form-status { grid-column: 1 / -1; margin: 0; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--bronze-wash); color: var(--ink); font-size: var(--t-sm); }
.form-status:empty { padding: 0; height: 0; overflow: hidden; }   /* rendered but empty, so a screen reader announces the text when it appears */
.form-status.is-error { background: color-mix(in srgb, var(--err) 12%, var(--paper)); color: var(--err); }
.contact-form .btn, .contact-form .fineprint { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; }
@media (min-width: 720px) { .contact-form .btn { justify-self: start; } }

/* Mobile buttons & targets — researched 2026-09-28 (docs/mobile-buttons.md):
   48px primary / 44px secondary, >= 8px apart, full-width primary actions, primary CTA in the thumb zone, labels never wrap. Tap sizes follow the pointer (touch), the stacked actions follow the width. */
@media (pointer: coarse) {
  .plain a, .site-footer nav a, .more a, .credit a, .link-arrow, .contact-copy a { display: inline-flex; align-items: center; min-height: 44px; }
  .plain, .site-footer nav ul { gap: 0; }
}
.actions { flex-direction: column; align-items: stretch; }
.actions .btn { width: 100%; }
.actions .link-arrow { justify-content: flex-start; text-align: left; }
@media (min-width: 720px) { .actions { flex-direction: row; align-items: center; } .actions .btn { width: auto; } .actions .link-arrow { justify-content: flex-start; text-align: left; } }

/* programme slides without a photo: soft enso + blossom texture instead of a flat block */
.cascade-item:not(:has(img)) { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M168 64A76 76 0 1 1 105 25' fill='none' stroke='%23FFFFFF' stroke-opacity='.16' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") right var(--s3) top var(--s3) / 7rem no-repeat,
  linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); }  /* the ensō is whole (never cropped), top right of every panel, no gold dot */

/* newsletter: in-place status */
.nl-status { flex-basis: 100%; margin: var(--s0) 0 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.nl-status.ok { color: var(--ok); } .site-footer .nl-status.ok { color: var(--ok-on-navy); }
.nl-status.err { color: var(--err); } .site-footer .nl-status.err { color: var(--err-on-navy); }

/* mobile thumb-zone CTA bar: appears after the hero, hides at the footer / enquiry band / on the contact page / from 1061px */
.cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--s1) var(--margin) calc(var(--s1) + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--line); transform: translateY(110%); transition: transform .35s var(--ease); }
.cta-bar.is-visible { transform: none; }
.cta-bar .btn { width: 100%; }
body.page-contact .cta-bar, body.page-ro-contact .cta-bar { display: none; }
@media (min-width: 1061px) { .cta-bar { display: none; } }

/* enquiry band: Split 6 + 1 + 5 on desktop, slow colour drift behind (transform/opacity only; off under reduced motion; paused off-screen) */
.drift { position: relative; overflow: hidden; isolation: isolate; }
.enquiry { text-align: left; }
.enquiry-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.enquiry-bg::before, .enquiry-bg::after, .drift::before { content: ""; position: absolute; border-radius: 50%; width: min(70vw, 760px); aspect-ratio: 1; will-change: transform; animation: enquiry-drift 28s ease-in-out infinite alternate; }
.enquiry-bg::before { left: -12%; top: -55%; }
.enquiry-bg::after { right: -10%; bottom: -70%; animation-duration: 34s; animation-delay: -9s; }
.drift::before { left: 38%; top: -20%; z-index: -1; width: min(50vw, 520px); animation-duration: 40s; animation-delay: -18s; }
@keyframes enquiry-drift { from { transform: translate3d(-6%, -4%, 0) scale(.95); } to { transform: translate3d(14%, 10%, 0) scale(1.1); } }
.page-head.drift .enquiry-bg::before { left: -14%; top: -8%; }
.page-head.drift .enquiry-bg::after { right: -14%; bottom: 4%; }
.page-head.drift::before { left: 34%; top: 38%; }
.drift:not(.is-live) .enquiry-bg::before, .drift:not(.is-live) .enquiry-bg::after, .drift:not(.is-live)::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .enquiry-bg::before, .enquiry-bg::after, .drift::before { animation: none; } }
.enquiry-copy .lede { max-width: 52ch; margin-bottom: 0; }
.enquiry-copy h2 { margin-bottom: var(--s1); }
@media (min-width: 1061px) { .enquiry .actions { margin-top: 0; } }

/* footer */
.site-footer { background: var(--navy-deep); color: var(--on-navy); padding: var(--s6) 0 calc(var(--s4) + env(safe-area-inset-bottom)); }
.site-footer a { color: var(--on-navy-strong); text-decoration: none; }
.site-footer .label { color: var(--on-navy-mute); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); }
.footer-about { display: grid; gap: var(--s1); align-content: start; justify-items: start; }  /* newsletter off: a short about block takes the newsletter's place (Marius 10-29: "this needs to adapt for the missing newsletter module") */
.footer-about .label, .footer-about .footer-title { margin: 0; }
.footer-about-line { margin: 0 0 var(--s1); max-width: 32ch; color: var(--on-navy); }
.footer-title { font-size: var(--t-h3); color: var(--paper); max-width: 16ch; }
.plain, .site-footer nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.site-footer input { background: var(--on-navy-field); border-color: var(--on-navy-field-line); color: var(--paper); }
.site-footer .fineprint { color: var(--on-navy-mute); }
.footer-base { display: flex; flex-direction: column; gap: var(--s0); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--on-navy-line); font-size: var(--t-sm); color: var(--on-navy-mute); }
@media (min-width: 720px) { .footer-base { flex-direction: row; justify-content: space-between; } }
.footer-base p { margin: 0; }
.credit a { border-bottom: 1px solid var(--accent); }

/* private preview gate */
.private-page { min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at 70% 20%, var(--brand-50), var(--paper) 60%); }
.gate { width: 100%; padding: var(--margin); }
.gate-card { max-width: 560px; margin: 0 auto; }
.gate-mark { color: var(--brand); display: block; margin-bottom: var(--s3); }
.gate-mark svg { width: 56px; height: 56px; }
.gate-form { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); }
@media (min-width: 720px) { .gate-form { flex-direction: row; } }
.gate-input { border-radius: 999px; padding: var(--s1) var(--s2); flex: 1; }
.gate-error { color: var(--err); margin-top: var(--s1); font-size: var(--t-sm); }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cascade-body > * { transform: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Learn sits on a lavender band so her two sections read as two */
.programmes.learn { background: var(--paper-2); }

/* ── Motion layer (2026-09-29): Lenis, word reveals, image masks, parallax, Learn index, 3D books ── */

/* Lenis (from lenis/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Headlines rise in word by word (words wrapped by site.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .14em .16em .06em; margin: 0 -.14em -.16em -.06em; }
/* once a word has landed, stop clipping so italic overhangs (see more) never get cut */
.is-in .w { overflow: visible; transition: overflow 0s 1.6s; transition-behavior: allow-discrete; }
.wi { display: inline-block; transform: translateY(108%); transition: transform .95s var(--ease); transition-delay: calc(var(--wi, 0) * 45ms); }
.is-in .wi { transform: none; }
.js .reveal.split { opacity: 1; transform: none; }

/* Images unveil with a clip mask */
.parallax-frame { display: block; overflow: hidden; border-radius: var(--radius); }
.parallax-frame img { display: block; width: 100%; transform: scale(1.12); will-change: transform; }
.js .hero-figure.reveal { opacity: 1; transform: none; }
.js .hero-figure .parallax-frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1) .2s; }
.js .hero-figure.is-in .parallax-frame { clip-path: inset(0 0 0 0); }
.js .hero-figure figcaption { opacity: 0; transition: opacity .6s var(--ease) 1.1s; }
.js .hero-figure.is-in figcaption { opacity: 1; }

/* Proof numbers stagger */
.js .proof-row.reveal { opacity: 1; transform: none; }
.js .proof-row li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .proof-row.is-in li { opacity: 1; transform: none; }
.js .proof-row.is-in li:nth-child(2) { transition-delay: .08s; } .js .proof-row.is-in li:nth-child(3) { transition-delay: .16s; } .js .proof-row.is-in li:nth-child(4) { transition-delay: .24s; }

/* Learn: an editorial index, different from the Projects cascade. A row is a component (number / title / excerpt / arrow), stacked below 720px. */
.learn .wrap { position: relative; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: none; }
.index-row { border-bottom: 1px solid var(--line); }
.js .index-row.reveal { transition-delay: calc(var(--i, 1) * 70ms); }
.index-link { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; grid-template-areas: "num thumb" "title thumb" "excerpt excerpt"; gap: var(--s0) var(--s2); align-items: baseline; padding: var(--s3) 0; color: var(--ink); text-decoration: none; position: relative; }
.index-num { grid-area: num; font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .14em; color: var(--stone); }
.index-title { grid-area: title; font: 400 var(--t-h3)/var(--lh-head) var(--serif); transition: transform .5s var(--ease), color .3s var(--ease); }
.index-excerpt { grid-area: excerpt; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-lead); }
.index-arrow { display: none; font-size: var(--t-lg); color: var(--brand); justify-self: end; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.index-thumb { display: block; grid-area: thumb; width: 72px; height: 88px; object-fit: cover; border-radius: 8px; align-self: center; }
.index-float { display: none; }
@media (min-width: 720px) {
  .index-link { grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1fr) 2rem; grid-template-areas: none; gap: var(--gutter); padding: var(--s3) var(--s0); }
  .index-num, .index-title, .index-excerpt { grid-area: auto; }
  .index-arrow { display: block; }
  .index-thumb { display: none; }
  .js .index-float { display: block; opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .js .index-arrow { transform: translateX(-8px); opacity: 0; }
  .index-link:hover .index-title { transform: translateX(12px); color: var(--brand); }
  .index-link:hover .index-arrow { transform: none; opacity: 1; }
  .index:hover .index-link:not(:hover) { opacity: .45; }
  .index-link { transition: opacity .3s var(--ease); }
}
.index-float { position: absolute; top: 0; left: 0; width: 240px; aspect-ratio: 4 / 5; pointer-events: none; z-index: 5; border-radius: 10px; overflow: hidden; transform: translate3d(0, 0, 0) scale(.85) rotate(-4deg); transition: opacity .35s var(--ease), scale .4s var(--ease); will-change: transform; box-shadow: 0 30px 60px -30px rgb(var(--navy-rgb) / .45); }
.index-float img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.index-float-num { position: absolute; inset: 0; display: none; place-items: center; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: var(--paper); font: 400 7em/1 var(--serif); letter-spacing: -.02em; }
.index-float.no-img img { display: none; }
.index-float.no-img .index-float-num { display: grid; }
.js .index-float.is-on { opacity: 1; }

/* 3D books: cover, purple spine, page edges; twirl in, then sway; face the reader on hover */
.book3d { --bw: 260px; --bt: 22px; position: relative; display: block; width: min(100%, var(--bw)); margin: 0 auto; perspective: 1600px; }
.book-card-cover .book3d { --bw: 200px; --bt: 18px; }
.book-page-cover .book3d { --bw: 360px; --bt: 28px; }
.book3d-tilt { display: block; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.book3d-inner { position: relative; display: block; transform-style: preserve-3d; transform: rotateY(-20deg); }
.book3d-front { position: relative; display: block; width: 100%; height: auto; aspect-ratio: auto 2 / 3;   /* room is kept before the file arrives (covers run 0.62 to 0.79): the text beside it no longer jumps */ border-radius: 2px 5px 5px 2px; transform: translateZ(calc(var(--bt) / 2)); box-shadow: inset 4px 0 8px -4px var(--shade); backface-visibility: hidden; }
.book3d-spine { position: absolute; top: 0; bottom: 0; left: 0; width: var(--bt); background: linear-gradient(90deg, var(--book-deep), var(--book) 45%, var(--book-hi)); transform: translateX(calc(var(--bt) / -2)) rotateY(-90deg); border-radius: 3px 0 0 3px; }
.book3d-pages { position: absolute; top: 4px; bottom: 4px; right: 0; width: calc(var(--bt) - 4px); background: repeating-linear-gradient(90deg, var(--page-a) 0 2px, var(--page-b) 2px 3px); transform: translateX(calc((var(--bt) - 4px) / 2)) rotateY(90deg); }
.book3d-back { position: absolute; inset: 0; background: linear-gradient(135deg, var(--book-back), var(--book-deep)); border-radius: 5px 2px 2px 5px; transform: translateZ(calc(var(--bt) / -2)) rotateY(180deg); }
.book3d-shadow { position: absolute; left: 12%; right: 6%; bottom: -26px; height: 26px; background: radial-gradient(closest-side, rgb(var(--navy-rgb) / .32), transparent); filter: blur(6px); transition: transform .8s var(--ease), opacity .8s var(--ease); }
/* opacity lives on the outer .book3d: opacity on a preserve-3d element flattens it (the back face then paints over the cover) */
.js .book3d { opacity: 0; }
.js .book3d .book3d-inner { transform: rotateY(-62deg) translateY(24px); }
.js .is-in .book3d, .js .book3d.is-in { animation: book-fade .6s ease-out both; }
.js .is-in .book3d .book3d-inner, .js .book3d.is-in .book3d-inner { animation: book-twirl 1.3s cubic-bezier(.2, .8, .2, 1) both, book-sway 7s ease-in-out 1.3s infinite alternate; }
@keyframes book-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes book-twirl { from { transform: rotateY(-62deg) translateY(24px); } to { transform: rotateY(-20deg) translateY(0); } }
@keyframes book-sway { from { transform: rotateY(-20deg) translateY(0); } to { transform: rotateY(-12deg) translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .book-card:hover .book3d-tilt, .book-cover:hover .book3d-tilt, .book-page-cover:hover .book3d-tilt { transform: rotateY(22deg) translateY(-6px); }
  .book-card:hover .book3d-shadow, .book-cover:hover .book3d-shadow { transform: scale(.9); opacity: .7; }
}
.book3d.is-mockup { perspective: none; }   /* the cover file is itself a rendered 3D book (Marius 10-29: "3d element looks awkward"): show it as is, with a soft shadow and a small lift, not a second 3D on top */
.book3d.is-mockup .book3d-spine, .book3d.is-mockup .book3d-pages, .book3d.is-mockup .book3d-back { display: none; }
.js .book3d.is-mockup .book3d-inner, .js .is-in .book3d.is-mockup .book3d-inner, .js .book3d.is-mockup.is-in .book3d-inner { animation: none !important; transform: none !important; }
.book3d.is-mockup img.book3d-front { transform: none !important; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 20px rgb(var(--navy-rgb) / .38)); }
@media (hover: hover) and (pointer: fine) { .book-card:hover .book3d.is-mockup .book3d-tilt, .book-cover:hover .book3d.is-mockup .book3d-tilt, .book-page-cover:hover .book3d.is-mockup .book3d-tilt { transform: translateY(-6px); } }
.book-card-cover { perspective: none; }
.book-card-cover img.book3d-front { max-height: none; box-shadow: inset 4px 0 8px -4px var(--shade); transform: translateZ(calc(var(--bt) / 2)); }
.book-page-cover img.book3d-front { max-width: none; margin: 0; box-shadow: inset 4px 0 8px -4px var(--shade); }

@media (prefers-reduced-motion: reduce) {
  .wi { transform: none !important; transition: none !important; }
  .js .hero-figure .parallax-frame { clip-path: none; }
  .parallax-frame img { transform: none !important; }
  .js .book3d, .js .is-in .book3d { opacity: 1 !important; animation: none !important; }
  .js .book3d .book3d-inner, .js .is-in .book3d .book3d-inner { animation: none !important; transform: rotateY(-20deg) !important; }
  .index-float { display: none; }
}

/* Hero copy paints immediately (it is the LCP element): a short CSS fade from 1% opacity, not the scroll reveal.
   Chrome skips opacity:0 elements as LCP candidates, so starting at .01 counts the paint from the first frame. */
.js .hero-copy .reveal { opacity: 1; transform: none; transition: none; animation: hero-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-copy .reveal:nth-child(2) { animation-delay: .06s; } .js .hero-copy .reveal:nth-child(3) { animation-delay: .14s; }
@keyframes hero-in { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero-copy .reveal { animation: none; } }

/* ── Navy / bronze components (2026-10-25). Everything here sits on the light base; navy/bronze are accents. ───────────────────────────── */
.brand-mark { width: 38px; height: 40px; object-fit: contain; border-radius: 0; }

/* hero: main's layout; the portrait gets a thin bronze frame (a rule, not a fill) */
/* the hero text comes from the Ghost page home-hero and is styled by element: h2 = the headline (it carries the italic keyword and the gold rule), p = the lede.
   The name block (home-portrait: p > strong = the name, serif step; ul = the roles, small step, one per line) sits in the text column between the headline and the lede; the accreditation label alone is under the portrait. */
.hero-text > :is(h1, h2) { font-size: var(--t-h1); }
.home-page .hero-text > :is(h1, h2) em { font-style: normal; text-decoration: none; color: var(--bronze-rule); }  /* Gabriela 10-29: the hero's key words are bronze, not italic or underlined (--bronze-rule: 3.7:1 on paper, enough for large text) */
.hero-text { display: flex; flex-direction: column; }
.hero-name { margin: 0 0 var(--s2); }  /* the name and roles sit between the headline and the lede (Marius 10-28: "on the same row with the text as we had it") */
.hero-text > p { margin: 0; font-size: var(--t-lede); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--measure); }
/* Hero layout: the original Split (text 6 columns | portrait 5, 1 empty), the portrait where it always was. Marius 10-28: "the hero h1 2 rows only", then "the text should have been smaller so it goes on 2 lines - not shift the author image".
   From 1061px the headline is sized to its box, not the box to the headline: the box is 7 columns (it may run into the empty column; the lede and buttons stay on 6), and the size is that width / (headline length x k), capped at --t-h1 and floored at --t-h3 (a longer headline takes a third row). The one-line script after the hero writes the length (--hl, characters) on .hero.
   k = half a line (em per character: Fraunces ~.40 for English, ~.33 for Romanian) plus a word's worth of slack, so the headline holds two rows at every width from 1061 to 1920 (EN 54 characters, RO 100: checked every 20px).
   Below 1061px (one column): a headline over 60 characters (.is-long) takes .75 x --t-h1; three rows (EN) / four (RO) at 390 are accepted. */
.hero-copy { container-type: inline-size; }
.home-page .hero.is-long .hero-text > :is(h1, h2) { font-size: calc(var(--t-h1) * .75); }
@media (min-width: 1061px) {
  .home-page .hero { --k: .235; }
  .home-page:lang(ro) .hero { --k: .2; --hl0: 100; }  /* --hl0: the Romanian headline's length when the script has not run */
  .home-page .hero .hero-text > :is(h1, h2), .home-page .hero.is-long .hero-text > :is(h1, h2) { --w7: calc((7 * 100cqi + var(--gutter)) / 6); width: var(--w7); font-size: max(var(--t-h3), min(var(--t-h1), calc(var(--w7) / (var(--hl, var(--hl0, 54)) * var(--k))))); }
}
.hero-name > p { margin: 0; }
.hero-name strong { font: 400 var(--t-lg)/var(--lh-head) var(--serif); color: var(--navy); letter-spacing: -.005em; }
.hero-name > ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--stone); }
.hero-photo { display: block; position: relative; }
.hero-photo::before { content: ""; position: absolute; inset: var(--s2) calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s2); border: 2px solid var(--bronze-rule); border-radius: var(--radius); pointer-events: none; }
.hero-figure .parallax-frame { position: relative; background: var(--white); }
.hero-figure { margin-right: var(--s2); }
@media (min-width: 1061px) { .hero-figure { margin-right: 0; } }

/* projects: tick list, client logos (the six challenges are the bento, a Cards variant in @layouts) */
.projects .section-head { margin-bottom: var(--s3); }
/* client logos: one cluster, no tiles */
.clients { margin-bottom: var(--s5); }
.clients-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s2); justify-items: start; align-items: center; }  /* phones: 3 up, left-aligned (a component internal) */
.clients-row li { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
@media (min-width: 720px) { .clients-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); } .clients-row li { justify-content: center; } }
.clients-row img { display: block; height: auto; border-radius: 0; opacity: .85; transition: opacity .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .clients-row li:hover img { opacity: 1; } }
@media (min-width: 1061px) { .clients-row { justify-content: space-between; } }

/* arts: plates on the page, soft shadows */
.arts { overflow: clip; }
.plates--teaser { position: relative; aspect-ratio: 1 / .92; max-width: 32.5rem; }
.plates--teaser .plate { position: absolute; height: auto; border-radius: 0; filter: drop-shadow(0 20px 22px rgb(var(--navy-rgb) / .26)); transition: transform .8s var(--ease); }
.plates--teaser .p1 { width: 52%; left: 0; top: 2%; transform: rotate(-5deg); }
.plates--teaser .p2 { width: 72%; right: 0; top: 14%; transform: rotate(4deg); }
.plates--teaser .p3 { width: 72%; left: 14%; bottom: 0; transform: rotate(-2.5deg); }
@media (hover: hover) and (pointer: fine) { .arts-grid:hover .p1 { transform: rotate(-7deg) translate(-6px, -4px); } .arts-grid:hover .p2 { transform: rotate(6deg) translate(6px, -2px); } .arts-grid:hover .p3 { transform: rotate(-1deg) translate(0, 6px); } }
@media (min-width: 1061px) { .plates--teaser { max-width: none; } }
.arts-head { padding-top: var(--s5); }
/* the Arts statement (below the plates wall): the h2 and the bold line on 8 centred columns, then two text columns 2-6 / 7-11 (placed by structure: intro p, h2, h2 + p, closing p; below 1061px one column in that reading order). One body size in the block: --t-lede. */
.arts-page .plates-wall { padding-bottom: 0; }
.arts-statement { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--section); padding-bottom: var(--section); }
.arts-statement > :is(p, h2) { margin: 0; }
.arts-statement > h2 { order: 1; font-size: var(--t-h2); }
.arts-statement > h2 + p { order: 2; }
.arts-statement > p:first-child { order: 3; }
.arts-statement > p:last-child { order: 4; }
.arts-statement p { font-size: var(--t-lede); line-height: var(--lh-lead); color: var(--ink); text-wrap: pretty; }
@media (min-width: 1061px) {
  .arts-statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
  .arts-statement > h2 { grid-column: 3 / span 8; grid-row: 1; text-align: center; margin-bottom: var(--s2); }
  .arts-statement > h2 + p { grid-column: 3 / span 8; grid-row: 2; text-align: center; margin-bottom: var(--s4); }
  .arts-statement > p:first-child { grid-column: 2 / span 5; grid-row: 3; }
  .arts-statement > p:last-child { grid-column: 7 / span 5; grid-row: 3; }
}
/* the plates wall: a collage on 6 columns (a component), one plate per row below 1061px */
.plates-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); align-items: center; padding-block: var(--s2) var(--s5); }
.plate-card { margin: 0 auto; max-width: 32rem; }
.plate-card:nth-child(1) { max-width: 18.75rem; }
.plate-card img { width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 18px 20px rgb(var(--navy-rgb) / .24)); transition: transform .6s var(--ease); }
@media (min-width: 1061px) {
  .plates-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plate-card { margin: 0; max-width: none; }
  .plate-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; max-width: none; }
  .plate-card:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
  .plate-card:nth-child(3) { grid-column: 5 / span 2; grid-row: 1; }
  .plate-card:nth-child(4) { grid-column: 3 / span 4; grid-row: 2; }
  .plate-card:nth-child(5) { grid-column: 1 / span 3; grid-row: 3; }
  .plate-card:nth-child(6) { grid-column: 4 / span 3; grid-row: 3; }
}
@media (hover: hover) and (pointer: fine) { .plate-card:hover img { transform: rotate(-1.5deg) translateY(-6px) scale(1.02); } }

/* about: light cards, a bronze or navy rule on top (checkerboard), navy headings. The two columns are a Split 6/6 of cards. */
.about-portrait { margin: 0; max-width: 21.25rem; }
.about-portrait img { aspect-ratio: 1 / 1.02; object-fit: cover; width: 100%; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.about-portrait figcaption { margin: var(--s1) 0 0; }
@media (min-width: 1061px) { .about-portrait { max-width: none; } }
.about-top { padding-top: var(--s5); padding-bottom: var(--s4); }
.about-blocks { gap: var(--gutter); align-items: stretch; padding-bottom: var(--section); }
.about-col { display: flex; flex-direction: column; gap: var(--gutter); }
.about-col > :last-child { flex: 1; }
.about-block { border-radius: 14px; padding: var(--s3); background: var(--white); color: var(--ink); border: 1px solid var(--line); border-top: 5px solid var(--bronze-rule); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.about-block.navy { border-top-color: var(--navy); }
.about-block h2 { font: 400 var(--t-h3)/var(--lh-head) var(--serif); letter-spacing: -.01em; margin: 0 0 var(--s2); color: var(--navy); }
.about-block p { margin: 0 0 var(--s1); font-size: var(--t-base); line-height: var(--lh-body); }
.about-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.about-block li { position: relative; padding-left: 1.3em; font-size: var(--t-base); line-height: var(--lh-body); }
.about-block li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--bronze-rule); }
.about-block.navy li::before { background: var(--navy); }
.about-block a { color: var(--navy); text-underline-offset: .22em; }
.about-block .book-line { font-family: var(--serif); font-size: var(--t-lg); line-height: var(--lh-lead); }
@media (hover: hover) and (pointer: fine) { .about-block:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(var(--navy-rgb) / .5); } }
.gh-content .about-block ul { padding-left: 0; }

/* AI Ready Leadership: the two presenters */
.with-people { margin: 0 0 var(--s4); }
.with-people .label { margin-bottom: var(--s1); }
.with-people ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.with-people li { display: grid; gap: var(--s-1); align-content: start; }
.with-people li + li { margin-top: 0; }  /* .prose li + li adds a gap between list items: here the items are side by side, so the second photo sat lower than the first */
.with-people img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; border-radius: 14px; margin-bottom: var(--s0); background: var(--white); }
.with-people strong { font: 400 var(--t-lg)/var(--lh-head) var(--serif); color: var(--navy); }
.with-people span { color: var(--stone); font-size: var(--t-sm); line-height: var(--lh-lead); }

/* enquiry band: main's light drift band, with navy / bronze glows */
.enquiry-bg::before { background: radial-gradient(closest-side, rgb(var(--navy-rgb) / .16), transparent); }
.enquiry-bg::after { background: radial-gradient(closest-side, var(--glow-b), transparent); }
.drift::before { background: radial-gradient(closest-side, var(--glow-c), transparent); }

/* footer: the one dark band (navy, like main's dark footer); bronze button, #262626 text on it */
/* Direction 2026-10-27 ("gold only for lines and details, never big fills"): the subscribe button is a gold outline with white text (gold on navy 6.7:1, white on navy 15.5:1); states: a gold wash on hover, a stronger one pressed, a gold focus ring */
.site-footer .btn { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--bronze); transition: background-color .25s var(--ease); }
.site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer input:focus-visible { outline-color: var(--bronze); }
@media (hover: hover) and (pointer: fine) { .site-footer .btn:hover { background: var(--bronze-wash); } }
.site-footer .btn:active { background: var(--bronze-wash-2); }
.site-footer { background: var(--navy); }
.hero-figure figcaption { margin-top: calc(var(--s2) + var(--s1)); }  /* clears the frame, which hangs --s2 below the photo */

/* ── The homepage, both languages (2026-10-27: the /home-b/ edit pass Marius picked, now the real home; one template for EN and RO since round 7). Everything is scoped to .home-page (the wrapper in home.hbs, both languages), so no other page moves. Same tokens and the three layouts; no new size or spacing.
   Seven sections, one heading pattern (.label + h2.display-l, label→heading s1, heading→text s2, head→content s4), one gap between sections (--section),
   two backgrounds (cream, and one navy band for Trends), gold only in the bento and the hero's underline. ── */
.home-page section { padding-block: 0 var(--section); }  /* one gap between sections: the bottom padding; the navy band pads both sides */
.home-page .hero { padding-top: var(--s4); }
.home-page .section-head { margin-bottom: var(--s4); }
.home-page .section-head > :last-child { margin-bottom: 0; }
.home-page .section-head .lede { margin-bottom: 0; }
.home-page .section-head h2 + .lede { margin-top: 0; }
.home-page h2 em { text-decoration: none; }  /* the italic keyword stays; its gold rule is the hero's only */
.home-page .link-arrow { background-image: linear-gradient(currentColor, currentColor); }
.home-page .hero-photo::before { border-color: var(--navy); }

/* 2 proof: heading, the logos, then the four stats in a hairline strip */
.home-page .proof { border: 0; }
.home-page .clients { margin-bottom: var(--s4); }
.home-page .proof-row { border-block: 1px solid var(--line); }

/* 3 what she does: the Projects index. The Ghost page home-projects is flat HTML (p.label, h2, p, ul, ol, p). Without JS it is one clean column: Text width, the six challenges as numbered rows between hairlines.
   With JS (site.js: .is-index) it is an editorial index: on desktop the head and one outlined numeral are sticky on 5 columns, one column empty, the rows on 6; the row being read is full ink with a gold rule across its top, the others
   sit back at opacity .7 (never a second colour). ONE body style in the whole section: Inter --t-lede, --ink (lede, ticks, rows, closing line). */
@media (min-width: 1061px) { .home-page .projects-text:not(.is-index) > :is(.label, h2, p, ul, ol) { max-width: var(--text-w); } }
.home-page .projects-text :is(p:not(.label), li) { font-size: var(--t-lede); line-height: var(--lh-lead); color: var(--ink); text-wrap: pretty; }
.home-page .projects-text :is(h2 + p, .pj-intro > p) { margin: 0 0 var(--s2); }
.home-page .projects-text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.home-page .projects-text ul > li { position: relative; padding-left: 1.4em; }
.home-page .projects-text ul > li::before { content: ""; position: absolute; left: .1em; top: .55em; width: .55em; height: .3em; border: solid var(--navy); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.home-page .projects-text > ol, .home-page .projects-text.is-index > ol { list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: pj; }
.home-page .projects-text ol > li { counter-increment: pj; position: relative; padding-block: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.home-page .projects-text ol > li:last-child { border-bottom: 1px solid var(--line); }
.home-page .projects-text ol > li::before { content: counter(pj, decimal-leading-zero); display: block; font: 500 var(--t-eyebrow)/var(--lh-body) var(--sans); letter-spacing: .14em; color: var(--stone); margin-bottom: var(--s1); font-variant-numeric: tabular-nums; }
.home-page .projects-text ol > li::after { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--bronze-rule); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.home-page .projects-text > ol + p { margin: var(--s4) 0 0; max-width: 40ch; }
.home-page .projects-text.is-index > ol > li { opacity: .7; transition: opacity .5s var(--ease); }
.home-page .projects-text.is-index > ol > li.is-active { opacity: 1; }
.home-page .projects-text.is-index > ol > li.is-active::after { transform: scaleX(1); }
.home-page .projects-text.is-index > ol > li.is-active::before { color: var(--ink); }
/* the numeral: decoration (aria-hidden), built by site.js */
.home-page .pj-num { display: flex; align-items: baseline; gap: var(--s1); }  /* "/ 06" sits on the numeral's baseline */
.home-page .pj-num-win { display: block; height: 1em; padding-right: .06em; margin-right: -.055em; overflow: hidden; font: 300 calc(var(--t-h1) * 1.5)/1 var(--serif-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.04em; }
.home-page .pj-num-track { display: block; transition: transform .8s var(--ease); transform: translateY(calc(var(--i, 0) * -1em)); }
.home-page .pj-num-track span { display: block; height: 1em; color: transparent; -webkit-text-stroke: 1.5px var(--bronze-rule); }
.home-page .pj-num-of { font: 500 var(--t-eyebrow)/var(--lh-body) var(--sans); letter-spacing: .14em; color: var(--stone); }
/* below 1061px: one column, the numeral is a slim sticky counter between the intro and the rows (the rows' own numbers are hidden: the counter says which one) */
.home-page .projects-text.is-index { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-page .pj-aside { display: contents; }
.home-page .pj-aside > .label { order: 1; }
.home-page .pj-aside > h2 { order: 2; }
.home-page .pj-intro { order: 3; margin-top: 0; }
.home-page .pj-num { order: 4; position: sticky; top: var(--header-h); z-index: 2; margin-top: var(--s4); padding-block: var(--s0); background: var(--paper); }
.home-page .pj-num::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--s3); background: linear-gradient(var(--paper), transparent); pointer-events: none; }  /* rows scroll under the strip: no half-cut glyphs right under it */
.home-page .projects-text.is-index > ol { order: 5; margin-top: 0; }
.home-page .projects-text.is-index > ol > li::before { display: none; }
.home-page .projects-text.is-index > p { order: 6; }
@media (min-width: 1061px) {
  .home-page .projects-text.is-index { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .home-page .pj-aside { display: block; grid-column: 1 / span 5; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s4)); }
  .home-page .pj-intro, .home-page .projects-text.is-index > ol, .home-page .projects-text.is-index > p { grid-column: 7 / -1; }
  .home-page .pj-num { position: static; margin-top: var(--s4); padding-block: 0; background: none; }
  .home-page .pj-num::after { display: none; }
  .home-page .pj-num-win { font-size: calc(var(--t-h1) * 4); }
  .home-page .projects-text.is-index > ol { margin-top: var(--s4); }
  .home-page .projects-text.is-index > ol > li::before { display: block; }
}
@media (prefers-reduced-motion: reduce) { .home-page .pj-num-track, .home-page .projects-text ol > li, .home-page .projects-text ol > li::after { transition: none; } }

/* 4 Trends: the one navy band */
.home-page .band-navy { padding-block: var(--section); background: var(--navy); color: var(--on-navy); }
.home-page .band-navy .label { color: var(--on-navy-mute); }
.home-page .band-navy h2 { color: var(--white); }
.home-page .band-navy + section { padding-top: var(--section); }

/* 5 the book banner: a full-width band, the garden photo (a stand-in: it comes tinted purple; the untinted original is on the README's request list) under a navy wash that is strongest on the text side; the 3D book on the right, above the text on phones */
.home-page section[id] { scroll-margin-top: 4.5rem; }   /* old Webflow anchors (#about #books #contact) land below the sticky header */
.home-page .book-banner + section { padding-top: var(--section); }
.home-page .book-banner { position: relative; isolation: isolate; padding-block: var(--section); background: var(--navy); color: var(--on-navy); }
.home-page .book-banner::before, .home-page .book-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-page .book-banner::before { background: url("../images/book-banner/garden.webp") 60% 50% / cover no-repeat; filter: hue-rotate(-24deg) saturate(.8); }
.home-page .book-banner::after { background: linear-gradient(to bottom, rgb(var(--navy-rgb) / .3), rgb(var(--navy-rgb) / .92) 62%); }
.home-page .book-banner p.label { color: var(--on-navy-mute); font-size: var(--t-eyebrow); line-height: var(--lh-lead); }
.home-page .book-banner h2 { color: var(--white); }
.home-page .book-banner :is(p, .pull) { color: var(--white); line-height: var(--lh-lead); }
.home-page .book-banner :is(p, .pull) { font-size: var(--t-lede); }  /* one body size in the block (type_styles counts the pull and the p together), so the banner's serif .pull takes the lede step too */
.home-page .book-banner .pull { border-left-color: var(--on-navy-mute); }
.home-page .book-banner .btn { background: var(--white); color: var(--navy); }
.home-page .book-banner a:focus-visible { outline-color: var(--on-navy-strong); }
.home-page .book-banner .link-arrow { color: var(--white); }
.home-page .book-banner .link-arrow::after { color: inherit; }
@media (hover: hover) and (pointer: fine) { .home-page .book-banner .btn:hover { background: var(--on-navy-strong); } }
.home-page .book-banner .book-cover { max-width: none; }
@media (min-width: 1061px) {
  .home-page .book-banner::after { background: linear-gradient(to right, rgb(var(--navy-rgb) / .94), rgb(var(--navy-rgb) / .82) 42%, rgb(var(--navy-rgb) / .2)); }
  .home-page .book-banner .book-copy { grid-column: 1 / span 6; grid-row: 1; }
  .home-page .book-banner .book-cover { grid-column: 8 / span 5; grid-row: 1; }
}

/* 7 quote: on the Text layout, no card, no shadow; one navy bar for the quotes and who said them */
.home-page .quote-set { margin: 0; padding-left: var(--s2); border-left: 2px solid var(--navy); }
.home-page .quote-set blockquote { margin: 0 0 var(--s3); font: 400 var(--t-h3)/var(--lh-lead) var(--serif); color: var(--navy); }
.home-page .quote-set blockquote p { margin: 0; }
.home-page .quote-set > p { margin: 0; font: 500 var(--t-eyebrow)/var(--lh-lead) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }  /* who said them: the label style */

/* 9 contact: the "gaps" question is the heading; the buttons sit under the intro (text → button s3) */
.home-page .contact-b .section-head { margin-bottom: 0; }
.home-page .contact-b .section-head > p:not(.label) { font-size: var(--t-lede); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--measure); }
.home-page .contact-b .actions { margin-top: var(--s3); }
/* the shared chrome on this page too (header progress line, footer): no gold; focus rings are visible on navy (Iris) */
.home-page .band-navy a:focus-visible { outline-color: var(--on-navy-strong); }
body:has(.home-page) .progress span { background: var(--navy); }
body:has(.home-page) .site-footer .btn { box-shadow: inset 0 0 0 1.5px var(--on-navy-mute); }
body:has(.home-page) .site-footer a:focus-visible, body:has(.home-page) .site-footer button:focus-visible, body:has(.home-page) .site-footer input:focus-visible { outline-color: var(--on-navy-strong); }
body:has(.home-page) .site-footer .credit a { border-bottom-color: var(--on-navy-mute); }
@media (hover: hover) and (pointer: fine) { body:has(.home-page) .site-footer .btn:hover { background: var(--on-navy-field); } }
body:has(.home-page) .site-footer .btn:active { background: var(--on-navy-line); }