/* ------------------------------------------------------------------------
   Plug-in Solar East of England

   The design source is what this part of the country looks like from a road:
   flat ground, a very large sky, and a low line of brick and flint along the
   bottom of it. Three decisions carry the site and nothing else competes.

   1. THE HORIZON is the signature device. Every object on this site is two
      filled fields, one above the other, divided by a hard horizontal edge at
      a fixed place: a tall open FIELD on top (a photograph, or the pale
      ground) and a shorter, deeper LAND at the foot carrying the object's
      type and its action. The masthead, the hero photograph, every card, the
      form, every question, the nav panel, the heading plates, the aside, the
      closing tile and the page head are all built this way. Both halves are
      filled grounds, so it is a division between two fields and never an edge
      treatment on one side of something. Nothing here is one flat plane.

   2. THE STANDING OBJECT is the seam device, and the only one. Sections meet
      on a plain colour change with no rule, no band and no step. What marks
      the join is that the incoming section's lead object rises 72px into the
      section above it, the way a barn or a church tower is the only thing
      that tells you where one field ends out here. It never appears inside a
      component, and no seam ever gets a second separator on top of it.

   3. THE ARC is the one ambient motion. On open ground the sun goes right
      round the sky and the light moves round the house all day, so a very
      wide, very soft warm light turns slowly about a point below the fen
      plane of the hero. Transform only, a full turn so the loop has no seam,
      and it does not run for anyone who has asked for less movement.

   Radius is 0 on every object, so the glyphs are Lucide geometry (ISC) drawn
   with square caps and mitred joins. Texture is used twice and no more: fine
   dust on the fen hero plane and on the footer. Never a textured object on a
   textured plane, and nothing behind body copy.
   ------------------------------------------------------------------------ */

:root {
  /* Eight roles. fen: the deep plane, the masthead, the footer, the page
     head. ink: all text on light grounds. sky: the page ground, the colour of
     a bright overcast day over the levels. silt: the alternate ground and the
     land half of every object, measured at 1.233 against sky, which is where
     two grounds separate for the eye without reading as banding. brick:
     ACTION ONLY, nothing decorative is ever this colour. reed: information,
     and the one tinted full bleed band. barley: the highlight, the accent
     phrase in a headline and every figure. muted: secondary text. */
  --fen:    #16242C;
  --ink:    #23323A;
  --sky:    #F5F8F9;
  --silt:   #DAE2E2;
  --brick:  #A93B26;
  --reed:   #4C6B52;
  --barley: #8C6414;
  --muted:  #57666E;

  /* Derived, not new colours: the highlight lifted for dark grounds, reed
     taken deep enough to carry white type, brick darkened for a pressed
     state, and one hairline tint used inside components only. */
  --barley-lit:  #E4B750;
  --reed-deep:   #2E4634;
  --brick-press: #8A2E1D;
  --hair:        #C2CFD0;

  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;   /* three card photographs land near 400px across at 1440 */
  --gut: 26px;
  --stand: 72px;    /* how far a section's lead object rises into the one above */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.004em; }
h4 { font-size: 1.02rem; line-height: 1.25; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Underlines do not exist on this site. Links carry colour and weight and
   hover darkens. */
a { color: var(--brick); font-weight: 700; text-decoration: none; }
a:hover { color: var(--brick-press); }
a, a:hover, a:focus { text-decoration: none; }

:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
.on-dark :focus-visible, .mast :focus-visible, .hero :focus-visible,
.page-head :focus-visible, .foot :focus-visible { outline-color: var(--barley-lit); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--sky); padding: 12px 18px; font-weight: 700; z-index: 60; }
.skip:focus { left: 0; color: var(--sky); }

.ico { flex: none; }

/* --- masthead ---------------------------------------------------------- */
/* The masthead is the device in miniature: a pale strip of sky on top, the
   fen band of land under it carrying the wordmark and the nav. */
.mast-counties { background: var(--silt); color: var(--ink); font-size: 0.83rem; }
.mast-counties .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 28px; min-height: 40px; padding-top: 9px; padding-bottom: 9px;
}
.mast-counties ol { display: flex; flex-wrap: wrap; gap: 3px 13px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.mast-counties li + li::before { content: "\00B7"; margin-right: 13px; color: #8A9A9B; }
.mast-counties p { margin: 0; color: var(--muted); }
.mast-counties b { color: var(--ink); font-weight: 700; }

.mast { background: var(--fen); position: sticky; top: 0; z-index: 50; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }

.brand {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.22rem, 1.6vw, 1.55rem); letter-spacing: -0.018em;
  color: var(--sky); line-height: 1.04; min-width: 0;
  display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 4px 0;
}
.brand:hover { color: var(--sky); }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand span { display: block; }
.brand b { display: block; color: var(--barley-lit); font-weight: 700; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button {
  font: inherit; font-weight: 700; font-size: 1rem; color: #DCE4E6;
  background: none; border: 0; cursor: pointer;
  padding: 13px 14px; line-height: 1.2; min-height: 44px;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav a:hover, .nav button:hover { color: var(--barley-lit); }
.nav [aria-expanded="true"] { color: var(--barley-lit); }
.nav [aria-expanded="true"] .ico { transform: rotate(180deg); }

.nav .cta-top { background: var(--brick); color: #FFFFFF; padding: 13px 20px; }
.nav .cta-top:hover { background: var(--brick-press); color: #FFFFFF; }

.drop { position: relative; }
/* One anchor rule for every panel on this site: the left edge of its own
   trigger. The panel is an object, so it carries the horizon too. */
.panel {
  position: absolute; top: 100%; left: 0;
  width: 400px; max-width: calc(100vw - 40px);
  background: var(--sky); color: var(--ink);
  display: none;
}
.drop[data-open="true"] .panel { display: block; }
.panel-top { padding: 22px 24px 20px; }
.panel-top p.strap { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.panel-top ul { list-style: none; margin: 0; padding: 0; }
.panel-top li a { display: block; padding: 10px 0; color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.panel-top li a span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.panel-top li a:hover { color: var(--brick); }
.panel-top li a:hover span { color: var(--muted); }
.panel-foot { background: var(--silt); padding: 16px 24px; }
.panel-foot a { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brick); }

.nav .burger { display: none; }
.mobile { display: none; }

/* --- the hero ---------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--fen);
  /* A dark plane takes a gradient: tonal inside its own hue, a wide ramp and
     no hotspot behind the copy. */
  background-image: linear-gradient(172deg, #1E2F38 0%, #16242C 56%, #101C22 100%);
  color: var(--sky);
  padding: 58px 0 88px;
}
.hero .grain {
  position: absolute; inset: 0; background-image: url("/assets/tex/dust.png");
  opacity: 0.16; pointer-events: none;
}
/* THE ARC. One very wide soft warm light turning about a point well below the
   plane. A full turn, so the loop cannot jump. */
.arc {
  position: absolute; left: 50%; top: 50%;
  width: 340vw; height: 340vw; margin-left: -170vw; margin-top: -170vw;
  background-image: linear-gradient(
    90deg,
    rgba(228, 183, 80, 0) 0%,
    rgba(228, 183, 80, 0.05) 26%,
    rgba(228, 183, 80, 0.155) 50%,
    rgba(228, 183, 80, 0.05) 74%,
    rgba(228, 183, 80, 0) 100%);
  pointer-events: none;
  animation: arc 54s linear infinite;
}
@keyframes arc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 58px; align-items: start;
}
.hero h1 { color: var(--sky); max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--barley-lit); }
.hero .lede { font-size: 1.24rem; line-height: 1.5; color: #DDE5E8; max-width: 46ch; margin: 24px 0 0; }

.chips { display: grid; gap: 9px; margin: 30px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: #E2E9EB; padding: 12px 16px; font-size: 0.94rem; font-weight: 700;
  line-height: 1.32; max-width: 100%; min-width: 0;
}
.chips .ico { color: var(--barley-lit); margin-top: 1px; }

/* The hero object: the region's own fabric, 470px of it, with its land foot
   carrying the caption. */
.hero-figure { margin: 58px 0 0; position: relative; z-index: 2; }
.hero-figure img { width: 100%; height: 470px; object-fit: cover; object-position: 50% 52%; }
.hero-figure figcaption {
  background: rgba(255, 255, 255, 0.07); color: #C6D2D6;
  padding: 18px 24px; font-size: 0.88rem; line-height: 1.5;
}

/* --- the standing object, which is the only seam device ---------------- */
.stand { margin-top: calc(var(--stand) * -1); position: relative; z-index: 3; }

/* --- the heading plate ------------------------------------------------- */
/* Every section opens with one of these and every one of them stands across
   the seam above it. Sky field on top with the heading, silt land at the foot
   with the section's one sentence. */
.head-plate { background: var(--sky); color: var(--ink); max-width: 830px; }
.head-plate .top { padding: 40px 44px 32px; }
.head-plate .top h2 { max-width: 18ch; }
.head-plate .land { background: var(--silt); padding: 24px 44px 28px; }
.head-plate .land p { font-size: 1.12rem; color: var(--ink); margin: 0; max-width: 58ch; }
/* On a light ground the plate would vanish into it, so there the two fields
   swap one step down: silt field, sky foot. */
.sec--sky .head-plate { background: var(--silt); }
.sec--sky .head-plate .land { background: var(--sky); }

/* --- sections ---------------------------------------------------------- */
/* Padding-top is 0 because the standing object supplies the top of every
   section. Grounds meet on colour change and nothing else. */
.sec { padding: 0 0 104px; }
.sec--sky { background: var(--sky); }
.sec--silt { background: var(--silt); }
.sec--reed { background: var(--reed-deep); color: var(--sky); }
.sec--fen { background: var(--fen); color: var(--sky); }

.attrib { font-size: 0.84rem; color: var(--muted); margin-top: 28px; max-width: 78ch; }
.sec--reed .attrib, .sec--fen .attrib { color: #AFBDB6; }

/* --- the figure plate -------------------------------------------------- */
.figure-plate { background: var(--sky); color: var(--ink); max-width: 700px; }
.figure-plate .top { padding: 38px 44px 32px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.figure-plate .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(3.1rem, 5.4vw, 4.3rem);
  line-height: 0.94; color: var(--barley); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; margin: 0;
}
.figure-plate .unit { font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 0; }
.figure-plate .land { background: var(--silt); padding: 26px 44px 30px; }
.figure-plate .land p { margin: 0; font-size: 1.06rem; }

.wide-figure { margin: 62px 0 0; }
.wide-figure img { width: 100%; height: 480px; object-fit: cover; object-position: 50% 58%; }
.wide-figure figcaption { background: var(--silt); color: var(--muted); padding: 18px 0 0; font-size: 0.85rem; }
.sec--silt .wide-figure figcaption { background: var(--silt); }

/* --- service cards ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 58px; }
.card { display: flex; flex-direction: column; min-width: 0; }
.card > a { display: flex; flex-direction: column; flex: 1; color: inherit; font-weight: 400; }
.card > a:hover { color: inherit; }
.card-img { overflow: hidden; background: var(--fen); }
.card-img img { width: 100%; height: 300px; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.card > a:hover .card-img img { transform: scale(1.035); }
.card-foot { background: var(--silt); padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.sec--silt .card-foot { background: var(--sky); }
.card-foot h3 { margin-bottom: 10px; }
.card-foot p { color: var(--muted); font-size: 1rem; }
.card-foot .go { margin-top: auto; padding-top: 20px; font-weight: 700; color: var(--brick); display: inline-flex; align-items: center; gap: 9px; }
.card > a:hover .go { color: var(--brick-press); }

/* --- the rules band ---------------------------------------------------- */
.two-run { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 62px; align-items: start; margin-top: 54px; }
.two-run p { font-size: 1.1rem; max-width: 58ch; }
.sec--reed .two-run p { color: #D7E1DA; }
.flag { display: inline-flex; align-items: center; gap: 10px; color: var(--barley-lit); font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; }
.run-figure { margin: 0; }
.run-figure img { width: 100%; height: 400px; object-fit: cover; }
.run-figure figcaption { background: rgba(255, 255, 255, 0.08); color: #CBD6CE; padding: 18px 22px; font-size: 0.86rem; line-height: 1.5; }
.sec--sky .run-figure figcaption, .sec--silt .run-figure figcaption { background: var(--silt); color: var(--muted); }
.sec--silt .run-figure figcaption { background: var(--sky); }

/* --- the mounting bars ------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 62px; align-items: start; margin-top: 54px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 28px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bar-head b { font-weight: 700; font-size: 1.04rem; }
.bar-head span { font-family: var(--display); font-weight: 700; font-size: 1.8rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bar-head span i { font-style: normal; font-size: 0.5em; font-weight: 700; color: var(--muted); }
.bar-track { height: 18px; background: var(--hair); margin-top: 11px; }
.sec--silt .bar-track { background: #BFCFD0; }
.bar-fill { height: 100%; background: var(--barley); }
.stack { display: grid; gap: 34px; }
.stack figure { margin: 0; }
.stack figure img { width: 100%; height: 262px; object-fit: cover; }
.stack figcaption { background: var(--silt); color: var(--muted); padding: 16px 20px; font-size: 0.85rem; line-height: 1.5; }
.sec--silt .stack figcaption { background: var(--sky); }

/* --- the operator run -------------------------------------------------- */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 62px; align-items: start; margin-top: 54px; }
.region p { font-size: 1.1rem; max-width: 56ch; }
.counties { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 26px 0 0; padding: 0; }
.counties li { background: var(--silt); color: var(--ink); padding: 9px 14px; font-size: 0.92rem; font-weight: 700; }
.sec--silt .counties li { background: var(--sky); }
.sec--reed .counties li, .sec--fen .counties li { background: rgba(255, 255, 255, 0.1); color: var(--sky); }

/* --- questions --------------------------------------------------------- */
.qs { margin-top: 52px; max-width: 920px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 58px; align-items: start; }
.qgrid .qs { margin-top: 0; max-width: none; }
.q { background: var(--sky); }
.sec--sky .q { background: var(--silt); }
.q + .q { margin-top: 12px; }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.25;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 44px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--brick); margin-top: 3px; transition: transform 220ms ease; }
.q[open] summary .ico { transform: rotate(180deg); }
/* The answer is the land half of the object, so it takes the deeper ground. */
.q .a { background: var(--silt); padding: 22px 26px 24px; color: var(--ink); }
.sec--sky .q .a { background: var(--sky); }
.q .a p { max-width: 68ch; }

/* --- the form ---------------------------------------------------------- */
/* ONE form component: high on the home page and at the foot of every interior
   page except the thank-you page. Real POST to the shared Worker, a honeypot
   the Worker knows, and a time trap stamped at load. */
.form-card { background: var(--sky); color: var(--ink); }
.form-top { padding: 30px 32px 8px; }
.form-top h3 { font-size: 1.55rem; margin-bottom: 8px; }
.form-top .said { color: var(--muted); font-size: 0.98rem; margin-bottom: 22px; max-width: 46ch; }
.form-body { padding: 0 32px 8px; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f { display: block; margin-bottom: 16px; min-width: 0; }
.f > span { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 7px; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFFFF; border: 2px solid var(--hair); border-radius: 0;
  padding: 13px 14px; min-height: 48px;
}
.f textarea { min-height: 100px; resize: vertical; }
.f select { appearance: none; background-image: none; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--brick); outline-offset: 1px; border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The form's land: the button and the one note that follows it. */
.form-foot { background: var(--silt); padding: 24px 32px 26px; }
.btn {
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 1.05rem;
  background: var(--brick); color: #FFFFFF; border: 0; border-radius: 0;
  padding: 16px 26px; min-height: 52px; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { background: var(--brick-press); color: #FFFFFF; }
.form-foot .after { font-size: 0.87rem; color: var(--muted); margin: 14px 0 0; max-width: 50ch; }

.ask-band { background: var(--silt); padding: 0 0 104px; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 58px; align-items: start; margin-top: 52px; }
.ask-grid .form-card { background: var(--sky); }
.ask-grid .form-foot { background: var(--silt); }
.ask-grid .counties li { background: var(--sky); }

/* --- the closing tile -------------------------------------------------- */
/* Built exactly like the cards it follows: a photograph on top, a filled foot
   under it. Only the ground behind it and the button mark it as the action. */
.closer { background-color: var(--fen); background-image: url("/assets/tex/mocha-grunge.png"); padding: 0 0 96px; }
.closer-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.closer-tile img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }
.closer-plate { background: var(--sky); color: var(--ink); display: flex; flex-direction: column; }
.closer-plate .top { padding: 52px 48px 34px; flex: 1; }
.closer-plate h2 { max-width: 15ch; }
.closer-plate p { margin-top: 18px; color: var(--muted); font-size: 1.08rem; max-width: 40ch; }
.closer-plate .land { background: var(--silt); padding: 26px 48px 30px; }
.closer-plate .btn { width: auto; padding-inline: 34px; }

/* --- interiors --------------------------------------------------------- */
.page-head { background-color: var(--fen); background-image: linear-gradient(172deg, #1E2F38 0%, #16242C 100%); color: var(--sky); }
.page-head .top { padding: 58px 0 52px; }
.crumb { font-size: 0.87rem; color: #9DAEB4; margin-bottom: 20px; }
.crumb a { color: #C7D3D7; font-weight: 700; }
.crumb a:hover { color: var(--sky); }
.page-head h1 { color: var(--sky); max-width: 19ch; font-size: clamp(2.45rem, 4.4vw, 3.8rem); }
.page-head h1 em { font-style: normal; color: var(--barley-lit); }
.page-head .land { background: rgba(255, 255, 255, 0.07); }
.page-head .land .wrap { padding-top: 26px; padding-bottom: 28px; }
.pull { font-size: clamp(1.16rem, 1.7vw, 1.38rem); line-height: 1.48; color: #DCE4E6; max-width: 58ch; margin: 0; font-weight: 400; }

.article { padding: 82px 0 96px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 72px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.75rem, 2.4vw, 2.15rem); margin-top: 56px; margin-bottom: 16px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 34px; margin-bottom: 10px; }
.prose p { font-size: 1.08rem; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.1em; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 1.05rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 11px; height: 6px; background: var(--barley); }
.prose figure { margin: 38px 0; }
.prose figure img { width: 100%; height: 340px; object-fit: cover; }
.prose figcaption { background: var(--silt); color: var(--muted); padding: 16px 20px; font-size: 0.87rem; line-height: 1.5; }
.prose .note { background: var(--silt); padding: 26px 28px; margin: 32px 0; font-size: 1.03rem; }
.prose .note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }

.aside { position: sticky; top: 104px; min-width: 0; }
.aside-plate { background: var(--silt); }
.aside-plate .top { padding: 22px 24px 18px; }
.aside h4 { font-size: 0.87rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.aside ol { list-style: none; margin: 0; padding: 0; }
.aside ol a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--ink); font-weight: 700; font-size: 0.96rem; }
.aside ol a:hover { color: var(--brick); }
.aside-card { background: var(--fen); color: var(--sky); }
.aside-card .top { padding: 24px 24px 20px; }
.aside-card h4 { color: var(--sky); font-family: var(--display); font-size: 1.14rem; letter-spacing: -0.01em; text-transform: none; margin-bottom: 10px; }
.aside-card p { font-size: 0.94rem; color: #C3D0D4; margin: 0; }
.aside-card .land { background: rgba(255, 255, 255, 0.08); padding: 18px 24px 20px; }
.aside-card .btn { font-size: 0.98rem; padding: 13px 18px; min-height: 46px; }

.siblings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 52px; }

/* --- credits and thanks ------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 52px; }
.credit { background: var(--sky); min-width: 0; }
.credit .top { padding: 22px 24px 18px; }
.credit h3 { font-size: 1.06rem; margin-bottom: 8px; }
.credit p { font-size: 0.93rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.credit .land { background: var(--silt); padding: 16px 24px 18px; }
.credit .land p { font-size: 0.9rem; }

.thanks { padding: 96px 0 110px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 62px; align-items: start; }
.thanks-grid img { width: 100%; height: 440px; object-fit: cover; }
.thanks-figure { margin: 0; }
.thanks-figure figcaption { background: var(--silt); color: var(--muted); padding: 16px 20px; font-size: 0.85rem; }
.next-list { list-style: none; padding: 0; margin: 22px 0 0; }
.next-list li { margin-bottom: 14px; }

/* --- footer ------------------------------------------------------------ */
/* The dust tile sits on its own layer at low opacity rather than at full
   strength as a background-image, because footer copy stands on this plane and
   an undimmed tile puts near-white specks behind 15px text. Measured on real
   composited pixels: the brightest speck leaves the body copy above 4.5:1. */
.foot { position: relative; background-color: var(--fen); color: #B4C1C6; padding: 78px 0 40px; font-size: 0.95rem; }
.foot::before { content: ""; position: absolute; inset: 0; background-image: url("/assets/tex/dust.png"); opacity: 0.14; pointer-events: none; }
.foot > .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.foot .mark { font-family: var(--display); font-weight: 700; font-size: 1.46rem; color: var(--sky); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; }
.foot .mark b { display: block; color: var(--barley-lit); }
.foot p { max-width: 36ch; font-size: 0.93rem; }
.foot h4 { color: var(--sky); font-size: 0.87rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot ul li { min-height: 34px; display: flex; align-items: center; }
/* Footer column links are navigation and take a 44px target. Links inside a
   sentence stay on the text baseline. */
.foot li a { display: flex; align-items: center; min-height: 44px; }
.foot a { color: #CCD7DA; font-weight: 700; }
.foot a:hover { color: var(--sky); }
.foot-legal { margin-top: 62px; font-size: 0.85rem; color: #A2B0B5; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.foot-legal p { max-width: 76ch; margin: 0; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- motion ------------------------------------------------------------ */
.rise { opacity: 0; transform: translateY(20px); }
.rise.in { opacity: 1; transform: none; transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.rise.d1.in { transition-delay: 90ms; }
.rise.d2.in { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .arc { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .card-img img, .q summary .ico { transition: none; }
  * { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .hero-figure img { height: 360px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .aside { position: static; }
  .aside-plate, .aside-card { max-width: 480px; }
  .two-run, .split, .region, .ask-grid, .thanks-grid, .qgrid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .closer-tile { grid-template-columns: minmax(0, 1fr); }
  .closer-tile img { min-height: 300px; }
  .wide-figure img { height: 400px; }
}

@media (max-width: 900px) {
  .nav .lg { display: none; }
  .nav .burger {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-weight: 700; color: var(--sky); background: none;
    border: 2px solid rgba(255, 255, 255, 0.4); padding: 10px 16px; min-height: 46px; cursor: pointer;
  }
  .mobile[data-open="true"] { display: block; background: var(--fen); padding: 4px 0 26px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a { display: block; padding: 14px 0; font-weight: 700; font-size: 1.08rem; color: var(--sky); min-height: 44px; }
  .mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: #A9B8BD; }
  .mobile .btn { margin-top: 16px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --stand: 44px; }
  .sec, .ask-band { padding-bottom: 68px; }
  .closer { padding-bottom: 60px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .siblings, .credits { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero { padding: 44px 0 64px; }
  .hero-figure { margin-top: 44px; }
  .hero-figure img { height: 290px; }
  .run-figure img, .thanks-grid img { height: 300px; }
  .stack figure img { height: 230px; }
  .prose figure img { height: 250px; }
  .wide-figure img { height: 300px; }
  .article { padding: 56px 0 66px; }
  .thanks { padding: 62px 0 72px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .head-plate .top, .figure-plate .top { padding: 30px 26px 24px; }
  .head-plate .land, .figure-plate .land { padding: 20px 26px 24px; }
  .closer-plate .top { padding: 34px 26px 26px; }
  .closer-plate .land { padding: 22px 26px 26px; }
  .form-top { padding: 26px 24px 8px; }
  .form-body { padding: 0 24px 8px; }
  .form-foot { padding: 20px 24px 24px; }
  .page-head .top { padding: 44px 0 40px; }
}

@media (max-width: 480px) {
  :root { --gut: 20px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mast .wrap { min-height: 72px; }
  .brand .mark { width: 30px; height: 30px; }
  .hero-figure img { height: 230px; }
  .wide-figure img { height: 250px; }
  .q summary { padding: 18px 18px; font-size: 1.06rem; }
  .q .a { padding: 18px 18px 20px; }
  .closer-plate .btn { width: 100%; }
}