/* Generated by tools/fetch-fonts.mjs — do not edit by hand.
 *
 * Spectral, Public Sans and JetBrains Mono are SIL Open Font License 1.1.
 * See assets/fonts/OFL.txt.
 *
 * The "Public Sans" faces limited to the Greek unicode-range are in fact Noto
 * Sans: Public Sans ships no Greek glyphs, and the page needs them for the
 * partner names and the Greek-site link labels.
 */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/spectral-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/spectral-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/public-sans-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/public-sans-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/public-sans-greek-300-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/public-sans-greek-300-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-greek-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-greek-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-greek-500-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-greek-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ==========================================================================
   Blossoming Stones — blossomingstones.org

   Ported from the approved Claude Design prototype at
   claudedesign/Blossoming Stones.dc.html, which carries all styling inline.
   Values here are lifted from that file; the handoff README in
   claudedesign/design_handoff_blossoming_stones/ documents the intent.

   Two rules hold everywhere: no border-radius and no shadows. Every border is
   1px except the 3px modal top rule and the 2px "read more" underline.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Paper */
  --paper: #E9E6DB;
  --paper-card: #F4F2EA;
  --paper-panel: #EAE7DC;

  /* Rules */
  --rule: #D3CDBD;
  --rule-card: #D8D2C2;
  --rule-card-soft: #E0DACA;
  --rule-modal: #C9C2B0;

  /* Ink */
  --ink: #1E1922;
  --ink-strong: #241E29;
  --body: #3F3844;
  --body-soft: #4A4250;
  --body-quiet: #5A5260;
  --muted: #6B6357;
  --muted-soft: #8A8177;

  /* Aubergine */
  --aubergine: #383040;
  --aubergine-card: #2F2836;

  /* Accents */
  --brick: #761C17;
  --saffron: #EFC422;
  --saffron-deep: #705C0D;

  /* On dark */
  --on-dark: #E4E0E8;
  --on-dark-bright: #F7F4FA;
  --on-dark-head: #F4F1F7;
  --on-dark-soft: #B8B1C3;
  --on-dark-muted: #A79FB2;
  --on-dark-quiet: #A39BAE;
  --on-dark-faint: #8D849A;
  --nav: #CFC9D6;

  /* Type */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout — --gutter is the page inset, narrowed at each breakpoint */
  --gutter: 56px;
  --max-width: 1280px;
}

/* --- Base --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Reserve the scrollbar's width permanently. Opening a record sets
     overflow: hidden on this element, which removes the scrollbar; without a
     reserved gutter the page widens underneath the overlay and snaps back on
     close. Invisible on macOS overlay scrollbars, very visible without them. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-strong);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }
img { display: block; }

a { color: var(--ink-strong); }
a:hover { color: var(--brick); }

::selection { background: var(--brick); color: var(--paper-card); }

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

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--paper-card);
  border: 1px solid var(--brick);
  color: var(--brick);
  font: 500 13px/1 var(--font-sans);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--paper);
}

/* --- Shared type -------------------------------------------------------- */

/* Small brick label above a section, paired with a 38x2 rule in the hero */
.eyebrow {
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brick);
}
.eyebrow-row { display: flex; align-items: center; gap: 14px; }
.eyebrow-row::before {
  content: '';
  flex: none;
  width: 38px; height: 2px;
  background: var(--brick);
}

/* Uppercase heading for the two-column prose sections */
.section-label {
  font: 400 14.5px/1 var(--font-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brick);
}

.display {
  font: 300 50px/1.08 var(--font-serif);
  letter-spacing: -.018em;
  color: var(--ink);
}

.prose {
  font: 300 16px/1.75 var(--font-sans);
  color: var(--body);
  text-wrap: pretty;
}

.mono-meta {
  font: 400 10.5px/1.4 var(--font-mono);
  color: var(--muted);
}

/* Vertical crop anchor for the few photographs whose subject is not centred.
   Classes rather than inline styles so the CSP can forbid inline styles. */
.crop-y-30 { object-position: center 30%; }
.crop-y-34 { object-position: center 34%; }
.crop-y-42 { object-position: center 42%; }
.crop-y-44 { object-position: center 44%; }

/* --- Header ------------------------------------------------------------- */

/* The band runs the full viewport width; --max-width holds its contents to the
   same measure as the rest of the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--aubergine);
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--gutter);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Must be allowed to shrink: pinning the lockup to one line pushes the
     CTA off screen at narrow widths. */
  min-width: 0;
  text-decoration: none;
  color: var(--on-dark-head);
}
.lockup__mark { width: 56px; height: 56px; flex: none; }
.lockup__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lockup__name {
  font: 500 17px/1 var(--font-serif);
  letter-spacing: .005em;
  color: var(--on-dark-head);
}
.lockup__legal {
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: .085em;
  color: var(--on-dark-muted);
}
.lockup__legal span { color: var(--on-dark-faint); }

.header__right { display: flex; align-items: center; gap: 28px; }

.nav { display: flex; gap: 24px; font: 400 13px/1 var(--font-sans); color: var(--nav); }
.nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--saffron); }

.cta-greek {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid rgba(239, 196, 34, .45);
  color: var(--saffron);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s, background-color .18s;
}
.cta-greek:hover {
  color: var(--saffron);
  border-color: var(--saffron);
  background: rgba(239, 196, 34, .08);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  /* Required — this is what clips the watermark. */
  overflow: hidden;
  padding: 88px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* The design's `opacity: .17; filter: grayscale(1) contrast(.72)` is baked into
   the image itself — see bakeWatermark() in tools/optimize-images.mjs. Applying
   either here would shift the image's paper field away from the page
   background and reveal it as a rectangle. */
.hero__watermark {
  position: absolute;
  top: 40px;
  right: -90px;
  z-index: 0;
  width: 880px;
  height: 880px;
  pointer-events: none;
}

.hero__text {
  position: relative; /* paints above the watermark */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero__title {
  max-width: 22ch;
  font: 300 78px/1.03 var(--font-serif);
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: pretty;
}

.hero__lede {
  max-width: 58ch;
  font: 300 20px/1.6 var(--font-sans);
  color: var(--body-soft);
  text-wrap: pretty;
}

.hero__signature {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.hero__signature-name { font: 400 19px/1.2 var(--font-serif); color: var(--ink); }
.hero__signature-legal {
  font: 400 10.5px/1.6 var(--font-mono);
  letter-spacing: .06em;
  color: var(--muted);
}

.hero__figure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
/* The hero photograph is never cropped, at any width. */
.hero__figure img { width: 100%; height: auto; }
.hero__figure figcaption {
  font: 400 11.5px/1.55 var(--font-mono);
  color: var(--muted);
}

/* --- About -------------------------------------------------------------- */

.about {
  padding: 84px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.about__col { display: flex; flex-direction: column; gap: 20px; }

.read-more {
  align-self: flex-start;
  font: 500 12.5px/1 var(--font-sans);
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 2px solid var(--brick);
  padding-bottom: 4px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.stats__figure { font: 300 42px/1 var(--font-serif); color: var(--ink); }
.stats__label {
  margin-top: 7px;
  font: 400 11.5px/1.45 var(--font-mono);
  color: var(--muted);
}

/* --- The work ----------------------------------------------------------- */

.work-head {
  padding: 88px var(--gutter) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
}
.work-head h2 { max-width: 18ch; }
.work-head p {
  max-width: 48ch;
  font: 300 14.5px/1.65 var(--font-sans);
  color: var(--body-quiet);
}

.work-grid {
  padding: 36px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Each card is an anchor to its modal: keyboard-reachable, shareable, and
   functional with JavaScript disabled. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: 1px solid var(--rule-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.card:hover { color: inherit; border-color: var(--brick); }
/* Set by main.js when focus is handed back to a card after a pointer-driven
   close: the focus still moves, it just is not drawn for someone using a
   mouse. Cleared on blur, so tabbing through the grid still shows the ring. */
.card.is-focus-quiet:focus,
.card.is-focus-quiet:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-3px); }
}
.card__img { width: 100%; height: 186px; object-fit: cover; }
.card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  flex: 1;
}
.card__index-row { display: flex; align-items: center; gap: 10px; }
.card__index { font: 400 11px/1 var(--font-mono); color: var(--brick); }
.card__kicker {
  font: 500 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__title { font: 400 23px/1.24 var(--font-serif); color: var(--ink); }
.card__text {
  flex: 1;
  font: 300 14px/1.65 var(--font-sans);
  color: var(--body-soft);
  text-wrap: pretty;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-card-soft);
}
.card__cue { font: 500 11.5px/1 var(--font-sans); color: var(--brick); }

/* --- Looking ahead ------------------------------------------------------ */

.ahead {
  margin-top: 92px;
  padding: 64px var(--gutter) 68px;
  background: var(--aubergine);
  color: var(--on-dark-head);
}
.ahead__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  margin-bottom: 36px;
}
.ahead__head > div { display: flex; flex-direction: column; gap: 16px; }
.ahead__head h2 { max-width: 24ch; color: var(--on-dark-bright); }
.ahead__head p {
  max-width: 44ch;
  font: 300 14.5px/1.65 var(--font-sans);
  color: #B5AEC0;
}
.ahead .eyebrow { color: var(--saffron); }
.ahead .eyebrow-row::before { background: var(--saffron); }

.ahead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.card--dark {
  background: var(--aubergine-card);
  border-color: rgba(239, 196, 34, .28);
}
.card--dark:hover { border-color: var(--saffron); }
.card--dark .card__img { height: 230px; filter: saturate(.9); }
.card--dark .card__body { gap: 13px; padding: 26px 26px 28px; }
.card--dark .card__index { color: var(--saffron); }
.card--dark .card__kicker { color: var(--on-dark-quiet); }
.card--dark .card__title { font-size: 27px; line-height: 1.22; color: var(--on-dark-bright); }
.card--dark .card__text { font-size: 14.5px; line-height: 1.68; color: var(--on-dark-soft); }
.card--dark .card__foot { padding-top: 8px; border-top-color: rgba(239, 196, 34, .2); }
.card--dark .mono-meta { color: var(--on-dark-quiet); }
.card--dark .card__cue { color: var(--saffron); }

/* --- Alignment ---------------------------------------------------------- */

.alignment {
  padding: 80px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
}
.alignment__col { display: flex; flex-direction: column; gap: 18px; }
.sdg-list { display: flex; flex-direction: column; }
.sdg {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}
.sdg:last-child { border-bottom: 1px solid var(--rule); }
.sdg__no { font: 500 12px/1.4 var(--font-mono); color: var(--brick); }
.sdg__text { font: 300 14.5px/1.45 var(--font-sans); color: var(--body); }

/* --- Partner wall ------------------------------------------------------- */

/* 26 cells: the Ministry spans the full first row, then exactly 25 partners
   fill five rows of five. Keep that arithmetic if partners are added. */
.partners { padding: 76px var(--gutter) 0; }
.partners__label { margin-bottom: 30px; }
.partners__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 20px;
  align-items: start;
}
.partner { display: flex; flex-direction: column; gap: 16px; }
.partner--wide { grid-column: span 5; }

.partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
}
.partner--wide .partner__logo { justify-content: flex-start; }

/* Logos are normalised by optical area, not to a fixed box: each carries its
   own width/height so a wide wordmark and a square emblem read at the same
   visual weight. multiply drops the white plate of the source files into the
   paper; the two logos with their own coloured field opt out. */
.partner__logo img {
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.partner__logo img.no-multiply { mix-blend-mode: normal; }
.partner--wide .partner__logo img { width: 100%; max-width: 560px; height: auto; }

.partner__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}
.partner__name { font: 400 12.5px/1.35 var(--font-sans); color: var(--ink-strong); }
.partner__role { font: 400 10px/1.45 var(--font-mono); color: var(--muted); }
.partner__role--tertiary { color: var(--muted-soft); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: 80px;
  background: var(--aubergine);
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 38px var(--gutter) 40px;
  display: grid;
  /* The two right columns are sized to their content deliberately: as `fr`
     shares the legal line and the email collide. */
  grid-template-columns: minmax(0, 1fr) minmax(160px, max-content) minmax(136px, max-content);
  gap: 40px;
  align-items: start;
}
.footer__brand { display: flex; align-items: center; gap: 18px; }
.footer__brand img { flex: none; width: 132px; height: 132px; margin-left: -12px; }
.footer__brand-text { display: flex; flex-direction: column; gap: 8px; }
.footer__org {
  font: 400 15px/1.5 var(--font-serif);
  color: var(--on-dark);
  text-wrap: pretty;
}
.footer__legal { font: 400 9.5px/1.65 var(--font-mono); color: var(--on-dark-muted); }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 300 13.5px/1.6 var(--font-sans);
  color: var(--on-dark-soft);
}
.footer__label {
  font: 500 10.5px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 6px;
}
.footer__link {
  align-self: flex-start;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 196, 34, .4);
  padding-bottom: 2px;
}
.footer__link:hover { color: var(--saffron); border-bottom-color: var(--saffron); }
.footer__note {
  font: 400 10px/1.5 var(--font-mono);
  letter-spacing: .08em;
  color: var(--on-dark-muted);
  margin-top: -4px;
}

.socials { display: flex; gap: 9px; margin-top: 14px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(239, 196, 34, .3);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color .18s, color .18s;
}
.socials a:hover { border-color: var(--saffron); color: var(--saffron); }

/* --- Modals ------------------------------------------------------------- */

/* Opening is pure CSS: each card links to #<key> and the overlay shows on
   :target. JavaScript only adds Escape, focus handling and history.back(). */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(30, 25, 34, .62);
  align-items: flex-start;
  justify-content: center;
  padding: 44px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal:target { display: flex; }
.modal--ahead { background: rgba(30, 25, 34, .68); }

/* Scroll lock without JavaScript. */
html:has(.modal:target) { overflow: hidden; }

/* Full-bleed click target behind the panel, so a backdrop click closes even
   with JavaScript off.
   Pressing the mouse on an anchor arms a link drag, and Safari paints a
   translucent preview of the element being dragged — for an anchor covering
   the whole viewport that preview is a full-screen wash, which reads as the
   backdrop going darker while the button is held. These three keep it inert. */
.modal__backdrop {
  position: fixed;
  inset: 0;
  cursor: default;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* With scripting, closing is handled on the overlay itself, so the anchor
   never needs the pointer — which removes the drag, and the press state with
   it. Without scripting the class is absent and the anchor works as before. */
.js .modal__backdrop { pointer-events: none; }

.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  background: var(--paper-card);
  border-top: 3px solid var(--brick);
}
.modal--ahead .modal__panel { border-top-color: var(--saffron); }

.modal__head { position: relative; padding: 30px 40px 0; }
.modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-right: 54px; /* clears the close button */
}
.modal__kicker {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--brick);
}
.modal--ahead .modal__kicker { color: var(--saffron-deep); }
.modal__title {
  font: 300 36px/1.12 var(--font-serif);
  letter-spacing: -.018em;
  color: var(--ink);
}
.modal__standfirst { font: 400 14px/1.5 var(--font-mono); color: var(--muted); }

.modal__close {
  position: absolute;
  top: 30px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule-modal);
  background: none;
  color: #453D4A;
  font: 300 20px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.modal__close:hover { border-color: var(--brick); color: var(--brick); }

.modal__body {
  padding: 26px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
/* Title, image, copy and the facts band all share one measure — the copy
   column is deliberately not capped separately. */
.modal__copy { display: flex; flex-direction: column; gap: 18px; }
.modal__lead { width: 100%; height: 420px; object-fit: cover; }
.modal__lead--300 { height: 300px; }
.modal__copy p {
  font: 300 15.5px/1.75 var(--font-sans);
  color: var(--body);
  text-wrap: pretty;
}
.modal__copy h3 {
  margin: 14px 0 0;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
}
.modal__copy h3:first-child { margin-top: 0; }
.modal--ahead .modal__copy h3 { color: var(--saffron-deep); }

.pullquote {
  padding: 20px 24px;
  background: var(--paper-panel);
  border-left: 3px solid var(--brick);
  font: 300 19px/1.5 var(--font-serif);
  color: var(--ink);
}
.pullquote cite {
  display: block;
  margin-top: 10px;
  font: 400 11px/1.5 var(--font-mono);
  font-style: normal;
  color: var(--muted);
}

/* Definition-style rows used inside the Craft x AI modal */
.rungs { display: flex; flex-direction: column; gap: 12px; }
.rung {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.rung:last-child { border-bottom: 1px solid var(--rule); }
.rung__label { font: 500 11px/1.4 var(--font-mono); color: var(--brick); }
.rung__text { font: 300 14.5px/1.6 var(--font-sans); color: var(--body); }

.packages { display: flex; flex-direction: column; gap: 2px; }
.package {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.package:last-child { border-bottom: 1px solid var(--rule); }
.package__no { font: 400 12px/1.4 var(--font-mono); color: var(--brick); }
.package__body { display: flex; flex-direction: column; gap: 7px; }
.package__title { font: 500 16px/1.35 var(--font-serif); color: var(--ink); }
.package__text { font: 300 14.5px/1.6 var(--font-sans); color: var(--body); }

/* Foot of every record: where to read it in full, and how to keep the link.
   The key facts and the goal list that used to sit here were both restatements
   of the running copy above, and no arrangement of them — two columns, three
   columns, stacked bands — stopped them reading as clutter at the end of a
   long read. Removing them is the version that works. */
.record-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 20px 24px;
  background: var(--paper-panel);
  border: 1px solid var(--rule-card);
}
.record-foot__links { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.record-foot__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--brick);
  text-decoration: none;
}
.record-foot__link-title { font: 500 13px/1.35 var(--font-sans); text-wrap: pretty; }
.record-foot__link-cue {
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
}
.record-foot__link:hover { color: var(--brick); }
.record-foot__link:hover .record-foot__link-title { text-decoration: underline; }
.record-foot__link:hover .record-foot__link-cue { color: var(--brick); }

/* Copy and Share need JavaScript, so they are hidden in the markup and
   revealed only once their handlers are attached — and Share only where the
   platform actually has a share sheet. */
.record-foot__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.action {
  padding: 8px 13px;
  border: 1px solid var(--rule-card);
  background: none;
  color: var(--muted);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.action:hover { border-color: var(--brick); color: var(--brick); }
.action.is-done { border-color: var(--brick); color: var(--brick); }
.action.is-failed { border-color: var(--muted); color: var(--muted); }

/* ==========================================================================
   Responsive

   The prototype is a fixed 1280px desktop design reviewed at ~924px; every
   breakpoint below is new work. Two rules carry over unchanged at all widths:
   the header lockup must be allowed to wrap, and the hero photograph must
   never be cropped.
   ========================================================================== */

/* --- Below 1280: fluid, tighter gutters --------------------------------- */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .hero__title { font-size: 64px; }
  .hero__watermark { width: 720px; height: 720px; right: -120px; }
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --gutter: 32px; }

  .hero { padding-top: 64px; gap: 36px; }
  .hero__title { font-size: 52px; }
  .hero__lede { font-size: 18px; }
  .hero__watermark { width: 560px; height: 560px; top: 20px; right: -140px; }

  .about,
  .alignment { grid-template-columns: 1fr; gap: 44px; }
  .about { padding-top: 64px; }
  .alignment { padding-top: 60px; }

  .work-head { padding-top: 68px; }
  .display { font-size: 40px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  .ahead { margin-top: 68px; padding-top: 52px; padding-bottom: 56px; }

  /* 25 partners do not divide by 3, so the last row is short by design —
     cells stay left-aligned rather than being stretched to fill. */
  .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partner--wide { grid-column: span 3; }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(136px, max-content);
    gap: 32px 40px;
  }
  .footer__brand { grid-column: span 2; }

  .modal { padding: 32px 20px; }
  .modal__lead { height: 340px; }
  .modal__lead--300 { height: 260px; }
}

/* --- Header: two rows once one row stops fitting ------------------------ */
/* Below ~900px the nav and CTA squeeze the lockup hard enough that its legal
   line wraps to four lines. Dropping the nav to its own row gives the lockup
   the full width back. Every link stays visible — no disclosure widget to
   discover. */
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; gap: 14px 16px; padding: 16px var(--gutter); }
  .lockup { flex: 1 1 auto; }
  .header__right { flex: 1 1 100%; order: 3; justify-content: space-between; gap: 12px; }
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  .site-header__inner { padding: 14px var(--gutter); }
  .lockup { gap: 11px; }
  .lockup__mark { width: 38px; height: 38px; }
  .lockup__name { font-size: 15px; }
  .lockup__legal { font-size: 8px; letter-spacing: .06em; }
  .nav { gap: 14px; font-size: 11.5px; }
  .cta-greek { padding: 7px 11px; font-size: 11px; }

  .hero { padding-top: 44px; gap: 28px; }
  .hero__text { gap: 22px; }
  .hero__title { font-size: 36px; max-width: none; }
  .hero__lede { font-size: 16px; line-height: 1.65; }
  /* The watermark is more noise than texture at this width. */
  .hero__watermark { display: none; }

  .about { padding-top: 48px; gap: 36px; }
  .prose { font-size: 15px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .stats__figure { font-size: 34px; }

  .work-head {
    padding-top: 52px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .display { font-size: 32px; }
  .work-grid { grid-template-columns: 1fr; gap: 20px; }

  .ahead { margin-top: 52px; padding-top: 44px; padding-bottom: 48px; }
  .ahead__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ahead__grid { grid-template-columns: 1fr; gap: 20px; }
  .card--dark .card__title { font-size: 23px; }

  .alignment { padding-top: 48px; gap: 32px; }
  /* Stack the SDG number above its text rather than holding a 74px column. */
  .sdg { grid-template-columns: 1fr; gap: 6px; }

  .partners { padding-top: 52px; }
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .partner--wide { grid-column: span 2; }
  .partner__logo { height: 62px; }
  .partner--wide .partner__logo { height: auto; }

  .site-footer { margin-top: 56px; }
  /* Brand across the top, then Contact and Elsewhere side by side beneath it —
     both are short enough to share a phone's width, and stacking all three made
     the footer needlessly long. */
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-top: 32px;
  }
  .footer__brand { grid-column: span 2; gap: 14px; }
  .footer__brand img { width: 92px; height: 92px; margin-left: -8px; }
  .footer__col { font-size: 12.5px; }
  .footer__link { word-break: break-word; }

  /* Modals become full-bleed sheets with a close button that stays reachable
     however far the reader has scrolled. */
  /* Keep align-items: flex-start from the base rule. Stretching the panel
     would fix its height to the viewport while its content runs on for
     thousands of pixels, leaving everything past the first screen sitting on
     the bare overlay instead of on paper. */
  .modal { padding: 0; }
  .modal__panel { max-width: none; min-height: 100%; }
  .modal__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 20px var(--gutter) 16px;
    background: var(--paper-card);
    border-bottom: 1px solid var(--rule);
  }
  .modal__head-text { gap: 8px; padding-right: 46px; }
  .modal__title { font-size: 25px; }
  /* 44px minimum tap target on touch. */
  .modal__close { top: 14px; right: var(--gutter); width: 44px; height: 44px; }
  .modal__body { padding: 22px var(--gutter) 40px; gap: 26px; }
  .modal__lead { height: 220px; }
  .modal__lead--300 { height: 200px; }
  .modal__copy p { font-size: 15px; }

  .rung,
  .package { grid-template-columns: 1fr; gap: 8px; }

  .record-foot { padding: 16px 18px; gap: 16px; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .socials, .card__cue { display: none; }
  .modal { display: none !important; }
  .page { max-width: none; }
}