/* ==========================================================================
   PalmChrom — site stylesheet
   Base palette and type scale inherited from the current site; the extended
   tokens and the band/card/hero components are new for this rebuild.
   ========================================================================== */

/* Quicksand, self-hosted so no request reaches Google (SIL OFL 1.1, see
   assets/fonts/OFL.txt). One variable file per subset covers 300-700. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/quicksand-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: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/quicksand-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;
}

:root {
  /* confirmed brand colours */
  --bg:          #faf8f4;   /* cream — page background        */
  --petrol:      #154953;   /* headings, brand, primary CTA   */
  --ink:         #154953;   /* body + heading text            */
  --accent:      #e7cfaf;   /* sand — accents only            */

  /* The palette is petrol, sand, ivory/cream and teal, plus burnt orange
     for form errors. No white, no grey. */
  --teal:        #2E7D77;   /* secondary accent: labels, icons */
  --ivory:       #F7F1E3;   /* alternate band, cards, text on petrol */
  --surface:     var(--ivory);   /* cards, fields, banner      */
  --error:       #b34a0f;   /* burnt orange, form errors only; 5:1 on cream */

  --rule:        rgba(21, 73, 83, .16);

  --header-h:    74px;
  --measure:     1146px;    /* content container width        */

  --fs-body:     18.6667px;
  --lh-body:     28px;
  --fs-h1:       40px;
  --fs-h2:       24px;
  --fs-h3:       20px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* the fixed header measures against the viewport including the scrollbar
     gutter, which would otherwise leave a sliver of sideways scroll */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Quicksand, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover u, a:focus-visible u { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { clip-path: none; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--bg);
}

.header-inner {
  max-width: var(--measure);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Symbol only. The 1px non-scaling stroke brings its lines to the ~2.2px
   stem width of the bold nav item, whatever size the logo is drawn at. */
.brand__logo {
  display: block;
  height: 48px;
  width: auto;
  aspect-ratio: 1030 / 424;
  overflow: visible;
  fill: var(--petrol);
  stroke: var(--petrol);
  stroke-width: 1px;
  stroke-linejoin: round;
}

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Petrol text, sand underline. The underline is 3px: at 2px such a light
   colour antialiases against the cream and reads darker than sand. */
.site-nav a {
  display: inline-block;
  padding: 4px 2px 3px;
  color: var(--petrol);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 24px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active { border-bottom-color: var(--accent); }
.site-nav a.active { font-weight: 700; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--petrol);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------- page -- */

.page { padding-top: var(--header-h); }

/* Legacy layout: a bare section is its own centred column. The migrated
   pages (blog post, imprint, privacy, terms) still rely on this. */
.page > section,
.site-footer > section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 16px;
}

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 8px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.38; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 36px; margin-top: 28px; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 32px; margin-top: 24px; }
h4 { font-size: var(--fs-body); font-weight: 700; margin-top: 20px; }

section > h1:first-child,
section > h2:first-child,
section > h3:first-child { margin-top: 0; }

p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* the legal pages quote bare URLs that would otherwise not wrap */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
p a, li a { overflow-wrap: anywhere; }

ul, ol { margin: 0 0 12px; padding-left: 1.4em; }
li { margin: 0 0 6px; }
ul { list-style-type: square; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }

.ta-center  { text-align: center; }
.ta-right   { text-align: right; }
.ta-justify { text-align: justify; }

/* ---------------------------------------------------------------- bands -- */

/* A band spans the full viewport width and carries the background colour;
   .wrap inside it holds the centred content column. */
.page > section.band {
  max-width: none;
  margin: 0;
  padding: 0;
}

.band > .wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 16px;
}

.band--ivory  { background: var(--ivory); }
.band--petrol { background: var(--petrol); color: var(--ivory); }

.band--petrol h1, .band--petrol h2, .band--petrol h3 { color: var(--ivory); }

.band--tight > .wrap { padding-top: 32px; padding-bottom: 32px; }

/* ----------------------------------------------------------------- hero -- */

.hero { background: var(--petrol); color: var(--ivory); }
.hero > .wrap { max-width: var(--measure); margin: 0 auto; padding: 84px 16px 76px; }

/* Home: the river at sunset. The sun and the water stay clear on the left;
   the text sits on the right, over the darker trees, behind a petrol veil. */
.hero--photo {
  background:
    linear-gradient(90deg, rgba(21, 73, 83, .12) 0%, rgba(21, 73, 83, .2) 32%, rgba(21, 73, 83, .78) 52%, rgba(21, 73, 83, .9) 100%),
    url(../img/hero-river.jpg) center 45% / cover no-repeat,
    var(--petrol);
}
.hero--photo > .wrap { padding-top: 110px; padding-bottom: 104px; }
.hero--photo > .wrap > * { max-width: 560px; margin-left: auto; }
.hero--photo h1 { font-size: clamp(34px, 4.2vw, 50px); }
.hero--photo .actions { justify-content: flex-start; }
@media (max-width: 860px) {
  .hero--photo {
    background:
      linear-gradient(180deg, rgba(21, 73, 83, .9) 0%, rgba(21, 73, 83, .82) 100%),
      url(../img/hero-river-mobile.jpg) center / cover no-repeat,
      var(--petrol);
  }
  .hero--photo > .wrap { padding-top: 72px; padding-bottom: 64px; }
  .hero--photo > .wrap > * { max-width: none; margin-left: 0; }
}

.kicker {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* sand only reads on petrol; on light bands the kicker is teal */
.kicker--teal { color: var(--teal); }

.hero h1 {
  max-width: 20ch;
  margin: 0 0 20px;
  color: var(--ivory);
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 600;
  line-height: 1.14;
}

.lead {
  max-width: 62ch;
  font-size: 21px;
  line-height: 32px;
}
.band--petrol .lead, .hero .lead { color: rgba(247, 241, 227, .9); }

/* -------------------------------------------------------------- buttons -- */

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

.btn {
  display: inline-block;
  padding: 14px 26px;
  border: 2px solid var(--petrol);
  border-radius: 4px;
  background: var(--petrol);
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--teal); border-color: var(--teal); }

.btn--ghost { background: transparent; color: var(--petrol); }
.btn--ghost:hover { background: var(--petrol); color: var(--ivory); border-color: var(--petrol); }

/* on the petrol hero and closing bands the palette inverts */
.band--petrol .btn, .hero .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--petrol);
}
.band--petrol .btn:hover, .hero .btn:hover { background: var(--ivory); border-color: var(--ivory); }

.band--petrol .btn--ghost, .hero .btn--ghost {
  background: transparent;
  border-color: rgba(247, 241, 227, .7);
  color: var(--ivory);
}
.band--petrol .btn--ghost:hover, .hero .btn--ghost:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--petrol);
}

.band--petrol a:focus-visible, .hero a:focus-visible { outline-color: var(--ivory); }

/* arrow link, used to leave a card or a sector block */
.arrow-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--petrol);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.arrow-link:hover { border-bottom-color: var(--petrol); }

/* ------------------------------------------------------- feature bullets - */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.features li {
  position: relative;
  margin: 0;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--rule);
}
.features li::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--teal);
}
.features strong { color: var(--petrol); }

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--teal);
  border-radius: 4px;
}
/* four audiences: a 2 × 2 grid rather than three plus an orphan */
.cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cards--four { grid-template-columns: 1fr; } }

.card h3 { margin: 0 0 10px; font-size: var(--fs-h3); }
.card p  { margin: 0; }
.card .arrow-link { margin-top: auto; padding-top: 16px; }

/* ---------------------------------------------------------------- modes -- */

.section-title {
  max-width: 24ch;
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.18;
}
.intro { max-width: 62ch; font-size: 20px; line-height: 30px; }

.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 36px;
}

.mode { display: flex; flex-direction: column; }
/* side by side, both cards share the same rows (photo, kicker, title, text,
   list), so the shorter card stretches to the length of the longer one */
@supports (grid-template-rows: subgrid) {
  .modes { row-gap: 0; }
  .mode { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .mode ul { margin-bottom: 0; }
}
.mode .kicker { margin: 22px 0 6px; }
.mode h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}
.mode ul { margin-top: 14px; padding-left: 0; list-style: none; }
.mode li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--rule);
}
.mode li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--teal);
}

/* Same frame for both photos, so the two columns line up. */
.mode__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border-bottom: 4px solid var(--teal);
  background: var(--ivory);
}
.mode__photo img { width: 100%; height: 100%; object-fit: cover; }
/* keeps the case and the solar panel in frame */
.mode__photo--deployed img { object-position: 30% center; }

/* --------------------------------------------------------------- specs -- */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.specs li {
  margin: 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* cards are ivory; on an ivory band they take the cream page tone instead */
.band--ivory .card,
.band--ivory .specs li,
.band--ivory .post-card { background: var(--bg); }
.specs .spec-label {
  display: block;
  margin-bottom: 6px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ faq -- */

.faq { margin-top: 24px; border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  padding: 18px 40px 18px 0;
  color: var(--petrol);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--teal);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { max-width: 78ch; margin-bottom: 16px; }

/* -------------------------------------------------------------- sectors -- */

.sector > .wrap { padding-top: 64px; padding-bottom: 64px; }
.sector h2 {
  max-width: 22ch;
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.2;
}
.sector p  { max-width: 72ch; }
.sector ul { max-width: 72ch; margin-top: 18px; }
.sector .actions { margin-top: 26px; }

/* --------------------------------------------------------- blog listing -- */

.post-list { display: grid; gap: 24px; margin-top: 28px; }

.post-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: 4px;
}
.post-card h2 { margin: 0 0 6px; font-size: var(--fs-h3); }
.post-card h2 a:hover { color: var(--teal); }
.post-meta {
  margin: 0 0 12px;
  color: var(--teal);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.post-body { max-width: 74ch; }
.post-body p { margin-bottom: 18px; }

/* ------------------------------------------------------------- figures -- */

.fig { margin: 0 0 12px; }
.fig img { margin: 0 auto; }
.fig + p.ta-center { margin-top: -4px; }

figcaption, .caption {
  margin-top: 8px;
  color: var(--petrol);
  font-size: 15px;
  text-align: center;
}

.fig--framed img { border: 1px solid var(--rule); border-radius: 4px; }
/* 1280 px screenshot: capped so high-DPI screens don't upscale it */
.fig--screenshot { max-width: 820px; margin-top: 32px; }
.fig--screenshot img { margin: 0; }

/* Funder logos: the images are cropped to their visible content, so one
   height and one gap give an evenly spaced, centred row. On narrow screens
   the row wraps and every line stays centred. */
.logo-row {
  --logo-h: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 64px;
}
.logo-row .fig { margin: 0; flex: 0 0 auto; }
.logo-row .fig img {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
}

/* -------------------------------------------------------- social links -- */

.social { display: flex; gap: 18px; }
.ta-center + .social, .social--center { justify-content: center; }
/* the brands' own marks, drawn in petrol */
.social a { display: block; color: var(--petrol); transition: color .18s ease; }
.social a:hover, .social a:focus-visible { color: var(--teal); }
.social svg { display: block; width: 40px; height: 40px; fill: currentColor; }
/* Instagram's glyph is a line drawing: outlined camera, filled dot */
.social .social-outline { fill: none; stroke: currentColor; stroke-width: 2.2; }
.social .social-outline .dot { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ articles -- */
/* Long-form blog posts. Text runs in a readable column; figures, tables and
   card grids may use the full content width. */

.article-hero .post-meta { color: var(--accent); margin-bottom: 18px; }
.arrow-link--light { margin: 0 0 22px; color: var(--ivory); border-bottom-color: var(--accent); font-size: 16px; }
.arrow-link--light:hover { border-bottom-color: var(--ivory); }
.article-hero h1 { max-width: 26ch; }

.article > .wrap { padding-top: 48px; padding-bottom: 56px; }
.prose { max-width: 74ch; }
.prose > p { margin-bottom: 18px; }
.article h2 {
  margin: 56px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  line-height: 1.22;
}
.article h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.article h3 { margin: 32px 0 10px; font-size: 21px; }
.article .kicker--teal { margin-bottom: 4px; }

/* in this post */
.toc {
  margin: 0 0 40px;
  padding: 20px 24px;
  background: var(--ivory);
  border-left: 4px solid var(--teal);
  border-radius: 4px;
}
.toc p { margin: 0 0 8px; color: var(--teal); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2 260px; column-gap: 32px; }
.toc li { margin: 0 0 4px; break-inside: avoid; }
.toc a { border-bottom: 1px solid transparent; }
.toc a:hover, .toc a:focus-visible { border-bottom-color: var(--teal); }

/* key facts */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 28px 0 36px;
  padding: 0;
  list-style: none;
}
.facts li {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--teal);
  border-radius: 4px;
  line-height: 1.35;
}
.facts strong { display: block; margin-bottom: 4px; color: var(--petrol); font-size: 30px; font-weight: 700; line-height: 1.1; }

/* call-outs */
.callout {
  max-width: 74ch;
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--ivory);
  border-left: 4px solid var(--teal);
  border-radius: 4px;
}
.callout p:last-child { margin-bottom: 0; }
.callout__title { margin: 0 0 6px; color: var(--teal); font-weight: 700; }
.callout--quote { background: var(--petrol); border-left-color: var(--accent); color: var(--ivory); }
.callout--quote p { font-size: 22px; line-height: 1.45; }
.callout--sand { border-left-color: var(--accent); }

/* offline / atline / online / inline */
.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.term {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.term h3 { margin: 0 0 8px; font-size: 22px; }
.term p { margin: 0 0 10px; font-size: 16px; line-height: 24px; }
.term .term__spe { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }
.term .term__spe strong { color: var(--teal); }
.term--highlight { background: var(--petrol); border-color: var(--petrol); color: var(--ivory); }
.term--highlight h3 { color: var(--ivory); }
.term--highlight .term__spe { border-top-color: rgba(247, 241, 227, .3); }
.term--highlight .term__spe strong { color: var(--accent); }
.term__scale { display: block; margin-bottom: 8px; color: var(--teal); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.term--highlight .term__scale { color: var(--accent); }

/* figures */
.article-fig { margin: 32px 0; }
/* diagrams are drawn with large lettering; capped so their text never
   outgrows the body text */
.article-fig img {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.article-fig figcaption { max-width: 880px; margin: 10px auto 0; color: var(--petrol); font-size: 15px; line-height: 23px; text-align: left; }
.article-fig figcaption b { color: var(--teal); }
.article-fig--narrow img, .article-fig--narrow figcaption { max-width: 620px; }
.fig-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 32px 0; }
.fig-pair .article-fig { margin: 0; }

/* tables */
.table-scroll { margin: 24px 0 32px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.data-table caption { padding: 12px 16px; background: var(--ivory); color: var(--petrol); font-weight: 700; text-align: left; caption-side: top; }
.data-table th, .data-table td { padding: 11px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--petrol); color: var(--ivory); font-weight: 700; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: var(--ivory); }
.data-table tbody th { color: var(--petrol); font-weight: 700; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
/* highlighted row or column: palette colours only, no tints */
.data-table .is-us,
.data-table tr.is-us > * { font-weight: 700; }
.data-table tr.is-us > :first-child,
.data-table td.is-us { box-shadow: inset 4px 0 0 var(--teal); }
.yes { color: var(--teal); font-weight: 700; }
.no  { color: var(--error); font-weight: 700; }
.pos {
  display: inline-block;
  min-width: 2.2em;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--petrol);
  color: var(--ivory);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.pos--free { background: transparent; border: 1px solid var(--rule); color: var(--petrol); }

/* strengths / limitations */
.pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 24px 0 32px; }
.pros-cons > div { padding: 20px 22px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--teal); border-radius: 4px; }
.pros-cons > div.cons { border-top-color: var(--error); }
.pros-cons h3 { margin: 0 0 10px; font-size: 18px; }
.pros-cons .cons h3 { color: var(--error); }
.pros-cons ul { margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 24px; }
.pros-cons li { margin-bottom: 8px; }

/* step-by-step method */
.steps { margin: 28px 0 36px; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative;
  margin: 0;
  padding: 0 0 28px 64px;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--petrol);
  color: var(--ivory);
  font-weight: 700;
}
.steps > li::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 4px;
  left: 19px;
  width: 2px;
  background: var(--rule);
}
.steps > li:last-child::after { display: none; }
.steps h3 { margin: 6px 0 8px; font-size: 20px; }
.steps p { max-width: 70ch; }
.steps .article-fig { margin: 16px 0 0; }
.steps .article-fig img { max-width: 480px; margin: 0; }
.steps .article-fig figcaption { max-width: 480px; margin-left: 0; }
.step--optional > h3::after { content: "optional"; margin-left: 10px; padding: 1px 8px; border: 1px solid var(--teal); border-radius: 999px; color: var(--teal); font-size: 13px; font-weight: 700; vertical-align: middle; }

/* code */
.table-title { max-width: 74ch; margin: 28px 0 0; color: var(--petrol); }
.table-title code { font-size: .9em; }
.code {
  margin: 20px 0 28px;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--petrol);
  border-radius: 4px;
  color: var(--ivory);
  font: 14px/1.6 Consolas, "SFMono-Regular", Menlo, monospace;
  tab-size: 4;
}
.code .c { color: var(--accent); }
.code-compare td, .code-compare th { vertical-align: top; }
.code-compare tbody th { width: 24%; }
.code-compare pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--petrol);
  border-radius: 4px;
  color: var(--ivory);
  font: 13px/1.55 Consolas, "SFMono-Regular", Menlo, monospace;
  white-space: pre;
}
.code-compare .na { color: var(--error); font-weight: 700; }

/* version timeline */
.timeline { margin: 28px 0 36px; padding: 0; list-style: none; border-left: 2px solid var(--teal); }
.timeline li { position: relative; margin: 0; padding: 0 0 22px 26px; }
.timeline li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -8px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  background: var(--bg);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { background: var(--teal); }
.timeline .v { display: block; color: var(--petrol); font-weight: 700; }
.timeline .v small { margin-left: 8px; color: var(--teal); font-size: 14px; letter-spacing: .06em; }

/* photo story: a dated timeline, photo beside text on wide screens */
.story { margin: 28px 0 12px; padding: 0 0 0 28px; list-style: none; border-left: 2px solid var(--teal); }
.story > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "date date" "photo text";
  gap: 6px 28px;
  margin: 0 0 40px;
}
.story > li:last-child { margin-bottom: 0; }
.story > li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -37px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  background: var(--bg);
}
.story > li:last-child::before { background: var(--teal); }
.story__date { grid-area: date; margin: 0 0 6px; color: var(--teal); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story__photo { grid-area: photo; margin: 0; }
.story__photo img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 4px; border-bottom: 4px solid var(--teal); }
/* a scanned document is shown whole, never cropped */
.story__photo--document img { max-height: 560px; object-fit: contain; background: var(--surface); padding: 12px; border: 1px solid var(--rule); border-bottom: 4px solid var(--teal); }
.story__text { grid-area: text; align-self: center; }
.story__text h3 { margin: 0 0 8px; font-size: 22px; }
.story__text p { margin: 0; }
@media (max-width: 760px) {
  .story > li { grid-template-columns: 1fr; grid-template-areas: "date" "photo" "text"; }
  .story__text { margin-top: 10px; }
}

/* About: field photo between the bio and the contact line */
/* About: text on petrol on the left, the installation photo bleeding off the
   right edge. The person and the case fill the photo, so a veil over it (as
   on Home) would hide them. */
.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 480px;
}
.hero-split__text {
  align-self: center;
  padding: 72px 48px 72px max(16px, calc((100vw - var(--measure)) / 2 + 16px));
}
.hero-split__text h1 { max-width: 20ch; }
.hero-split__photo { margin: 0; position: relative; }
.hero-split__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
}
@media (max-width: 860px) {
  .hero--split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__text { padding: 56px 16px 40px; }
  .hero-split__photo { aspect-ratio: 4 / 3; }
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; padding: 0; list-style: none; }
.chips li { margin: 0; padding: 5px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; font-size: 15px; line-height: 22px; }

/* references and post navigation */
.references { max-width: 80ch; padding-left: 1.4em; font-size: 15px; line-height: 23px; }
.references li { margin-bottom: 10px; overflow-wrap: anywhere; }
.next-post {
  display: block;
  max-width: 74ch;
  margin: 48px 0 0;
  padding: 24px 26px;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: 4px;
}
.next-post span { display: block; color: var(--teal); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.next-post strong { display: block; margin-top: 4px; color: var(--petrol); font-size: 21px; line-height: 1.3; }
.next-post:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------- contact form -- */

.contact-form { max-width: 680px; }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--petrol);
  font-weight: 700;
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(21, 73, 83, .35);
  border-radius: 4px;
  background: var(--surface);
  color: var(--petrol);
  font: inherit;
  font-weight: 500;
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--petrol);
  outline-offset: 1px;
  border-color: var(--petrol);
}
.field [aria-invalid="true"] { border-color: var(--error); }

.field-hint, .field-error { margin: 6px 0 0; font-size: 15px; line-height: 22px; }
.field-hint  { color: var(--petrol); }
.field-error { color: var(--error); font-weight: 700; }

.form-note { margin: 4px 0 22px; color: var(--petrol); font-size: 15px; line-height: 23px; }

.form-status {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  background: var(--ivory);
}
.form-status:focus { outline: none; }
.form-status--error { border-left-color: var(--error); }

.contact-form .btn { cursor: pointer; font-family: inherit; }
.contact-form .btn:disabled { opacity: .6; cursor: progress; }

/* honeypot: out of sight and out of the accessibility tree */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  padding: 32px 0 40px;
  border-top: 1px solid var(--rule);
}
.site-footer p { font-size: var(--fs-body); }

/* footer "Cookies" is a button that has to read as one more link */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Imprint · Privacy · Cookies · Terms · Contact
   No underline at rest; it appears on hover and focus so the items still
   announce themselves as links. The dots are drawn by CSS, not typed. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li { margin: 0; }
.footer-links li + li::before {
  content: "\00B7";
  margin: 0 .7em;
  color: var(--teal);
  font-weight: 700;
}
.footer-links a,
.footer-links .link-button {
  color: var(--petrol);
  text-decoration: none;
  text-underline-offset: 3px;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links .link-button:hover,
.footer-links .link-button:focus-visible { text-decoration: underline; }
.footer-links [aria-current="page"] { font-weight: 700; }

/* One block, not a stack of ever-narrower centered lines: the funding note
   and the logos share a row above a full-width rule, the legal links sit
   centered below it. */
.footer-inner { max-width: var(--measure); margin: 0 auto; padding: 0 16px; }
.footer-funding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.footer-funding p { flex: 1 1 260px; max-width: 34ch; margin: 0; }
.footer-funding .logo-row { --logo-h: 60px; gap: 24px 44px; justify-content: flex-end; }
.site-footer nav { padding-top: 18px; }

/* ---------------------------------------------------------- legal pages -- */

.legal p { max-width: 78ch; }

/* ------------------------------------------------------- cookie consent -- */

.consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 90;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.consent__inner {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--petrol);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(21, 73, 83, .22);
  font-size: 16px;
  line-height: 24px;
  pointer-events: auto;
}

.consent__title { margin: 0 0 8px; font-size: var(--fs-h3); line-height: 1.3; }
.consent__title:focus { outline: none; }
.consent p { margin: 0 0 10px; }

.consent__details { margin: 14px 0 4px; border-top: 1px solid var(--rule); }
.consent__service { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.consent__service p { margin: 6px 0 4px 32px; color: var(--petrol); }

.consent__switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.consent__switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--petrol); }
.consent__switch input:disabled { cursor: not-allowed; }
.consent__name { color: var(--petrol); font-weight: 700; }

.consent__cookies {
  margin: 0 0 0 32px;
  padding: 0;
  list-style: none;
  color: var(--teal);
  font-size: 14px;
}
.consent__cookies li { margin: 0; }
.consent__cookies code { color: var(--ink); font-size: 13px; }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* Reject and Accept are the same button: refusing must not be harder. */
.consent__btn {
  flex: 1 1 160px;
  padding: 12px 20px;
  border: 2px solid var(--petrol);
  border-radius: 4px;
  background: var(--petrol);
  color: var(--ivory);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.consent__btn:hover { background: var(--teal); border-color: var(--teal); }

.consent__link {
  flex: 1 0 100%;
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: var(--petrol);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.consent button:focus-visible,
.consent input:focus-visible,
.consent a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 860px) {
  :root { --fs-h1: 32px; --fs-h2: 22px; }

  .logo-row { --logo-h: 60px; gap: 24px 48px; }
  .footer-funding { justify-content: center; text-align: center; }
  .footer-funding p { max-width: none; }
  .footer-funding .logo-row { justify-content: center; }

  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
  }
  .site-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  /* in the stacked mobile menu the item rules stay; the sand mark moves to the left edge */
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.active { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .site-nav li:last-child a { border-bottom: 0; }

  .band > .wrap { padding-top: 44px; padding-bottom: 44px; }
  .hero > .wrap { padding-top: 60px; padding-bottom: 56px; }
  .lead { font-size: 19px; line-height: 30px; }
}

@media (max-width: 520px) {
  :root { --fs-body: 17px; --lh-body: 26px; --fs-h1: 28px; }
  .brand__logo { height: 40px; }
  .logo-row,
  .footer-funding .logo-row { --logo-h: 48px; gap: 24px 36px; }
  /* a Buttons block wraps each button in a div, which is the flex item here */
  .btn, .wp-block-button, .wp-block-button__link { width: 100%; }
  .card, .specs li, .post-card { padding: 22px; }
}

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

@media print {
  .site-header, .nav-toggle, .skip-link, .consent { display: none; }
  .page { padding-top: 0; }
  body { background: #fff; }
  .band--petrol { background: #fff !important; color: #000 !important; }
}

/* ------------------------------------------------- pages built in blocks -- */

/* Pages written in the WordPress editor use core blocks: a band is a group
   with the band class, a button is a Buttons block. WordPress's own block
   stylesheet is not loaded, so the few rules its markup needs are here. */
/* the legal pages are a bare section: as a group they need their own column */
.page > .wp-block-group:not(.band) {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 16px;
}
.page > .wp-block-group > h1:first-child,
.page > .wp-block-group > h2:first-child,
.page > .wp-block-group > h3:first-child { margin-top: 0; }

/* a figure's margins come from its own class, never from the browser */
figure { margin: 0; }

/* core prints .wp-block-image img { height: auto } inline, and it would
   otherwise beat the figures that set the height of the photo themselves */
.wp-block-image.hero-split__photo img,
.wp-block-image.mode__photo img { height: 100%; }

/* an image block carries no width and height, so the room the screenshot will
   need has to be reserved here, or the page jumps when it arrives */
.fig--screenshot img { aspect-ratio: 820 / 466; width: 100%; }

/* the editor has no underline button: links in body text underline themselves */
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover, .post-body a:focus-visible { text-decoration-thickness: 2px; }

.wp-block-button__link {
  display: inline-block;
  padding: 14px 26px;
  border: 2px solid var(--petrol);
  border-radius: 4px;
  background: var(--petrol);
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover { background: var(--teal); border-color: var(--teal); }

.band--petrol .wp-block-button__link, .hero .wp-block-button__link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--petrol);
}
.band--petrol .wp-block-button__link:hover,
.hero .wp-block-button__link:hover { background: var(--ivory); border-color: var(--ivory); }

/* a ghost button: the class lands on the wrapper the Buttons block adds */
.btn--ghost .wp-block-button__link { background: transparent; color: var(--petrol); }
.btn--ghost .wp-block-button__link:hover { background: var(--petrol); color: var(--ivory); border-color: var(--petrol); }
.band--petrol .btn--ghost .wp-block-button__link, .hero .btn--ghost .wp-block-button__link {
  background: transparent;
  border-color: rgba(247, 241, 227, .7);
  color: var(--ivory);
}
.band--petrol .btn--ghost .wp-block-button__link:hover,
.hero .btn--ghost .wp-block-button__link:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--petrol);
}