/* ------------------------------------------------------------------------
   Plug-in Solar South West

   The design source is the region's own building fabric: painted render and
   granite, standing in coast light. Three decisions carry the whole site and
   nothing else is allowed to compete with them.

   1. THE PLINTH is the signature device. Every object that stands on the page
      (the hero photograph, each card, the form, the figure block, the nav
      panel) sits on a granite slab that is wider than it and shows below it.
      South West houses are rendered walls on a stone or tarred base. It is a
      separate object, not an edge treatment: it overhangs on three sides so it
      never reads as a one-sided border.

   2. THE SEAM IS A GROUND CHANGE AND NOTHING ELSE. chalk, sand, granite and
      sea-deep meet edge to edge. There is not one rule at one seam anywhere on
      this site. Horizontal slabs belong to objects, never to seams, which is
      why the plinth can carry weight without the page looking striped. Do not
      add a hairline "for separation": the ground change is the separation.

   3. THE TIDE is the one ambient motion. A wide soft warm band rises through
      the granite hero plane, transform only, travel equal to exactly one band
      period so the loop is seamless. Nothing else on the site moves by itself.

   Radius is 0 everywhere, so the glyph set is drawn with square caps and
   mitred joins (Lucide geometry, ISC, rendered sharp) to match the corners.
   ------------------------------------------------------------------------ */

:root {
  /* 7 roles. granite: the deep plane. slate: warm slate ink, all text.
     chalk: the page. sand: the alternate ground, 1.22 against chalk, which is
     where two grounds separate for the eye without reading as banding.
     sea: ACTION ONLY, never decoration. ochre: the highlight, headline phrase
     and figures. muted: secondary text. */
  --granite: #171D21;
  --slate: #2B3339;
  --chalk: #FBF9F5;
  --sand: #EAE2D3;
  --sea: #0E6E62;
  --ochre: #A56E15;
  --muted: #5C666D;

  /* derived, not new colours: the highlight lifted for dark grounds, the
     sea darkened for a pressed state, and one hairline tint used inside
     components only (never at a seam). */
  --ochre-lit: #E0A83C;
  --sea-deep: #0B4A44;
  --sea-press: #0A5349;
  --hair: #CFC6B4;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;  /* wide enough that three card photographs land near 400px
                      across at 1440, which is the fleet's card size */
  --gut: 26px;
  --pl: 20px; /* plinth: how far the slab projects past the object it carries */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--slate);
  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.03;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.3rem; line-height: 1.18; letter-spacing: -0.005em; }
h4 { font-size: 1.02rem; line-height: 1.25; }

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

a { color: var(--sea); font-weight: 600; text-decoration: none; }
a:hover { color: var(--sea-press); }

/* Underlines are out on this site. Links carry colour and weight. */
a, a:hover, a:focus { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.mast-strip :focus-visible { outline-color: var(--ochre-lit); }

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

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

/* --- the plinth -------------------------------------------------------- */
/* A granite slab, wider than the object and showing below it. Concrete grain
   from transparenttextures.com so it reads as stone rather than as a block of
   flat colour. Texture appears on this site in two places only: here, and the
   granite ground of the closing tile. Neither carries body copy.

   It goes under the IMAGE, never around the whole figure, because a caption
   sitting on the slab would be dark text on a dark ground. And it is only used
   where the ground is chalk, sand or a photograph: on a granite or sea-deep
   plane the object is already standing on stone and takes no plinth. */
/* Two invariants hold this device inside the viewport, and both must survive
   any future edit:
     1. every .plinth is its own containing block, so the slab is inset from the
        OBJECT and not from some positioned ancestor further up the tree;
     2. --gut is always greater than --pl (26>20, 22>12, 20>10), so an object
        that fills the content width still has room for the projection.
   Break either one and document scrollWidth grows by --pl at that width. */
.plinth { position: relative; }
.plinth::after {
  content: "";
  position: absolute;
  top: 100%;                      /* entirely below the object it carries, so the
                                     slab can never sit over the object's own
                                     ground and swallow the foot of its copy */
  left: calc(var(--pl) * -1);
  right: calc(var(--pl) * -1);
  height: var(--pl);
  background-color: var(--granite);
  background-image: url("/assets/tex/concrete-wall.png");
}

/* --- masthead ---------------------------------------------------------- */
.mast-strip {
  background: var(--granite);
  color: #BDC5CA;
  font-size: 0.815rem;
  letter-spacing: 0.005em;
}
.mast-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.mast-strip ol {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.mast-strip li + li::before { content: "\00B7"; margin-right: 14px; color: #6C767C; }
.mast-strip b { color: var(--chalk); font-weight: 600; }

.mast {
  background: var(--chalk);
  position: sticky; top: 0; z-index: 50;
}
.mast .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 86px;
}
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.55vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--slate);
  line-height: 1.05;
  display: inline-block;
  min-width: 0;
}
.brand { padding: 4px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.brand:hover { color: var(--slate); }
.brand b { color: var(--ochre); font-weight: 800; display: block; }

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

.nav .cta-top {
  background: var(--sea); color: var(--chalk);
  padding: 13px 20px; font-weight: 700;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav .cta-top:hover { background: var(--sea-press); color: var(--chalk); }

.drop { position: relative; }
.panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  width: 392px; max-width: calc(100vw - 40px);
  background: var(--chalk);
  border: 2px solid var(--slate);
  padding: 22px 24px 24px;
  display: none;
}
/* Every panel on this site anchors to the left edge of its own trigger. */
.drop[data-open="true"] .panel { display: block; }
.panel p.strap { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 2px; }
.panel li a {
  display: block; padding: 11px 0; color: var(--slate); font-weight: 700;
  font-size: 1.02rem;
}
.panel li a span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.panel li a:hover { color: var(--sea); }
.panel li a:hover span { color: var(--muted); }
.panel .all { display: block; margin-top: 16px; font-weight: 700; color: var(--sea); }

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

/* --- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--granite);
  /* A dark plane takes a gradient. Tonal inside its own hue, wide ramp, no
     hotspot behind the copy. */
  background-image: linear-gradient(168deg, #202830 0%, #171D21 58%, #10161A 100%);
  color: var(--chalk);
  padding: 74px 0 84px;
}
.tide {
  position: absolute; left: 0; right: 0; top: -600px; height: calc(100% + 1200px);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(224, 168, 60, 0) 0px,
    rgba(224, 168, 60, 0.075) 300px,
    rgba(224, 168, 60, 0) 600px
  );
  pointer-events: none;
  animation: tide 26s linear infinite;
}
/* Travel is exactly one band period, so the loop has no seam. */
@keyframes tide {
  from { transform: translateY(0); }
  to { transform: translateY(-600px); }
}

.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: start;
  margin-top: 46px;
}
/* 27ch, not 22: the headline contains "plug-in", and a narrower measure
   breaks the line at that hyphen, which reads as a typo at 72px. */
.hero h1 {
  color: var(--chalk); max-width: 22ch;
  /* pretty, not the inherited balance: balancing this headline breaks the line
     inside "plug-in", at the hyphen, which reads as a typo at 72px. With pretty
     at 22ch it sets as three even lines, "plug-in" stays whole, and the ochre
     phrase sits on a line of its own. */
  text-wrap: pretty;
}
.hero h1 em { font-style: normal; color: var(--ochre-lit); }
.hero .lede {
  font-size: 1.24rem; line-height: 1.5; color: #D7DCDF;
  max-width: 44ch; margin: 0;
}

.chips { display: grid; gap: 8px; margin: 30px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #E8ECEE;
  padding: 11px 15px; font-size: 0.925rem; font-weight: 500;
  line-height: 1.3; max-width: 100%;
}
.chips .ico { color: var(--ochre-lit); flex: none; margin-top: 1px; }

.hero-figure { margin: 46px 0 0; }
.hero-figure img {
  width: 100%; height: 322px; object-fit: cover; object-position: 50% 26%;
}
.hero-figure figcaption {
  font-size: 0.875rem; color: #AEB6BB; margin-top: 16px;
  max-width: 58ch;
}
.hero .form-card { background: var(--chalk); }

/* --- the light band ---------------------------------------------------- */
.light-band { position: relative; background: var(--granite); }
.light-band > img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 56%; }
.light-band .wrap { position: relative; }
.figure-plate {
  position: absolute; left: var(--gut); bottom: 0; transform: translateY(-76px);
  background: var(--chalk); color: var(--slate);
  padding: 34px 38px 36px; max-width: 560px;
}
.figure-plate .n {
  font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 5vw, 4.1rem);
  line-height: 0.95; color: var(--ochre); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.figure-plate .n { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.figure-plate .n small { font-size: 0.3em; font-weight: 700; color: var(--slate); letter-spacing: 0; }
.figure-plate p { margin: 14px 0 0; font-size: 1.06rem; }
.band-note {
  background: var(--granite); color: #9AA3A8; font-size: 0.83rem;
  padding: 0 0 22px;
}
.band-note .wrap { padding-top: 62px; }

/* --- sections ---------------------------------------------------------- */
/* Seams are ground changes. No rules, ever. */
.sec { padding: 96px 0; }
.sec--sand { background: var(--sand); }
.sec--chalk { background: var(--chalk); }
.sec--sea { background: var(--sea-deep); color: var(--chalk); }
.sec--granite { background: var(--granite); color: var(--chalk); }

.sec > .wrap > h2 { max-width: 20ch; }
.sec-lede { font-size: 1.2rem; color: var(--muted); max-width: 58ch; margin-top: 20px; }
.sec--sea .sec-lede, .sec--granite .sec-lede { color: #C6CDD1; }

.attrib { font-size: 0.83rem; color: var(--muted); margin-top: 26px; max-width: 76ch; }
.sec--granite .attrib { color: #9AA3A8; }
/* the sea-deep plane is lighter than granite, so its secondary text is lifted
   to clear 4.5:1 rather than reusing the granite tone (which lands at 3.94) */
.sec--sea .attrib { color: #B0BAB8; }

/* --- service cards ----------------------------------------------------- */
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px; margin-top: 62px;
}
.card { display: flex; flex-direction: column; }
.card > a { display: flex; flex-direction: column; flex: 1; color: inherit; }
.card > a:hover { color: inherit; }
.card-img { position: relative; overflow: hidden; background: var(--granite); }
.card-img img {
  width: 100%; height: 300px; object-fit: cover;
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card > a:hover .card-img img { transform: scale(1.035); }
.card-body {
  background: var(--chalk); padding: 26px 26px 28px; flex: 1;
  display: flex; flex-direction: column;
}
.sec--chalk .card-body { background: var(--sand); }
.card-body h3 { margin-bottom: 10px; }
.card-body p { color: var(--muted); font-size: 1rem; }
.card-body .go { margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--sea); }
.card > a:hover .go { color: var(--sea-press); }

/* --- the finding band -------------------------------------------------- */
.finding {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 62px; align-items: center;
}
.finding h2 { color: var(--chalk); max-width: 17ch; }
.finding p { color: #D3D9DC; font-size: 1.1rem; max-width: 56ch; margin-top: 22px; }
.finding .warn {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ochre-lit); font-weight: 700; font-size: 1.02rem; margin-bottom: 18px;
}
.finding figure { margin: 0; }
.finding figure img { width: 100%; height: 430px; object-fit: cover; object-position: 50% 42%; }
.finding figcaption { font-size: 0.85rem; color: #B0BAB8; margin-top: 16px; }

/* --- measure bars ------------------------------------------------------ */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 62px; align-items: start; margin-top: 58px;
}
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 30px; }
.bar-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.bar-head b { font-weight: 600; font-size: 1.04rem; }
.bar-head span {
  font-family: var(--display); font-weight: 800; font-size: 1.75rem;
  color: var(--slate); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.bar-head span i { font-style: normal; font-size: 0.52em; font-weight: 700; color: var(--muted); }
.bar-track { height: 16px; background: var(--hair); margin-top: 11px; }
.bar-fill { height: 100%; background: var(--ochre); }
.stack { display: grid; gap: 34px; }
.stack figure { margin: 0; }
.stack figure img { width: 100%; height: 268px; object-fit: cover; }
.stack figcaption { font-size: 0.85rem; color: var(--muted); margin-top: calc(var(--pl) + 15px); }

/* --- region ------------------------------------------------------------ */
.region {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 62px; align-items: center;
}
.region figure { margin: 0; }
.region figure img { width: 100%; height: 392px; object-fit: cover; }
.region figcaption { font-size: 0.85rem; color: var(--muted); margin-top: calc(var(--pl) + 16px); }
.counties { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 28px 0 0; padding: 0; }
.counties li {
  background: var(--sand); color: var(--slate); padding: 9px 14px;
  font-size: 0.92rem; font-weight: 600;
}
.sec--sand .counties li { background: var(--chalk); }

/* --- questions --------------------------------------------------------- */
.qs { margin-top: 52px; max-width: 900px; }
/* A question group runs beside its heading rather than under it, so a page
   made of questions still has a left column and does not read as one stack. */
.qgrid {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 58px; align-items: start;
}
.qgrid > h2 { margin-top: 6px; }
.qgrid .qs { margin-top: 0; max-width: none; }
.q { border: 2px solid var(--hair); background: var(--chalk); }
.q + .q { margin-top: 14px; }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 24px;
  font-family: var(--display); font-weight: 700; font-size: 1.16rem; 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 { flex: none; color: var(--sea); margin-top: 2px; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }
.sec--sand .q { border-color: #D7CDBA; }
/* A card keeps its distance from the ground it stands on: chalk ground, sand
   card; sand ground, chalk card. */
.sec--chalk .q { background: var(--sand); border-color: #DBD1BD; }

/* --- form -------------------------------------------------------------- */
.form-card {
  background: var(--chalk); color: var(--slate);
  padding: 34px 34px 36px;
}
.form-card h2, .form-card h3 { margin-bottom: 8px; }
.form-card h3 { font-size: 1.62rem; font-weight: 800; }
.form-card .said { color: var(--muted); font-size: 0.99rem; margin-bottom: 22px; max-width: 46ch; }
.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: 600; font-size: 0.92rem; margin-bottom: 7px; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--slate);
  background: #FFFFFF; border: 2px solid var(--hair); border-radius: 0;
  padding: 13px 14px; min-height: 48px;
}
.f textarea { min-height: 104px; resize: vertical; }
.f select { appearance: none; background-image: none; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 3px solid var(--sea); outline-offset: 1px; border-color: var(--slate);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 1.05rem;
  background: var(--sea); color: var(--chalk); 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(--sea-press); }
.btn--slate { background: var(--slate); }
.btn--slate:hover { background: #1B2228; }
.form-card .after { font-size: 0.86rem; color: var(--muted); margin-top: 16px; max-width: 52ch; }

.ask-band { background: var(--sand); padding: 96px 0; }
.ask-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 62px; align-items: start;
}
.ask-grid h2 { max-width: 15ch; }
.ask-grid .sec-lede { margin-top: 22px; }
.ask-grid .form-card { background: var(--chalk); }

/* --- closing tile ------------------------------------------------------ */
/* The closing moment is built like the cards it follows: a photograph, a
   chalk plate over it, a granite ground behind. Only the ground and the
   button mark it as the action. It is never a slab with centred text. */
.closer {
  background-color: var(--granite);
  background-image: url("/assets/tex/concrete-wall.png");
  padding: 86px 0;
}
.closer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: stretch;
}
.closer-grid img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.closer-plate {
  background: var(--chalk); color: var(--slate);
  padding: 52px 50px; display: flex; flex-direction: column; justify-content: center;
}
.closer-plate h2 { max-width: 15ch; }
.closer-plate p { margin-top: 18px; color: var(--muted); font-size: 1.08rem; max-width: 42ch; }
.closer-plate .btn { width: auto; align-self: flex-start; margin-top: 28px; padding-inline: 34px; }

/* --- interiors --------------------------------------------------------- */
.page-head { background: var(--granite); color: var(--chalk); padding: 70px 0 78px; position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--chalk); max-width: 17ch; font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.page-head h1 em { font-style: normal; color: var(--ochre-lit); }
.crumb { font-size: 0.86rem; color: #9AA3A8; margin-bottom: 22px; }
.crumb a { color: #C3CBCF; font-weight: 600; }
.crumb a:hover { color: var(--chalk); }
.pull {
  font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.45; color: #DCE1E4;
  max-width: 50ch; margin-top: 26px; font-weight: 500;
}

.article { padding: 84px 0 96px; }
.article .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 74px; align-items: start;
}
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.15rem); margin-top: 58px; margin-bottom: 16px;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 36px; margin-bottom: 10px; }
.prose p { font-size: 1.09rem; }
.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.06rem;
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 10px; background: var(--ochre);
}
.prose figure { margin: 40px 0; }
.prose figure img { width: 100%; height: 340px; object-fit: cover; }
.prose figcaption { font-size: 0.87rem; color: var(--muted); margin-top: calc(var(--pl) + 16px); max-width: 60ch; }
.prose .said-note {
  background: var(--sand); padding: 26px 28px; margin: 34px 0; font-size: 1.04rem;
}
.prose .said-note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }

.aside { position: sticky; top: 110px; min-width: 0; }
.aside h4 { font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 14px; }
.aside ol { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: none; }
.aside ol li + li { margin-top: 2px; }
.aside ol a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 0;
  color: var(--slate); font-weight: 600; font-size: 0.97rem;
}
.aside ol a:hover { color: var(--sea); }
.aside-card { background: var(--slate); color: var(--chalk); padding: 26px 24px 28px; }
.aside-card h4 { color: var(--chalk); font-family: var(--display); font-size: 1.14rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-card p { font-size: 0.94rem; color: #C4CBCF; margin-bottom: 18px; }
.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: 46px; margin-top: 56px; }

/* --- credits and thanks ------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 54px; }
.credit { background: var(--chalk); padding: 22px 24px 24px; border: 2px solid var(--hair); min-width: 0; }
.credit h3 { font-size: 1.08rem; margin-bottom: 8px; }
.credit p { font-size: 0.93rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.credit p + p { margin-top: 6px; }

.thanks { padding: 110px 0 120px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 66px; align-items: center; }
.thanks-grid img { width: 100%; height: 460px; object-fit: cover; }

/* --- footer ------------------------------------------------------------ */
.foot {
  background-color: var(--granite);
  background-image: url("/assets/tex/asfalt-dark.png");
  color: #AFB7BC; padding: 76px 0 40px; font-size: 0.95rem;
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.foot .mark {
  font-family: var(--display); font-weight: 800; font-size: 1.44rem; color: var(--chalk);
  line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px;
}
.foot .mark b { display: block; color: var(--ochre-lit); }
.foot p { max-width: 34ch; font-size: 0.93rem; }
.foot h4 { color: var(--chalk); font-size: 0.87rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: 0; }
.foot ul li { min-height: 34px; display: flex; align-items: center; }
/* Footer column links are navigation, not prose, so they carry a 44px target.
   Links inside a sentence (the credits page, the attribution lines) are the
   inline exception and stay on the text baseline. */
.foot li a { display: flex; align-items: center; min-height: 44px; }
.foot a { color: #C8CFD3; font-weight: 500; }
.foot a:hover { color: var(--chalk); }
.foot-legal {
  margin-top: 66px; padding-top: 0; font-size: 0.84rem; color: #8B9499;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
/* No rule above the legal row. This site separates things with ground change
   and spacing only, and one hairline in the footer would be the single outlier
   that makes the whole page look undecided. */
.foot-legal p { max-width: 74ch; margin: 0; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }

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

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

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

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .hero-figure img { height: 320px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .aside { position: static; }
  .aside-card { max-width: 460px; }
  .finding, .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: 40px; }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-grid img { min-height: 300px; }
}

@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(--slate); background: none;
    border: 2px solid var(--slate); padding: 10px 16px; min-height: 46px; cursor: pointer;
  }
  .mobile[data-open="true"] { display: block; background: var(--chalk); padding: 8px 0 30px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a {
    display: block; padding: 15px 0; font-weight: 700; font-size: 1.1rem; color: var(--slate);
    min-height: 44px;
  }
  .mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
  .mobile .btn { margin-top: 18px; }
  .light-band > img { height: 400px; }
  /* relative, not static: the plate stops being absolutely positioned here and
     drops into flow, but it MUST stay a containing block, because its plinth
     slab is an absolutely positioned ::after inset by -20px. Make this static
     and the slab resolves against .light-band .wrap instead, which is the full
     viewport width, and the page gains exactly --pl of horizontal scroll. */
  .figure-plate {
    position: relative; inset: auto; transform: none; max-width: none; margin-top: 0;
  }
  .light-band .wrap { padding-bottom: 0; }
  .band-note .wrap { padding-top: 26px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --pl: 12px; }
  .sec, .ask-band { padding: 66px 0; }
  .closer { padding: 60px 0; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .siblings, .credits { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero { padding: 52px 0 64px; }
  .hero-figure img { height: 260px; }
  .finding figure img, .region figure img, .thanks-grid img { height: 300px; }
  .stack figure img { height: 230px; }
  .prose figure img { height: 250px; }
  .article { padding: 56px 0 66px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .form-card, .closer-plate { padding: 26px 24px 28px; }
  .closer-plate { padding: 36px 26px 40px; }
  .figure-plate { padding: 28px 26px 30px; }
}

@media (max-width: 480px) {
  :root { --gut: 20px; --pl: 10px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mast .wrap { min-height: 74px; }
  .hero-figure img { height: 210px; }
  .light-band > img { height: 300px; }
  .q summary { padding: 18px 18px; font-size: 1.06rem; }
  .q .a { padding: 0 18px 20px; }
}