/* ==========================================================================
   Flanarah Farms
   One stylesheet, hand written, no framework, no build step.

   Design intent: an agricultural business that wants to be taken seriously by
   investors and buyers. Photography led, generous, quiet in its colour, with
   the structure of a designed site rather than a formatted document.

   What it still refuses to do, and why: no purple gradients, no glassmorphism,
   no glow, no icon library, no stock-photo abstractions, no invented numbers,
   no motion that does not report something. Restraint in the decoration,
   not in the design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens
   Light on :root. Dark twice: under prefers-color-scheme for people whose
   system is dark, and under [data-theme] so the toggle beats the system.
   -------------------------------------------------------------------------- */
:root {
  /* Warm, agricultural, and not a wall of green. Cream and sand carry the
     page; harvest amber is the action colour; terracotta is the accent;
     deep forest is reserved for the bands that need weight. */
  --cream:        #fcf9f4;
  --sand:         #f4ede1;
  --sand-deep:    #ebe0cd;
  --ink:          #241f1a;
  --ink-soft:     #5d554a;
  --line:         #e6dcca;
  --line-strong:  #cfc1a7;

  --forest:       #1f3d2f;
  --forest-soft:  #2e5a45;
  --forest-pale:  #e0e9e2;
  --amber:        #c77d2a;
  --amber-deep:   #a5601c;
  --amber-pale:   #fbeed8;
  --terra:        #a8452b;
  --gold:         #d99b33;

  /* Roles used across components, so a repaint is one block, not a hunt. */
  --bg:            var(--cream);
  --bg-panel:      var(--sand);
  --bg-sunk:       var(--sand-deep);
  --bg-invert:     var(--forest);
  --footer-bg:     #16301f;
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --text-invert:   #f2efe7;
  --text-invert-muted: #b3c2b6;
  --rule:          var(--line);
  --rule-strong:   var(--line-strong);
  --accent:        var(--forest);
  --accent-soft:   var(--forest-soft);
  --accent-pale:   var(--forest-pale);
  --laterite:      var(--terra);
  --link:          var(--forest-soft);
  --focus:         var(--amber-deep);
  --brand-deep:    var(--forest);
  --btn-bg:        var(--amber);
  --btn-bg-hover:  var(--amber-deep);
  --btn-fg:        #21170a;
  --ph-bg:         #fbeed8;
  --ph-text:       #6b4a12;
  --ok:            #2e6b4a;
  --warn:          #96650f;
  --danger:        #9c3221;

  --shadow-sm:   0 1px 2px rgba(36, 31, 26, 0.06);
  --shadow-lift: 0 2px 4px rgba(36, 31, 26, 0.05), 0 12px 28px -14px rgba(36, 31, 26, 0.22);
  --shadow-card: 0 1px 3px rgba(36, 31, 26, 0.06), 0 18px 40px -22px rgba(36, 31, 26, 0.30);

  --font-head: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius:    6px;
  --radius-lg: 14px;
  --wrap: 76rem;
  --wrap-narrow: 46rem;
  --measure: 38rem;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;  --s9: 7rem;

  color-scheme: light;
}

/* Dark: the same warmth, turned down. Amber stays the action colour and
   keeps dark text on it, which is what passes contrast in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:       #171410;
    --sand:        #201c16;
    --sand-deep:   #29241c;
    --ink:         #ece6dc;
    --ink-soft:    #a79e90;
    --line:        #332d24;
    --line-strong: #4c4335;
    --forest:      #16291f;
    --forest-soft: #7fae91;
    --forest-pale: #1d2f25;
    --footer-bg:   #10201a;
    --amber:       #dfa055;
    --amber-deep:  #c9873c;
    --amber-pale:  #2e2314;
    --terra:       #d3805a;
    --gold:        #e6b866;
    --text-invert: #f2efe7;
    --text-invert-muted: #a9bcaf;
    --link:        #9cc7ac;
    --focus:       #dfa055;
    --ph-bg:       #3a2f16;
    --ph-text:     #f5dfa8;
    --ok:          #7fae91;
    --warn:        #d8ae61;
    --danger:      #e08a7c;
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
    --shadow-lift: 0 2px 4px rgba(0,0,0,0.5), 0 14px 30px -16px rgba(0,0,0,0.8);
    --shadow-card: 0 2px 6px rgba(0,0,0,0.5), 0 20px 44px -24px rgba(0,0,0,0.9);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --cream:       #171410;
  --sand:        #201c16;
  --sand-deep:   #29241c;
  --ink:         #ece6dc;
  --ink-soft:    #a79e90;
  --line:        #332d24;
  --line-strong: #4c4335;
  --forest:      #16291f;
  --forest-soft: #7fae91;
  --forest-pale: #1d2f25;
  --footer-bg:   #10201a;
  --amber:       #dfa055;
  --amber-deep:  #c9873c;
  --amber-pale:  #2e2314;
  --terra:       #d3805a;
  --gold:        #e6b866;
  --text-invert: #f2efe7;
  --text-invert-muted: #a9bcaf;
  --link:        #9cc7ac;
  --focus:       #dfa055;
  --ph-bg:       #3a2f16;
  --ph-text:     #f5dfa8;
  --ok:          #7fae91;
  --warn:        #d8ae61;
  --danger:      #e08a7c;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.5), 0 14px 30px -16px rgba(0,0,0,0.8);
  --shadow-card: 0 2px 6px rgba(0,0,0,0.5), 0 20px 44px -24px rgba(0,0,0,0.9);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
h4 { font-size: 1rem; font-family: var(--font-body); letter-spacing: 0; }

p, ul, ol, dl, table { margin: 0 0 var(--s4); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }

.muted   { color: var(--text-muted); }
.small   { font-size: 0.875rem; }
.measure { max-width: var(--measure); }
.center  { text-align: center; }
.mt-6    { margin-top: var(--s6); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: var(--s3) var(--s5);
}
.skip-link:focus { left: 0; }

/* Anything that is also a .wrap must set its vertical padding with
   padding-block, never the padding shorthand. The shorthand's horizontal
   value overrides the side gutter .wrap provides, and the damage is
   invisible on a desktop because the wrap is centred inside its max-width.
   On a phone it puts the logo and the headline hard against the screen
   edge, which is where this was found. */
.wrap        { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s5); }

/* Below 384px a 24px gutter on each side leaves too little for the content
   and a few cards spill by a pixel or three. 16px still reads as a margin
   and gives the text back the room. */
@media (max-width: 24rem) {
  .wrap, .wrap-narrow { padding: 0 var(--s4); }
}

/* The eyebrow above a section heading. Small, letterspaced, in the soil
   colour. It gives every section a consistent opening beat. */
.eyebrow {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--laterite);
  margin: 0 0 var(--s3);
}
.section-head { margin-bottom: var(--s7); max-width: 44rem; }
.section-head p { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 0; }

/* Content still waiting on the farm. Impossible to miss, on purpose. */
.ph {
  background: var(--ph-bg); color: var(--ph-text);
  padding: 0 0.2em; border-bottom: 1px dashed currentColor; font-style: italic;
}

.js-only { display: none; }
.has-js .js-only { display: inline-flex; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 12px -6px rgba(0,0,0,0.25);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-block: var(--s4); flex-wrap: wrap;
}

.wordmark { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--text); }
/* The emblem is a drawing on a transparent background, not a tile, so it
   gets no corner radius and no background of its own: it sits on the page
   the way it sits on the letterhead. */
.wordmark-mark { width: 56px; height: 56px; flex: none; object-fit: contain; }
@media (max-width: 30rem) { .wordmark-mark { width: 44px; height: 44px; } }
.wordmark-name {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.1; color: var(--text);
}
.wordmark-sub {
  display: block; font-size: 0.6875rem; color: var(--text-muted);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4;
}

.site-nav { display: flex; align-items: center; gap: var(--s5); }
.site-nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; align-items: center; }
/* Plain nav links get the sliding underline. The Contact link is a button
   and is left alone: two different affordances, two different treatments. */
.site-nav a:not(.btn) {
  color: var(--text); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding: var(--s2) 0; position: relative;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--amber); transform: scaleX(0);
  transform-origin: left; transition: transform 160ms ease;
}
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--amber-deep); }
.site-top.is-over .site-nav a:not(.btn)[aria-current="page"] { color: var(--gold); }
.site-nav a.btn[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.nav-toggle, .theme-toggle {
  font: inherit; font-size: 0.8125rem;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.35rem var(--s3); cursor: pointer;
  align-items: center; gap: var(--s2);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.nav-toggle:hover, .theme-toggle:hover { background: var(--bg-panel); color: var(--text); }
.nav-toggle, .has-js .nav-toggle { display: none; }

@media (max-width: 52rem) {
  .has-js .nav-toggle { display: inline-flex; }
  .has-js .site-nav { display: none; width: 100%; }
  .has-js .site-nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--s4); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--rule);
  }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s4); width: 100%; }
  .site-nav a { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   4. Hero
   A photograph, a scrim, and one clear statement. When there is no
   photograph the hero still has to look deliberate rather than broken, so
   it falls back to a deep field-green ground with a furrow pattern drawn in
   CSS. No stock photo, no grey box.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(30rem, 74vh, 44rem);
  display: flex; align-items: flex-end;
  background: var(--bg-invert);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media picture { width: 100%; height: 100%; object-fit: cover; }
.hero-media figure, .hero-media figcaption { margin: 0; display: contents; }
.hero-media figcaption { display: none; }

/* The fallback ground: furrows, drawn rather than photographed. */
.hero-fallback {
  position: absolute; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(
      177deg,
      rgba(255,255,255,0.035) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(168deg, #1d3c2c 0%, #14291f 55%, #0f2118 100%);
}
/* Two scrims, not one. The bottom one carries the headline; the top one
   exists so the navigation stays legible when the photograph happens to be
   bright sky up there, which is most farm photographs taken in daylight. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* The top scrim has to stay dark all the way down to roughly 40%,
       because that is where the eyebrow and the headline actually sit, and
       it moves between 18% and 34% depending on the window. Fading it out
       at 30% left the eyebrow sitting on bare sky at some sizes. */
    linear-gradient(
      to bottom,
      rgba(8, 20, 14, 0.80) 0%,
      rgba(8, 20, 14, 0.72) 14%,
      rgba(8, 20, 14, 0.62) 28%,
      rgba(8, 20, 14, 0.40) 42%,
      rgba(8, 20, 14, 0.18) 56%,
      transparent 70%
    ),
    linear-gradient(
      to top,
      rgba(8, 20, 14, 0.90) 0%,
      rgba(8, 20, 14, 0.66) 38%,
      rgba(8, 20, 14, 0.30) 70%,
      rgba(8, 20, 14, 0.14) 100%
    );
}
.hero-inner { padding-block: var(--s9) var(--s8); width: 100%; }
.hero .eyebrow {
  /* Amber over a daylight photograph fails every contrast test. White with
     a shadow reads on anything, including the one bright sky in ten that
     the scrim cannot fully handle. */
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 20, 14, 0.75);
}
.hero h1 { color: #fff; max-width: 18ch; margin-bottom: var(--s5); }
.hero-lead {
  color: rgba(255,255,255,0.88); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 40ch; margin-bottom: var(--s6);
}
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }

/* The band of hard facts directly under the hero. Every figure is dated
   where it is stated in full further down the page. */
.factband { background: var(--brand-deep); color: #fff; }
.factband ul {
  list-style: none; margin: 0; padding: var(--s6) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s5);
}
.factband dt, .factband .fb-label {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: var(--s1);
}
.factband .fb-value { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.25; }
.factband .ph { background: rgba(255,255,255,0.16); color: #ffe9b8; border-bottom-color: rgba(255,255,255,0.5); }

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */
.section        { padding: var(--s9) 0; }
.section-tight  { padding: var(--s8) 0; }
.section-panel  { background: var(--bg-panel); }
.section-invert { background: var(--bg-invert); color: var(--text-invert); }
.section-invert h1, .section-invert h2, .section-invert h3 { color: #fff; }
.section-invert .muted, .section-invert p { color: var(--text-invert-muted); }
.section-invert .eyebrow { color: #c9a888; }
.section + .section:not(.section-panel):not(.section-invert) { padding-top: 0; }

.page-head { padding: var(--s8) 0 var(--s7); border-bottom: 1px solid var(--rule); }
.page-head h1 { margin-bottom: var(--s4); }
.page-head p { font-size: 1.1875rem; color: var(--text-muted); max-width: 46ch; margin: 0; }

/* --------------------------------------------------------------------------
   6. Enterprise rows: photograph one side, substance the other, alternating.
   -------------------------------------------------------------------------- */
.ent {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center;
  padding: var(--s8) 0; border-top: 1px solid var(--rule);
}
.ent:first-of-type { border-top: 0; padding-top: var(--s6); }
.ent:nth-child(even) .ent-media { order: 2; }
/* A grid item will not shrink below the intrinsic width of what is inside
   it unless it is told it may. Without this, a photograph that is wider than
   the phone screen holds its own column open at its real pixel width, and
   the whole page gains a sideways scroll that nothing on screen explains.
   It showed up only on the enterprise rows, and only under 480px, which is
   exactly where nobody looks and everybody reads. */
.ent > * { min-width: 0; }
.ent-media img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius); }
.ent-body h3 { font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--s4); }
.ent-body p { max-width: 44ch; }
.ent-facts { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.ent-facts li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s4); font-size: 0.9375rem; }
.ent-facts .k { color: var(--text-muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.1em; padding-top: 0.3em; }
@media (max-width: 52rem) {
  .ent { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s7) 0; }
  .ent:nth-child(even) .ent-media { order: 0; }
}

/* A photograph slot with nothing in it yet. Deliberately designed: the same
   furrow ground as the hero, the slot named in small caps. It reads as art
   direction rather than a missing file, and it disappears the moment a real
   photograph is assigned. */
.imgslot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    repeating-linear-gradient(177deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 22px),
    linear-gradient(168deg, #24503a 0%, #17362794 55%, #12291e 100%);
  background-color: #17362a;
  display: grid; place-items: center; text-align: center;
  padding: var(--s6); min-height: 14rem;
}
.imgslot span {
  color: rgba(255,255,255,0.72); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.8;
}
.imgslot-4x3  { aspect-ratio: 4 / 3; }
.imgslot-3x2  { aspect-ratio: 3 / 2; }
.imgslot-1x1  { aspect-ratio: 1 / 1; }
.imgslot-wide { aspect-ratio: 21 / 9; }
/* For a slot inside a container that already sets its own aspect ratio. */
.imgslot-fill { height: 100%; width: 100%; min-height: 0; }

/* --------------------------------------------------------------------------
   7. Cards, notes, gallery
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s5); }

.card {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-sunk); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .imgslot { min-height: 0; height: 100%; border-radius: 0; padding: var(--s4); }
.card-body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-family: var(--font-head); margin-bottom: var(--s2); }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { text-decoration: underline; }
.card-body p { color: var(--text-muted); font-size: 0.9375rem; }
.card-body p:last-child { margin-bottom: 0; }
.card-date { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--laterite); margin-bottom: var(--s2); }

/* A photographic strip. Uneven on purpose: a farm is not a grid. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.gallery > * { overflow: hidden; border-radius: var(--radius); background: var(--bg-sunk); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.gallery > *:hover img { transform: scale(1.03); }
.gallery .g-tall  { grid-row: span 2; }
.gallery .g-wide  { grid-column: span 2; }
.gallery figure, .gallery figcaption { margin: 0; }
.gallery figcaption { display: none; }
.gallery .imgslot { height: 100%; min-height: 9rem; border-radius: 0; }
@media (max-width: 52rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .g-tall { grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   8. Facts, production tables, quotes
   -------------------------------------------------------------------------- */
.facts { border-top: 1px solid var(--rule-strong); margin: 0; }
.facts div {
  display: grid; grid-template-columns: 15rem 1fr; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; }
@media (max-width: 40rem) {
  .facts div { grid-template-columns: 1fr; gap: var(--s1); }
  .facts dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; }
}
.as-at { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--s4); }

.panel {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s6);
}
.section-panel .panel { background: var(--bg); }

.production { width: 100%; border-collapse: collapse; }
.production caption { text-align: left; color: var(--text-muted); font-size: 0.875rem; padding-bottom: var(--s4); }
.production th, .production td {
  text-align: left; padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.production thead th {
  font-weight: 600; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted); padding-top: 0;
  border-bottom: 1px solid var(--rule-strong);
}
.production tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.status { font-size: 0.8125rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.45em; }
.status::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--rule-strong); flex: none; }
.status-in_production::before { background: var(--ok); }
.status-harvesting::before    { background: var(--laterite); }
.status-planned::before       { background: var(--text-muted); }

.pullquote {
  font-family: var(--font-head); font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.35; color: var(--accent); border-left: 3px solid var(--laterite);
  padding-left: var(--s5); margin: 0 0 var(--s5);
}
.section-invert .pullquote { color: #fff; }

/* --------------------------------------------------------------------------
   9. People, sites
   -------------------------------------------------------------------------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s6); }
.person-photo { margin-bottom: var(--s4); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--bg-sunk); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo .imgslot { height: 100%; min-height: 0; border-radius: 0; }
.person h3 { margin-bottom: 0; font-family: var(--font-head); }
.person .role { color: var(--laterite); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s3); display: block; }

.site-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.site-card-body { padding: var(--s5); }
.site-card h3 { font-family: var(--font-head); color: var(--text); margin-bottom: var(--s4); }
.site-card dl { margin: 0; font-size: 0.9375rem; }
.site-card dt { color: var(--text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--s3); }
.site-card dd { margin: 0; }
.site-card .card-media { aspect-ratio: 16/10; }

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.9rem; padding: 0.7rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); transform: translateY(-1px); }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--bg-panel); border-color: var(--text-muted); }
/* On a photograph: one solid button and one outlined, so the two actions
   are not weighted the same. */
.btn-onphoto { background: #fff; color: #163a2b; border-color: #fff; }
.btn-onphoto:hover { background: var(--accent-pale); border-color: var(--accent-pale); color: #102a1f; }
.btn-onphoto-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-onphoto-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small { min-height: 2.25rem; padding: 0.3rem 0.9rem; font-size: 0.8125rem; }
.section-invert .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.45); }
.section-invert .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.more-link { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent-pale); padding-bottom: 2px; }
.more-link:hover { border-bottom-color: var(--accent); }
.more-link::after { content: " \2192"; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form { max-width: 36rem; }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-weight: 600; margin-bottom: var(--s2); font-size: 0.9375rem; }
.optional { font-weight: 400; color: var(--text-muted); font-size: 0.8125rem; }
.hint { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 var(--s2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="number"], input[type="datetime-local"],
select, textarea {
  font: inherit; font-size: 1rem; width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 9rem; }

input[type="file"] {
  font: inherit; font-size: 0.9375rem; width: 100%;
  padding: 0.6rem; background: var(--bg-panel); color: var(--text);
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
}

.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); border-width: 2px; }
.error-text { color: var(--danger); font-size: 0.9375rem; margin: var(--s2) 0 0; font-weight: 600; }
.error-summary { border: 2px solid var(--danger); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s5); background: var(--bg); }
.error-summary p { margin: 0 0 var(--s2); }
.error-summary ul { margin: 0; padding-left: var(--s5); }
.error-summary a { color: var(--danger); }

.notice { border-left: 4px solid var(--rule-strong); padding: var(--s4) var(--s5); background: var(--bg-panel); margin-bottom: var(--s5); border-radius: 0 var(--radius) var(--radius) 0; }
.notice p:last-child { margin-bottom: 0; }
.notice-ok     { border-left-color: var(--ok); }
.notice-warn   { border-left-color: var(--warn); }
.notice-danger { border-left-color: var(--danger); }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.form-actions p { margin: 0; }

/* Contact page: form beside the direct details */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-aside { background: var(--bg-panel); border-radius: var(--radius); padding: var(--s6); }
.contact-aside h2 { font-size: 1.25rem; }
.contact-aside dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-top: var(--s4); }
.contact-aside dd { margin: 0 0 var(--s2); }

/* --------------------------------------------------------------------------
   12. Call to action band and footer
   -------------------------------------------------------------------------- */
.cta { background: var(--bg-invert); color: var(--text-invert); padding: var(--s8) 0; }
.cta-inner { display: flex; gap: var(--s6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: var(--s2); max-width: 20ch; }
.cta p { color: var(--text-invert-muted); margin: 0; max-width: 44ch; }

/* The call to action above and the footer are both deep green, and with
   nothing between them they read as one enormous block. The footer goes a
   shade darker and takes a hairline along its top edge, so the eye can see
   where the page ends and the small print begins. */
.site-footer {
  background: var(--footer-bg);
  color: var(--text-invert);
  padding: var(--s8) 0 var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 56rem) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .footer-inner { grid-template-columns: 1fr; } }
.footer-block p { margin: 0 0 var(--s2); font-size: 0.9375rem; color: var(--text-invert-muted); }
.footer-block a { color: var(--text-invert); text-decoration: none; }
.footer-block a:hover { text-decoration: underline; }
.footer-name { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.15rem; margin-bottom: var(--s3) !important; }
.footer-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); margin-bottom: var(--s3) !important; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--s2); font-size: 0.9375rem; }
.footer-base { border-top: 1px solid rgba(255,255,255,0.14); margin-top: var(--s7); padding-top: var(--s5); }
.footer-base p { margin: 0; font-size: 0.8125rem; color: rgba(255,255,255,0.5); }
.site-footer .ph { background: rgba(255,255,255,0.14); color: #ffe9b8; border-bottom-color: rgba(255,255,255,0.4); }

/* --------------------------------------------------------------------------
   13. Field note article
   -------------------------------------------------------------------------- */
.note-date { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--laterite); }
.note-hero { margin: var(--s6) 0 var(--s7); }
.note-hero img { width: 100%; border-radius: var(--radius); }
.note-body { font-size: 1.0625rem; }
.note-body p { margin-bottom: var(--s5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   14. The site locator
   -------------------------------------------------------------------------- */
.locator { margin: var(--s6) 0 0; }
.locator-svg { width: 100%; max-width: 44rem; height: auto; background: var(--bg-panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.locator-link  { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.locator-site  { fill: var(--accent); }
.locator-ref   { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.locator-label { font-family: var(--font-body); font-size: 13px; fill: var(--text); font-weight: 600; }
.locator-label-ref { font-weight: 400; fill: var(--text-muted); }
.locator-scale line, .locator-north line, .locator-north path { stroke: var(--text-muted); stroke-width: 1.5; fill: var(--text-muted); }
.locator-scale text, .locator-north text { font-family: var(--font-body); font-size: 11px; fill: var(--text-muted); stroke: none; }

/* --------------------------------------------------------------------------
   15. Photographs and captions
   -------------------------------------------------------------------------- */
figure { margin: 0 0 var(--s4); }
figcaption { font-size: 0.8125rem; color: var(--text-muted); padding-top: var(--s3); max-width: var(--measure); }
.photo-preview { max-width: 26rem; margin-bottom: var(--s5); }
.photo-preview img { width: 100%; border-radius: var(--radius); }
.thumb-cell { width: 7.5rem; }
.thumb-cell img { width: 7rem; height: 5rem; object-fit: cover; border-radius: var(--radius); }
.thumb-cell figure, .thumb-cell figcaption { display: none; }
.thumb-cell picture { display: block; }
.thumb-cell figure { display: block; }

/* --------------------------------------------------------------------------
   16. Admin
   Plain by design: two people, a few times a month. Clear save states and a
   confirmation before deleting. No dashboard charts.
   -------------------------------------------------------------------------- */
.admin-header { background: var(--bg-panel); border-bottom: 1px solid var(--rule-strong); padding: var(--s3) 0; position: static; }
.admin-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.admin-brand { font-family: var(--font-head); font-weight: 700; color: var(--text); text-decoration: none;
               display: inline-flex; align-items: center; gap: var(--s2); }
.admin-brand img { flex: none; object-fit: contain; }
.admin-nav { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; font-size: 0.9375rem; }
.admin-main { padding: var(--s7) 0 var(--s8); }
.admin-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.admin-title h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border-bottom: 2px solid var(--rule-strong); }
.data-table tr:hover td { background: var(--bg-panel); }
.row-actions { display: flex; gap: var(--s3); white-space: nowrap; }

.empty-state { border: 1px dashed var(--rule-strong); border-radius: var(--radius); padding: var(--s7); max-width: var(--measure); background: var(--bg-panel); }
.empty-state h2 { font-size: 1.25rem; }
.empty-state p:last-child { margin-bottom: 0; }

.badge { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--text-muted); }
.badge-new { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.badge-stale { border-color: var(--warn); color: var(--warn); }

.login-page { max-width: 25rem; margin: var(--s9) auto; padding: 0 var(--s5); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   17. Motion

   One reveal on first scroll into view, and hover and focus states. Both
   report something: that content has arrived, and that a thing is
   interactive. Anybody who has asked their system for reduced motion gets
   none of it, and anybody without JavaScript sees everything immediately.
   -------------------------------------------------------------------------- */
.has-js .reveal { opacity: 0; transform: translateY(12px); }
.has-js .reveal.is-in { opacity: 1; transform: none; transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .has-js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .skip-link, .js-only, .form-actions, .cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3 { color: #000; }
  .hero { min-height: 0; background: none; color: #000; }
  .hero::after { display: none; }
  .hero h1, .hero-lead { color: #000; }
  .section { padding: 0.5cm 0; }
  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .ph { background: none; border-bottom: 1px dashed #666; }
  .has-js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   19. The richer landing-page components
   Added after review: the first pass read as a formatted document. These are
   the pieces that make it read as a designed site, with the palette carrying
   warmth rather than a single green.
   ========================================================================== */

/* --- Utility bar above the header ---------------------------------------- */
.topbar {
  background: var(--forest); color: var(--text-invert);
  font-size: 0.8125rem;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: var(--s2); flex-wrap: wrap; }
.topbar-list { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar-list li { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-invert-muted); }
.topbar-list .icon { width: 15px; height: 15px; color: var(--gold); }
.topbar-list a { color: var(--text-invert); text-decoration: none; }
.topbar-list a:hover { text-decoration: underline; }
.topbar .ph { background: rgba(255,255,255,0.14); color: #f7e3b6; border-bottom-color: rgba(255,255,255,0.35); }
@media (max-width: 46rem) { .topbar { display: none; } }

/* --- Header ---------------------------------------------------------------
   On the home page the whole top block (utility bar and header together)
   floats over the hero photograph, then becomes a solid fixed bar as soon as
   you scroll. Everywhere else it is a normal bar at the top of the page. */
.site-top { position: relative; z-index: 50; }
.site-top.is-over {
  position: absolute; top: 0; left: 0; right: 0; background: transparent;
}
.site-top.is-over .topbar { background: rgba(255,255,255,0.08); }
.site-top.is-over .site-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.14); }
.site-top.is-over .wordmark-name { color: #fff; }
.site-top.is-over .wordmark-sub { color: rgba(255,255,255,0.72); }
.site-top.is-over .site-nav a:not(.btn) { color: #fff; }
.site-top.is-over .theme-toggle { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }
.site-top.is-over .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.45); }
.site-top.is-over .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.5); }
.site-top.is-over .btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* Scrolled: solid, fixed, and the utility bar folds away to save the space. */
.site-top.is-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--bg); box-shadow: var(--shadow-lift);
}
.site-top.is-stuck .topbar { display: none; }
.site-top.is-stuck .site-header { background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-top.is-stuck .wordmark-name { color: var(--text); }
.site-top.is-stuck .wordmark-sub { color: var(--text-muted); }
.site-top.is-stuck .site-nav a:not(.btn) { color: var(--text); }
.site-top.is-stuck .theme-toggle, .site-top.is-stuck .nav-toggle { color: var(--text-muted); border-color: var(--rule-strong); }
.site-top.is-stuck .btn-secondary { color: var(--text); border-color: var(--rule-strong); }

.site-header { background: var(--bg); position: static; }

@media (max-width: 52rem) {
  .site-top.is-over { position: static; }
  .site-top.is-over .topbar { background: var(--forest); }
  .site-top.is-over .site-header { background: var(--bg); border-bottom-color: var(--rule); }
  .site-top.is-over .wordmark-name { color: var(--text); }
  .site-top.is-over .wordmark-sub { color: var(--text-muted); }
  .site-top.is-over .site-nav a:not(.btn) { color: var(--text); }
  .site-top.is-over .nav-toggle { color: var(--text-muted); border-color: var(--rule-strong); }
  .site-top.is-over .btn-secondary { color: var(--text); border-color: var(--rule-strong); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { min-height: clamp(34rem, 82vh, 50rem); }
.hero-inner { padding-block: var(--s9) var(--s8); }
.hero .eyebrow { color: #fff; }
.hero h1 { max-width: 16ch; letter-spacing: -0.02em; }
.hero-fallback {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(214,155,60,0.16) 0%, transparent 55%),
    repeating-linear-gradient(177deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #2c5540 0%, #1f3d2f 52%, #16281f 100%);
}
/* A file dropped into public/assets/img fills its frame the same way an
   uploaded one does. */
.hero-media .dropped { width: 100%; height: 100%; object-fit: cover; }
img.dropped { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-media img.dropped, .note-hero img.dropped { height: auto; border-radius: var(--radius); }

/* Curved edge into the section below, so the hero does not end on a hard
   line the way a stacked document does. */
.hero-curve { position: relative; height: 0; z-index: 3; }
.hero-curve svg { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; display: block; }
.hero-curve path { fill: var(--bg); }

/* --- Icon feature cards --------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s5); }
.feature {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s6); box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.feature .icon-wrap {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: var(--s4);
  background: var(--amber-pale); color: var(--amber-deep);
}
.feature h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--s2); }
.feature p { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
/* One card carries the weight, so the row is not three identical boxes. */
.feature-lead { background: var(--forest); border-color: var(--forest); color: var(--text-invert); }
.feature-lead h3 { color: #fff; }
.feature-lead p { color: var(--text-invert-muted); }
.feature-lead .icon-wrap { background: rgba(255,255,255,0.12); color: var(--gold); }

/* Floating over the hero edge, which is what stops the page reading as a
   stack of full-width bands. */
.features-overlap { margin-top: -5.5rem; position: relative; z-index: 4; }
@media (max-width: 52rem) { .features-overlap { margin-top: var(--s6); } }

/* --- Numbers -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s6); }
.stat { text-align: left; }
.stat .n {
  font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1; color: var(--amber-deep); display: block; margin-bottom: var(--s2);
}
.section-invert .stat .n { color: var(--gold); }
.stat .k { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.section-invert .stat .k { color: var(--text-invert-muted); }

/* --- Split section with an offset frame ----------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s6), 5vw, var(--s9)); align-items: center; }
.split-media { position: relative; }
.split-media img, .split-media .imgslot { border-radius: var(--radius-lg); position: relative; z-index: 2; }
/* The offset outline behind the picture. Drawn in the accent, one corner
   only, so it frames rather than decorates. */
.split-media::before {
  content: ""; position: absolute; inset: auto auto -1.25rem -1.25rem;
  width: 62%; height: 62%; border: 2px solid var(--amber);
  border-radius: var(--radius-lg); z-index: 1;
}
.split-media.flip::before { inset: -1.25rem -1.25rem auto auto; }
@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
  .split-media::before { display: none; }
}

/* A small badge that sits on the corner of a picture. */
.media-badge {
  position: absolute; z-index: 3; right: -0.75rem; bottom: -0.75rem;
  background: var(--amber); color: #21170a; border-radius: var(--radius);
  padding: var(--s4) var(--s5); box-shadow: var(--shadow-card); max-width: 12rem;
}
.media-badge .n { font-family: var(--font-head); font-size: 1.5rem; line-height: 1; display: block; }
.media-badge .k { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 40rem) { .media-badge { position: static; margin-top: var(--s4); max-width: none; } }

/* --- Checklist ------------------------------------------------------------ */
.ticks { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3); }
.ticks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s3); align-items: start; }
.ticks .icon { width: 20px; height: 20px; color: var(--amber-deep); margin-top: 0.2em; }
.section-invert .ticks .icon { color: var(--gold); }

/* --- Testimonials --------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s5); }
.quote {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s6); box-shadow: var(--shadow-sm); position: relative;
}
.quote::before {
  content: "\201C"; font-family: var(--font-head); font-size: 5rem; line-height: 1;
  color: var(--amber); opacity: 0.28; position: absolute; top: 0.4rem; right: 1.25rem;
}
.quote p { font-size: 1.0625rem; }
.quote-who { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.quote-avatar {
  width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--sand-deep); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; color: var(--forest-soft);
}
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-who strong { display: block; }
.quote-who span { font-size: 0.8125rem; color: var(--text-muted); }

/* --- Certifications strip ------------------------------------------------- */
.logos { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); align-items: center; justify-content: center; }
.logo-item {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--text-muted); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.logo-item .icon { color: var(--amber-deep); }

/* --- Newsletter / closing band -------------------------------------------- */
.band-photo { position: relative; isolation: isolate; overflow: hidden; }
.band-photo > .band-bg { position: absolute; inset: 0; z-index: -2; }
.band-photo > .band-bg img { width: 100%; height: 100%; object-fit: cover; }
.band-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,38,29,0.95) 0%, rgba(20,38,29,0.82) 55%, rgba(20,38,29,0.6) 100%);
}
.subscribe { display: flex; gap: var(--s3); flex-wrap: wrap; max-width: 30rem; }
.subscribe input { flex: 1 1 14rem; }

/* --- Section heads, centred variant --------------------------------------- */
.section-head-center { max-width: 44rem; margin-left: auto; margin-right: auto; text-align: center; }
.section-head-center .eyebrow { display: inline-block; }
.rule-mark { display: block; width: 3.5rem; height: 3px; background: var(--amber); border-radius: 2px; margin: 0 0 var(--s4); }
.section-head-center .rule-mark { margin-left: auto; margin-right: auto; }

/* --- Rounder cards, warmer shadows ---------------------------------------- */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-card); }
.panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.site-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.imgslot { border-radius: var(--radius-lg); }
.card-media .imgslot, .person-photo .imgslot, .gallery .imgslot { border-radius: 0; }
.btn { border-radius: var(--radius); font-weight: 700; letter-spacing: 0.01em; }
.contact-aside { border-radius: var(--radius-lg); }

/* No decorative rule beside the eyebrow. The letterspacing and the colour
   already separate it from the heading; a dash was one mark too many. */
.eyebrow { display: inline-flex; align-items: center; }

/* --- The empty photograph slot -------------------------------------------
   Drawn, not grey, and not somebody else's stock photo. */
.imgslot { position: relative; overflow: hidden; background: var(--forest); padding: 0; display: block; }
.imgslot-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.imgslot-label {
  position: absolute; inset: auto 0 0 0; padding: var(--s5);
  color: rgba(255,255,255,0.9); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.9;
  background: linear-gradient(to top, rgba(12,26,19,0.85), transparent);
}
.imgslot-label em { display: block; font-style: normal; color: var(--gold); letter-spacing: 0.1em; }

/* --- The theme switcher ---------------------------------------------------
   Three explicit choices in one control, so you can see which one is on and
   what the alternatives are. A single cycling button showed neither. */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-panel); border: 1px solid var(--rule);
  border-radius: 999px;
}
.theme-switch button {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  background: transparent; color: var(--text-muted);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.theme-switch button:hover { color: var(--text); background: var(--bg-sunk); }
.theme-switch button[aria-pressed="true"] {
  background: var(--bg); color: var(--amber-deep);
  box-shadow: var(--shadow-sm);
}
.theme-switch .icon { width: 17px; height: 17px; }
.site-top.is-over .theme-switch { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); }
.site-top.is-over .theme-switch button { color: rgba(255,255,255,0.75); }
.site-top.is-over .theme-switch button:hover { color: #fff; background: rgba(255,255,255,0.14); }
.site-top.is-over .theme-switch button[aria-pressed="true"] { background: rgba(255,255,255,0.92); color: var(--forest); }
.site-top.is-stuck .theme-switch { background: var(--bg-panel); border-color: var(--rule); }
.site-top.is-stuck .theme-switch button { color: var(--text-muted); }
.site-top.is-stuck .theme-switch button[aria-pressed="true"] { background: var(--bg); color: var(--amber-deep); }

/* ==========================================================================
   20. Page heads, detail lists and the icon details
   Added so the inner pages carry the same weight as the home page instead of
   opening on a bare heading.
   ========================================================================== */

.page-head-rich {
  background:
    radial-gradient(90% 120% at 92% 0%, var(--amber-pale) 0%, transparent 60%),
    var(--bg-panel);
  border-bottom: 1px solid var(--rule);
  padding: var(--s8) 0 var(--s7);
}
.page-head-inner {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(var(--s5), 4vw, var(--s8)); align-items: end;
}
@media (max-width: 52rem) { .page-head-inner { grid-template-columns: 1fr; align-items: start; } }

/* The quick links beside a page heading. They are real anchors to real
   sections, not decoration. */
.page-head-jump { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.page-head-jump a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--text); font-size: 0.9375rem; font-weight: 600;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.page-head-jump a:hover { border-color: var(--amber); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.page-head-jump .icon { color: var(--amber-deep); flex: none; }

/* An enterprise heading with its own mark beside it. */
.ent-heading { display: flex; align-items: center; gap: var(--s4); }
.ent-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: var(--radius);
  background: var(--amber-pale); color: var(--amber-deep);
}
.section-invert .ent-icon { background: rgba(255,255,255,0.1); color: var(--gold); }

/* Label, value, and an icon that says which kind of fact it is. */
.detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.detail-list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s4); align-items: start; }
.detail-list .di {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--radius); background: var(--bg-sunk); color: var(--amber-deep);
}
.detail-list strong {
  display: block; font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.contact-aside .detail-list .di { background: var(--bg); }

/* A short line set apart, used where a sentence deserves the weight. */
.lead-quote {
  font-family: var(--font-head); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.4; color: var(--text); border-left: 3px solid var(--amber);
  padding-left: var(--s5); margin: var(--s5) 0;
}
.section-invert .lead-quote { color: #fff; }

/* Dates and small meta lines carry their icon inline. */
.card-date, .note-date { display: inline-flex; align-items: center; gap: var(--s2); }
.card-date .icon, .note-date .icon { color: var(--amber-deep); }
.card-more { margin-top: auto; padding-top: var(--s4); }
.note-back { margin-bottom: var(--s5); }
.more-link.back::after { content: ""; }
.more-link.back::before { content: "\2190 "; }

.empty-state .icon-wrap {
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius); background: var(--amber-pale); color: var(--amber-deep);
  margin-bottom: var(--s4);
}

/* Footer and top bar icons sit on the text baseline rather than above it. */
.footer-block .icon, .topbar-list .icon { vertical-align: -3px; }
.footer-block .icon { color: var(--gold); }

/* ==========================================================================
   21. Depth in both themes
   Light was flat and dark was flatter. Surfaces now differ from the page,
   and the inverted bands carry a soft field texture rather than a slab of
   one colour.
   ========================================================================== */
.section-panel {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(199,125,42,0.07) 0%, transparent 55%),
    var(--bg-panel);
}
.section-invert {
  background:
    radial-gradient(80% 120% at 8% 0%, rgba(217,155,51,0.16) 0%, transparent 55%),
    repeating-linear-gradient(178deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 30px),
    var(--bg-invert);
}
.cta {
  background:
    radial-gradient(70% 140% at 90% 20%, rgba(217,155,51,0.20) 0%, transparent 60%),
    var(--bg-invert);
}
.site-footer {
  background:
    radial-gradient(60% 120% at 5% 0%, rgba(217,155,51,0.10) 0%, transparent 55%),
    var(--footer-bg);
}
.factband {
  background:
    radial-gradient(60% 160% at 85% 50%, rgba(217,155,51,0.18) 0%, transparent 60%),
    var(--brand-deep);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .site-card,
:root[data-theme="dark"] .page-head-jump a { background: var(--bg-panel); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .feature,
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .site-card,
  :root:not([data-theme="light"]) .page-head-jump a { background: var(--bg-panel); }
}

/* ==========================================================================
   22. Produce chips, the Field Notes callout, and management portraits
   ========================================================================== */

/* What is in an enterprise today. Deliberately a list of names rather than
   prose: a buyer scans for the thing they want. */
.chips { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li {
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  background: var(--amber-pale); color: var(--amber-deep);
  border: 1px solid transparent;
}
.feature-lead .chips li { background: rgba(255,255,255,0.12); color: var(--gold); }
.section-invert .chips li { background: rgba(255,255,255,0.12); color: var(--gold); }

/* The route to Field Notes. It exists because the produce list is never
   finished, and the page should say so rather than imply otherwise. */
.notes-callout {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s7); padding: var(--s5) var(--s6);
  background: var(--bg); border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.notes-callout > div { flex: 1 1 18rem; }
.notes-callout h3 { font-family: var(--font-body); font-size: 1.0625rem; margin-bottom: var(--s1); }
.notes-callout p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }
.notes-callout .icon-wrap {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border-radius: var(--radius); background: var(--amber-pale); color: var(--amber-deep);
}

/* Management. Small round portraits, not a panel each. */
.mgmt {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s7); justify-content: center;
}
.mgmt-person { display: flex; align-items: center; gap: var(--s4); }
.mgmt .avatar {
  width: 5.5rem; height: 5.5rem; flex: none; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--bg-sunk); color: var(--amber-deep);
  border: 3px solid var(--bg); box-shadow: var(--shadow-lift);
}
.mgmt .avatar img, .mgmt .avatar picture, .mgmt .avatar .imgslot {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.mgmt .avatar .imgslot-label { display: none; }
.mgmt-text strong { display: block; font-size: 1.0625rem; }
.mgmt-text .role {
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber-deep);
}

/* An odd number of cards in an auto-fit grid always leaves a hole: five
   cards become four and a gap. Flex fixes it properly, because the items on
   the last row grow to fill the width they are given.

   The basis is a third of the row minus the gap, so three is the most that
   can sit on one line. Five then lays out as three plus two, and those two
   stretch to half the row each. No hole at any width. */
@media (min-width: 34rem) {
  .features-fill { display: flex; flex-wrap: wrap; }
  /* Two per row on a tablet: five becomes 2 + 2 + 1, and the last one grows
     to the full width rather than sitting beside a gap. */
  .features-fill > * { flex: 1 1 calc(50% - var(--s5)); }
}
@media (min-width: 60rem) {
  /* Three per row on a desktop: five becomes 3 + 2, and those two stretch to
     half the row each. */
  .features-fill > * { flex: 1 1 calc(33.333% - var(--s5)); min-width: 15rem; }
}

/* A single note card stretched across the full width looks like a mistake.
   Cap the card width so one, two or three all sit sensibly. */
.cards > * { max-width: 34rem; }

/* A grid or flex child keeps an automatic minimum size, so one long word can
   stop a card shrinking to its column and push it past the page gutter. Only
   visible on a very narrow phone, and only fixable here. */
.cards > *, .features-fill > *, .contact-grid > * { min-width: 0; }
.cards { justify-content: start; }

/* Gallery tiles keep their shape whatever the photograph's own proportions
   are, so the grid stays square-edged and the rows line up. */
.gallery > * { aspect-ratio: 1 / 1; }
.gallery .g-wide { aspect-ratio: 2.08 / 1; }
.gallery img, .gallery picture { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   The gallery page
   ========================================================================== */

/* Justified rows, the way a photo gallery actually works.

   CSS columns were the first attempt and they were wrong: columns balance by
   height, so with twenty one photographs of wildly different shapes one
   column ran hundreds of pixels longer than the others and left a chunk of
   empty page at the bottom. That is exactly the hole Abdul does not want.

   This is the layout every real gallery uses instead. Every row is a fixed
   height. Each photograph is a flex item whose width is its own aspect ratio
   times that height, and whose flex-grow is the same ratio, so the items in
   a row share out the leftover width in proportion and the row ends exactly
   at the right margin. The last row stretches the same way as every other
   one, so there is never a gap, whether there are five photographs or fifty.

   The aspect ratio has to reach CSS somehow and inline styles are banned by
   our own Content Security Policy, so each photograph gets one of five shape
   classes worked out from its real pixel dimensions in PHP. Five buckets is
   enough: the crop that object-fit applies inside a bucket is a few percent,
   not a visible squeeze. */

.gallery-count {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--s5);
}

.photo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  /* --row is the height of every row, and every flex-basis below is derived
     from it, so one number changes the whole density of the page. */
  --row: 15rem;
}

.photo-wall-item {
  margin: 0;
  height: var(--row);
  min-width: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunk);
}

/* Shape buckets. flex-grow is the aspect ratio, so a wide photograph takes
   proportionally more of the leftover width than a tall one. */
.ar-tall      { flex: 0.45 1 calc(var(--row) * 0.45); }
.ar-portrait  { flex: 0.75 1 calc(var(--row) * 0.75); }
.ar-square    { flex: 1.00 1 var(--row); }
.ar-landscape { flex: 1.35 1 calc(var(--row) * 1.35); }
.ar-wide      { flex: 2.10 1 calc(var(--row) * 2.10); }

.photo-wall-link {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.photo-wall-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}

.photo-wall-link:hover img,
.photo-wall-link:focus-visible img { transform: scale(1.05); }

/* The caption sits on the photograph rather than under it. With rows of a
   fixed height a caption below would push every tile out of line again, and
   this is how the caption stays readable over a bright picture: its own
   gradient, not a guess about the photograph. */
.photo-wall-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s5) var(--s3) var(--s3);
  font-size: 0.85rem;
  line-height: 1.35;
  color: #f4efe6;
  background: linear-gradient(to top, rgba(8, 20, 14, 0.88) 0%,
                              rgba(8, 20, 14, 0.55) 55%, transparent 100%);
  pointer-events: none;
  /* Long captions on a narrow tile would cover the whole picture. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 58rem) { .photo-wall { --row: 16.5rem; } }
@media (min-width: 86rem) { .photo-wall { --row: 18rem; } }

/* On a phone the rows collapse to one photograph each at its own natural
   shape. Cropping to a fixed height is what makes a gallery tidy on a
   desktop and what ruins it on a 380px screen. */
@media (max-width: 34rem) {
  .photo-wall { display: block; }
  .photo-wall-item { height: auto; margin-bottom: var(--s3); }
  .photo-wall-link img { height: auto; }
  .photo-wall-item figcaption { font-size: 0.9rem; }
}

/* Somebody who has asked their system to reduce motion gets no zoom. */
@media (prefers-reduced-motion: reduce) {
  .photo-wall-link img { transition: none; }
  .photo-wall-link:hover img,
  .photo-wall-link:focus-visible img { transform: none; }
}

/* --- The viewer ---------------------------------------------------------

   Built by site.js and never shown without it. The page below stays exactly
   where it was, so closing the viewer puts the visitor back at the
   photograph they opened rather than at the top of the page. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(8, 20, 14, 0.94);
}

.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: min(72rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: center;
}

.lightbox-figure img {
  max-width: 100%;
  /* Room for the caption and the close button at every window height. */
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: #0d1a13;
}

.lightbox-figure figcaption {
  color: #f0e9dd;
  font-size: 0.95rem;
  text-align: center;
  max-width: 44rem;
  line-height: 1.5;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 1px solid rgba(240, 233, 221, 0.28);
  background: rgba(13, 26, 19, 0.7);
  color: #f0e9dd;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, border-color 160ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.lightbox-close {
  top: var(--s4);
  right: var(--s4);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}

.lightbox-prev { left: var(--s4); }
.lightbox-next { right: var(--s4); }

/* On a phone the arrows would sit on top of the photograph itself, so they
   move to the bottom corners where the thumbs already are. */
@media (max-width: 40rem) {
  .lightbox { padding: var(--s3); }
  .lightbox-nav { top: auto; bottom: var(--s4); transform: none; }
  .lightbox-figure img { max-height: calc(100vh - 12rem); }
}

/* Somebody who has asked their system to reduce motion gets no zoom. */
@media (prefers-reduced-motion: reduce) {
  .photo-wall-link img,
  .photo-wall-zoom { transition: none; }
  .photo-wall-link:hover img,
  .photo-wall-link:focus-visible img { transform: none; }
}

/* The admin gallery list. Plain rows, because the job there is editing
   captions and order rather than admiring the photographs. */
.gallery-admin { display: grid; gap: var(--s3); }

.gallery-admin-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.gallery-admin-row.is-hidden { opacity: 0.62; }

.gallery-admin-thumb {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-sunk);
  display: block;
}

.gallery-admin-fields { display: grid; gap: var(--s2); min-width: 0; }

.gallery-admin-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  word-break: break-word;
}

.gallery-admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.gallery-admin-controls label { font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.gallery-admin-order { width: 4.5rem; }

@media (max-width: 34rem) {
  .gallery-admin-row { grid-template-columns: 1fr; }
  .gallery-admin-thumb { width: 100%; height: 10rem; }
}

/* The setup checklist on the database page. Only ever seen on localhost, by
   somebody trying to get the admin open for the first time. */
.setup-steps { list-style: none; margin: var(--s6) 0; padding: 0; display: grid; gap: var(--s4); counter-reset: step; }

.setup-step {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  background: var(--bg-panel);
}
.setup-step p { margin-bottom: var(--s2); }
.setup-step p:last-child { margin-bottom: 0; }

.setup-step-label { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; }

.setup-step-state {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; white-space: nowrap;
}

.setup-step.is-done          { border-left-color: var(--ok); }
.setup-step.is-done .setup-step-state     { color: var(--ok); }
.setup-step.is-todo          { border-left-color: var(--warn); background: var(--bg-sunk); }
.setup-step.is-todo .setup-step-state     { color: var(--warn); }
.setup-step.is-optional      { border-left-color: var(--line-strong); }
.setup-step.is-optional .setup-step-state { color: var(--text-muted); }

/* ==========================================================================
   The admin: dashboard, tabs, picture slots
   ========================================================================== */

/* The dashboard used to be full width blocks stacked down the page, because
   the container they sat in had no layout rule at all. It is a grid now, and
   every card carries the one line that was missing: where the thing it
   counts actually shows up on the site. */

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s7);
}

.admin-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.admin-card p { margin: 0; }

.admin-card-head { display: flex; align-items: center; gap: var(--s2); }
.admin-card-icon { display: inline-flex; color: var(--accent); }
.admin-card-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted);
}

.admin-card-stat { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.admin-card-number {
  font-family: var(--font-head);
  font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--text);
}
.admin-card-stat.is-warn .admin-card-number { color: var(--warn); }
.admin-card-unit { font-size: 0.9rem; color: var(--text-muted); }
.admin-card-extra { font-size: 0.85rem; color: var(--text-muted); }

/* The line that makes the number mean something. */
.admin-card-where {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  margin-top: var(--s2) !important;
  flex: 1;
}

.admin-card-cta { padding-top: var(--s3); }
.admin-card-cta a { font-weight: 600; font-size: 0.9rem; }

.admin-foot { border-top: 1px solid var(--rule); padding-top: var(--s5); }

/* --- Tabs inside one screen --------------------------------------------- */

.subtabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.subtab {
  display: block;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-panel);
  text-decoration: none;
  color: var(--text);
}
.subtab:hover { border-color: var(--rule-strong); }

/* The current tab is marked by a solid edge and weight, not colour alone. */
.subtab.is-current {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.subtab-name { display: block; font-weight: 700; margin-bottom: 2px; }
.subtab-note { display: block; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }

/* --- One row per place on the site --------------------------------------- */

.slot-list { display: grid; gap: var(--s3); margin-bottom: var(--s6); }

.slot-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--s5);
  align-items: start;
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.slot-row.is-empty { background: var(--bg-sunk); }

.slot-thumb {
  width: 6rem; height: 4.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunk);
  display: grid; place-items: center;
}
.slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-thumb-empty { color: var(--text-muted); opacity: 0.5; }

.slot-detail { min-width: 0; display: grid; gap: var(--s2); }
.slot-detail p { margin: 0; }
.slot-where { font-size: 0.98rem; }

.slot-state { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: 0.88rem; }

.slot-tag {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.slot-tag-filled { background: var(--accent-pale); color: var(--accent); }
.slot-tag-empty  { background: var(--amber-pale); color: var(--amber-deep); }

.slot-drop { line-height: 1.5; }
.slot-drop code { font-size: 0.85em; }

.slot-upload { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.slot-upload input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.slot-upload input[type="file"] { flex: 0 1 auto; font-size: 0.85rem; }

@media (max-width: 34rem) {
  .slot-row { grid-template-columns: 1fr; }
  .slot-thumb { width: 100%; height: 8rem; }
}

/* --- Field notes: the category sidebar -----------------------------------

   A standing list rather than a row of pills, and present whether or not
   anything is published under it. It is how somebody learns that careers and
   longer pieces live here at all; hiding it until a note exists removes it
   from the one visit where it would have taught them something. */

.notes-layout { display: grid; gap: var(--s6); }

/* Sidebar on the right on a desktop. On a phone it goes ABOVE the notes,
   because a filter you meet after scrolling past everything is not a filter. */
@media (min-width: 64rem) {
  .notes-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s7); align-items: start; }
  .notes-aside { position: sticky; top: var(--s6); }
}
@media (max-width: 63.99rem) {
  .notes-aside { order: -1; }
}

.notes-main { min-width: 0; }
.notes-heading { margin-bottom: var(--s5); }
.notes-heading h2 { font-size: 1.4rem; margin-bottom: var(--s2); }
.notes-heading p { margin: 0; font-size: 0.95rem; }

.notes-aside { display: grid; gap: var(--s4); min-width: 0; }

.side-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: var(--s5);
}

.side-card-title {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 700;
  margin: 0 0 var(--s3);
}

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li + li { border-top: 1px solid var(--rule); }

.cat-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0.68rem 0.2rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
}
.cat-link:hover { color: var(--link); }
.cat-icon { display: inline-flex; color: var(--text-muted); flex: none; }
.cat-name { flex: 1; min-width: 0; }

.cat-n {
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-sunk);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  min-width: 1.5rem; text-align: center;
}

/* The current one is marked by weight and colour together, never colour
   alone, so it still reads for anybody who cannot separate the two. */
.cat-link.is-current { color: var(--accent); font-weight: 700; }
.cat-link.is-current .cat-icon { color: var(--accent); }
.cat-link.is-current .cat-n { background: var(--accent-pale); color: var(--accent); }

/* The second card: what is coming, in the slot a promo would normally take. */

/* A block in the main column of Field Notes: its own heading, then content.
   Coming soon lives here rather than in the sidebar, because until the first
   notes are written it is the most interesting thing on the page and a
   sidebar card is the one place nobody looks. */
.notes-block { margin-bottom: var(--s7); }
.notes-block-head { margin-bottom: var(--s5); max-width: 44rem; }
.notes-block-head h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); margin-bottom: var(--s3); }
.notes-block-head p { margin: 0; color: var(--text-muted); }
.notes-block-head-tight { margin-bottom: var(--s5); padding-top: var(--s2); }
.notes-block-head-tight h2 { margin-bottom: 0; }

/* With the coming list on screen the page is not empty, so this is a quiet
   footnote under it rather than a great empty box saying the opposite. */
.notes-none {
  display: flex; align-items: flex-start; gap: var(--s2);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  padding: var(--s4) var(--s5);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  max-width: 44rem;
  margin: 0;
}
.notes-none .icon { flex: none; margin-top: 2px; }

/* The tag on a card, so a note read out of context still says what it is. */
.note-cat {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  vertical-align: 1px;
}
.note-cat-news   { background: var(--accent-pale);  color: var(--accent); }
.note-cat-career { background: var(--amber-pale);   color: var(--amber-deep); }
.note-cat-blog   { background: var(--bg-sunk);      color: var(--text-muted); }

/* --- Coming soon ----------------------------------------------------------
   Deliberately not a table. The table above it carries counted figures with
   the date they were counted against them; these are intentions. Making them
   look different is the whole point. */

.coming-list {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s3);
}

.coming-item {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.coming-icon {
  display: grid; place-items: center; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: var(--radius);
  background: var(--amber-pale); color: var(--amber-deep);
}

.coming-body { display: grid; gap: 2px; min-width: 0; }
.coming-body strong { font-size: 1rem; }
.coming-variety { font-size: 0.85rem; color: var(--text-muted); }
.coming-where {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 600;
}
.coming-more { margin: 0; }

/* The same thing inside one enterprise block on Operations, where the
   enterprise is already named and the icon would be repetition. */
.coming-inline {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  background: var(--bg-panel);
}
.coming-inline-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted);
  margin: 0 0 var(--s3);
}
.coming-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.coming-chips li {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--rule-strong);
  font-size: 0.88rem; font-weight: 600;
}
.coming-chips .coming-variety { font-weight: 400; }

/* The date and the category tag share a line on a note card. Without this
   the date breaks mid-way ("2 / September 2026") to make room for the tag. */
.card-date { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.card-date-when { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.card-date .note-cat { margin-left: 0; }

/* Five coming lines across a four-wide grid left the fifth alone with a gap
   beside it. Same flex treatment as the enterprise cards: the last row grows
   to fill the width instead of leaving a hole. */
@media (min-width: 34rem) {
  .coming-list { display: flex; flex-wrap: wrap; }
  .coming-list > * { flex: 1 1 calc(50% - var(--s3)); }
}
@media (min-width: 60rem) {
  .coming-list > * { flex: 1 1 calc(25% - var(--s3)); min-width: 13rem; }
}


/* ==========================================================================
   The article grid
   Picture, category, headline, opening, then date and the way in. That order
   is the order somebody scanning a page of articles actually reads one.
   ========================================================================== */

.post-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .post-grid { grid-template-columns: repeat(2, 1fr); } }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.post-card:hover,
.post-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: 0 10px 28px rgba(36, 31, 26, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card:hover, .post-card:focus-within { transform: none; transition: none; }
}

/* A fixed shape for every card's picture, so a row of them lines up whatever
   proportions the photographs happen to have. */
.post-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunk);
  overflow: hidden;
}
.post-card-media img,
.post-card-media picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* No photograph yet. A drawn panel in the farm's own colours rather than a
   grey box or a hole in the row. */
.post-card-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(31, 61, 47, 0.045) 14px 28px),
    var(--accent-pale);
}
.post-card-blank svg { opacity: 0.55; }
.post-card-blank-career { color: var(--amber-deep); background: var(--amber-pale); }
.post-card-blank-blog   { color: var(--laterite); background: var(--bg-sunk); }

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  flex: 1 1 auto;
}
.post-card-cat {
  align-self: flex-start;
  margin: 0;
}
.post-card-title { margin: 0; font-size: 1.125rem; line-height: 1.32; }
.post-card-title a { color: var(--text); text-decoration: none; }
.post-card-title a:hover, .post-card-title a:focus-visible { text-decoration: underline; }
.post-card-excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The foot is pushed to the bottom so that in a row of cards of different
   text lengths, every date and every link still line up across the row. */
.post-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: auto 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}
.post-card-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text-muted);
}
.post-card-date svg { flex: none; opacity: 0.7; }
.post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.post-card-more:hover, .post-card-more:focus-visible { text-decoration: underline; }
.post-card-arrow { transition: transform 140ms ease; }
.post-card:hover .post-card-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .post-card-arrow { transition: none; } }

/* The one card under the categories. */
.side-card-invite { margin-top: var(--s5); }
.side-card-invite .side-card-title { display: flex; align-items: center; gap: 0.45em; }
.side-card-invite p { margin: 0 0 var(--s3); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.side-card-invite p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Admin: uploading, shapes, and the article editor
   ========================================================================== */

/* --- What the browser did to the photograph before sending it ------------ */
.upload-note {
  margin: var(--s2) 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.upload-note-ok   { color: var(--ok); }
.upload-note-warn { color: var(--warn); }

/* --- Choosing a shape ----------------------------------------------------- */
/* Tiles rather than a dropdown, because the whole point is to compare them,
   and a dropdown shows one at a time. */
/* The upload form holds a row of six tiles that exist to be compared, so it
   breaks out of the 36rem column the rest of the admin forms use. */
.gallery-upload { max-width: 60rem; }

/* Laid out as a wrapping row rather than a grid of equal columns, because
   equal columns are exactly what these must not be: a wide tile needs four
   times the width of a tall one, and forcing them into the same column
   clamps both to the same rectangle and defeats the point. */
.shape-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
  align-items: flex-start;
}
.field label.shape-option,
.shape-option {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--s2);
  min-width: 7.5rem;
  max-width: 15rem;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}
.shape-option:hover { border-color: var(--rule-strong); }
.shape-option.is-chosen {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-pale);
}
.shape-option input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shape-option:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The tile itself is the shape: the frame's proportions ARE the ratio the
   gallery uses, so what you compare is what you get. */
/* The tile IS the shape.
   Height is fixed and width comes from the ratio, so the six tiles sit side
   by side at genuinely comparable proportions: tall really is a narrow
   column, wide really is a long strip. Doing it the other way round, fixing
   the width and capping the height, flattened four of the six into the same
   rectangle and made the row useless for the one thing it is for. */
.shape-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-sunk);
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.shape-frame img { display: block; width: 100%; height: 100%; }
.shape-frame img.shape-crop  { object-fit: cover; }
.shape-frame img.shape-whole { object-fit: contain; background: var(--bg-sunk); }
.shape-frame-empty {
  /* Sits in the middle of the tile rather than in a corner, and gets out of
     the way entirely once there is a photograph to look at. */
  padding: var(--s4) 0;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}
.shape-frame.has-photo .shape-frame-empty { display: none; }

.shape-auto        { aspect-ratio: 4 / 3; }
.ar-tall-box       { aspect-ratio: 0.45; }
.ar-portrait-box   { aspect-ratio: 0.75; }
.ar-square-box     { aspect-ratio: 1; }
.ar-landscape-box  { aspect-ratio: 1.35; }
.ar-wide-box       { aspect-ratio: 2.1; }

.shape-name { display: block; font-weight: 700; font-size: 0.875rem; text-align: center; margin: 0; }
.shape-note { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted);
              line-height: 1.4; text-align: center; margin: 0; }

.gallery-admin-shape { margin-left: 0.4em; }

/* --- The article editor --------------------------------------------------- */
.rte {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.rte:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }

.rte-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  column-gap: 2px;
  padding: var(--s2);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--rule);
}
.rte-btn {
  min-width: 2rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.rte-btn:hover { background: var(--bg-sunk); border-color: var(--rule); }
.rte-btn.is-bold      { font-weight: 800; }
.rte-btn.is-italic    { font-style: italic; }
.rte-btn.is-underline { text-decoration: underline; }
.rte-sep { width: 1px; height: 1.2rem; margin: 0 var(--s2); background: var(--rule-strong); }

.rte-area {
  min-height: 22rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s5);
  line-height: 1.7;
}
.rte-area:focus { outline: none; }
.rte-area > :first-child { margin-top: 0; }
.rte-area > :last-child  { margin-bottom: 0; }
.rte-area h2 { font-size: 1.375rem; margin: 1.4em 0 0.4em; }
.rte-area h3 { font-size: 1.125rem; margin: 1.3em 0 0.4em; }
.rte-area p  { margin: 0 0 1em; }
.rte-area ul, .rte-area ol { margin: 0 0 1em; padding-left: 1.5em; }
.rte-area li { margin-bottom: 0.3em; }
.rte-area blockquote {
  margin: 0 0 1em;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}
.rte-area a { color: var(--link); }

/* With JavaScript the textarea still carries the value that gets submitted;
   it is simply not the thing being typed into. Hidden rather than removed,
   because removing it would take the value with it. */
.rte-source {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- The compose page layout ---------------------------------------------- */
/* The article form is the one place in the admin that needs the whole width:
   a 36rem column is right for a short form and wrong for writing in. */
.compose { max-width: 60rem; }
.compose-row { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 46rem) {
  .compose-row-2 { grid-template-columns: 2fr 1fr; }
  .compose-row-3 { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* In the three narrow columns, the hint reads better under the control than
   above it: four wrapped lines of explanation push the control itself out of
   line with the two beside it, and the eye loses the row.
   Every selector here is a direct child of .field on purpose. Without the
   child combinator, "label" also matches the labels inside the radio group
   below, and reordering those silently swaps the two options round. */
.compose-row-3 > .field { display: flex; flex-direction: column; }
.compose-row-3 > .field > label,
.compose-row-3 > .field > .field-label { order: 1; }
.compose-row-3 > .field > input,
.compose-row-3 > .field > select,
.compose-row-3 > .field > .choice-set { order: 2; }
.compose-row-3 > .field > .hint { order: 3; margin: var(--s2) 0 0; }
.compose-row-3 > .field > .compose-when,
.compose-row-3 > .field > .compose-current,
.compose-row-3 > .field > .compose-library,
.compose-row-3 > .field > .error-text { order: 4; }
.compose .field-label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}
.choice-set { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.field label.choice,
.choice {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9375rem;
}
.choice:hover { border-color: var(--rule-strong); }
.choice:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.compose-when { margin-top: var(--s3); }
.compose-current { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 0; flex-wrap: wrap; }
.compose-current img { border-radius: var(--radius); border: 1px solid var(--rule); }
.compose-remove { display: flex; align-items: center; gap: 0.4em; font-size: 0.875rem; color: var(--text-muted); }
.compose-library { margin-top: var(--s3); font-size: 0.9375rem; }
.compose-library summary { cursor: pointer; color: var(--link); }
.compose-library[open] summary { margin-bottom: var(--s3); }
.field-wide { margin-top: var(--s5); }