/* ------------------------------------------------------------------------
   Plug-in Solar Yorkshire

   The design source is the housing stock this firm actually works on: coursed
   gritstone and brick terraces with a walled back yard behind them. Three
   decisions carry the site and nothing else competes with them.

   1. THE OPENING is the signature device. Every photograph, card and form on
      this site is CUT INTO the page rather than standing on it: it sits inside
      a surround of stone that closes on all four sides, with the caption set
      into the stone under the glass. A surround is always one step away from
      the ground it is cut into, so an opening on a light course takes the dark
      grit and an opening on a dark course takes the lit grit. It is never an
      edge treatment on one side: a window in a wall has a head, a sill and two
      reveals or it is a hole.

   2. THE MORTAR JOINT IS THE SEAM AND THE ONLY SEAM. Every course of the page
      meets the next through a 12px full-bleed band of mortar, and that band
      appears nowhere else. No component anywhere carries a horizontal band of
      mortar colour, so the joint never competes with furniture inside an
      object. Do not add a ground change "as well": the joint is the seam, on
      light courses, on dark ones and against the footer alike.

   3. THE CLOUD SHADOW is the one ambient motion. A wide soft shadow drifts
      sideways across the gritstone hero plane, the way weather crosses the
      Pennines. Transform only, travel exactly one band period so the loop is
      seamless, and it stops for anyone who has asked for less movement.

   Radius is 0 on every object, so the glyph set is Lucide geometry rendered
   with square caps and mitred joins to match the corners. Five glyphs in the
   whole site, all at 19 or 20px on a shared baseline.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. ink: the deepest stone, body text and the two darkest
     courses. grit: mid stone, the surround of every opening on a light course
     and the closing course. cream: the limewashed page. stone: the alternate
     light course, 1.26 against cream, which is where two grounds separate for
     the eye without reading as banding. moor: ACTION ONLY, nothing decorative
     is ever this colour. heather: the highlight, one phrase in the headline
     and every figure. joint: the mortar, the seam band and nothing else. */
  --ink: #262A26;
  --grit: #363B35;
  --cream: #F8F5EC;
  --stone: #E4DBC7;
  --moor: #1E6139;
  --heather: #6B3B61;
  --joint: #C2B59A;

  /* Derived, not new colours: the surround used inside a dark course, the two
     accents lifted for dark grounds, a pressed state, secondary text on each
     ground, and the field fill. */
  --grit-lit: #4A5049;
  --moor-lit: #8CD1A6;
  --heather-lit: #C79ABE;
  --moor-press: #164A2C;
  --muted: #5A5F55;
  --dim: #CFCABB;
  --field: #FCFAF4;

  --display: "Bitter", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1300px;   /* three card openings land at about 400px of photograph
                       across at 1440, which is the fleet's card size */
  --gut: 28px;
  --sur: 13px;      /* the reveal: how deep the stone surround of an opening is */
}

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

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

/* width and height attributes are set on every image so the layout does not
   jump, which means height must be released here or the attribute wins and
   every photograph stretches. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.018em;
  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; font-weight: 700; line-height: 1.2; letter-spacing: -0.008em; }
h4 { font-size: 1.02rem; font-weight: 700; line-height: 1.26; }

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

/* Links carry colour and weight. There is no underline anywhere on this site. */
a { color: var(--moor); font-weight: 600; text-decoration: none; }
a:hover { color: var(--moor-press); }
a, a:hover, a:focus { text-decoration: none; }
.on-dark a { color: var(--moor-lit); }
.on-dark a:hover { color: #A6DDBB; }
/* A button is an object, not a link in running text: its label stays cream on
   every ground, or the lifted link colour lands green on green. */
.on-dark a.btn, .on-dark a.btn:hover, .on-dark .btn { color: var(--cream); }

:focus-visible { outline: 3px solid var(--moor); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--moor-lit); }

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

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

.ico { flex: none; vertical-align: -3px; }

/* -------------------------------------------------------------- the seam -- */

/* The mortar joint. The one separator on the site, always 12px, always full
   bleed, never inside a component. If you are tempted to add a rule somewhere
   else, that is the moment this page starts to look undecided. */
.joint { height: 12px; background: var(--joint); }

/* ----------------------------------------------------------- the courses -- */

.course { padding: 84px 0 90px; }
/* The form course carries the only way of reaching this firm, so it starts
   high enough to break the fold on a 1000px screen. */
.course--ask { padding-top: 12px; }
.course--cream { background: var(--cream); }
.course--stone { background: var(--stone); }
.course--grit  { background: var(--grit); }
.course--ink   { background: var(--ink); }

/* The two dark courses carry a tonal ramp in their own hue and the gravel
   tile. Objects standing on them stay flat: only planes take a gradient. */
.course--ink {
  background-image:
    linear-gradient(168deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 58%),
    url('/assets/tex/gravel.png');
}

.on-dark { color: var(--cream); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--cream); }
.on-dark .sec-lede, .on-dark .attrib { color: var(--dim); }

/* 640px, not a ch measure: ch resolves against this block's own body size and
   would set the h2 to about half the width it wants. */
.sec-head { max-width: 640px; margin: 0 0 44px; }
.sec-lede { font-size: 1.15rem; color: var(--muted); margin: 18px 0 0; max-width: 60ch; }
.attrib { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin: 22px 0 0; }

/* --------------------------------------------------------------- masthead -- */

/* Two full-width rows, which is the pattern of a terrace: a heavy course
   carrying the name, a lighter course carrying the way in. */
.mast-top { background: var(--ink); color: var(--cream); }
.mast-top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; min-height: 78px; padding-top: 14px; padding-bottom: 14px;
}
.brand {
  font-family: var(--display); font-weight: 800; font-size: 1.52rem;
  letter-spacing: -0.02em; color: var(--dim); line-height: 1.05; min-width: 0;
}
.brand b { color: var(--cream); font-weight: 800; }
.brand:hover { color: var(--dim); }
.mast-where { margin: 0; font-size: 0.93rem; color: var(--dim); text-align: right; min-width: 0; }

.mast-nav { background: var(--cream); }
.mast-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; }
.nav { display: flex; align-items: center; gap: 6px; width: 100%; }
.nav > a, .drop > button {
  font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; padding: 13px 14px; cursor: pointer; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}
.nav > a:hover, .drop > button:hover { color: var(--moor); }
.nav .cta-top {
  background: var(--moor); color: var(--cream); padding: 13px 20px; margin-left: auto;
}
.nav .cta-top:hover { background: var(--moor-press); color: var(--cream); }

.drop { position: relative; }
.drop > button .ico { transition: transform 160ms ease; }
.drop[data-open="true"] > button .ico { transform: rotate(180deg); }
/* The panel is an opening too: stone on all four sides, nothing floating. */
.panel {
  position: absolute; top: 100%; left: 0; z-index: 40; width: 460px; max-width: 88vw;
  background: var(--grit); padding: var(--sur); display: none;
}
.drop[data-open="true"] .panel { display: block; }
.panel .strap { color: var(--dim); font-size: 0.95rem; margin: 6px 4px 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 3px; }
.panel li a, .panel .all { display: block; background: var(--cream); padding: 14px 16px; color: var(--ink); }
.panel li a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); margin-top: 3px; }
.panel li a:hover, .panel .all:hover { background: #FFFFFF; color: var(--moor-press); }
.panel .all { margin-top: 10px; font-weight: 700; color: var(--moor); }

.burger {
  display: none; margin-left: auto; font-family: var(--body); font-size: 1rem; font-weight: 700;
  background: var(--ink); color: var(--cream); border: 0; padding: 13px 18px;
  min-height: 44px; cursor: pointer;
}
.mobile { display: none; background: var(--grit); padding: var(--sur); }
.mobile[data-open="true"] { display: block; }
.mobile ul { list-style: none; margin: 0 0 10px; padding: 0; }
.mobile li + li { margin-top: 3px; }
.mobile a { display: block; background: var(--cream); color: var(--ink); padding: 15px 16px; min-height: 44px; }
.mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
.mobile .btn { width: 100%; }

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

.hero {
  position: relative; overflow: hidden; background-color: var(--ink); color: var(--cream);
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 56%),
    url('/assets/tex/rocky-wall.png');
}
/* The cloud shadow. Period 1200px, travel 1200px, so the loop closes exactly
   and no frame repeats a seam. Frame diffed on a bare patch of the plane at
   20, 12 and 10 max per-channel delta over 17, 10 and 25 second windows: inside
   the band that is findable without being a distraction. */
.drift {
  position: absolute; top: -10%; bottom: -10%; left: -1300px; right: -1300px;
  background-image: repeating-linear-gradient(90deg,
    rgba(6, 10, 7, 0) 0px,
    rgba(6, 10, 7, 0.24) 600px,
    rgba(6, 10, 7, 0) 1200px);
  animation: drift 34s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1200px, 0, 0); }
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr); align-items: stretch;
}
/* Every number in this block is set by one measurement: at 1440 x 1000 the
   first input row of the form must be on screen. Masthead 152, hero 470 to
   520, joint 12, and the form plate's own head. Do not pad this out again
   without re-measuring the input's y. */
.hero-type {
  padding: 32px 56px 32px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  align-self: center;
}
.hero h1 { margin: 0 0 10px; max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--heather-lit); }
.lede { font-size: 1.26rem; line-height: 1.4; color: var(--dim); margin: 0 0 12px; max-width: 64ch; }

/* The hero photograph is the wall itself, running off the right edge at the
   full depth of the course, which is why it is the one photograph on the site
   that is not set in a surround. */
.hero-shot { position: relative; min-height: 470px; margin: 0; }
.hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  background: rgba(20, 24, 20, 0.82); color: var(--cream);
  font-size: 0.86rem; line-height: 1.45; padding: 12px 18px;
}

.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chips li {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.075); padding: 8px 18px;
  font-size: 1rem; font-weight: 600; color: var(--cream); min-width: 0;
}
.chips .ico { color: var(--moor-lit); margin-top: 3px; }

/* --------------------------------------------------------------- the form -- */

/* ONE form component: on the home page in the second course, and at the foot
   of every interior except the thank-you page. It is an opening like anything
   else, so the fields sit on a cream plate inside a stone surround. */
.form-card { background: var(--grit); padding: var(--sur); }
.on-dark .form-card { background: var(--grit-lit); }
.form-inner { background: var(--field); color: var(--ink); padding: 18px 36px 34px; }
/* The form carries the course's heading inside the plate, which is what puts
   the form itself on the first screen instead of a heading about it. The
   heading runs on one line and the standfirst on two, because a third line of
   either pushes the first input off a 1000px screen. */
.form-inner h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); margin: 0 0 8px; max-width: none; }
.form-inner .said { color: var(--muted); font-size: 1.08rem; line-height: 1.5; margin: 0 0 18px; max-width: 90ch; }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.f { display: block; margin-bottom: 16px; min-width: 0; }
.f > span { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 5px; }
.f input, .f select, .f textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #FFFFFF; border: 2px solid #C8C3B4; padding: 12px 13px; min-height: 46px;
  border-radius: 0;
}
.f textarea { min-height: 92px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--moor); outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--moor); color: var(--cream); font-family: var(--body);
  font-size: 1.05rem; font-weight: 700; padding: 16px 30px; min-height: 52px;
  border: 0; cursor: pointer; line-height: 1.2; text-align: center;
}
.btn:hover { background: var(--moor-press); color: var(--cream); }
.after { font-size: 0.9rem; color: var(--muted); margin: 20px 0 0; max-width: 70ch; }

.ask-areas { margin-top: 22px; }
.counties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.counties li { background: rgba(38, 42, 38, 0.09); padding: 8px 13px; font-size: 0.93rem; font-weight: 600; }
.on-dark .counties li { background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------- openings, cards -- */

/* A photograph, cut into the page. The caption is set into the stone under
   the glass; it describes the frame and never claims the work as ours. */
.opening { margin: 0; background: var(--grit); padding: var(--sur); }
.on-dark .opening { background: var(--grit-lit); }
.opening img { width: 100%; }
.opening figcaption {
  color: var(--dim); font-size: 0.88rem; line-height: 1.5;
  padding: 12px 3px 2px; margin: 0;
}

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { background: var(--grit); padding: var(--sur); display: flex; }
.on-dark .card { background: var(--grit-lit); }
.card > a { display: flex; flex-direction: column; width: 100%; color: var(--cream); font-weight: 400; }
.card img { width: 100%; height: 300px; object-fit: cover; }
.card-body { padding: 20px 4px 4px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { color: var(--cream); margin: 0 0 10px; }
.card-body p { color: var(--dim); font-size: 0.99rem; margin: 0 0 20px; }
.card .go { margin-top: auto; color: var(--moor-lit); font-weight: 700; font-size: 0.98rem; }
.card > a:hover .go { color: #A6DDBB; }
.card > a:hover h3 { color: #FFFFFF; }

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

/* ---------------------------------------------------- the mounting course -- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: start; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 26px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 9px; }
.bar-head b { font-size: 1.04rem; }
.bar-head span {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--heather);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-head span i { font-style: normal; font-family: var(--body); font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.bar-track { height: 18px; background: rgba(38, 42, 38, 0.13); }
.bar-fill { height: 100%; background: var(--heather); }

.stack { display: grid; gap: 22px; }

/* ---------------------------------------------------------- the big figure -- */

.figure-pair { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.big-n {
  font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 8vw, 6.4rem);
  line-height: 0.92; letter-spacing: -0.03em; color: var(--heather);
  font-variant-numeric: tabular-nums; margin: 0 0 12px;
}
.big-n small { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: 0; color: var(--muted); font-family: var(--body); margin-top: 12px; }
.on-dark .big-n { color: var(--heather-lit); }
.on-dark .big-n small { color: var(--dim); }

/* The head of the mounting course runs as a pair, because the figure the whole
   site argues from belongs beside the heading rather than buried in the list. */
.head-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 48px; align-items: start; margin-bottom: 48px; }
.head-pair .sec-head { margin-bottom: 0; }
.head-figure p { color: var(--muted); font-size: 1rem; max-width: 36ch; margin: 0; }
.on-dark .head-figure p { color: var(--dim); }

/* ------------------------------------------------------------- the finding -- */

.finding { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 46px; align-items: start; }
.warn { display: flex; gap: 11px; align-items: center; font-weight: 700; color: var(--heather-lit); margin: 0 0 18px; }
.warn .ico { color: var(--heather-lit); }

.note { background: rgba(38, 42, 38, 0.07); padding: 24px 28px; margin: 30px 0; }
.note b { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: 8px; }
.on-dark .note { background: rgba(255, 255, 255, 0.08); }

/* ----------------------------------------------------------------- questions */

.qs { max-width: 860px; }
/* The questions band runs as a pair so the accordion uses the page width
   instead of leaving half a course empty beside it. */
.qs-split { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.qs-split .sec-head { margin-bottom: 0; }
.qs-split .qs { max-width: none; }
.q { background: var(--cream); padding: 0 24px; }
.course--stone .q { background: var(--cream); }
.course--cream .q { background: var(--stone); }
.q + .q { margin-top: 4px; }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; gap: 18px;
  align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 700; font-size: 1.16rem; line-height: 1.3;
  min-height: 44px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--moor); transition: transform 180ms ease; }
.q[open] summary .ico { transform: rotate(180deg); }
.q .a { padding: 0 0 24px; max-width: 68ch; }
.q .a p { font-size: 1rem; }

/* -------------------------------------------------------------- the closer -- */

/* A designed tile with the same anatomy as the cards it follows: a
   photograph, a body and one action. Never an empty plate. */
.closer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.closer-shot { position: relative; min-height: 340px; }
.closer-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closer-plate { background: var(--grit-lit); padding: 46px 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { margin: 0 0 16px; }
.closer-plate p { color: var(--dim); margin: 0 0 28px; max-width: 46ch; }
.closer-plate .btn { align-self: flex-start; }

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

.foot { background: var(--ink); color: var(--dim); padding: 66px 0 44px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; margin-bottom: 44px; }
.foot .mark { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--dim); margin: 0 0 10px; letter-spacing: -0.02em; }
.foot .mark b { color: var(--cream); }
.foot-top > div { min-width: 0; max-width: 46ch; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.foot h4 { color: var(--cream); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 0.97rem; min-width: 0; overflow-wrap: anywhere; }
.foot a { color: var(--moor-lit); }
.foot-legal { margin-top: 44px; padding-top: 26px; }
.foot-legal p { font-size: 0.88rem; line-height: 1.6; color: #ADA89B; max-width: 96ch; }

/* --------------------------------------------------------------- interiors -- */

.page-head { background: var(--grit); color: var(--cream); padding: 62px 0 66px; }
.crumb { font-size: 0.92rem; color: var(--dim); margin: 0 0 22px; }
.crumb a { color: var(--moor-lit); }
.page-head h1 { max-width: 19ch; margin: 0 0 26px; }
.page-head h1 em { font-style: normal; color: var(--heather-lit); }
.pull { font-size: 1.28rem; line-height: 1.5; color: var(--dim); max-width: 56ch; margin: 0; }

.article { padding: 76px 0 84px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose h2 { font-size: clamp(1.85rem, 2.6vw, 2.3rem); margin: 52px 0 18px; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 9px; }
/* Openings inside an article run at one depth whatever the frame's own shape,
   so a portrait photograph does not take over a page of prose. */
.prose .opening { margin: 34px 0; }
.prose .opening img { height: 430px; object-fit: cover; }
.prose .qs { margin-top: 24px; }

.aside { position: sticky; top: 22px; min-width: 0; }
.aside h4 { margin: 0 0 14px; }
.aside ol { list-style: none; counter-reset: a; margin: 0 0 28px; padding: 0; }
.aside li { counter-increment: a; margin-bottom: 8px; font-size: 0.97rem; }
.aside li a { color: var(--ink); font-weight: 600; }
.aside li a::before { content: counter(a) ". "; color: var(--muted); font-weight: 400; }
.aside li a:hover { color: var(--moor); }
.aside-card { background: var(--grit); padding: var(--sur); }
.aside-card > div { background: var(--field); padding: 24px 24px 26px; }
.aside-card h4 { margin: 0 0 10px; }
.aside-card p { font-size: 0.96rem; color: var(--muted); margin: 0 0 18px; }
.aside-card .btn { width: 100%; font-size: 0.98rem; padding: 14px 18px; }

/* ------------------------------------------------------------------ credits */

.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.credit { background: var(--cream); padding: 24px 26px; min-width: 0; overflow-wrap: anywhere; }
.credit h3 { font-size: 1.1rem; margin: 0 0 8px; }
.credit p { font-size: 0.94rem; color: var(--muted); margin: 0 0 6px; }

/* ------------------------------------------------------------- thank you --- */

.thanks-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.next { list-style: none; margin: 24px 0 0; padding: 0; }
.next li { margin-bottom: 14px; }

/* ------------------------------------------------------------------ motion -- */

.rise { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 620ms ease, transform 620ms ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: 110ms; }
.rise.d2 { transition-delay: 220ms; }

/* On a touch screen the list links in the footer, the aside index and the
   thank-you page are tap targets rather than reading matter, so they get the
   44px the fleet asks for. On a mouse they stay tight. */
@media (pointer: coarse) {
  .foot li a, .next li a, .aside ol li a, .foot-legal a { display: inline-block; padding: 11px 0; }
  .foot li, .aside ol li { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drift { animation: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

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

@media (max-width: 1180px) {
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .aside { position: static; }
  .aside-card > div { padding: 22px; }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-type { padding: 60px var(--gut) 54px; }
  .hero h1 { max-width: none; }
  .hero-shot { min-height: 420px; }
  .split, .finding, .figure-pair, .closer-grid, .thanks-grid, .head-pair,
  .qs-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-row--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav > a.lg, .drop.lg { display: none; }
  .burger { display: inline-flex; }
  .nav .cta-top { display: none; }
  .mast-where { display: none; }
  .mast-top .wrap { min-height: 66px; }
  .course { padding: 60px 0 64px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  body { font-size: 1.03rem; }
  .prose .opening img { height: 260px; }
  .cards, .siblings { grid-template-columns: minmax(0, 1fr); }
  .f-row, .f-row--3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form-inner { padding: 24px 20px 28px; }
  .closer-plate { padding: 34px 24px 36px; }
  .lede { font-size: 1.16rem; }
  .pull { font-size: 1.14rem; }
  .card img { height: 230px; }
  .hero-shot { min-height: 330px; }
  .page-head { padding: 46px 0 50px; }
  .article { padding: 54px 0 60px; }
  .q { padding: 0 18px; }
  .q summary { font-size: 1.06rem; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  :root { --gut: 18px; --sur: 10px; }
  .form-inner { padding: 22px 16px 26px; }
  .closer-plate { padding: 28px 18px 30px; }
  .btn { width: 100%; padding: 16px 18px; }
  .aside-card > div { padding: 20px 16px; }
  .credit { padding: 20px 18px; }
}