/* core/assets/site/site.css */
/*
 * Skarphed site template: base styles for every public page.
 * Colours, fonts, corners and width come from the theme as CSS variables
 * (Core\Site\Theme): --c-bg --c-surface --c-text --c-muted --c-line --c-accent
 * --c-accent-text --c-accent-ink (the accent as readable text) --c-dark --c-dark-text
 * --font-heading --font-body --radius --width.
 * Each block adds its own block.css after this.
 */
:root { --gutter: clamp(1.1rem, 4vw, 2rem); --space: clamp(3.2rem, 7vw, 5.5rem); color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.site { margin: 0; background: var(--c-bg); color: var(--c-text); font: 1.0625rem/1.65 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--c-accent-ink, var(--c-accent)); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0.5rem; z-index: 60; background: var(--c-text); color: var(--c-bg); padding: 0.6rem 1rem; border-radius: var(--radius); }
.skip:focus { left: 0.5rem; }

.wrap { width: 100%; max-width: calc(var(--width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.wrap-mid { max-width: calc(62rem + 2 * var(--gutter)); }

/* sections: every block is one, with the background and spacing chosen in the editor */
.b { padding-block: calc(var(--space) / 2); }
.b.sp-large { padding-block: var(--space); }
.b.sp-small { padding-block: calc(var(--space) / 4); }
.b.sp-none { padding-block: 0; }
main > .b:first-child:not(.bg-soft):not(.bg-dark):not(.bg-accent):not(.b-hero):not(.b-header):not([class*="post-head-"]) { padding-top: var(--space); }
main > .b:last-child { padding-bottom: var(--space); }
.bg-soft { background: var(--c-surface); }
.bg-dark { background: var(--c-dark); color: var(--c-dark-text); }
.bg-accent { background: var(--c-accent); color: var(--c-accent-text); }
.bg-soft, .bg-dark, .bg-accent { padding-block: calc(var(--space) * 0.8); }
.bg-dark a:not(.btn):not(.head-cta), .bg-accent a:not(.btn):not(.head-cta) { color: inherit; }
.b + .b.bg-soft, .b.bg-soft + .b { margin-top: 0; }

.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-ink, var(--c-accent)); margin: 0 0 0.8rem; }
.bg-dark .eyebrow, .bg-accent .eyebrow { color: inherit; opacity: 0.8; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.28rem); line-height: 1.55; color: var(--c-muted); }
.bg-dark .lead, .bg-accent .lead { color: inherit; opacity: 0.88; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.section-head .lead { margin: 0; }

.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }
.prose h3 { margin-top: 1.6em; }
.checks { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.55rem; }
.checks li { position: relative; padding-left: 1.9rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--c-accent); }
.checks li::after { content: ""; position: absolute; left: 0.42rem; top: 0.48em; width: 0.32rem; height: 0.6rem; border: solid var(--c-accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.65rem 1.35rem; border-radius: var(--radius); border: 2px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-text); font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 3.3rem; padding-inline: 1.7rem; font-size: 1.05rem; }
.btn-sm { min-height: 2.4rem; padding: 0.4rem 1rem; font-size: 0.95rem; }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn-ghost:hover { border-color: currentColor; }
.btn-dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-dark-text); }

/* header */
.site-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-line); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
/* Settings › Website › When scrolling: sticky (stays), reveal (slides away going down, back going up; site.js), static */
.head-static { position: relative; }
.site-head.is-away { transform: translateY(-101%); }
.site-head.is-stuck:not(.is-away) { box-shadow: 0 10px 30px color-mix(in srgb, var(--c-text) 7%, transparent); }
/* over a hero (Hero › Over the header): transparent at the top, a solid bar once the page has moved on */
.site-head.is-solid { position: fixed; top: 0; left: 0; right: 0; }
.head-sticky.is-solid { animation: head-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes head-in { from { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } .head-sticky.is-solid { animation: none; } }
.site-head-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.3rem; }
.site-brand { font: 700 1.25rem/1.1 var(--font-heading); color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 0.9rem; min-width: 0; }
.site-logo { display: block; width: auto; max-width: min(60vw, 320px); object-fit: contain; align-self: center; }
.site-tagline { font: 500 0.75rem/1.2 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; }
/* sub-pages: a dropdown under their main page (hover, keyboard focus, or the small arrow button for touch) */
/* every main page laid out the same way, so they sit on one line whatever size the theme gives the menu */
.site-nav > ul > li { display: flex; align-items: center; }
.site-nav li.has-subs { position: relative; gap: 0.15rem; }
.sub-toggle { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--c-text); cursor: pointer; }
.sub-toggle svg { transition: transform .15s; }
.sub-toggle:hover { color: var(--c-accent-ink, var(--c-accent)); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav ul.site-subnav { position: absolute; top: 100%; left: -1.1rem; z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: 0; min-width: 14rem; margin: 0; padding: 0.55rem 0;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.site-nav ul.site-subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem; }   /* keeps the hover across the gap */
.site-nav li.has-subs:hover > .site-subnav, .site-nav li.has-subs:focus-within > .site-subnav, .site-nav li.has-subs.is-open > .site-subnav { display: flex; }
.site-nav li.has-subs.is-shut:not(.is-open) > .site-subnav { display: none; }   /* Escape: shut though focus is on the main page */
.site-nav .site-subnav li { display: block; }
.site-nav .site-subnav a:not(.btn):not(.head-cta) { display: block; padding: 0.5rem 1.1rem; border-bottom: 0; white-space: nowrap; }
.site-nav .site-subnav li.is-deep a:not(.btn):not(.head-cta) { padding-left: 2rem; font-size: 0.95em; }
.site-nav .site-subnav a[aria-current="page"] { color: var(--c-accent-ink, var(--c-accent)); }
.site-nav a:not(.btn):not(.head-cta) { color: var(--c-text); text-decoration: none; font-weight: 500; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):not(.head-cta)[aria-current="page"], .site-nav a:not(.btn):not(.head-cta).is-in { border-bottom-color: var(--c-accent); }   /* (as strong as the rule above, or it loses) */
.site-nav a:not(.btn):not(.head-cta):hover { color: var(--c-accent-ink, var(--c-accent)); }
.nav-toggle { display: none; }

/* the bar (System › Design › Menu › The bar): line (above), plain, soft or dark – dark sets the colours anew inside it */
.head-bar-plain { border-bottom-color: transparent; }
.head-bar-soft { background: color-mix(in srgb, var(--c-text) 5%, var(--c-bg)); border-bottom-color: transparent; }
.head-bar-dark {
  --c-text: var(--c-dark-text); --c-muted: color-mix(in srgb, var(--c-dark-text) 72%, transparent);
  --c-line: color-mix(in srgb, var(--c-dark-text) 22%, transparent); --c-bg: var(--c-dark); --c-accent-ink: var(--c-accent);
  background: var(--c-dark); border-bottom-color: transparent; color: var(--c-text);
}
@media (min-width: 861px) {
  /* logo in the middle (System › Design › Menu › Logo and menu): the menu under it; with the full-screen menu, the tools on the right */
  .head-center:not(.has-full-menu) .site-head-in { flex-direction: column; justify-content: center; gap: 0.35rem; padding-block: 1rem 0.5rem; }
  .head-center:not(.has-full-menu) .site-nav { flex-wrap: wrap; justify-content: center; }
  .head-center.has-full-menu .site-head-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .head-center.has-full-menu .site-brand { grid-column: 2; }
  .head-center.has-full-menu .site-head-tools { grid-column: 3; justify-self: end; }
  /* the page you are on (System › Design › Menu): a line (above), a dot, the accent colour or a soft pill */
  .mark-dot .site-nav > ul > li > a { position: relative; }
  .mark-dot .site-nav > ul > li > a:not(.head-cta)[aria-current="page"], .mark-dot .site-nav > ul > li > a:not(.head-cta).is-in,
  .mark-color .site-nav > ul > li > a:not(.head-cta)[aria-current="page"], .mark-color .site-nav > ul > li > a:not(.head-cta).is-in { border-bottom-color: transparent; }
  .mark-dot .site-nav > ul > li > a[aria-current="page"]::after, .mark-dot .site-nav > ul > li > a.is-in::after {
    content: ""; position: absolute; left: 50%; bottom: -0.3rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c-accent); }
  .mark-color .site-nav > ul > li > a[aria-current="page"], .mark-color .site-nav > ul > li > a.is-in { color: var(--c-accent-ink, var(--c-accent)); }
  .mark-pill .site-nav > ul { gap: 0.35rem; }
  .mark-pill .site-nav > ul > li > a:not(.btn):not(.head-cta) { padding: 0.4rem 0.85rem; border-bottom: 0; border-radius: 999px; }
  .mark-pill .site-nav > ul > li.has-subs > a:not(.btn):not(.head-cta) { padding-right: 0.45rem; }
  .mark-pill .site-nav > ul > li > a[aria-current="page"], .mark-pill .site-nav > ul > li > a.is-in { background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
  .mark-pill .site-nav > ul > li > a:not(.btn):not(.head-cta):hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
}
@media (max-width: 860px) {
  .nav-toggle { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: transparent; color: var(--c-text); cursor: pointer; }
  .nav-toggle span[aria-hidden], .nav-toggle span[aria-hidden]::before, .nav-toggle span[aria-hidden]::after { display: block; width: 1.25rem; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
  .nav-toggle span[aria-hidden]::before, .nav-toggle span[aria-hidden]::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span[aria-hidden]::before { top: -6px; } .nav-toggle span[aria-hidden]::after { top: 6px; }
  .nav-open .nav-toggle span[aria-hidden] { background: transparent; }
  .nav-open .nav-toggle span[aria-hidden]::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle span[aria-hidden]::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.3rem; background: var(--c-bg); border-bottom: 1px solid var(--c-line); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
  .nav-open .site-nav { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav > ul > li, .site-nav li.has-subs { display: block; }
  .sub-toggle { display: none; }
  .site-nav ul.site-subnav { position: static; display: flex; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .site-nav ul.site-subnav::before { display: none; }
  .site-nav li.is-sub { display: block; margin-left: 0.4rem; padding-left: 1rem; border-left: 1.5px solid var(--c-line); }
  .site-nav .site-subnav li.is-deep a:not(.btn):not(.head-cta) { padding-left: 0; }
  .site-nav li.is-deep { margin-left: 1.4rem; }
  .site-nav li.is-sub a:not(.btn):not(.head-cta) { padding: 0.55rem 0; font-size: 0.95em; }
  .site-nav li.is-sub a[aria-current="page"] { color: var(--c-accent-ink); }
  .site-nav a:not(.btn):not(.head-cta), .site-nav a:not(.btn):not(.head-cta)[aria-current="page"], .site-nav a:not(.btn):not(.head-cta).is-in { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--c-line); }
  .site-nav-btn { margin-top: 1rem; justify-content: space-between; }
  .site-tagline { display: none; }
}

/* the full-screen menu (Settings › Website › Menu: Full screen) */
.has-full-menu .site-head-in { min-height: 5.5rem; }
.site-head-tools { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.8rem); }
/* the button in the header (Settings › Website › Button in the menu): its words, and an arrow in an accent square */
.head-cta { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--c-text); text-decoration: none; font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.head-cta-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); background: var(--c-accent); color: var(--c-accent-text); transition: background .2s, color .2s; }
.head-cta-icon svg { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.head-cta:hover, .head-cta:focus-visible { color: var(--c-text); text-decoration: none; }
.head-cta:hover .head-cta-icon svg, .head-cta:focus-visible .head-cta-icon svg { transform: translateX(3px); }
.head-cta:hover .head-cta-label { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.site-head-tools .head-cta-icon { width: 3.4rem; height: 3.4rem; }
.menu-btn { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0; border: 0; background: none; color: var(--c-text); cursor: pointer; font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; }
.menu-btn-icon { width: 3.4rem; height: 3.4rem; border-radius: var(--radius); background: var(--c-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .15s; }
.menu-btn-icon i { display: block; width: 1.25rem; height: 2px; background: var(--c-dark-text); transition: transform .2s, width .2s; }
.menu-btn-icon i + i { width: 0.75rem; margin-left: 0.5rem; background: var(--c-accent); }
.menu-btn:hover .menu-btn-icon i + i { width: 1.25rem; margin-left: 0; }
.menu-btn.is-close { color: var(--c-dark-text); }
.menu-btn.is-close .menu-btn-icon { background: var(--c-accent); }
.menu-btn.is-close .menu-btn-icon i { position: absolute; width: 1.3rem; margin: 0; background: var(--c-dark); }
.menu-btn.is-close .menu-btn-icon { position: relative; }
.menu-btn.is-close .menu-btn-icon i:first-child { transform: rotate(45deg); }
.menu-btn.is-close .menu-btn-icon i + i { transform: rotate(-45deg); }
.fs-menu { position: fixed; inset: 0; z-index: 80; background: var(--c-dark); color: var(--c-dark-text); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
.nav-open .fs-menu { visibility: visible; opacity: 1; transition: opacity .25s; }
.nav-open:has(.fs-menu) { overflow: hidden; }
.fs-menu .site-brand, .fs-menu .site-brand .site-name { color: #fff; }
.fs-menu .site-tagline { color: color-mix(in srgb, var(--c-dark-text) 62%, transparent); }
.fs-menu .site-logo { filter: none; }
.fs-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; position: relative; z-index: 1; }
.fs-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding-top: clamp(1.5rem, 5vh, 4rem); padding-bottom: 4rem; align-items: start; }
.fs-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fs-nav a { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 1.8rem); color: var(--c-dark-text); text-decoration: none; padding: 0.2rem 0; transform: translateY(0.6rem); opacity: 0; transition: transform .45s, opacity .45s; }
.nav-open .fs-nav a { transform: none; opacity: 1; }
.fs-nav li:nth-child(2) a { transition-delay: .04s; } .fs-nav li:nth-child(3) a { transition-delay: .08s; } .fs-nav li:nth-child(4) a { transition-delay: .12s; } .fs-nav li:nth-child(5) a { transition-delay: .16s; } .fs-nav li:nth-child(n+6) a { transition-delay: .2s; }
.fs-n { font: 600 0.85rem/1 var(--font-body); color: color-mix(in srgb, var(--c-dark-text) 60%, transparent); min-width: 1.8rem; }
.fs-word { font: 300 clamp(2.6rem, 6.4vw, 5.4rem)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.fs-nav a:hover .fs-word, .fs-nav a:focus-visible .fs-word, .fs-nav a[aria-current="page"] .fs-word, .fs-nav a.is-in .fs-word { color: var(--c-accent); font-style: italic; }
.fs-nav a:hover .fs-n, .fs-nav a[aria-current="page"] .fs-n, .fs-nav a.is-in .fs-n { color: var(--c-accent); }
/* sub-pages: under their main page, along a thin line that starts below the word */
.fs-subs { list-style: none; margin: 0.15rem 0 0.9rem calc(1.8rem + clamp(1rem, 2.5vw, 1.8rem)); padding: 0.1rem 0 0.1rem clamp(1rem, 2vw, 1.5rem); border-left: 1.5px solid color-mix(in srgb, var(--c-dark-text) 22%, transparent); display: flex; flex-direction: column; gap: 0.1rem; transition: border-color .2s; }
.fs-nav .fs-subs a { position: relative; display: block; padding: 0.22rem 0; font: 300 clamp(1.25rem, 2.1vw, 1.7rem)/1.2 var(--font-heading); letter-spacing: -0.01em; color: color-mix(in srgb, var(--c-dark-text) 78%, transparent); }
.fs-nav .fs-subs a::before { content: ""; position: absolute; left: calc(-1 * clamp(1rem, 2vw, 1.5rem) - 1px); top: 0.3rem; bottom: 0.3rem; width: 1.5px; background: var(--c-accent); transform: scaleY(0); transition: transform .25s; }
.fs-nav .fs-subs a:hover, .fs-nav .fs-subs a:focus-visible, .fs-nav .fs-subs a[aria-current="page"] { color: var(--c-accent); font-style: italic; }
.fs-nav .fs-subs a:hover::before, .fs-nav .fs-subs a:focus-visible::before, .fs-nav .fs-subs a[aria-current="page"]::before { transform: none; }
.fs-subs .is-deep a { padding-left: 1.1rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.fs-nav li.has-subs:hover > .fs-subs, .fs-nav li.has-subs.is-open > .fs-subs { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
.fs-side { display: flex; flex-direction: column; gap: 2.4rem; padding-top: 0.6rem; max-width: 22rem; }
.fs-photo { position: relative; margin: 0 0 1.4rem 2.6rem; }
.fs-photo img { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); }
.fs-photo figcaption { position: absolute; right: -1.4rem; bottom: -1.4rem; max-width: 80%; background: var(--c-bg); color: var(--c-text); padding: 0.9rem 1.2rem; font: 400 1.05rem/1.3 var(--font-heading); }
.fs-dots, .foot-rings, .fs-rings, .fs-rings-clip { pointer-events: none; }
.fs-dots { position: absolute; left: -2.6rem; top: -2.4rem; width: 8rem; height: 6.6rem; color: var(--c-accent); background-image: radial-gradient(circle, currentColor 2.2px, transparent 2.6px); background-size: 22px 22px; }
.fs-contact { display: flex; flex-direction: column; gap: 0.35rem; }
.fs-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--c-dark-text) 62%, transparent); margin-bottom: 0.2rem; }
.fs-contact a, .fs-social a { color: var(--c-dark-text); text-decoration: none; }
.fs-contact a:hover, .fs-social a:hover { color: var(--c-accent); }
.fs-mail { font-size: 1.25rem; }
.fs-social { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-weight: 500; font-size: 0.92rem; }
.fs-social a { display: inline-flex; align-items: center; gap: 0.45rem; }
.fs-social.is-icons { gap: 0.6rem 1rem; }
/* the rings run off the screen's corner: a fixed layer the size of the screen cuts them off, so the menu never scrolls sideways or below its content */
.fs-rings-clip { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.fs-rings { position: absolute; right: -11rem; bottom: -13rem; width: 40rem; height: 40rem; }
.fs-rings i, .foot-rings i { position: absolute; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.fs-rings i:nth-child(1) { inset: 0; opacity: 0.35; }
.fs-rings i:nth-child(2) { inset: 6.25rem; opacity: 0.55; }
.fs-rings i:nth-child(3) { inset: 12.5rem; }
@media (max-width: 860px) {
  .fs-body { grid-template-columns: minmax(0, 1fr); }
  .fs-photo { display: none; }
  .menu-btn-label { display: none; }
  .site-head-tools .head-cta { gap: 0; }
  .site-head-tools .head-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .fs-nav a { transform: none; opacity: 1; } }

/* footer */
.site-foot { font-size: 0.95rem; color: var(--c-muted); }
.site-foot a:not(.btn):not(.head-cta) { color: inherit; }
.foot-cta { position: relative; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1.2rem; padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); }
.foot-cta-label { margin: 0; display: flex; align-items: center; gap: 1.1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text); }
.foot-cta-label::after { content: ""; width: 7.5rem; height: 1px; background: currentColor; }
.foot-cta-text { margin: 0; max-width: 56rem; font: 300 clamp(2.6rem, 6vw, 5.5rem)/1.02 var(--font-heading); letter-spacing: -0.02em; color: var(--c-text); text-wrap: balance; }
.foot-cta-text em { color: var(--c-accent); }
.foot-cta-btns { justify-content: flex-end; margin-top: 0.6rem; }
.foot-rings { position: absolute; left: 4%; top: 3.5rem; width: 16rem; height: 16rem; }
.foot-rings i:nth-child(1) { inset: 0; }
.foot-rings i:nth-child(2) { inset: 3.75rem; opacity: 0.55; }
.foot-main { border-top: 1px solid var(--c-line); padding-top: clamp(2.8rem, 6vw, 4rem); padding-bottom: 1.6rem; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-bottom: clamp(2.4rem, 5vw, 3.5rem); }
.foot-about { display: flex; flex-direction: column; gap: 0.9rem; max-width: 22rem; }
.foot-about p { margin: 0; }
.foot-name { font: 400 1.75rem/1.1 var(--font-heading); color: var(--c-text); }
.foot-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; }
/* (a footer override from before 1.3.0 writes .foot-social without is-…: it keeps the round icons) */
.foot-social.is-icons a, .foot-social:not([class*="is-"]) a { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-text); }
.foot-social.is-icons a:hover, .foot-social:not([class*="is-"]) a:hover { border-color: var(--c-accent); color: var(--c-accent-ink, var(--c-accent)); }
.foot-social.is-both, .foot-social.is-names { gap: 0.6rem 1.4rem; }
.foot-social.is-both a, .foot-social.is-names a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--c-text); text-decoration: none; font-weight: 500; font-size: 0.92rem; }
.foot-social.is-both a:hover, .foot-social.is-names a:hover { color: var(--c-accent-ink, var(--c-accent)); }
.foot-col { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.foot-col b { color: var(--c-text); font-weight: 600; margin-bottom: 0.35rem; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: var(--c-accent-ink, var(--c-accent)); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); font-size: 0.85rem; }

/* footer layouts (System › Design › Footer › Layout): columns (above), centered, minimal (one line), bigname */
.foot-center { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.5rem); }
.foot-center .foot-name { font-size: clamp(2rem, 5vw, 3rem); }
.foot-text { margin: 0; max-width: 34rem; }
.foot-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.foot-inline a { text-decoration: none; }
.foot-inline a:hover { color: var(--c-accent-ink, var(--c-accent)); }
.foot-center .foot-social { justify-content: center; }
.foot-centered .foot-bottom { justify-content: center; text-align: center; }
.foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; margin-bottom: 1.6rem; }
.foot-line .foot-name { margin-right: auto; font-size: 1.4rem; }
.foot-line .foot-inline { justify-content: flex-start; }
.foot-line .foot-social { margin: 0; }
.foot-minimal .foot-main { padding-top: 1.9rem; }
.foot-bottom .foot-reach { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.foot-bottom .foot-reach a { text-decoration: none; }
.foot-giant { margin: 0 0 clamp(1rem, 2vw, 1.6rem); font: 400 clamp(3.2rem, 14vw, 12rem)/0.88 var(--font-heading); letter-spacing: -0.04em; color: var(--c-text); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .foot-line { flex-direction: column; align-items: flex-start; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; }
  .foot-rings { display: none; }
}

/* decoration (Section › Decoration; the site's own in System › Design – Core\Site\Deco) */
.has-deco { position: relative; overflow-x: clip; }
.has-deco > :not(.deco) { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; pointer-events: none; color: var(--c-accent);
  --edge: max(0.25rem, calc((100% - var(--width)) / 2 + var(--gutter) - 4rem)); --frame: max(0.75rem, calc((100% - var(--width)) / 2 + var(--gutter) - 1.6rem)); }
.deco-c-text { color: var(--c-text); }
.bg-dark .deco-c-text { color: var(--c-dark-text); }
.bg-accent .deco { color: var(--c-accent-text); }
.deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the shapes */
.deco-dots { width: 12.4rem; height: 8.25rem; opacity: 0.8; background-image: radial-gradient(circle, currentColor 2.2px, transparent 2.6px); background-size: 22px 22px; }
.deco-rings { width: 16rem; height: 16rem; }
.deco-rings i { position: absolute; border-radius: 50%; border: 1.5px solid currentColor; }
.deco-rings i:first-child { inset: 0; }
.deco-rings i + i { inset: 3.75rem; opacity: 0.55; }
.deco-wave { width: 15rem; height: 2.6rem; }
.deco-wave svg, .deco-loop svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.deco-crosses { width: 12rem; height: 8rem; opacity: 0.75; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 8v8M8 12h8' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 24px 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 8v8M8 12h8' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 24px 24px; }
.deco-half { width: 16rem; height: 8rem; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 16rem 16rem 0 0; }
.deco-arch { width: 9rem; height: 13rem; border-radius: 9rem 9rem 0 0; background: currentColor; opacity: 0.16; }
.deco-blob { width: 15rem; height: 13.5rem; opacity: 0.16; }
.deco-blob svg, .deco-brush svg { fill: currentColor; }
.deco-brush { width: 17rem; height: 5.2rem; opacity: 0.8; }
.deco-loop { width: 13rem; height: 13rem; }
/* where: a corner, or the middle of a side */
.deco-top-left { top: 1.5rem; left: var(--edge); transform-origin: top left; }
.deco-top-right { top: 1.5rem; right: var(--edge); transform-origin: top right; }
.deco-bottom-left { bottom: 1.5rem; left: var(--edge); transform-origin: bottom left; }
.deco-bottom-right { bottom: 1.5rem; right: var(--edge); transform-origin: bottom right; }
.deco-top { top: 1.5rem; left: 50%; translate: -50% 0; transform-origin: top center; }
.deco-bottom { bottom: 1.5rem; left: 50%; translate: -50% 0; transform-origin: bottom center; }
.deco-left { top: 50%; left: var(--edge); translate: 0 -50%; transform-origin: center left; }
.deco-right { top: 50%; right: var(--edge); translate: 0 -50%; transform-origin: center right; }
.deco-rings.deco-top-left, .deco-rings.deco-top-right, .deco-rings.deco-top, .deco-half.deco-top-left, .deco-half.deco-top-right, .deco-half.deco-top { top: -4rem; }
.deco-rings.deco-bottom-left, .deco-rings.deco-bottom-right, .deco-rings.deco-bottom { bottom: -4rem; }
.deco-half.deco-bottom-left, .deco-half.deco-bottom-right, .deco-half.deco-bottom { bottom: 0; }
.deco-arch.deco-bottom-left, .deco-arch.deco-bottom-right, .deco-arch.deco-bottom { bottom: 0; }
.deco-dots + .deco-rings { margin: 2rem; }
/* size */
.deco-s { scale: 0.62; }
.deco-l { scale: 1.45; }
/* around the content, over the background */
.deco-frame { inset: clamp(0.8rem, 2.5vw, 1.6rem) var(--frame); border: 1px solid currentColor; opacity: 0.55; }
.deco-brackets { inset: clamp(0.8rem, 2.5vw, 1.6rem) var(--frame); --b: 1.5px; --l: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(currentColor, currentColor) top left / var(--l) var(--b), linear-gradient(currentColor, currentColor) top left / var(--b) var(--l),
    linear-gradient(currentColor, currentColor) top right / var(--l) var(--b), linear-gradient(currentColor, currentColor) top right / var(--b) var(--l),
    linear-gradient(currentColor, currentColor) bottom left / var(--l) var(--b), linear-gradient(currentColor, currentColor) bottom left / var(--b) var(--l),
    linear-gradient(currentColor, currentColor) bottom right / var(--l) var(--b), linear-gradient(currentColor, currentColor) bottom right / var(--b) var(--l);
  background-repeat: no-repeat; }
.deco-texture { inset: 0; opacity: 0.12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bg-dark .deco-texture { mix-blend-mode: screen; opacity: 0.1; filter: invert(1); }
/* tape (site.js puts two strips on the section's first image) */
.tape-host { position: relative; }
.deco-tape { position: absolute; z-index: 3; top: -0.9rem; width: min(28%, 7.5rem); height: 1.9rem; pointer-events: none;
  background: color-mix(in srgb, var(--c-surface, #f4f1ea) 80%, transparent);
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--c-line) 35%, transparent) 3px 4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); }
.deco-tape-a { left: -1.2rem; rotate: -34deg; }
.deco-tape-b { right: -1.2rem; rotate: 30deg; }
@media (max-width: 700px) {
  .deco:not(.deco-texture) { display: none; }
  .deco-tape { width: 4.5rem; height: 1.4rem; }
}

/* holding, 404, maintenance */
.sk-holding { min-height: 55vh; display: flex; align-items: center; }
.sk-holding h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); overflow-wrap: anywhere; }

/* previews */
.sk-note { position: sticky; top: 0; z-index: 50; background: #ffd84d; color: #222; text-align: center; font: 600 0.9rem/1.4 system-ui, sans-serif; padding: 0.5rem 1rem; }
.is-preview .sk-note + .site-head { top: 2.3rem; }
.sk-empty, .sk-error { margin: 0; padding: 1.4rem; border: 2px dashed var(--c-line); border-radius: var(--radius); color: var(--c-muted); text-align: center; font: 0.95rem/1.4 system-ui, sans-serif; }
.sk-error { border-color: #d33; color: #b00; }
[data-block].is-sel { outline: 3px solid #4d8dff; outline-offset: -3px; }
.is-preview [data-block] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* search (Settings › Features › Site search) */
.sk-search { margin: 0; }
.sk-search-box { position: relative; display: flex; gap: .5rem; }
.sk-search-input { flex: 1; min-width: 0; min-height: 3rem; padding: .7rem 1rem; border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 1.05rem; }
.sk-search-input:focus { outline: 3px solid color-mix(in srgb, var(--c-accent) 45%, transparent); outline-offset: 1px; border-color: var(--c-accent); }
.sk-search-btn { flex: none; }
.sk-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.sk-suggest-item { padding: .55rem .75rem; border-radius: calc(var(--radius) * .6); cursor: pointer; }
.sk-suggest-item:hover, .sk-suggest-item[aria-selected="true"] { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.sk-search-page h1 { margin-bottom: 1.2rem; }
.sk-search-count { margin: 1.4rem 0 .4rem; color: color-mix(in srgb, var(--c-text) 70%, transparent); }
.sk-results { list-style: none; margin: 0; padding: 0; }
.sk-result { padding: 1.1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.sk-result-title { display: inline-block; font: 600 1.2rem/1.3 var(--font-heading); color: var(--c-accent); text-decoration: none; }
.sk-result-title:hover { text-decoration: underline; }
.sk-result-path { display: block; font-size: .85rem; color: color-mix(in srgb, var(--c-text) 60%, transparent); }
.sk-result-text { margin: .35rem 0 0; }
.sk-result-text mark { background: color-mix(in srgb, var(--c-accent) 22%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; }
.sk-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.site-nav-search { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--c-text); }
.site-nav-search:hover { color: var(--c-accent); background: color-mix(in srgb, var(--c-text) 6%, transparent); }
/* social links in the menu bar (Settings › Website › Social media): is-icons, is-both or is-names */
.head-social { display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; gap: 0.1rem; }
.head-social:not(.is-icons) { gap: 0.4rem 1.2rem; }
.head-social a, .site-nav .head-social a:not(.btn):not(.head-cta) { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border-bottom: 0; color: var(--c-text); text-decoration: none; font-weight: 500; font-size: 0.92rem; }
.head-social.is-icons a, .site-nav .head-social.is-icons a:not(.btn):not(.head-cta) { justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.head-social a:hover, .site-nav .head-social a:not(.btn):not(.head-cta):hover { color: var(--c-accent-ink, var(--c-accent)); }
.head-social.is-icons a:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
@media (max-width: 860px) {
  .site-nav .head-social { flex-wrap: wrap; padding-top: 0.9rem; }
  .site-nav .head-social.is-icons { margin-left: -0.6rem; }
}

/* images that open big (blocks with "Enlarge on click") */
a.zoom { display: block; cursor: zoom-in; }
.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 12, 0.94); display: grid; place-items: center; padding: clamp(0.5rem, 4vw, 3.5rem); cursor: zoom-out; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 100%; max-height: 100%; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 7rem); object-fit: contain; cursor: default; border-radius: 4px; }
.lightbox figcaption { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; text-align: center; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 1rem; transform: none; } }

/* a dev copy (skarp-site dev) */
.sk-stage { background: repeating-linear-gradient(-45deg, #ffcf3f, #ffcf3f 14px, #ffd95e 14px, #ffd95e 28px); color: #1b1b19; text-align: center; font: 700 0.82rem/1.4 system-ui, sans-serif; letter-spacing: 0.02em; padding: 0.35rem 1rem; }
.sk-stage a { color: inherit; }

/* "Billede på vej": where a block's image isn't chosen yet (Renderer::imgOr / placeholder) */
.sk-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; aspect-ratio: 4 / 3; padding: 1rem; border-radius: var(--radius); text-align: center;
  color: color-mix(in srgb, var(--c-text) 52%, transparent); font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
  background-color: color-mix(in srgb, var(--c-text) 6%, var(--c-bg));
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--c-text) 4%, transparent) 14px 15px); }
.sk-ph svg { opacity: 0.7; }
.bg-dark .sk-ph { color: color-mix(in srgb, var(--c-dark-text) 60%, transparent); background-color: color-mix(in srgb, var(--c-dark-text) 8%, var(--c-dark)); }
.ov-photo .sk-ph, .col-frame .sk-ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.ti-media.fit-square .sk-ph { aspect-ratio: 1; }
.card-img .sk-ph { aspect-ratio: 16 / 10; border-radius: 0; }
.cards-plain .card-img .sk-ph { border-radius: var(--radius); }
.img-full .sk-ph { aspect-ratio: 21 / 9; border-radius: 0; }

/* signed in to the control panel in this browser (site.js): the way back */
.fs-panel { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--c-dark-text) 18%, transparent); }
.fs-panel a { color: var(--c-dark-text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; }
.fs-panel a::after { content: "→"; color: var(--c-accent); transition: transform .2s; }
.fs-panel a:hover { color: var(--c-accent); }
.fs-panel a:hover::after { transform: translateX(3px); }
.site-nav li.is-panel a { font-size: 0.85rem; color: var(--c-muted); }

/* site/blocks/overlap/block.css */
/* Overlap: twelve columns; the image and the panel share two of them */
.ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.ov-photo, .ov-panel { grid-row: 1; min-width: 0; }
.ov-photo { position: relative; }
.ov-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.ov-heading { font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 0.5em; }
.ov-heading em { color: var(--c-accent); }
.ov-body { max-width: 34rem; color: var(--c-muted); }
.ov-quote { margin: 1.8rem 0 0; max-width: 32rem; font: italic 300 clamp(1.4rem, 2.3vw, 1.8rem)/1.3 var(--font-heading); }
.ov .btns { margin-top: 2rem; }

/* light: the image on one side, a see-through panel over its edge */
.ov-light .ov-photo { aspect-ratio: 4 / 3; min-height: 26rem; }
.ov-light .ov-panel { position: relative; z-index: 2; align-self: end; margin-bottom: clamp(-3rem, -4vw, -1.5rem); padding: clamp(1.8rem, 4vw, 3.5rem); background: color-mix(in srgb, var(--c-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ov-light.ov-img-right .ov-photo { grid-column: 5 / 13; }
.ov-light.ov-img-right .ov-panel { grid-column: 1 / 7; }
.ov-light.ov-img-left .ov-photo { grid-column: 1 / 9; }
.ov-light.ov-img-left .ov-panel { grid-column: 7 / 13; }
.ov-light .ov-body { color: var(--c-muted); max-width: none; }

/* dark: a dark panel, the image over its edge */
.ov-dark .ov-photo { z-index: 2; aspect-ratio: 4 / 5; }
.ov-dark .ov-panel { background: var(--c-dark); color: var(--c-dark-text); padding-block: clamp(3rem, 7vw, 6rem); }
.ov-dark .ov-body { color: color-mix(in srgb, var(--c-dark-text) 80%, transparent); }
.ov-dark .ov-quote { color: #fff; }
.ov-dark .eyebrow { color: color-mix(in srgb, var(--c-accent) 55%, #fff); }
.ov-dark a:not(.btn) { color: inherit; }
.ov-dark .btn-ghost { color: inherit; border-color: currentColor; }
.ov-dark.ov-img-left .ov-photo { grid-column: 1 / 6; }
.ov-dark.ov-img-left .ov-panel { grid-column: 4 / 13; padding-left: calc(22.2% + clamp(2rem, 5vw, 5rem)); padding-right: clamp(1.6rem, 5vw, 5rem); }
.ov-dark.ov-img-right .ov-photo { grid-column: 8 / 13; }
.ov-dark.ov-img-right .ov-panel { grid-column: 1 / 10; padding-right: calc(22.2% + clamp(2rem, 5vw, 5rem)); padding-left: clamp(1.6rem, 5vw, 5rem); }

/* without an image the panel takes the width */
.ov.no-img .ov-panel { grid-column: 1 / -1; padding-inline: clamp(1.6rem, 5vw, 5rem); margin: 0; }

/* pulled up over the block above (e.g. a hero). Only the image and the panel catch clicks: the rest of
   the block lies see-through over the hero, and its pause button must still work */
.b-overlap:has(.ov-pull) { padding-top: 0; position: relative; z-index: 3; pointer-events: none; }
.b-overlap:has(.ov-pull) .ov-photo, .b-overlap:has(.ov-pull) .ov-panel { pointer-events: auto; }
.ov-pull { margin-top: clamp(-9rem, -10vw, -4rem); }

@media (max-width: 860px) {
  .ov { display: flex; flex-direction: column; align-items: stretch; }
  .ov-light .ov-photo { min-height: 0; }
  .ov-light .ov-panel { margin: -3rem 1rem 0; padding: 1.6rem !important; align-self: stretch; }
  .ov-dark .ov-photo { margin: 0 3rem -3rem 0; aspect-ratio: 4 / 3; }
  .ov-dark .ov-panel { padding: 4.5rem 1.6rem 2.6rem !important; }
  .ov-img-left .ov-photo, .ov-img-right .ov-photo { order: 0; }
  .ov-pull { margin-top: -3rem; }
}

/* an Overlap pulled up over a hero would cover its pause button: the button moves up, just above this block */
.b-hero:has(+ .b-overlap .ov-pull) .hero-pause { bottom: calc(clamp(4rem, 10vw, 9rem) + 1.4rem); }
@media (max-width: 860px) { .b-hero:has(+ .b-overlap .ov-pull) .hero-pause { bottom: 4.4rem; } }

/* site/blocks/collage/block.css */
/* Collage: heading row, then 2–3 images that overlap (absolute in a box with a fixed shape) */
.col-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.col-head h2 { margin: 0; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1; }
.col-head h2 em { color: var(--c-accent); }
.col-more { font-weight: 600; font-size: 0.92rem; color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-accent); padding-bottom: 2px; }
.col-more:hover { color: var(--c-accent-ink, var(--c-accent)); }
.bg-dark .col-more, .bg-accent .col-more { color: inherit; }

.collage { list-style: none; margin: 0; padding: 0; position: relative; }
.col-item { position: absolute; }
.col-frame { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--c-text); text-decoration: none; }
.col-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.col-frame:hover img { transform: scale(1.03); }
.col-tag { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--c-bg); color: var(--c-text); padding: 0.9rem 1.3rem; font-size: 0.82rem; line-height: 1.3; max-width: 90%; }
.col-tag b { font-weight: 600; }
a.col-frame:hover .col-tag { color: var(--c-accent-ink, var(--c-accent)); }
.col-2 .col-tag { background: var(--c-dark); color: var(--c-dark-text); }
.col-2 a.col-frame:hover .col-tag { color: var(--c-accent); }

/* three: a big one left, one across the middle on top, one right */
.collage-3 { aspect-ratio: 16 / 9.4; }
.collage-3 .col-1 { left: 0; top: 0; width: 46%; height: 76%; }
.collage-3 .col-2 { left: 38%; top: 22%; width: 34%; height: 66%; z-index: 2; box-shadow: 0 30px 60px rgba(14, 21, 42, 0.18); }
.collage-3 .col-3 { right: 0; top: 6%; width: 30%; height: 54%; }
.collage-3 .col-3 .col-tag { left: auto; right: 0; }
/* two: side by side, the second lower and on top */
.collage-2 { aspect-ratio: 16 / 8.4; }
.collage-2 .col-1 { left: 0; top: 0; width: 58%; height: 82%; }
.collage-2 .col-2 { right: 0; top: 24%; width: 48%; height: 76%; z-index: 2; box-shadow: 0 30px 60px rgba(14, 21, 42, 0.18); }
/* one: the full width */
.collage-1 .col-item { position: relative; aspect-ratio: 16 / 7; }
.collage img { border-radius: 0; }

@media (max-width: 760px) {
  .collage-2, .collage-3 { aspect-ratio: auto; display: flex; flex-direction: column; }
  .collage .col-item { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 4 / 3; }
  .collage .col-item + .col-item { margin-top: -2rem; }
  .collage .col-1 .col-tag { top: 0; bottom: auto; }
  .collage .col-item:nth-child(even) { margin-left: 2.5rem; }
  .collage .col-item:nth-child(odd):not(:first-child) { margin-right: 2.5rem; }
  .collage .col-item:nth-child(n) { z-index: auto; }
  .collage .col-item:nth-child(2) { z-index: 2; }
  .collage-3 .col-3 .col-tag { left: 0; right: auto; }
}

/* site/blocks/band/block.css */
/* Band: a small heading, then a row of facts (with accent dots between) or logos */
.band { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.band-head { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-text); }
.bg-dark .band-head, .bg-accent .band-head { color: inherit; }
.band-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 0; }
.band-list li { display: flex; align-items: center; }
.band-item { display: inline-flex; align-items: center; color: var(--c-muted); text-decoration: none; padding-inline: clamp(1.2rem, 2.6vw, 2rem); }
.bg-dark .band-item, .bg-accent .band-item { color: inherit; }
.band-text { font: 400 clamp(1.1rem, 1.8vw, 1.4rem)/1.3 var(--font-heading); }
a.band-item:hover .band-text { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
/* a dot in the accent colour between two texts */
.band-list li:has(.band-text) + li:has(.band-text)::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); flex: none; }
.band-logo { display: block; height: clamp(1.6rem, 3vw, 2.4rem); width: auto; max-width: 9rem; object-fit: contain; transition: filter .2s, opacity .2s; }
.band-grey .band-logo { filter: grayscale(1); opacity: 0.65; }
.band-grey .band-item:hover .band-logo { filter: none; opacity: 1; }
.bg-dark .band-grey .band-logo { filter: grayscale(1) brightness(1.8); }

/* moving sideways: two copies of the row slide left; stops on hover and for less movement */
.band-scroll { align-items: stretch; }
.band-track { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.band-scroll .band-list { flex-wrap: nowrap; flex: none; justify-content: flex-start; animation: band-move var(--band-time, 40s) linear infinite; }
.band-track:hover .band-list, .band-track:focus-within .band-list { animation-play-state: paused; }
@keyframes band-move { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .band-scroll .band-list { animation: none; flex-wrap: wrap; justify-content: center; }
  .band-scroll .band-list[aria-hidden] { display: none; }
  .band-track { -webkit-mask-image: none; mask-image: none; justify-content: center; }
}
@media (max-width: 600px) {
  .band:not(.band-scroll) .band-list { flex-direction: column; gap: 0.6rem; }
  .band:not(.band-scroll) .band-list li:has(.band-text) + li:has(.band-text)::before { display: none; }
}

/* core/blocks/hero/block.css */
.b-hero { padding: 0; }
.hero { position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-in { position: relative; z-index: 1; width: 100%; }
.hero-text { max-width: 42rem; }
.align-center .hero-text { margin-inline: auto; text-align: center; }
.align-center .btns { justify-content: center; }
.hero-title { font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0.35em; overflow-wrap: anywhere; }
.hero-lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; margin: 0 0 1.6em; opacity: 0.9; }
.hero .btns { margin-top: 0; }

/* text on the image */
.hero-cover { color: #fff; background: var(--c-dark); }
.hero-cover.tone-accent { background: var(--c-accent); color: var(--c-accent-text); }
.hero-cover.tone-light { background: var(--c-surface); color: var(--c-text); }
.hero-cover .hero-in { padding-block: clamp(4rem, 10vw, 8rem); }
.hero-full { min-height: 100svh; }
.hero-large { min-height: 78svh; }
.hero-medium { min-height: 60svh; }
.hero-compact { min-height: 42svh; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-cover.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 70%); }
.hero-cover.has-img.align-center::after { background: rgba(0,0,0,.45); }
.hero-cover.has-img.tone-light::after { background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.35) 70%); }
.hero-cover.tone-dark .btn-ghost, .hero-cover.tone-accent .btn-ghost { color: inherit; border-color: currentColor; }
.hero-cover.tone-accent .btn:not(.btn-ghost) { background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg); }

/* text beside the image */
.hero-split .hero-in, .hero-plain .hero-in { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hero-split .hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-split .hero-side img { width: 100%; height: auto; border-radius: var(--radius); }
.hero-split.tone-dark, .hero-plain.tone-dark { background: var(--c-dark); color: var(--c-dark-text); }
.hero-split.tone-accent, .hero-plain.tone-accent { background: var(--c-accent); color: var(--c-accent-text); }
.hero-split.tone-accent .btn:not(.btn-ghost), .hero-plain.tone-accent .btn:not(.btn-ghost) { background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg); }
.hero-split.tone-dark .btn-ghost, .hero-plain.tone-dark .btn-ghost, .hero-split.tone-accent .btn-ghost, .hero-plain.tone-accent .btn-ghost { color: inherit; border-color: currentColor; }
@media (max-width: 860px) {
  .hero-split .hero-in { grid-template-columns: 1fr; }
  .hero-cover.has-img::after { background: rgba(0,0,0,.5); }
  .hero-cover.has-img.tone-light::after { background: rgba(255,255,255,.78); }
}

/* small text above the title, led by a short line */
.hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-accent-ink, var(--c-accent)); }
.hero-eyebrow::before { content: ""; flex: none; width: 3rem; height: 1px; background: var(--c-accent); }
.align-center .hero-eyebrow { justify-content: center; }
.hero-cover.tone-dark .hero-eyebrow, .hero-split.tone-dark .hero-eyebrow, .hero-plain.tone-dark .hero-eyebrow { color: color-mix(in srgb, var(--c-accent) 55%, #fff); }
.hero-cover.tone-accent .hero-eyebrow, .tone-accent .hero-eyebrow { color: inherit; }
.tone-accent .hero-eyebrow::before { background: currentColor; }
/* *words* in the title */
.hero-title em { color: var(--c-accent); }
.tone-accent .hero-title em { color: inherit; }
.hero-cover.tone-light .hero-title em, .hero-split:not(.tone-dark):not(.tone-accent) .hero-title em, .hero-plain:not(.tone-dark):not(.tone-accent) .hero-title em { color: var(--c-accent-ink, var(--c-accent)); }

/* a video behind the text */
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-pause { position: absolute; right: var(--gutter); bottom: 1.4rem; z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.25); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hero-pause::before { content: ""; width: 0.7rem; height: 0.85rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hero-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: transparent transparent transparent currentColor; margin-left: 0.2rem; }
.hero-pause:hover { background: rgba(0, 0, 0, 0.45); }

/* parallax: the picture is taller than the hero and moves slower than the page (block.js) */
.has-parallax .hero-media { inset: -12% 0; will-change: transform; }

/* "scroll down" along the left edge */
.hero-cue { position: absolute; left: clamp(0.6rem, 2.2vw, 2rem); top: 50%; z-index: 2; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; color: inherit; text-decoration: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
.hero-cue span { writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-cue i { width: 1px; height: 4.5rem; background: linear-gradient(currentColor, transparent); }
.hero-cue:hover { opacity: 1; color: inherit; }
.hero-after { display: block; height: 0; scroll-margin-top: 0; }

/* the header on top of the image (only when the hero is the page's first block) */
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) :is(.site-brand, .site-name, .head-cta-label, .menu-btn, .site-nav a:not(.btn):not(.head-cta), .site-nav-search) { color: #fff; }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .site-tagline { color: rgba(255, 255, 255, 0.8); }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .menu-btn-icon { background: #fff; }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .menu-btn-icon i:first-child { background: var(--c-dark); }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .sub-toggle { color: #fff; }
.site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .site-subnav a:not(.btn):not(.head-cta) { color: var(--c-text); }
main > .b-hero:first-child .hero-over .hero-in { padding-top: clamp(7rem, 14vw, 10rem); }
main > .b-hero:first-child .hero-over.has-img::before { content: ""; position: absolute; inset: 0 0 auto; height: 10rem; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); }
@media (max-width: 860px) {
  .hero-cue { display: none; }
  .site:has(main > .b-hero:first-child .hero-over) .site-head:not(.is-solid) .site-nav a:not(.btn):not(.head-cta) { color: var(--c-text); }
}
@media (prefers-reduced-motion: reduce) { .has-parallax .hero-media { inset: 0; transform: none !important; } }
@media (min-width: 861px) { .hero:has(.hero-cue) .hero-in { padding-left: calc(var(--gutter) + 3.2rem); } }

/* core/blocks/layered-hero/block.css */
/* Layered hero (core block). Colours from the theme: --c-accent, --c-text, --c-dark, --c-surface, --c-line, --c-bg;
   the light title row and the caption use --c-dark-text, or set .lh { --lh-light: …; --lh-caption: … } in theme.css.
   Positions in % of the block's width, so the composition scales with the screen.
   single:  one big square photo, the title running through it, tape, a painted stroke, a pen loop, a sprig, a moon, sun or circle, the text bottom right
   layered: the title over up to three photos laid on top of each other, a thin circle behind
   Phone (both): the title, the main photo, the text and the button, one under the other. */
.lh { --lh-light: var(--c-dark-text); --lh-caption: var(--c-dark-text); position: relative; padding-block: clamp(1rem, 3vw, 2.5rem); }
.lh-photo { position: absolute; margin: 0; }
.lh-photo .lh-img { display: block; width: 100%; object-fit: cover; }
.lh-text { position: relative; z-index: 3; }
.lh-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(3.4rem, 10.5vw, 9.6rem); line-height: 0.92;
  letter-spacing: 0.02em; text-transform: uppercase; pointer-events: none; text-wrap: nowrap; }
.lh-line { display: block; }
.lh-line-first { color: var(--lh-light); }
.lh-line-more { color: var(--c-accent); }
.lh-outline .lh-line { color: transparent; -webkit-text-stroke: 1.5px var(--lh-light); }
.lh-outline .lh-line-more { -webkit-text-stroke-color: var(--c-accent); }
/* the first row dark: readable where it leaves the photo */
.lh-first-dark .lh-line-first { color: var(--c-text); }
.lh-outline.lh-first-dark .lh-line-first { color: transparent; -webkit-text-stroke-color: var(--c-text); }
/* without outline support (very old browsers) the letters keep their colour */
@supports not (-webkit-text-stroke: 1px black) { .lh-outline .lh-line-first { color: var(--lh-light); } .lh-outline .lh-line-more { color: var(--c-accent); } }
.lh-lead { margin: 0; max-width: 19rem; font-size: 1.05rem; line-height: 1.6; }
.lh-btn { margin-top: 1.6rem; }
.lh-marks { position: absolute; inset: -22px; pointer-events: none; }
.lh-mark { position: absolute; width: 30px; height: 30px; fill: none; stroke: var(--c-accent); stroke-width: 1.2; }
.lh-mark:nth-child(1) { left: 0; top: 0; }
.lh-mark:nth-child(2) { right: 0; top: 0; }
.lh-mark:nth-child(3) { left: 0; bottom: 0; }
.lh-mark:nth-child(4) { right: 0; bottom: 0; }

/* single: one big photo */
.lh-single.has-main { aspect-ratio: 1240 / 760; }
.lh-single .lh-main { left: 31%; top: 9%; width: 36%; z-index: 1; }
.lh-single .lh-main .lh-img { aspect-ratio: 1; }
.lh-single .lh-title { padding: 2.5% 0 0 5%; line-height: 1; }
.lh-single .lh-after { position: absolute; left: 75%; top: 14%; max-width: 17rem; z-index: 3; }
.lh-shape { position: absolute; z-index: 0; aspect-ratio: 1; }
.lh-shape-moon { left: 51%; top: 30%; width: 30%; }
.lh-shape-moon svg { display: block; width: 100%; height: 100%; fill: var(--c-dark); transform: rotate(-20deg); }
.lh-shape-sun { left: 58%; top: 30%; width: 25%; border-radius: 50%; background: var(--c-accent); }
.lh-shape-ring { left: 52%; top: 20%; width: 36%; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.lh-shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* a painted stroke of the accent colour, rough-edged, behind the photo's lower corner */
.lh-shape-brush { left: 44%; top: 66%; width: 46%; aspect-ratio: 300 / 90; }
.lh-shape-brush svg { fill: var(--c-accent); opacity: 0.8; transform: rotate(-4deg); }
/* a loose pen loop around the photo, as if marked on a contact sheet */
.lh-shape-scribble { left: 27%; top: 2%; width: 44%; aspect-ratio: 1.02; z-index: 2; pointer-events: none; }
.lh-shape-scribble svg { fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linecap: round; }
/* a sprig in thin line, peeking out from behind the photo */
.lh-shape-sprig { left: 60%; top: 30%; width: 13%; aspect-ratio: 120 / 230; }
.lh-shape-sprig svg { fill: none; stroke: var(--c-text); stroke-width: 1.2; stroke-linejoin: round; transform: rotate(14deg); transform-origin: 50% 100%; }
/* tape: the photo a little crooked, held by two strips of paper tape */
.lh-main.is-taped { transform: rotate(-2deg); }
.lh-tape { position: absolute; top: -16px; width: 28%; height: 34px; z-index: 2;
  background: color-mix(in srgb, var(--c-surface) 78%, transparent);
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--c-line) 35%, transparent) 3px 4px);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-text) 12%, transparent); clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); }
.lh-tape-a { left: -7%; transform: rotate(-38deg); top: 2%; }
.lh-tape-b { right: -7%; transform: rotate(32deg); top: 3%; }

/* layered: three photos */
.lh-layered.has-main { aspect-ratio: 1240 / 720; }
.lh-layered .lh-img { aspect-ratio: 4 / 5; }
.lh-layered .lh-main { left: 26.6%; top: 7%; width: 38%; z-index: 1; }
.lh-layered .lh-second { left: 59.7%; top: 46%; width: 23.4%; z-index: 2; box-shadow: 0 0 0 clamp(6px, 0.8vw, 11px) var(--c-bg); }
.lh-layered .lh-small { left: 82.5%; top: 0; width: 15.3%; }
.lh-second figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem; color: var(--lh-caption);
  font: italic 400 clamp(1rem, 1.5vw, 1.3rem)/1.3 var(--font-heading); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.lh-ring { position: absolute; left: 51.6%; top: 17%; width: 35.5%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.lh-layered .lh-line-more:nth-child(2) { padding-left: 0.4em; }
.lh-layered .lh-after { margin-top: clamp(1.5rem, 3vw, 3rem); }

@media (max-width: 760px) {
  .lh.has-main { aspect-ratio: auto; }
  .lh { display: flex; flex-direction: column; overflow-x: clip; }
  .lh-text { display: contents; }
  .lh-title { order: 1; text-wrap: wrap; }
  .lh-single .lh-title { padding: 0; }
  .lh .lh-main { order: 2; position: relative; left: auto; top: auto; width: auto; margin: 1.8rem 22px 0; }
  .lh .lh-after { order: 4; position: static; margin-top: 1.8rem; }
  .lh-second, .lh-small, .lh-ring { display: none; }
  .lh-shape { order: 3; position: relative; left: auto; top: auto; align-self: flex-end; width: 40%; margin: -24% -2% 0 0; }
  .lh-shape-scribble { display: none; }
  .lh-shape-sprig { width: 20%; margin: -38% 4% 0 0; z-index: 2; }
  .lh .lh-main { z-index: 1; }
  .lh-line-first { color: var(--c-text); }
  .lh-outline .lh-line-first { -webkit-text-stroke-color: var(--c-text); }
}

/* core/blocks/header/block.css */
.b-header { padding-top: clamp(3rem, 7vw, 5.5rem); }
.header-in { max-width: calc(46rem + 2 * var(--gutter)); }
.header-in.align-center { text-align: center; margin-inline: auto; }
.header-title { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.4em; overflow-wrap: anywhere; }
.header-in .lead { margin: 0; }
.header-media { margin-top: clamp(2rem, 5vw, 3.5rem); }
.header-media img { width: 100%; height: auto; border-radius: var(--radius); }

/* split: the title on the left, the text on the right, over a line */
.header-in.header-split { max-width: calc(var(--width) + 2 * var(--gutter)); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.header-split .header-title { margin: 0; }
.header-split .lead { padding-top: 1.2rem; border-top: 1px solid var(--c-line); }
@media (max-width: 860px) { .header-in.header-split { grid-template-columns: 1fr; gap: 1.2rem; } }

/* core/blocks/text/block.css */
.b-text .align-center { text-align: center; }
.b-text .align-center .prose ul, .b-text .align-center .prose ol { text-align: left; display: inline-block; }

/* two columns (wide text, big screens) and a big first letter */
@media (min-width: 861px) { .prose-cols { column-count: 2; column-gap: clamp(2rem, 5vw, 4rem); } .prose-cols > * { break-inside: avoid-column; } .prose-cols h3 { break-after: avoid-column; } }
.prose-dropcap > p:first-child::first-letter { float: left; margin: 0.06em 0.12em 0 0; font: 400 3.4em/0.82 var(--font-heading); color: var(--c-accent); }
.bg-accent .prose-dropcap > p:first-child::first-letter { color: inherit; }
.b-text .align-center .prose-dropcap > p:first-child::first-letter { float: none; font-size: 2.2em; margin: 0; vertical-align: -0.1em; }

/* core/blocks/textimage/block.css */
.ti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ti.no-img { grid-template-columns: minmax(0, 46rem); }
.ti.side-left .ti-media { order: -1; }
.ti-media { margin: 0; }
.ti-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.ti-media.fit-square img { aspect-ratio: 1; object-fit: cover; }
.ti-media.fit-wide img { aspect-ratio: 4 / 3; object-fit: cover; }
.ti-media.fit-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) {
  .ti { grid-template-columns: 1fr; }
  .ti.side-left .ti-media { order: 0; }
}

/* looks (Text and image › Look) */
/* overlap: the image takes most of the row, the text sits on a panel over its edge */
.ti.look-overlap { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
.ti.look-overlap .ti-media { grid-column: 5 / 13; grid-row: 1; }
.ti.look-overlap .ti-text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 1; background: var(--c-surface); padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius); }
.ti.look-overlap.side-left .ti-media { grid-column: 1 / 9; order: 0; }
.ti.look-overlap.side-left .ti-text { grid-column: 7 / 13; }
.bg-soft .ti.look-overlap .ti-text { background: var(--c-bg); }
.bg-dark .ti.look-overlap .ti-text { background: color-mix(in srgb, var(--c-dark-text) 8%, var(--c-dark)); }
.bg-accent .ti.look-overlap .ti-text { background: color-mix(in srgb, var(--c-accent-text) 10%, var(--c-accent)); }
/* framed: a thin frame in the accent colour, set off behind the image */
.ti.look-framed .ti-media { position: relative; margin: 0 1.1rem 1.1rem 0; }
.ti.look-framed.side-left .ti-media { margin: 0 0 1.1rem 1.1rem; }
.ti.look-framed .ti-media::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 1.5px solid var(--c-accent); border-radius: var(--radius); pointer-events: none; }
.ti.look-framed.side-left .ti-media::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
.ti.look-framed .ti-media img { position: relative; }
/* bleed: the image runs out to the edge of the screen on its side */
.b-textimage:has(.look-bleed) { overflow-x: clip; }
.ti.look-bleed { --out: calc((100vw - min(100vw, var(--width) + 2 * var(--gutter))) / 2 + var(--gutter)); }
.ti.look-bleed .ti-media { margin-right: calc(-1 * var(--out)); }
.ti.look-bleed .ti-media img { border-radius: var(--radius) 0 0 var(--radius); }
.ti.look-bleed.side-left .ti-media { margin-right: 0; margin-left: calc(-1 * var(--out)); }
.ti.look-bleed.side-left .ti-media img { border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 860px) {
  .ti.look-overlap { grid-template-columns: 1fr; }
  .ti.look-overlap .ti-media, .ti.look-overlap.side-left .ti-media { grid-column: 1; grid-row: 1; }
  .ti.look-overlap .ti-text, .ti.look-overlap.side-left .ti-text { grid-column: 1; grid-row: 2; margin: -2.5rem 0 0 1.2rem; padding: 1.8rem 1.5rem; }
  .ti.look-bleed .ti-media, .ti.look-bleed.side-left .ti-media { margin-inline: calc(-1 * var(--gutter)); }
  .ti.look-bleed .ti-media img, .ti.look-bleed.side-left .ti-media img { border-radius: 0; }
}

/* core/blocks/quote/block.css */
/* Quote: a big accent quotation mark; or a photo with the quote on a panel over its edge */
.qt { margin-block: 0; }
.qt blockquote { margin: 0; }
.qt blockquote p { margin: 0; font: italic 300 clamp(1.55rem, 3.4vw, 2.6rem)/1.25 var(--font-heading); letter-spacing: -0.015em; text-wrap: balance; }
.qt blockquote em { color: var(--c-accent); }
.bg-accent .qt blockquote em { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.qt-mark { display: block; font: 400 clamp(6rem, 12vw, 9rem)/0.7 var(--font-heading); color: var(--c-accent); height: 0.55em; }
.bg-accent .qt-mark { color: var(--c-accent-text); }
.qt figcaption { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 1rem; text-align: left; }
.qt-who { display: flex; flex-direction: column; line-height: 1.35; }
.qt-who b { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; }
.qt-who b::before { content: ""; width: 2.2rem; height: 1px; background: var(--c-accent); }
.qt-who span { color: var(--c-muted); font-size: 0.92rem; padding-left: 3rem; }
.bg-dark .qt-who span, .bg-accent .qt-who span { color: inherit; opacity: .8; }
.qt-avatar img { width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; display: block; }
.qt-avatar + .qt-who b::before { display: none; }
.qt-avatar + .qt-who span { padding-left: 0; }

.qt-centred { max-width: calc(52rem + 2 * var(--gutter)); text-align: center; }
.qt-centred .qt-mark { margin-bottom: 0.4rem; }

/* beside a photo: the photo on the left, a panel overlapping it */
.qt-photo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.qt-pic { grid-column: 1 / 6; grid-row: 1; position: relative; aspect-ratio: 4 / 5; }
.qt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.qt-photo .qt-body { grid-column: 5 / 13; grid-row: 1; position: relative; z-index: 1; background: var(--c-surface); padding: clamp(2.4rem, 5vw, 4.5rem); }
.bg-soft .qt-photo .qt-body { background: var(--c-bg); }
.bg-dark .qt-photo .qt-body { background: color-mix(in srgb, var(--c-dark-text) 8%, var(--c-dark)); }
@media (max-width: 860px) {
  .qt-photo { display: flex; flex-direction: column; }
  .qt-pic { margin-right: 3rem; aspect-ratio: 4 / 3; }
  .qt-photo .qt-body { margin: -3rem 0 0 1.5rem; padding: 2rem 1.6rem; }
}

/* big: a round photo above, the quote large and centred */
.qt-big { max-width: calc(60rem + 2 * var(--gutter)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.qt-big-pic { width: clamp(7rem, 14vw, 11rem); aspect-ratio: 1; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.qt-big-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.qt-big-pic::after { content: ""; position: absolute; inset: -0.6rem; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.qt-big blockquote p { font-style: normal; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; }
.qt-big figcaption { justify-content: center; text-align: center; }
.qt-big .qt-who { align-items: center; }
.qt-big .qt-who b::before { display: none; }
.qt-big .qt-who span { padding-left: 0; }

/* core/blocks/faq/block.css */
/* Questions and answers: the heading beside (sticky) or above; numbered questions in the heading font */
.faq-side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-side .faq-head { position: sticky; top: 6rem; }
.faq-stack .faq-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.faq-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; margin: 0 0 0.4em; }
.faq-head h2 em { color: var(--c-accent); }
.bg-accent .faq-head h2 em { color: inherit; }
.faq-intro { color: var(--c-muted); margin: 0; max-width: 30rem; }
.bg-dark .faq-intro, .bg-accent .faq-intro { color: inherit; opacity: .85; }
.faq-head .btns { margin-top: 1.6rem; }

.faq { border-top: 1px solid var(--c-text); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 1.2rem; padding: 1.35rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-n { flex: none; min-width: 1.6rem; font: 400 0.95rem/1 var(--font-heading); color: var(--c-accent-ink, var(--c-accent)); }
.faq-q { flex: 1; font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--font-heading); transition: color .15s; }
.faq summary:hover .faq-q { color: var(--c-accent-ink, var(--c-accent)); }
/* a square with a plus that turns into a minus */
.faq-icon { flex: none; align-self: center; position: relative; width: 2.4rem; height: 2.4rem; border: 1px solid var(--c-line); border-radius: var(--radius); transition: background .2s, border-color .2s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.85rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-icon { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-dark-text); }
.faq details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover .faq-icon { border-color: var(--c-accent); }
.faq-a { padding: 0 3.6rem 1.6rem 0; color: var(--c-muted); }
.faq-numbered .faq-a { padding-left: 2.8rem; }
.faq summary:focus-visible { outline-offset: 4px; }
.bg-dark .faq, .bg-accent .faq { border-top-color: currentColor; }
.bg-dark .faq details, .bg-accent .faq details { border-color: rgba(255, 255, 255, .2); }
.bg-dark .faq-a, .bg-accent .faq-a { color: inherit; opacity: .85; }
.bg-dark .faq details[open] .faq-icon { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-text); }
.bg-dark .faq-n { color: var(--c-accent); }
.bg-accent .faq-n { color: inherit; }
@media (max-width: 860px) {
  .faq-side { grid-template-columns: minmax(0, 1fr); }
  .faq-side .faq-head { position: static; }
  .faq-a, .faq-numbered .faq-a { padding: 0 0 1.4rem; }
}

/* core/blocks/image/block.css */
.img-block { margin-block: 0; }
.img-block img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.img-full img { border-radius: 0; }
.img-block figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: var(--c-muted); }

/* core/blocks/gallery/block.css */
/* Gallery: grid, mosaic (big and small) or a slideshow with its controls on a box over the corner */
.gal-heading { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.gal-heading em { color: var(--c-accent); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 1.4vw, 1.1rem); }
.gallery.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery li { overflow: hidden; border-radius: calc(var(--radius) * .6); }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery a:hover img { transform: scale(1.04); }
/* mosaic: four columns; in every six, one big, two small and three wide – no gaps (view.php shapes the last run) */
.gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 17vw, 15rem); grid-auto-flow: dense; }
.gallery-mosaic img { aspect-ratio: auto; height: 100%; }
.gallery-mosaic a { height: 100%; }
.gallery-mosaic .m-big { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic .m-wide { grid-column: span 2; }
.gallery-mosaic .m-full { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .gallery.cols-3, .gallery.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; }
}

.slider { position: relative; }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.slider-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.slider-nav { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: -1.75rem; z-index: 1; display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.35rem 0.35rem 1.2rem; background: var(--c-bg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.slider-count { font: 400 1.05rem/1 var(--font-heading); font-variant-numeric: tabular-nums; margin-right: 0.8rem; color: var(--c-text); }
.slider-btn { width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--c-text); cursor: pointer; transition: background .15s, color .15s; }
.slider-btn:hover { background: var(--c-dark); color: var(--c-dark-text); }
.slider-btn[data-next] { background: var(--c-dark); color: var(--c-dark-text); }
.slider-btn[data-next]:hover { background: var(--c-accent); color: var(--c-accent-text); }
.slider:has(.slider-nav) + .caption, .slider:has(.slider-nav) ~ .caption { margin-top: 2.6rem; }
.caption { margin-top: 0.9rem; font-size: 0.92rem; color: var(--c-muted); }
@media (max-width: 600px) { .slider-nav { position: static; margin: -1.5rem 1rem 0 auto; width: max-content; } }

/* masonry: each image keeps its own shape, in columns */
.gallery-masonry { list-style: none; margin: 0; padding: 0; column-gap: clamp(0.6rem, 1.4vw, 1.1rem); }
.gallery-masonry.cols-2 { column-count: 2; } .gallery-masonry.cols-3 { column-count: 3; } .gallery-masonry.cols-4 { column-count: 4; }
.gallery-masonry li { break-inside: avoid; margin-bottom: clamp(0.6rem, 1.4vw, 1.1rem); overflow: hidden; border-radius: calc(var(--radius) * .6); }
.gallery-masonry a { display: block; }
.gallery-masonry img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.gallery-masonry a:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .gallery-masonry.cols-3, .gallery-masonry.cols-4 { column-count: 2; } }

/* core/blocks/video/block.css */
.video-block { margin-block: 0; }
.video-frame { position: relative; width: 100%; background: #000; border-radius: var(--radius); overflow: hidden; }
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #111; color: #fff; display: grid; place-items: center; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-icon { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c-accent); box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .15s; }
.video-icon::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 1.3rem solid var(--c-accent-text); border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; }
.video-play:hover .video-icon { transform: scale(1.07); }
.video-label { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; display: flex; flex-direction: column; text-align: left; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.video-label small { font-weight: 400; opacity: .8; font-size: .82rem; }
/* "Play by itself": a small pause button (moving pictures must be stoppable) */
.video-pause { position: absolute; right: .75rem; bottom: .75rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.video-pause::before { content: ""; width: .75rem; height: .85rem; border-left: .25rem solid currentColor; border-right: .25rem solid currentColor; box-sizing: border-box; }
.video-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: .45rem 0 .45rem .75rem; border-color: transparent transparent transparent currentColor; margin-left: .2rem; }
.video-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* core/blocks/embed/block.css */
.embed-frame { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-ask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.5rem; text-align: center; color: var(--c-text); }
.embed-ask p { margin: 0; max-width: 30rem; }
.embed-ask .small { color: var(--c-muted); font-size: .9rem; margin-bottom: .6rem; }

/* core/blocks/cards/block.css */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards .card { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.cards-cards .card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.bg-soft .cards-cards .card { border-color: transparent; }
.card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.cards-plain .card-img img { border-radius: var(--radius); }
.card-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem 1.35rem; }
.cards-plain .card-body { padding: 0.9rem 0 0; }
.card-title { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.3; }
.card-text { color: var(--c-muted); font-size: 0.97rem; }
.bg-dark .card-text, .bg-accent .card-text { color: inherit; opacity: 0.85; }
.bg-dark .cards-cards .card, .bg-accent .cards-cards .card { color: var(--c-text); }
.bg-dark .cards-cards .card .card-text, .bg-accent .cards-cards .card .card-text { color: var(--c-muted); opacity: 1; }
a.card:hover .card-title { color: var(--c-accent); }
a.card { transition: transform .15s ease, box-shadow .15s ease; }
.cards-cards a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
@media (max-width: 960px) { .cards.cols-3, .cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards.cols-2, .cards.cols-3, .cards.cols-4 { grid-template-columns: 1fr; } }

/* numbered: a big number in the accent colour over the title, under a thin line */
.cards-numbered .card { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.cards-numbered .card-body { padding: 0.35rem 0 0; }
.card-n { font: 300 clamp(4.5rem, 9vw, 8rem)/0.8 var(--font-heading); color: var(--c-accent); letter-spacing: -0.04em; margin: 0.3rem 0 0.9rem -0.05em; }
.bg-dark .cards-numbered .card, .bg-accent .cards-numbered .card { border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
.cards-numbered .card-img img { border-radius: var(--radius); }
.cards-numbered .card-img { order: 2; margin-top: 1rem; }
.bg-soft .cards-numbered .card, .bg-dark .cards-numbered .card, .bg-accent .cards-numbered .card { background: transparent; }
.bg-accent .card-n { color: inherit; }
/* border: a thin border, no background */
.cards-border .card { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.bg-dark .cards-border .card, .bg-accent .cards-border .card { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.cards-border a.card:hover { border-color: var(--c-accent); }
/* list: one under the other, the image on the left */
.cards.cols-1 { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cards-list .card { flex-direction: row; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: 1.3rem 0; border-top: 1px solid var(--c-line); }
.cards-list li:last-child .card { border-bottom: 1px solid var(--c-line); }
.cards-list .card-img { flex: 0 0 clamp(6rem, 22%, 14rem); }
.cards-list .card-img img { border-radius: var(--radius); aspect-ratio: 4 / 3; }
.cards-list .card-body { padding: 0; flex: 1; }
.cards-list .card-title { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.cards-list a.card::after { content: "→"; font-size: 1.3rem; color: var(--c-accent); transition: transform .15s; }
.cards-list a.card:hover::after { transform: translateX(4px); }
@media (max-width: 600px) { .cards-list .card-img { flex-basis: 34%; } }

/* overlay: the image fills a tall card, a colour layer over it (strongest at the bottom) and the text on top */
.cards-overlay .card { position: relative; justify-content: flex-end; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: var(--radius);
  --tint: var(--c-dark); color: var(--c-dark-text); }
.cards-overlay.tint-accent .card { --tint: var(--c-accent); }
.cards-overlay.tint-light .card { --tint: var(--c-bg); }
.cards-overlay.ink-light .card { color: var(--c-dark-text); }
.cards-overlay.ink-dark .card { color: var(--c-text); }
.cards-overlay .card-img { position: absolute; inset: 0; z-index: -2; }
.cards-overlay .card-img img, .cards-overlay .card-img > * { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .5s ease; }
.cards-overlay .card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--tint) 88%, transparent) 0%, color-mix(in srgb, var(--tint) 55%, transparent) 45%, color-mix(in srgb, var(--tint) 25%, transparent) 100%); }
.cards-overlay.tint-none .card::before { background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 60%); }
.cards-overlay .card-body { padding: clamp(1.2rem, 2.4vw, 1.75rem); gap: 0.45rem; }
.cards-overlay .card-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; }
.cards-overlay .card-text, .bg-dark .cards-overlay .card-text, .bg-accent .cards-overlay .card-text { color: inherit; opacity: 0.88; }
.cards-overlay .card-more { margin-top: 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.cards-overlay a.card:hover .card-title { color: inherit; }
.cards-overlay a.card:hover .card-img img { transform: scale(1.04); }
.cards-overlay a.card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cards-overlay .card-img img { transition: none; } .cards-overlay a.card:hover .card-img img { transform: none; } }

/* core/blocks/spacer/block.css */
.b-spacer { padding: 0; }
.spacer { display: flex; align-items: center; }
.spacer-small { height: 2rem; } .spacer-medium { height: 4.5rem; } .spacer-large { height: 8rem; }
.spacer hr { width: 100%; border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* core/blocks/form/block.css */
/* Contact form – look-lines (default: open fields on a line, like the rest of the site) or look-boxes */
.form-block .lead { margin-top: 0; }
.form-heading { margin-top: 0; }
.form-heading em { font-style: italic; color: var(--c-accent-ink, var(--c-accent)); }
.bg-dark .form-heading em, .bg-accent .form-heading em { color: var(--c-accent); }
.form-side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.form-side .form-heading { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
.form-contact { display: grid; gap: 1.2rem; margin: 2.4rem 0 0; }
.form-contact dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.bg-dark .form-contact dt, .bg-accent .form-contact dt { color: inherit; opacity: 0.7; }
.form-contact dd { margin: 0.25rem 0 0; font: 400 clamp(1.15rem, 1.8vw, 1.4rem)/1.3 var(--font-heading); }
.form-contact a { color: inherit; text-decoration: none; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 0 1.5px no-repeat; transition: background-size .3s; }
.form-contact a:hover { background-size: 100% 1.5px; }
@media (max-width: 860px) { .form-side { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .form-contact { margin-top: 1.6rem; } }

.sk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.6rem; margin-top: 1.6rem; }
.form-side .sk-form { margin-top: 0.4rem; }
.sk-form > * { grid-column: 1 / -1; }
.sk-form > .sk-field.is-half { grid-column: auto; }
@media (max-width: 600px) { .sk-form > .sk-field.is-half { grid-column: 1 / -1; } }
.sk-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.sk-field abbr { text-decoration: none; color: var(--c-accent-ink, var(--c-accent)); margin-left: .15em; }
.sk-field input[type=text], .sk-field input[type=email], .sk-field input[type=tel], .sk-field textarea, .sk-field select {
  width: 100%; color: inherit; font: inherit; font-size: 1.05rem; -webkit-appearance: none; appearance: none;
}
.sk-field textarea { resize: vertical; line-height: 1.55; }
.sk-field select { cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .4rem center; }
.sk-field-error { margin: 0; color: #b42318; font-size: .9rem; font-weight: 600; }
.bg-dark .sk-field-error { color: #ffb4a8; }

/* lines: a label in small capitals, the answer on a line that fills with the accent colour */
.look-lines .sk-field > label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); transition: color .2s; }
.bg-dark .look-lines .sk-field > label, .bg-accent .look-lines .sk-field > label { color: inherit; opacity: 0.75; }
.look-lines .sk-field > label.sk-check { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; opacity: 1; }
.look-lines .sk-field:focus-within > label { color: var(--c-accent-ink, var(--c-accent)); opacity: 1; }
.look-lines .sk-field :is(input[type=text], input[type=email], input[type=tel], textarea, select) {
  min-height: 2.9rem; padding: .45rem 0 .6rem; border: 0; border-radius: 0; background-color: transparent;
  box-shadow: inset 0 -1.5px 0 color-mix(in srgb, currentColor 26%, transparent);
  transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1);
}
.look-lines .sk-field :is(input, textarea, select):hover { box-shadow: inset 0 -1.5px 0 color-mix(in srgb, currentColor 55%, transparent); }
.look-lines .sk-field :is(input, textarea, select):focus { outline: none; box-shadow: inset 0 -2.5px 0 var(--c-accent); }
.look-lines .sk-field :is(input, textarea, select):focus-visible { outline: none; }
.look-lines .sk-field textarea { min-height: 7.5rem; }
.look-lines .sk-field.has-error :is(input, textarea, select) { box-shadow: inset 0 -2px 0 #c9372c; }

/* boxes: soft filled fields */
.look-boxes .sk-field > label { font-weight: 600; font-size: .95rem; }
.look-boxes .sk-field :is(input[type=text], input[type=email], input[type=tel], textarea, select) {
  min-height: 3.1rem; padding: .75rem 1rem; border: 1.5px solid transparent; border-radius: var(--radius);
  background-color: color-mix(in srgb, currentColor 6%, transparent); transition: border-color .2s, background-color .2s;
}
.look-boxes .sk-field select { padding-right: 2.4rem; background-position: right .9rem center; }
.look-boxes .sk-field :is(input, textarea, select):hover { background-color: color-mix(in srgb, currentColor 9%, transparent); }
.look-boxes .sk-field :is(input, textarea, select):focus { outline: none; border-color: var(--c-accent); background-color: var(--c-bg); color: var(--c-text); }
.look-boxes .sk-field textarea { min-height: 8rem; }
.look-boxes .sk-field.has-error :is(input, textarea, select) { border-color: #c9372c; }

.sk-check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.sk-check input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--c-accent); }
.sk-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sk-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-top: .4rem; }
.sk-send { gap: .9rem; padding-inline: 1.6rem 1.3rem; }
.sk-send svg { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sk-send:hover svg { transform: translateX(3px); }
.sk-form-note { margin: 0; font-size: .9rem; color: var(--c-muted); }
.bg-dark .sk-form-note, .bg-accent .sk-form-note { color: inherit; opacity: .75; }
.sk-form-status { margin: 0; min-height: 1.4em; font-weight: 600; }
.sk-form-thanks { margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-left: 3px solid var(--c-accent); background: color-mix(in srgb, var(--c-accent) 9%, transparent); font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.4 var(--font-heading); }
.sk-form-thanks:focus { outline: none; }

/* core/blocks/cta/block.css */
.cta.align-center { text-align: center; }
.cta.align-center .btns { justify-content: center; }
.cta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.bg-accent .cta .btn:not(.btn-ghost) { background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg); }
.bg-accent .cta .btn-ghost, .bg-dark .cta .btn-ghost { color: inherit; border-color: currentColor; }

/* core/blocks/posts/block.css */
/* posts: cards and lists (Post list, Latest posts, "more posts"), a post's head and foot */
.post-meta { font-size: 0.85rem; color: var(--c-muted); }
.post-cards .card-title { font-size: 1.15rem; }
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-list .card { display: block; padding: 1.1rem 0; border-top: 1px solid var(--c-line); color: inherit; text-decoration: none; }
.post-list li:last-child .card { border-bottom: 1px solid var(--c-line); }
.post-list .card-body { display: flex; flex-direction: column; gap: 0.3rem; }
.post-list .card-title { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; }
.post-list .card:hover .card-title, .post-cards .card:hover .card-title { text-decoration: underline; text-underline-offset: 0.18em; }
.post-list .card-text { color: var(--c-muted); }
.post-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.post-filter a { padding: 0.35rem 0.9rem; border: 1px solid var(--c-line); border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.92rem; }
.post-filter a:hover { border-color: var(--c-text); }
.post-filter a[aria-current] { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
.post-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.post-pager-n { color: var(--c-muted); font-size: 0.9rem; }
.post-empty { color: var(--c-muted); }
.post-latest-head { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.b-posthead { padding-top: var(--space); padding-bottom: 0.5rem; }
.post-head h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 0.4em; }
.post-cat { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.post-cat a { text-decoration: none; }
.post-byline { color: var(--c-muted); margin: 0; }
.post-image { margin-top: 2rem; margin-bottom: 0; }
.post-image img { width: 100%; display: block; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.b-postfoot { padding-bottom: var(--space); }
.post-back { padding-top: 1rem; }
.post-more { margin-top: var(--space); }
/* the top of a post like a hero (image behind the title, or a colour) */
.b-posthead[class*="post-head-"] { padding: 0; }
.b-posthead .hero-in { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.b-posthead .hero.has-img .hero-in { padding-block: clamp(4.5rem, 12vw, 8rem); }
.b-posthead .hero .post-head h1 { margin-bottom: 0.35em; }
.b-posthead .hero .post-cat a { color: inherit; }
.b-posthead .hero .post-byline { color: inherit; opacity: 0.85; }
.post-head-image .hero::after { background: linear-gradient(0deg, rgba(0,0,0,.66), rgba(0,0,0,.25) 75%); }
.post-head-soft .hero { background: var(--c-surface); color: var(--c-text); }
.post-head-dark + .b, .post-head-accent + .b, .post-head-soft + .b, .post-head-image + .b { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* core/blocks/cases/block.css */
/* the cases list: category chips over the cards (the cards are the Cards block's "overlay" look) */
.case-index { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.case-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.case-filter a { padding: 0.5rem 1rem; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-muted); text-decoration: none; font-size: 0.9rem; line-height: 1.2; }
.case-filter a span { opacity: 0.6; margin-left: 0.2rem; font-variant-numeric: tabular-nums; }
.case-filter a:hover { border-color: currentColor; color: var(--c-text); }
.case-filter a[aria-current] { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-dark-text); }
.bg-dark .case-filter a[aria-current] { background: var(--c-dark-text); border-color: var(--c-dark-text); color: var(--c-dark); }
.cards-overlay .card-cats { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

/* core/blocks/model/block.css */
/* 3D model (from FELT's model viewer) */
.mdl-block { margin-block: 0; }
.mdl-frame { position: relative; width: 100%; max-height: 85vh; border-radius: var(--radius); overflow: hidden; background: color-mix(in srgb, var(--c-text) 4%, transparent); }
.mdl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; --poster-color: transparent; }

.mdl-poster { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
.mdl-poster svg { display: block; width: 100%; height: 100%; }
.mdl-poster-img { position: absolute; left: 50%; top: 44%; width: min(70%, 640px); max-height: 60%; object-fit: contain; transform: translate(-50%, -50%); }
.mdl-poster-text { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: #fff; }
.mdl-poster-text b { font-size: clamp(18px, 4vmin, 32px); font-weight: 700; }
.mdl-poster-text span { font-size: clamp(12px, 2vmin, 15px); color: #8f8f8f; }
.mdl-poster-text b:empty, .mdl-poster-text span:empty { display: none; }
.mdl-spinner { width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; animation: mdl-spin 0.9s linear infinite; }
@keyframes mdl-spin { to { transform: rotate(360deg); } }
.mdl-t1 { font-family: var(--font-heading); font-weight: 700; fill: #fff; letter-spacing: -0.01em; }
.mdl-t2 { font-family: var(--font-body); font-weight: 400; fill: #8f8f8f; letter-spacing: 0.02em; }

.mdl-ar { position: absolute; right: 12px; bottom: 12px; padding: 0.65em 1.2em; border: 0; border-radius: 999px; background: #fff; color: #222; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); font: 600 14px var(--font-body); }

/* numbered points */
.mdl-point { position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid #fff; background: var(--c-accent); color: var(--c-accent-text, #fff); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); font: 700 12px/1 var(--font-body); transition: opacity 0.3s; }
.mdl-point:not([data-visible]) { opacity: 0.35; }
.mdl-point:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mdl-note { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 2; width: max-content; max-width: min(260px, 60vw); padding: 8px 12px; border-radius: 6px; text-align: left; background: #fff; color: rgba(0, 0, 0, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); font: 400 13px/1.4 var(--font-body); display: flex; flex-direction: column; gap: 2px; }
.mdl-note[hidden] { display: none; }
.mdl-note b { font-weight: 700; }
.mdl-note span:empty { display: none; }
.mdl.mdl-hide-points .mdl-point { display: none; }

/* points on/off and zoom */
.mdl-tools { position: absolute; z-index: 3; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mdl-tools:empty { display: none; }
.mdl-tool { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: #222; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font: 600 20px/1 var(--font-body); }
.mdl-tool:hover { background: #fff; }
.mdl-tool:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.mdl-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mdl-tool[aria-pressed="true"] { background: var(--c-accent); color: var(--c-accent-text, #fff); }

.mdl-msg { position: absolute; inset: auto 12px 12px 12px; z-index: 4; margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; font: 500 14px var(--font-body); }
@media (prefers-reduced-motion: reduce) { .mdl-spinner { animation: none; } }