/* ==========================================================================
   TECH — sample 5
   "Printed dossier": a serif setting on dark stock, with a numbered margin
   column.

   The four earlier samples all scroll a single content column past some
   chrome — a top bar, an overlay, a side rail, a fixed stage. This one is a
   document: masthead, contents page, numbered sections with a running
   number in the margin, figure tables, colophon. Nothing is hidden behind a
   tab or an accordion, and no number animates.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* ground — near-black, and a true neutral: samples 1–4 tint theirs blue,
     warm, cool and true-black respectively, so this one takes plain grey */
  --bg:           #0C0C0D;
  --bg-2:         #121213;
  --surface:      #17171A;

  /* type — warm off-white, so the serif setting reads as paper, not screen */
  --text:         #ECEAE5;
  --text-2:       #B3B1AB;
  --muted:        #83868C;

  /* rules — the whole system is built from these, never from shadows.
     Three weights: hairline, mid, and the heavy rules that open a section. */
  --rule:         #22252A;
  --rule-2:       #34383F;
  --rule-3:       #575C65;

  /* one primary: teal, shared with the other four samples. Institutional,
     muted, not a product colour. */
  --primary-rgb:  91 147 196;   /* base channels, for the rare alpha tint */
  --primary:      #5B93C4;
  --primary-2:    #96BDE0;
  --primary-deep: #2E75B4;
  --tint:         #131D25;
  --on-primary:   #071522;

  /* held in reserve: form errors only */
  --danger:       #D0806F;

  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* display figures — Georgia's old-style numerals sit too formally next to
     the text face, so every number set large (section numbers, figures,
     years, salaries, the 404) takes a geometric, friendlier stack instead */
  --num:   'Avenir Next', Avenir, 'Trebuchet MS', 'Segoe UI', var(--sans);

  --wrap:   1160px;
  --margin-col: 156px;
  --gut:    52px;
  --bar-h:  54px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

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

a { color: var(--primary); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.3rem); }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--primary); color: var(--on-primary); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.measure   { max-width: 64ch; }
.measure-w { max-width: 78ch; }
.muted     { color: var(--muted); }
.small     { font-size: .93rem; }
.tiny      { font-size: .8rem; }

/* the shared headline strings carry <span class="grad"> — here it is a
   restrained editorial emphasis, not a gradient */
.grad { color: var(--primary); font-style: italic; }
.req  { color: var(--danger); }

.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }
.mt-36 { margin-top: 36px; }
.mt-48 { margin-top: 48px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--primary); color: var(--on-primary);
  padding: 10px 16px; font-family: var(--sans); font-size: .86rem;
  text-decoration: none;
}
.skip:focus { transform: none; }

/* the label voice — every piece of metadata on the site is set like this */
.label {
  font-family: var(--sans);
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.label--text { color: var(--text-2); }

/* ================================================================ masthead
   A newspaper masthead: a utility strip, the lockup, then the navigation
   band closed with a double rule.
   ===================================================================== */
.mast { background: var(--bg); }

.util {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}
.util-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 38px;
}
.util-l { font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.util-r { display: flex; align-items: center; gap: 22px; }
.util-tel {
  font-family: var(--sans); font-size: .78rem; color: var(--text-2);
  text-decoration: none; letter-spacing: .02em;
}
.util-tel:hover { color: var(--primary); }

.lang { display: flex; align-items: center; gap: 7px; }
.lang button {
  appearance: none; background: none; border: 0; padding: 2px 1px; cursor: pointer;
  font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  color: var(--muted);
}
.lang button[aria-pressed="true"] { color: var(--primary); box-shadow: 0 1px 0 var(--primary); }
.lang button:hover { color: var(--text); }
.lang-sep { color: var(--rule-2); font-size: .8rem; }

.mast-in {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; padding-top: 34px; padding-bottom: 26px;
}
/* ------------------------------------------------------------------------
   Brand mark ramp
   The pyramid in the page's <defs> block paints itself from these eight steps,
   and they are all derived from --primary — so picking a brand colour repaints
   the logo along with the rest of the site, gradients and all.

   The floor mixes toward white and black, which every browser understands but
   which drains chroma at both ends. Where relative colour is supported the ramp
   is rebuilt in OKLCH: lightness travels, chroma is held up, and the hue turns
   with it, so the lit facets stay lit instead of going chalky.
   --------------------------------------------------------------------- */
.pyr-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;

  --pyr-50:  color-mix(in oklab, var(--primary), #FFFFFF 46%);
  --pyr-100: color-mix(in oklab, var(--primary), #FFFFFF 38%);
  --pyr-200: color-mix(in oklab, var(--primary), #FFFFFF 26%);
  --pyr-300: color-mix(in oklab, var(--primary), #FFFFFF 13%);
  --pyr-500: color-mix(in oklab, var(--primary), #000000 22%);
  --pyr-600: color-mix(in oklab, var(--primary), #000000 34%);
  --pyr-700: color-mix(in oklab, var(--primary), #000000 46%);
  --pyr-800: color-mix(in oklab, var(--primary), #000000 58%);
}
@supports (color: oklch(from #000 l c h)) {
  .pyr-defs {
    --pyr-50:  oklch(from var(--primary) .93 calc(c * .82) calc(h - 14));
    --pyr-100: oklch(from var(--primary) .89 calc(c * .92) calc(h - 11));
    --pyr-200: oklch(from var(--primary) .83 calc(c * 1.00) calc(h -  7));
    --pyr-300: oklch(from var(--primary) .77 calc(c * 1.06) calc(h -  3));
    --pyr-500: oklch(from var(--primary) .62 calc(c * 1.12) calc(h +  7));
    --pyr-600: oklch(from var(--primary) .56 calc(c * 1.20) calc(h + 11));
    --pyr-700: oklch(from var(--primary) .50 calc(c * 1.28) calc(h + 16));
    --pyr-800: oklch(from var(--primary) .44 calc(c * 1.35) calc(h + 20));
  }
}

.brand { display: block; text-decoration: none; }
/* Inline, not <img>: the lockup has to sit in the page's cascade for
   --primary to reach its gradients. The wordmark inherits the page face. */
.brand svg { width: 150px; height: auto; font-family: var(--sans); }
.mast-tag {
  font-size: .95rem; color: var(--muted); max-width: 44ch;
  text-align: right; line-height: 1.5;
}

.menu-btn, .bar-menu {
  display: none;
  appearance: none; background: none; cursor: pointer;
  border: 1px solid var(--rule-2); border-radius: 0;
  padding: 9px 16px;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.menu-btn:hover, .bar-menu:hover { border-color: var(--primary); color: var(--primary); }

.mnav {
  border-top: 1px solid var(--rule-3);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 -2px var(--rule);
}
.mnav-in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mnav-list { list-style: none; display: flex; flex-wrap: wrap; }
.mnav-list a {
  display: block; padding: 13px 20px;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
}
.mnav-list li:first-child a { padding-left: 0; }
.mnav-list a:hover { color: var(--primary); background: var(--bg-2); }
.mnav-list a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.mnav-cta {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); text-decoration: none; white-space: nowrap;
}
.mnav-cta::after { content: " \2192"; }
.mnav-cta:hover { text-decoration: underline; }

/* ------------------------------------------------- sticky compact bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--bar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule-2);
  transform: translateY(-101%);
  transition: transform .24s ease;
}
/* The drawer hangs off the compact bar, so opening the menu pulls the bar down
   wherever the reader happens to be — including at the very top of the page,
   where the masthead's own button is the one that was tapped. */
.bar.is-on, body.nav-open .bar { transform: none; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

.bar-in { display: flex; align-items: center; gap: 22px; height: var(--bar-h); }
.bar-brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--sans); font-weight: 650; font-size: .84rem;
  letter-spacing: .17em; color: var(--text);
}
.bar-brand svg { width: 23px; height: 23px; }

.bar-sec {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 1px solid var(--rule); padding-left: 22px;
}
.bar-sec b { color: var(--primary); font-weight: 650; }

.bar-nav { display: flex; gap: 20px; }
.bar-nav a {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
}
.bar-nav a:hover, .bar-nav a[aria-current="page"] { color: var(--primary); }

/* ------------------------------------------------------ mobile drawer */
/* A panel pinned under the compact bar rather than a block in the flow: the
   menu is reachable from any scroll position, not just from the top of the
   document. It still hangs to its own height, keeping the closing rule the
   masthead version had. A percentage on a fixed element resolves against the
   viewport, so the cap needs no `vh`/`dvh` maths and ignores a phone's
   collapsing URL bar; `overflow-y` only bites on a viewport short enough to
   hit that cap. */
.drawer {
  display: none;
  position: fixed;
  inset: var(--bar-h) 0 auto 0;
  z-index: 89;
  max-height: calc(100% - var(--bar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--rule-2);
  background: var(--surface);
}
body.nav-open .drawer { display: block; }
.drawer-in { padding: 8px 0 22px; }
.drawer a {
  display: block; padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.drawer a[aria-current="page"] { color: var(--primary); }
/* Language closes the drawer; the utility bar's copy steps aside at the same
   width, so only one of the two is ever on screen. */
.drawer-lang {
  display: flex; align-items: center; gap: 14px; padding-top: 16px;
}
.drawer-lang-label {
  margin-right: auto;
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.drawer-lang .lang button { font-size: .84rem; }

/* ================================================================== page
   The document grid: a narrow margin column carrying the running section
   number and any margin notes, then the body column.
   ===================================================================== */
main { display: block; }

.page-head { padding: 62px 0 46px; }
.page-head .status {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary);
  border-bottom: 1px solid var(--primary); padding-bottom: 5px;
}
.page-head .status::before {
  content: ""; width: 7px; height: 7px; background: var(--primary);
  display: inline-block; transform: translateY(-1px);
}
.page-head h1 { margin-top: 22px; max-width: 20ch; }
.page-head .lead {
  margin-top: 22px; font-size: 1.16rem; color: var(--text-2); max-width: 60ch;
}

.crumbs {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 20px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs span { margin: 0 8px; color: var(--rule-2); }

.head-split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 54px; align-items: start;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn {
  max-width: 100%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  font-family: var(--sans); font-size: .8rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--primary); border-radius: 0;
  color: var(--primary); background: transparent;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--tint); }
.btn--fill { background: var(--primary); color: var(--on-primary); }
.btn--fill:hover { background: var(--primary-2); color: var(--on-primary); }
.btn--plain { border-color: var(--rule-2); color: var(--text); }
.btn--plain:hover { border-color: var(--text); background: var(--bg-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* an inline text link with an arrow — used to leave a section */
.go {
  display: inline-block;
  font-family: var(--sans); font-size: .78rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 3px;
}
.go::after { content: " \2192"; }
.go:hover { border-bottom-color: var(--primary); }

/* ------------------------------------------------------------ contents */
.toc {
  border-top: 2px solid var(--rule-3);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 6px;
  margin-top: 46px;
}
.toc-h { margin-bottom: 12px; }
.toc ol { list-style: none; }
.toc li { border-bottom: 1px dotted var(--rule); }
.toc li:last-child { border-bottom: 0; }
.toc a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 9px 0; text-decoration: none; color: var(--text-2);
  font-family: var(--sans); font-size: .82rem; letter-spacing: .06em;
}
.toc a:hover { color: var(--primary); }
.toc .n {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: .78rem; font-weight: 650; letter-spacing: .1em;
  min-width: 26px;
}
.toc .t { text-transform: uppercase; font-weight: 600; }
.toc .leader { flex: 1; border-bottom: 1px dotted var(--rule-2); transform: translateY(-4px); }
.toc a.is-cur { color: var(--primary); }
.toc a.is-cur .n { color: var(--primary); }

/* ------------------------------------------------------------ sections */
.art {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: 0 var(--gut);
  padding: 58px 0 62px;
  border-top: 1px solid var(--rule);
}
.art:first-of-type { border-top: 2px solid var(--rule-3); }

.art-margin { position: sticky; top: calc(var(--bar-h) + 26px); align-self: start; }
.art-no {
  display: block;
  font-family: var(--num); font-size: 2.4rem; line-height: 1;
  color: var(--rule-2); font-weight: 500;
  letter-spacing: -.01em;
}
.art-margin .rulem { display: block; height: 1px; background: var(--rule-2); margin: 16px 0; }
.note {
  font-size: .84rem; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--rule-2); padding-left: 12px;
}
.note b { color: var(--text-2); font-weight: 600; }

.art-body > .label:first-child { margin-bottom: 14px; }
.art h2 + .lead, .art .lead { font-size: 1.1rem; color: var(--text-2); }
.art .lead { margin-top: 18px; }

/* -------------------------------------------------------- ruled entries
   The workhorse unit of this sample: a numbered row on a hairline rule.
   Replaces the cards / tiles / index tables of samples 1–4.
   ===================================================================== */
.entries { border-top: 1px solid var(--rule); }
.entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.entry--wide { grid-template-columns: 42px minmax(0, 1.5fr) minmax(0, 1fr); }
.entry-n {
  font-family: var(--sans); font-size: .74rem; font-weight: 650;
  letter-spacing: .1em; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: 4px;
}
.entry-t { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.entry-d { margin-top: 7px; color: var(--text-2); font-size: .97rem; }
a.entry { text-decoration: none; color: inherit; }
a.entry:hover { background: var(--bg-2); }
a.entry:hover .entry-t { color: var(--primary); }

/* inline list of qualifiers under an entry */
.inline-list {
  list-style: none; display: flex; flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
}
.inline-list li + li::before { content: "·"; margin: 0 9px; color: var(--rule-2); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--rule-2);
  padding: 3px 9px;
}
.tag--key { color: var(--primary); border-color: var(--primary); }

/* -------------------------------------------------------------- prose */
.prose p + p { margin-top: 16px; }
.prose { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 650; }

/* a bulleted argument list with hanging rules */
.points { list-style: none; border-top: 1px solid var(--rule); margin-top: 24px; }
.points li {
  padding: 15px 0 15px 26px; border-bottom: 1px solid var(--rule);
  position: relative; color: var(--text-2); font-size: .99rem;
}
.points li::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 12px; height: 1px; background: var(--primary);
}
.points strong { color: var(--text); font-weight: 650; }

/* ticked deliverables */
.ticks { list-style: none; }
.ticks li {
  position: relative; padding-left: 22px; margin-top: 7px;
  font-size: .95rem; color: var(--text-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--primary);
}

/* ------------------------------------------------------- figure tables
   Numbers are typeset, not animated. A caption sits above, as in print.
   ===================================================================== */
.figure { margin-top: 34px; }
.figcap {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule-3); padding-bottom: 8px;
}
.figcap .label { color: var(--text-2); }
.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
}
.figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures > div {
  padding: 20px 20px 20px 0;
  border-right: 1px solid var(--rule);
}
.figures > div:last-child { border-right: 0; }
.figures > div + div { padding-left: 20px; }
.fig-n {
  font-family: var(--num); font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.2rem);
  line-height: 1.05; color: var(--primary); letter-spacing: -.015em;
  font-weight: 600;
}
.fig-l { margin-top: 8px; font-family: var(--sans); font-size: .76rem; color: var(--muted); line-height: 1.4; }

/* small unit word set beside a stat figure (e.g. 14+ χρόνια) */
.stat-unit { font-size: .46em; font-family: var(--sans); font-weight: 500; letter-spacing: 0; margin-left: .22em; color: var(--muted); }
/* qualifier set BEFORE a stat figure (e.g. Μέσος όρος 6 εβδ.) */
.stat-qual { font-size: .30em; font-family: var(--sans); font-weight: 500; letter-spacing: 0; margin-right: .3em; color: var(--muted); }
/* In the figure table the serif figure already fills the cell, so the
   qualifier takes its own line above it instead of wrapping mid-phrase. */
.fig-n .stat-qual { display: block; margin-right: 0; white-space: nowrap; }
/* Figure cells share one grid row, so captions hang from a common bottom
   edge — a two-line figure then cannot skew the ruled table. */
.figures > div { display: flex; flex-direction: column; }
.figures .fig-l { margin-top: auto; padding-top: 8px; }

.closer-act { margin-top: 0; }

/* ------------------------------------------------------- spec / dl grid */
.spec { border-top: 1px solid var(--rule-3); }
.spec > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 24px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-top: 3px;
}
.spec dd { margin: 0; color: var(--text-2); font-size: .98rem; }
.spec dd a { color: var(--primary); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--rule); padding: 3px 9px;
}

/* --------------------------------------------------------- boxed panel */
.panel {
  border: 1px solid var(--rule-2);
  background: var(--surface);
  padding: 26px 28px;
}
.panel--tight { padding: 20px 22px; }
.panel h3 { font-size: 1.1rem; }

/* the hero prospectus box */
.prospectus { border: 1px solid var(--rule-3); background: var(--surface); }
.prospectus-h {
  padding: 13px 20px; border-bottom: 1px solid var(--rule-3);
  background: var(--bg-2);
}
.prospectus ol { list-style: none; }
.prospectus li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  padding: 12px 20px; border-bottom: 1px solid var(--rule);
  font-size: .96rem; color: var(--text-2);
}
.prospectus li b {
  font-family: var(--sans); font-size: .72rem; font-weight: 650;
  letter-spacing: .1em; color: var(--primary);
}
.prospectus-f { padding: 14px 20px; color: var(--muted); font-size: .88rem; }

/* --------------------------------------------------------- comparison */
.compare { width: 100%; border-collapse: collapse; margin-top: 28px; }
.compare th, .compare td {
  border: 1px solid var(--rule);
  padding: 16px 18px; text-align: left; vertical-align: top;
}
.compare thead th {
  border-top: 1px solid var(--rule-3); border-bottom: 1px solid var(--rule-3);
  background: var(--bg-2);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  color: var(--text); width: 30%;
}
.compare thead th:first-child { width: 10%; }
.compare tbody th {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: var(--bg-2); white-space: nowrap;
}
.compare td strong { display: block; color: var(--text); font-weight: 650; margin-bottom: 5px; }
.compare td { color: var(--text-2); font-size: .95rem; }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- Q & A
   Answers are never hidden — this is a document, not an interface.
   ===================================================================== */
.qa { border-top: 1px solid var(--rule-3); margin-top: 28px; }
.qa > div {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 20px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.qa .q-n {
  font-family: var(--sans); font-size: .72rem; font-weight: 650;
  letter-spacing: .1em; color: var(--muted); padding-top: 5px;
}
.qa h3 { font-size: 1.12rem; }
.qa p { margin-top: 9px; color: var(--text-2); font-size: .99rem; }

/* --------------------------------------------------------------- legal
   Legal pages drop the margin numerals — the clauses number themselves.
   ===================================================================== */
.legal { border-top: 1px solid var(--rule-3); margin-top: 36px; }
.legal section { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.legal h2 { font-size: 1.22rem; }
.legal p { margin-top: 10px; color: var(--text-2); max-width: 76ch; }
.legal ul { list-style: none; margin-top: 12px; }
.legal li {
  position: relative; padding-left: 22px; margin-top: 9px;
  color: var(--text-2); max-width: 76ch;
}
.legal li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--primary);
}
.notice {
  border: 1px solid var(--rule-2); background: var(--bg-2);
  padding: 16px 18px; margin-top: 28px;
  font-size: .93rem; color: var(--text-2);
}
.notice strong { color: var(--text); font-weight: 650; }

/* --------------------------------------------------------- pull quote */
.quote {
  border-top: 2px solid var(--rule-3); border-bottom: 1px solid var(--rule);
  padding: 34px 0;
  margin-top: 8px;
}
.quote blockquote {
  margin: 0; font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  line-height: 1.5; font-style: italic; color: var(--text);
  max-width: 46ch;
}
.quote figcaption { margin-top: 20px; }
.quote .who { font-family: var(--sans); font-size: .86rem; font-weight: 650; color: var(--text); letter-spacing: .02em; }
.quote .role { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------ timeline */
.tl { border-top: 1px solid var(--rule); }
.tl > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 24px; padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.tl .yr {
  font-family: var(--num); font-size: 1.15rem; color: var(--primary);
  font-weight: 600; letter-spacing: -.005em;
}
.tl h3 { font-size: 1.1rem; }
.tl p { margin-top: 6px; color: var(--text-2); font-size: .96rem; }

/* -------------------------------------------------------------- roster */
.roster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.roster > div {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 20px 16px 0; border-bottom: 1px solid var(--rule);
}
.roster > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.roster > div:nth-child(even) { padding-left: 20px; }
.ini {
  font-family: var(--sans); font-size: .7rem; font-weight: 650;
  letter-spacing: .1em; color: var(--muted);
  border: 1px solid var(--rule-2); padding: 4px 6px;
  min-width: 34px; text-align: center;
}
.roster .nm { font-size: 1.03rem; font-weight: 600; }
.roster .rl { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: 2px; }

.empty { padding: 34px 0; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- form */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; }

/* choice pills — a bordered option row, not a coloured chip */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: block; cursor: pointer;
  border: 1px solid var(--rule-2); padding: 9px 14px;
  font-family: var(--sans); font-size: .79rem; color: var(--text-2);
}
.choice:hover span { border-color: var(--rule-3); color: var(--text); }
.choice input:checked + span { border-color: var(--primary); color: var(--primary); background: var(--tint); }
.choice input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* salary column on a job entry */
.jobmeta { padding-top: 3px; }
.jobmeta .sal { font-family: var(--num); font-size: .97rem; font-weight: 600; color: var(--primary); }
.jobmeta .apply {
  margin-top: 5px;
  font-family: var(--sans); font-size: .71rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
a.entry:hover .jobmeta .apply { color: var(--primary); }
.field--full { grid-column: 1 / -1; }
.field > .lab {
  display: block; margin-bottom: 7px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.input, .textarea, .select {
  width: 100%; display: block;
  font-family: var(--serif); font-size: 1rem; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: 0;
  padding: 11px 13px;
}
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); outline: 1px solid var(--primary); outline-offset: -2px; }
.input::placeholder, .textarea::placeholder { color: #6C7078; }

.err {
  display: none; margin-top: 6px;
  font-family: var(--sans); font-size: .76rem; color: var(--danger);
}
.has-error .err { display: block; }
.has-error .input, .has-error .textarea, .has-error .select { border-color: var(--danger); }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 24px; font-size: .93rem; color: var(--text-2);
}
.consent input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--primary); }
.consent.has-error { color: var(--danger); }

.ok {
  display: none; border: 1px solid var(--primary);
  background: var(--tint); padding: 26px 28px;
}
.ok.is-on { display: block; }
.ok h3 { color: var(--primary); }
.ok p { margin-top: 10px; color: var(--text-2); }

/* ------------------------------------------------------------ closing */
.closer {
  border-top: 2px solid var(--rule-3); border-bottom: 2px solid var(--rule-3);
  padding: 52px 0; margin: 20px 0 0;
}
.closer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.closer h2 { max-width: 18ch; }
.closer p { margin-top: 16px; color: var(--text-2); max-width: 56ch; }

/* -------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--rule); margin-top: 64px; background: var(--bg-2); }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, .7fr));
  gap: 40px; padding: 48px 0 40px;
}
.foot-brand img { width: 128px; }
.foot-brand p { margin-top: 18px; font-size: .92rem; color: var(--muted); max-width: 34ch; }
.foot h4 { font-family: var(--sans); font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.foot ul { list-style: none; margin-top: 14px; }
.foot li { margin-top: 8px; }
.foot li a, .foot address a { font-size: .93rem; color: var(--text-2); text-decoration: none; }
.foot li a:hover { color: var(--primary); text-decoration: underline; }
.foot address { font-style: normal; margin-top: 14px; font-size: .9rem; color: var(--muted); line-height: 1.55; }
.foot address + address { margin-top: 14px; }

.foot-bot {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule-2);
  padding: 18px 0 26px;
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
}
.foot-bot a { color: var(--muted); text-decoration: none; }
.foot-bot a:hover { color: var(--primary); }

.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 42px; height: 42px; cursor: pointer;
  background: var(--bg); color: var(--primary);
  border: 1px solid var(--primary); border-radius: 0;
  font-size: 1rem; line-height: 1;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.totop.is-on { opacity: 1; pointer-events: auto; }
.totop:hover { background: var(--primary); color: var(--on-primary); }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* ------------------------------------------------------------- reveal */
[data-in] { opacity: 0; transform: translateY(7px); }
[data-in].is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--d, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-in] { opacity: 1; transform: none; }
  [data-in].is-in { transition: none; }
}

/* ---------------------------------------------------------- 404 layout */
.err-page { padding: 90px 0 110px; text-align: center; }
.err-page .code {
  font-family: var(--num); font-size: clamp(3.7rem, 2.8rem + 7.4vw, 7.4rem);
  line-height: .9; color: var(--rule-2); font-weight: 500; letter-spacing: -.02em;
}
.err-page h1 { margin-top: 24px; }
.err-page .lead { margin: 22px auto 0; color: var(--text-2); max-width: 52ch; }
.err-page .actions { justify-content: center; }

/* ============================================================ responsive */
@media (max-width: 1080px) {
  :root { --margin-col: 116px; --gut: 34px; }
  .art-no { font-size: 2.1rem; }
  .head-split { grid-template-columns: 1fr; gap: 40px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mnav, .bar-nav, .mast-tag { display: none; }
  .menu-btn, .bar-menu { display: inline-block; }
  /* Language moves into the drawer here; the tint trigger injected beside it
     goes with it, so the utility bar keeps the phone number alone. */
  .util-r .lang,
  .util-r .tint { display: none; }
  .mast-in { align-items: center; padding-top: 22px; padding-bottom: 20px; }
  .brand svg { width: 120px; }
  .bar-sec { border-left: 0; padding-left: 0; }

  .art { grid-template-columns: 1fr; gap: 0; padding: 42px 0 46px; }
  .art-margin {
    position: static;
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 18px;
  }
  .art-no { font-size: 1.5rem; }
  .art-margin .rulem { flex: 1; margin: 0; }
  .art-margin .note { display: none; }

  .figures, .figures--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div { border-right: 0; padding: 16px 16px 16px 0; }
  .figures > div + div { padding-left: 0; }
  .figures > div:nth-child(odd) { border-right: 1px solid var(--rule); }
  .figures > div:nth-child(even) { padding-left: 18px; }
  .figures > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

  .spec > div { grid-template-columns: 1fr; gap: 6px; }
  .roster { grid-template-columns: 1fr; }
  .roster > div:nth-child(odd) { border-right: 0; }
  .roster > div:nth-child(even) { padding-left: 0; }
  .closer-in { grid-template-columns: 1fr; align-items: start; }
  .form-grid { grid-template-columns: 1fr; }
  .entry--wide { grid-template-columns: 42px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 10px 20px; }
  .util-l { display: none; }
  .util-in { justify-content: flex-end; }
  .page-head { padding: 40px 0 34px; }
  .entry, .qa > div { grid-template-columns: 1fr; gap: 0; }
  .entry-n, .qa .q-n { padding-top: 0; margin-bottom: 8px; }
  .tl > div { grid-template-columns: 1fr; gap: 4px; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .toc a { flex-wrap: wrap; }
  .toc .leader { display: none; }
}

/* ================================================================ print */
@media print {
  /* the design is a document, so it should survive being printed */
  :root {
    --bg: #fff; --bg-2: #fff; --surface: #fff;
    --text: #000; --text-2: #222; --muted: #555;
    --rule: #ccc; --rule-2: #999; --rule-3: #333;
    /* !important, because the colour picker writes its pick onto <html> */
    --primary: #1F486B !important; --tint: #fff !important;
  }
  .bar, .drawer, .totop, .skip, .util, .actions, .mnav,
  .tint, .tint-pop { display: none !important; }
  body { font-size: 11pt; }
  .art { page-break-inside: avoid; }
  .art-margin { position: static; }
  a { text-decoration: none; color: var(--text); }
  [data-in] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Brand colour picker
   Built like the rest of the document: rules, no radii, no shadow-as-surface.
   One heavy rule opens the panel, hairlines separate the entries.
   -------------------------------------------------------------------------- */
.tint { display: inline-flex; margin-left: 4px; }
.tint-btn {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
  transition: border-color .2s ease;
}
.tint-btn:hover { border-color: var(--rule-3); }
.tint-btn[aria-expanded="true"] { border-color: var(--primary); }
.tint-dot { width: 11px; height: 11px; background: var(--primary); }

.tint-pop {
  position: fixed;
  z-index: 500;
  width: 230px;
  padding: 0 0 2px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-top: 2px solid var(--primary);
  opacity: 0;
  transition: opacity .16s ease;
}
.tint-pop.is-open { opacity: 1; }
.tint-ttl {
  margin: 0;
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: .8rem;
  font-style: italic;
  color: var(--text-2);
}
.tint-grid { display: block; }
.tint-sw {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.tint-sw:last-child { border-bottom: 0; }
.tint-sw i { width: 11px; height: 11px; flex: none; }
.tint-sw:hover { background: var(--bg-2); color: var(--text); }
.tint-sw[aria-pressed="true"] { color: var(--primary); background: var(--tint); }