:root {
  /* Palette (brand colours are fixed by the owner) */
  --brand: #13687f;
  --brand-deep: #0f4a5e;
  --bright: #0e98ba;
  --glint: #8fdcea;
  --ink: #0a3242;
  --ink-2: #3d5560;
  --ink-deep: #061f2a;
  --wash: #eaf4f7;
  --wash-2: #d9e9ef;
  --sheet: #ffffff;
  --line: #cfe0e6;
  --line-strong: #7a95a0;
  --accent: #c2410c;
  --on-dark: #e6f3f7;
  --on-dark-2: #a9c6d0;
  --tag-free-bg: #d4ecf2;
  --plate: #dcedf2;
  --placeholder: #5d7883;

  /* Roles */
  --color-bg: var(--wash);
  --color-surface: var(--sheet);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-2);
  --color-link: var(--brand);
  --color-action: var(--brand);
  --color-action-hover: var(--ink);
  --color-action-text: #ffffff;
  --color-pro: var(--accent);
  --color-selection: var(--glint);
  --color-disabled-bg: var(--wash-2);
  --color-disabled-text: var(--placeholder);
  --focus-ring: var(--bright);        /* on sheet and wash */
  --focus-ring-tint: var(--brand);    /* on wash-2, plate and other tinted fills */
  --focus-ring-dark: var(--glint);    /* on ink bands */
  --focus-ring-inside: #ffffff;       /* inside filled, cut-corner controls */
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-offset-inside: -7px;
  --pro-text-2: var(--on-dark);       /* secondary text on the Pro card (on-dark-2 fails at the brand end) */

  --font: "Barlow", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: clamp(1.0625rem, 1rem + .15vw, 1.25rem);
  --text-lead: clamp(1.05rem, 1rem + .25vw, 1.3rem);
  --text-answer: clamp(1.2rem, 1.05rem + .5vw, 1.6rem);
  --text-h4: clamp(1.15rem, 1rem + .5vw, 1.6rem);
  --text-h3: clamp(1.3rem, 1.1rem + .6vw, 1.9rem);
  --text-h3-l: clamp(1.7rem, 1.1rem + 1.8vw, 3.4rem);
  --text-h2: clamp(2rem, 1.1rem + 2.6vw, 4.4rem);
  --text-h1-article: clamp(2.2rem, 1.2rem + 2.6vw, 4.6rem);
  --text-h1: clamp(2.6rem, 1rem + 4.6vw, 7.5rem);
  --text-display: clamp(2.6rem, .9rem + 5.6vw, 10.5rem);
  --leading-body: 1.55;
  --leading-heading: 1.05;
  --leading-display: .96;
  --tracking-display: -.035em;
  --tracking-h2: -.028em;
  --tracking-h3: -.012em;
  --tracking-mono: -.01em;

  /* Spacing: 4 px base, plus the fluid steps the concept uses */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-fluid-s: clamp(18px, 2vw, 32px);
  --space-fluid-m: clamp(28px, 3.5vw, 64px);
  --space-fluid-l: clamp(56px, 6vw, 120px);
  --space-fluid-xl: clamp(64px, 7vw, 140px);
  --wrap: min(2300px, 94vw);
  --edge: max(10px, 1vw);
  --overlap: clamp(48px, 7vw, 150px);
  --target-min: 44px;
  --target-button: 52px;

  /* Radii */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-sheet: clamp(20px, 2vw, 36px);
  --radius-round: 50%;

  /* Cut-corner shapes: a 45 degree cut at the top right. Pick the size that fits the control. */
  --clip-cut-xs: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);    /* tags, small chips */
  --clip-cut-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);  /* icon tiles, accordion toggle */
  --clip-cut-md: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);  /* buttons, tabs, previous/next */
  --clip-cut-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);  /* search field, large cards */
  --cut: 12px;                                                                      /* size of the hover facet on buttons */

  /* Shadows */
  --shadow-near: 0 1px 2px rgba(6, 31, 42, .10), 0 8px 20px -6px rgba(6, 31, 42, .18);
  --shadow-far: 0 2px 4px rgba(6, 31, 42, .06), 0 30px 60px -18px rgba(6, 31, 42, .32), 0 70px 120px -40px rgba(19, 104, 127, .35);
  --shadow-sheet: 0 -1px 0 rgba(255, 255, 255, .9), 0 -24px 48px -28px rgba(6, 31, 42, .28);
  --shadow-sheet-dark: 0 -24px 48px -28px rgba(6, 31, 42, .5), inset 0 1px 0 rgba(143, 220, 234, .25);
  --ring-inset-brand: inset 0 0 0 1.5px var(--brand);
  --ring-inset-line: inset 0 0 0 1px var(--line);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 180ms;
  --dur-normal: 320ms;
  --dur-slow: 640ms;
  --dur-slower: 900ms;
  --facet-skew: skewX(-28deg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; scroll-padding-bottom: 6rem; overflow-x: clip; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; overflow-x: clip; background: var(--wash); color: var(--ink); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
em, i, cite, dfn, var, address { font-style: normal; }
em { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
code, .mono { font-family: var(--mono); font-size: .86em; letter-spacing: var(--tracking-mono); }
a { color: var(--color-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--color-selection); color: var(--ink); }
.wrap { width: var(--wrap); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Focus: a 3 px ring on every control. Cut-corner controls are clipped, so their ring is drawn inside the shape. */
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ink :focus-visible { outline-color: var(--focus-ring-dark); }
.tint :focus-visible { outline-color: var(--focus-ring-tint); }
.btn:focus-visible, .wp-block-button__link:focus-visible, .nav a:focus-visible, .search:focus-within {
  outline: var(--focus-width) solid var(--ring, var(--focus-ring-inside)); outline-offset: var(--focus-offset-inside); }
.search input:focus-visible { outline: none; }
.search:focus-within { --ring: var(--bright); box-shadow: var(--shadow-near), inset 0 0 0 2.5px var(--brand); }
.ink .btn:focus-visible, .ink .wp-block-button__link:focus-visible { --ring: var(--ink); }

/* Skip link: off-screen until focused, never part of the layout. */
.skip-link { position: absolute; left: 16px; top: 0; z-index: 100; transform: translateY(-200%); padding: .8em 1.35em; font-weight: 600; color: #fff; background: var(--ink); text-decoration: none;
  clip-path: var(--clip-cut-md); }
.skip-link:focus-visible { transform: translateY(12px); outline: var(--focus-width) solid var(--glint); outline-offset: -7px; }

/* Buttons: a facet with one cut corner; on hover a second facet slides in from the cut corner. */
.btn, .wp-block-button__link { --b-bg: var(--brand); --b-fg: var(--color-action-text); --b-hover: var(--ink); --b-hover-fg: #fff;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: var(--target-button); padding: .8em 1.35em; border: 0; border-radius: 0;
  font: 600 1.05rem/1.1 var(--font); color: var(--b-fg); background: var(--b-bg); text-decoration: none; cursor: pointer; overflow: hidden; clip-path: var(--clip-cut-md);
  transition: transform var(--dur-fast) var(--ease-out-quart), color var(--dur-fast); }
.btn::before, .wp-block-button__link::before { content: ""; position: absolute; inset: 0 -30%; z-index: -1; background: var(--b-hover); transform: translateX(105%) var(--facet-skew); transition: transform var(--dur-normal) var(--ease-out-expo); }
.btn::after, .wp-block-button__link::after { content: ""; position: absolute; top: 0; right: 0; width: var(--cut); height: var(--cut); background: var(--bright); clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform: translate(-2px, 2px) scale(0); transform-origin: 0 100%; transition: transform var(--dur-normal) var(--ease-out-expo); }
.btn:hover::before, .btn:focus-visible::before, .wp-block-button__link:hover::before, .wp-block-button__link:focus-visible::before { transform: translateX(0) var(--facet-skew); }
.btn:hover::after, .btn:focus-visible::after, .wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after { transform: translate(-2px, 2px) scale(1.6); }
.btn:hover, .btn:focus-visible, .wp-block-button__link:hover, .wp-block-button__link:focus-visible { color: var(--b-hover-fg); }
.btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.btn .i:last-child:not(:first-child) { transition: transform var(--dur-normal) var(--ease-out-expo); }
.btn:hover .i:last-child:not(:first-child) { transform: translateX(4px); }
.btn--secondary, .is-style-secondary .wp-block-button__link { --b-bg: var(--sheet); --b-fg: var(--brand); --b-hover: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn--secondary::after, .is-style-secondary .wp-block-button__link::after { background: var(--brand); transform: translate(-2px, 2px) scale(1); }
.btn--quiet, .is-style-quiet .wp-block-button__link { --b-bg: var(--sheet); --b-fg: var(--ink); --b-hover: var(--brand); box-shadow: var(--ring-inset-line); min-height: var(--target-min); padding: .6em 1em; font-weight: 500; font-size: 1rem; }
.btn--quiet::after, .is-style-quiet .wp-block-button__link::after { background: var(--line); transform: translate(-2px, 2px) scale(1); }
.ink .btn, .ink .wp-block-button__link { --b-hover: var(--glint); --b-hover-fg: var(--ink); }
.ink .btn--secondary, .ink .is-style-secondary .wp-block-button__link { --b-bg: transparent; --b-fg: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--glint); }
.ink .btn--secondary::after, .ink .is-style-secondary .wp-block-button__link::after { background: var(--glint); }
.wp-block-buttons { gap: 12px; }

/* Header */
/* The template part wrapper would limit the sticky header to its own 77px; without a box of its own the header sticks for the whole page. */
.wp-block-template-part:has(> .hdr) { display: contents; }
.hdr { position: sticky; top: 0; z-index: 50; background: var(--wash); border-bottom: 1px solid transparent; transition: transform var(--dur-normal) var(--ease-out-expo); }
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr-in { width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: clamp(12px, 2vw, 40px); min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; flex: none; }
.logo svg { height: 40px; width: auto; }
.logo .sub { font-weight: 500; font-size: 1.32rem; letter-spacing: -.01em; padding-left: 14px; border-left: 2px solid color-mix(in oklab, currentColor 40%, transparent); line-height: 1; }
.nav { display: flex; gap: 6px; margin-right: auto; }
.nav a { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 1em; color: var(--ink); text-decoration: none; font-weight: 500;
  box-shadow: var(--ring-inset-line); background: rgba(255, 255, 255, .55); clip-path: var(--clip-cut-sm); }
.nav a::before { content: ""; position: absolute; inset: 0 -30%; z-index: -1; background: var(--brand); transform: translateX(105%) var(--facet-skew); transition: transform var(--dur-normal) var(--ease-out-expo); }
.nav a:hover::before, .nav a:focus-visible::before { transform: translateX(0) var(--facet-skew); }
.nav a:hover, .nav a:focus-visible { color: #fff; transition: color var(--dur-fast); }
.nav a[aria-current] { box-shadow: var(--ring-inset-brand); color: var(--brand-deep); font-weight: 600; background: var(--sheet); }
.nav a[aria-current]:hover, .nav a[aria-current]:focus-visible { color: #fff; }
.tools { display: flex; gap: 8px; align-items: center; }
.icon-btn { gap: .5em; }
.kbd { font: 500 .75rem/1 var(--mono); padding: .25em .45em; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--ink-2); background: var(--wash); }
.menu-btn { display: none; }

/* Search and menu panels */
.panel { border: 0; padding: var(--space-5); color: var(--ink); background: var(--sheet); }
.panel::backdrop { background: rgba(6, 31, 42, .55); }
.panel--search { width: min(900px, 94vw); margin: 12vh auto 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-far); gap: var(--space-4); }
.panel--search[open] { display: grid; }
.search { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 12px 0 22px; background: var(--sheet); box-shadow: var(--shadow-near), inset 0 0 0 1.5px var(--brand); clip-path: var(--clip-cut-lg); }
.search svg { color: var(--brand); width: 24px; height: 24px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 1.2rem var(--font); color: var(--ink); background: transparent; }
.search input::placeholder { color: var(--placeholder); opacity: 1; }
.panel-close { justify-self: end; }
.panel--menu { width: 100%; height: 100%; max-width: none; max-height: none; background: var(--wash); }
.panel--menu[open] { display: flex; flex-direction: column; gap: var(--space-5); }
.panel--menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.panel--menu .btn { width: 100%; justify-content: flex-start; min-height: 48px; font-size: 1.25rem; }
.panel--menu .btn[aria-current] { box-shadow: var(--ring-inset-brand); color: var(--brand-deep); font-weight: 600; }

/* Sheets: the footer rises as a rounded ink band. */
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(20px, 3vw, 64px); padding-top: clamp(8px, 1vw, 24px); }
.foot-heading { margin: 0 0 14px; font-size: 1rem; color: #fff; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 4px; }
.foot li a { display: inline-flex; min-height: 36px; align-items: center; color: var(--on-dark); text-decoration: none; position: relative; }
.foot li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--glint); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-normal) var(--ease-out-expo); }
.foot li a:hover::after { transform: scaleX(1); }
.foot address { color: var(--on-dark-2); margin-top: 18px; line-height: 1.6; }
.foot address a { color: var(--glint); }
.foot .logo { color: #fff; }
.foot .logo svg { height: 34px; }
.small { margin-top: clamp(32px, 3vw, 56px); padding-top: 20px; border-top: 1px solid rgba(169, 198, 208, .2); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--on-dark-2); font-size: .9rem; }
.small p { margin: 0; max-width: 90ch; }
.small .langs { display: flex; gap: 20px; }
.small .langs a { color: var(--on-dark); display: inline-flex; min-height: 36px; align-items: center; }
.small .langs [aria-current] { color: var(--on-dark-2); display: inline-flex; min-height: 36px; align-items: center; }

/* Phone bar */
.mbar { display: none; }

/* Language choice */
.choice-page { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: var(--space-6); width: var(--wrap); margin-inline: auto; padding-block: var(--space-7); }
.choice-page h1 { font-size: var(--text-h1-article); }
.choice-page h1 span { display: block; color: var(--brand); }
.choice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.choice-list .btn { min-width: 12rem; font-size: 1.25rem; }

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

@media (max-width: 1100px) {
  .nav a { padding: 0 .7em; }
  .icon-btn .lbl, .icon-btn .kbd { display: none; }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
  .foot > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav, .tools .hide-m { display: none; }
  .menu-btn { display: inline-flex; }
  .tools { margin-left: auto; }
  .logo svg { height: 32px; }
  .logo .sub { font-size: 1.05rem; padding-left: 10px; }
  .hdr-in { min-height: 64px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .mbar { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); box-shadow: 0 -10px 30px -12px rgba(6, 31, 42, .3); transition: transform var(--dur-normal) var(--ease-out-expo); }
  .mbar .btn { flex: 1; justify-content: center; min-height: 48px; }
  .mbar.is-away { transform: translateY(110%); }
  body:has(.mbar) { padding-bottom: 72px; }
}
@media (max-width: 420px) {
  .logo .sub { display: none; }
}