/* ------------------------------------------------------------------------
   Plug-in Solar England

   One firm working across all nine English regions. The design source is the
   thing that makes England different: it is the only nation whose published
   planning guidance names plug-in solar in writing. So the site is built like
   a working file of printed sheets, in violet ink on warm paper, and every
   object on it carries its facts at the foot the way a record card does.

   1. THE RECORD FOOT is the signature device. Every object that carries
      content closes with a foot: a row of two to four cells inside the object,
      each cell a small label over a value, with its own fill. The hero
      photograph, every card, every region tile, the form, the nav panel, the
      page aside and the closing tile all end this way. It is a whole row
      inside a whole object, never a line stuck to one edge of something, and
      it always carries real information rather than decoration.

   2. THE FOLDER GAP IS THE SEAM AND THE ONLY SEAM. The page ground is manila
      (--file) and it is never the ground of a section. Every section is a
      separate sheet laid on it, so 22px of the folder shows at every join,
      including under the masthead and above the footer. There is no rule at
      any seam, no jog and no third colour: the gap is the page's own ground
      showing between two separate objects, which is why sections here do not
      butt into one another the way bands do. Never add a hairline "as well".

   3. THE SWELL is the one ambient motion. On the violet plane a single very
      wide, very soft warm light grows and settles, scale and opacity only,
      and it never travels. The subject of this site is how much light falls
      on a surface, not where light goes, so the gesture changes strength
      rather than position. It stops for anyone who has asked for less
      movement.

   Radius is 0 on every object, so the glyphs are Lucide geometry drawn with
   square caps and mitred joins. Texture is used twice and no more: a fine
   grain on the violet hero plane and a paper tile on the one vellum sheet.
   ------------------------------------------------------------------------ */

:root {
  /* Eight roles. iris: the violet plane, masthead, hero, the region sheet and
     the footer. ink: all text on a light sheet. paper: the sheet, a warm
     white. vellum: the second sheet ground and the fill of every record foot
     and card on a paper sheet, 1.20 against paper, which is where two light
     grounds separate for the eye without reading as banding. file: the manila
     folder, the page ground, and it only ever shows in the seam gaps.
     ember: ACTION ONLY, never decoration. dusk: information, the region
     marks and the generation bars. gold: the highlight, one phrase in the
     headline and every figure. */
  --iris:   #2B1F52;
  --ink:    #241D31;
  --paper:  #FBF7F1;
  --vellum: #EBE2D6;
  --file:   #D9CDB8;
  --ember:  #A8401C;
  --dusk:   #4E4380;
  --gold:   #7E6008;

  /* Derived, not new colours: the plane lifted one step for a panel standing
     on it, the highlight lifted so it carries on violet, the action darkened
     for a pressed state, secondary text, and one hairline used inside
     components only and never at a seam. */
  --iris-2:   #382A66;
  --iris-3:   #241A46;
  --gold-lit: #E9B84A;
  --ember-press: #85310F;
  --muted:    #5A5266;
  --dim:      #BDB2D4;
  --hair:     #D3C8B7;
  --hair-d:   #4A3E75;

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

  --wrap: 1280px;
  --gut: 26px;
  --seam: 22px;   /* the folder gap: the one seam device on this site */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--file);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

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

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

.ico { flex: none; vertical-align: middle; }

/* --- the sheets, and the folder gap that separates them ------------------
   Every section is a sheet. The gap between two sheets is the page ground
   showing through, which is the whole seam logic of this site. No sheet ever
   takes the folder colour, or the seam would disappear. */

.sheet { padding: 68px 0; }
.sheet + .sheet, footer.foot { margin-top: var(--seam); }
.sheet--paper  { background: var(--paper); }
.sheet--vellum { background: var(--vellum) url("/assets/tex/natural-paper.png"); }
.sheet--iris   { background: var(--iris); color: var(--paper); }
.sheet--iris h1, .sheet--iris h2, .sheet--iris h3 { color: var(--paper); }

.sheet--iris a { color: var(--gold-lit); }
.sheet--iris a:hover { color: #F6D588; }

h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 700; }
h3 { font-size: 1.4rem; font-weight: 700; }

.sec-lede {
  font-size: 1.16rem; color: var(--muted); max-width: 62ch; margin: 1rem 0 0;
}
.sheet--iris .sec-lede { color: var(--dim); }

.sec-head { max-width: 74ch; }
.sec-head + * { margin-top: 2.6rem; }

/* --- the record foot: the signature device ------------------------------- */

.rec {
  display: flex; flex-wrap: wrap; background: var(--vellum);
  font-family: var(--body);
}
.rec > div {
  flex: 1 1 0; min-width: 0; padding: .78rem 1.05rem;
}
/* Lightens rather than darkens: the gold figure colour is already close to
   the AA floor against the vellum ground, and a light zebra only ever adds
   contrast margin instead of eating it. */
.rec > div:nth-child(even) { background: rgba(255,255,255,.45); }
.rec b {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.rec span {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  color: var(--ink); line-height: 1.2; margin-top: .18rem;
  font-variant-numeric: tabular-nums;
}
.rec span small { font-family: var(--body); font-weight: 500; font-size: .76rem; color: var(--muted); }
/* A value that carries a figure takes the highlight. Every number on the site
   is this colour and nothing else is. */
.rec span.fig { color: var(--gold); }
.rec--wide > div { flex-basis: 100%; }
.rec--wide span { font-family: var(--body); font-weight: 500; font-size: .92rem; line-height: 1.5; }

/* a foot inside an object standing on the violet plane */
.on-iris .rec { background: var(--iris-3); }
.on-iris .rec > div:nth-child(even) { background: rgba(255,255,255,.06); }
.on-iris .rec b { color: var(--dim); }
.on-iris .rec span { color: var(--paper); }
.on-iris .rec span small { color: var(--dim); }
.on-iris .rec span.fig { color: var(--gold-lit); }

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

.mast { background: var(--iris); color: var(--paper); position: relative; z-index: 30; }
/* Direct child only: .mobile also sits inside .mast and has its own nested
   .wrap for the open panel, which must not inherit the masthead's row flex
   (it stacks the link list above the CTA instead). */
.mast > .wrap { display: flex; align-items: center; gap: 2rem; min-height: 92px; }

.brand { color: var(--paper); font-weight: 400; line-height: 1; }
.brand span {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.42rem;
  letter-spacing: -0.02em;
}
.brand b {
  display: block; font-family: var(--body); font-weight: 700; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lit); margin-top: .3rem;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.nav > a, .drop > button {
  color: var(--paper); font-family: var(--body); font-weight: 600; font-size: 1rem;
  background: none; border: 0; padding: .4rem 0; cursor: pointer; display: inline-flex;
  align-items: center; gap: .4rem; font-family: var(--body);
}
.nav > a:hover, .drop > button:hover { color: var(--gold-lit); }
.drop { position: relative; }
.drop .panel {
  position: absolute; top: calc(100% + 14px); left: 0; width: 460px;
  background: var(--paper); color: var(--ink); padding: 0; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 26px 60px rgba(20, 12, 45, .34);
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: none; }
.panel .strap { margin: 0; padding: 1.2rem 1.4rem .4rem; color: var(--muted); font-size: .95rem; }
.panel ul { padding: 0 1.4rem 1.2rem; }
.panel li + li { margin-top: .2rem; }
.panel li a {
  display: block; padding: .7rem .9rem; color: var(--ink); font-family: var(--display);
  font-weight: 700; font-size: 1.08rem; background: transparent;
}
.panel li a span {
  display: block; font-family: var(--body); font-weight: 400; font-size: .92rem;
  color: var(--muted); margin-top: .15rem; line-height: 1.45;
}
.panel li a:hover { background: var(--vellum); color: var(--ink); }
.panel li a:hover span { color: var(--muted); }
.panel .rec a { color: var(--ember); }

.cta-top {
  background: var(--ember); color: var(--paper) !important; padding: .72rem 1.15rem;
  font-weight: 700;
}
.cta-top:hover { background: var(--ember-press); color: var(--paper) !important; }

.burger {
  display: none; background: none; border: 1px solid var(--dim); color: var(--paper);
  font-family: var(--body); font-weight: 700; font-size: .95rem; padding: .6rem 1rem;
  cursor: pointer; min-height: 44px;
}
.mobile { display: none; background: var(--iris-2); }
.mobile[data-open="true"] { display: block; }
.mobile .wrap { display: block; }
.mobile ul { padding: 1rem 0 1.4rem; }
.mobile li a {
  display: block; padding: .85rem 0; color: var(--paper); font-family: var(--display);
  font-weight: 700; font-size: 1.15rem;
}
.mobile li a span {
  display: block; font-family: var(--body); font-weight: 400; font-size: .92rem;
  color: var(--dim); margin-top: .1rem;
}
.mobile .btn { margin-bottom: 1.4rem; }

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

.hero {
  position: relative; overflow: hidden;
  background: var(--iris) url("/assets/tex/dark-wall.png");
  color: var(--paper); padding: 40px 0 46px;
}
.hero .wrap { position: relative; z-index: 2; }
/* THE SWELL. One wide soft warm light on the violet plane. It changes size and
   strength and never moves, because the page is about how much light falls on
   a surface. Scale and opacity only. */
.swell {
  position: absolute; z-index: 1; left: 50%; top: -22%;
  width: 1500px; height: 1100px; margin-left: -750px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 184, 74, .26), rgba(233, 184, 74, .10) 52%, rgba(233, 184, 74, 0) 78%);
  animation: swell 26s ease-in-out infinite;
}
@keyframes swell {
  0%   { transform: scale(1); opacity: .68; }
  50%  { transform: scale(1.12); opacity: .96; }
  100% { transform: scale(1); opacity: .68; }
}

.hero h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem); font-weight: 700; color: var(--paper);
  max-width: 26ch;
}
.hero h1 em { font-style: normal; color: var(--gold-lit); }
.hero .lede {
  font-size: 1.2rem; color: var(--dim); max-width: 64ch; margin: 1rem 0 0;
}

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.chips li {
  display: flex; align-items: center; gap: .5rem; background: var(--iris-2);
  color: var(--paper); padding: .62rem .95rem; font-size: .95rem; font-weight: 600;
  min-width: 0;
}
.chips .ico { color: var(--gold-lit); }

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.hero-cta a {
  padding: .95rem 1.5rem; font-weight: 700; font-size: 1.02rem;
  background: var(--ember); color: var(--paper) !important;
}
.hero-cta a:hover { background: var(--ember-press); }
.hero-cta a.second {
  background: transparent; color: var(--paper) !important; border: 1px solid var(--dim);
}
.hero-cta a.second:hover { background: var(--iris-2); border-color: var(--paper); }

.hero-grid {
  display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--gut); margin-top: 1.7rem;
  align-items: start;
}
.hero-photo img { width: 100%; height: 470px; object-fit: cover; }

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

figure { margin: 0; }
figure img { width: 100%; }
figcaption {
  font-size: .88rem; color: var(--muted); padding: .7rem 0 0; line-height: 1.45;
  max-width: 58ch;
}
.sheet--iris figcaption { color: var(--dim); }

.fig-tall img { height: 430px; object-fit: cover; }

/* --- two column editorial rows ------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
/* The rules sheet carries a tall text column and one photograph. Centring the
   photograph splits the leftover height evenly instead of hanging it at the top. */
.split--mid { align-items: center; }
.split p { max-width: 62ch; }
.split .lead-p { font-size: 1.14rem; }

.points { margin-top: 1.5rem; }
.points li { display: flex; gap: .8rem; padding: .6rem 0; align-items: flex-start; }
.points .ico { color: var(--dusk); margin-top: .28rem; }
.points b { font-family: var(--display); font-weight: 700; }
.sheet--iris .points .ico { color: var(--gold-lit); }

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

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.card { background: var(--vellum); display: flex; flex-direction: column; }
.sheet--vellum .card { background: var(--paper); }
.sheet--vellum .card .rec { background: var(--vellum); }
.card > a { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.card-img img { width: 100%; height: 300px; object-fit: cover; }
.card-body { padding: 1.4rem 1.4rem 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.42rem; }
.card-body p { color: var(--muted); margin: .7rem 0 1.1rem; font-size: .98rem; }
.card .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ember); font-weight: 700;
}
.card > a:hover .go { color: var(--ember-press); }
.card > a:hover h3 { color: var(--ember-press); }
.card .rec { background: var(--paper); }
.sheet--paper .card .rec { background: var(--paper); }

/* --- the nine regions ---------------------------------------------------- */

.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.region { background: var(--iris-2); display: flex; flex-direction: column; }
.region-body { padding: 1.25rem 1.3rem 1.35rem; flex: 1 1 auto; }
.region h3 { font-size: 1.32rem; color: var(--paper); }
.region .op { color: var(--dim); font-size: .93rem; margin: .5rem 0 0; line-height: 1.45; }
.bar {
  margin: 1.1rem 0 .2rem; height: 10px; background: var(--iris-3); position: relative;
}
.bar i { display: block; height: 100%; background: var(--gold-lit); }
.bar-note {
  font-size: .82rem; color: var(--gold-lit); font-weight: 600; margin: .45rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* --- mountings ----------------------------------------------------------- */

.mounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.mount { background: var(--paper); display: flex; flex-direction: column; }
.mount img { width: 100%; height: 260px; object-fit: cover; }
.mount-body { padding: 1.3rem 1.3rem 1.4rem; flex: 1 1 auto; }
.mount h3 { font-size: 1.3rem; }
.mount p { color: var(--muted); font-size: .97rem; margin: .6rem 0 0; }
.mount .rec { background: var(--vellum); }
.sheet--vellum .mount .rec { background: var(--vellum); }

/* --- the run of steps ---------------------------------------------------- */

.run { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut); }
.step { background: var(--vellum); padding: 1.4rem 1.4rem 1.5rem; }
.step h3 { font-size: 1.22rem; }
.step p { margin: .6rem 0 0; color: var(--muted); font-size: .97rem; }
.step .ico { color: var(--dusk); margin-bottom: .9rem; }

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

.form-card { background: var(--paper); color: var(--ink); }
.form-head { padding: 1.35rem 1.5rem 0; }
.form-card h3 { font-size: 1.6rem; color: var(--ink); }
.form-card .said { color: var(--muted); margin: .7rem 0 0; font-size: 1rem; }
.form-card form { padding: 1.1rem 1.5rem 1.5rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
label.f { display: block; margin-bottom: .9rem; }
label.f span {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}
label.f input, label.f select, label.f textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--vellum); border: 1px solid var(--hair); padding: .78rem .85rem;
  min-height: 46px;
}
label.f textarea { resize: vertical; }
label.f input:focus, label.f select:focus, label.f textarea:focus { background: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ember); color: var(--paper); font-family: var(--body);
  font-weight: 700; font-size: 1.05rem; padding: .95rem 1.5rem; border: 0;
  cursor: pointer; width: 100%; min-height: 50px;
}
.btn:hover { background: var(--ember-press); color: var(--paper); }

.ask .wrap { position: relative; z-index: 2; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.ask h2 { color: var(--paper); }
.ask .counties { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ask .counties li {
  background: var(--iris-2); color: var(--paper); padding: .45rem .8rem; font-size: .9rem;
  font-weight: 600;
}

/* --- closing tile -------------------------------------------------------- */

.closer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.closer-grid img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.closer-plate {
  background: var(--iris); color: var(--paper); padding: 2.6rem 2.6rem 2.2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.closer-plate h2 { color: var(--paper); font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.closer-plate p { color: var(--dim); margin: 1rem 0 1.6rem; max-width: 46ch; }
.closer-plate .btn { width: auto; align-self: flex-start; }

/* --- interior pages ------------------------------------------------------ */

.page-head { background: var(--iris); color: var(--paper); padding: 62px 0 66px; position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 2; }
.crumb { font-size: .9rem; color: var(--dim); margin: 0 0 1.1rem; }
.crumb a { color: var(--dim); font-weight: 600; }
.crumb a:hover { color: var(--gold-lit); }
.page-head h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; color: var(--paper);
  max-width: 20ch;
}
.page-head h1 em { font-style: normal; color: var(--gold-lit); }
.page-head .pull {
  font-size: 1.24rem; color: var(--dim); max-width: 60ch; margin: 1.3rem 0 0;
}

.article { background: var(--paper); padding: 64px 0 70px; margin-top: var(--seam); }
.article .wrap { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin: 2.6rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.prose p { font-size: 1.05rem; }
.prose .lead-p { font-size: 1.2rem; color: var(--ink); }
.prose ul.bullets { margin: 0 0 1.2rem; }
.prose ul.bullets li { display: flex; gap: .7rem; padding: .35rem 0; }
.prose ul.bullets .ico { color: var(--dusk); margin-top: .3rem; }

.plate { background: var(--vellum); margin: 1.8rem 0 2rem; }
.plate img { width: 100%; height: 300px; object-fit: cover; }
.plate .plate-body { padding: 1.2rem 1.3rem 1.3rem; }
.plate .plate-body b { font-family: var(--display); font-size: 1.1rem; display: block; }
.plate .plate-body p { margin: .5rem 0 0; color: var(--muted); font-size: .96rem; }

.aside { position: sticky; top: 20px; }
.aside-box { background: var(--vellum); }
.aside h4 {
  font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0; padding: 1.2rem 1.3rem .6rem;
}
.aside ol { padding: 0 1.3rem 1.2rem; }
.aside ol li { padding: .34rem 0; }
.aside ol a { color: var(--ink); font-weight: 600; font-size: .98rem; }
.aside ol a:hover { color: var(--ember); }
.aside-card { background: var(--iris); color: var(--paper); margin-top: var(--seam); }
.aside-card .inner { padding: 1.4rem 1.3rem 1.5rem; }
.aside-card h4 { font-family: var(--display); font-size: 1.2rem; text-transform: none; letter-spacing: 0; color: var(--paper); padding: 0; }
.aside-card p { color: var(--dim); font-size: .95rem; margin: .6rem 0 1.1rem; }

.questions { margin-top: 2.4rem; }
.q { background: var(--vellum); margin-bottom: 10px; }
.q summary {
  cursor: pointer; list-style: none; padding: 1.05rem 1.3rem; font-family: var(--display);
  font-weight: 700; font-size: 1.14rem; display: flex; justify-content: space-between;
  gap: 1rem; align-items: center;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--dusk); }
.q[open] summary { color: var(--ember); }
.q .a { padding: 0 1.3rem 1.2rem; }
.q .a p { margin: 0 0 .8rem; color: var(--ink); }
.q .a p:last-child { margin-bottom: 0; }

.siblings { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--gut); }

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

.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.credit { background: var(--vellum); padding: 1.3rem 1.3rem 1.4rem; }
.credit h3 { font-size: 1.12rem; }
.credit p { font-size: .93rem; color: var(--muted); margin: .55rem 0 0; }
.attrib { margin-top: 2rem; font-size: .92rem; color: var(--muted); max-width: 78ch; }

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

.foot { background: var(--iris); color: var(--dim); padding: 60px 0 40px; }
.foot a { color: var(--paper); font-weight: 500; }
.foot a:hover { color: var(--gold-lit); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.foot .mark { color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 0 .8rem; }
.foot .mark b { display: block; font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lit); margin-top: .25rem; }
.foot p { font-size: .95rem; }
.foot h4 {
  font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); margin: 0 0 .9rem;
}
.foot li { padding: .24rem 0; font-size: .95rem; }
.foot-legal { margin-top: 42px; background: var(--iris-3); padding: 1.3rem 1.5rem; display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.foot-legal p { font-size: .86rem; max-width: 88ch; margin: 0; }

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

.rise { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; }
.rise.d2 { transition-delay: .18s; }
.rise.d3 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .swell { animation: none; opacity: .8; }
  .rise { opacity: 1; transform: none; transition: none; }
}

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

@media (max-width: 1180px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .run { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .nav { gap: 1.1rem; }
  .article .wrap { grid-template-columns: 1fr; }
  .aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam); }
  .aside-card { margin-top: 0; }
  .hero-grid, .ask-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-photo img { height: 400px; }
  .regions, .cards, .mounts, .credits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .lg { display: none !important; }
  .burger { display: inline-flex; align-items: center; }
  .nav { gap: .8rem; }
  .split, .split--wide { grid-template-columns: 1fr; gap: 30px; }
  .closer-grid { grid-template-columns: 1fr; }
  .closer-grid img { min-height: 260px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .sheet { padding: 46px 0; }
  .hero { padding: 48px 0 52px; }
  .regions, .cards, .mounts, .credits, .siblings, .run, .aside { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-head { padding: 44px 0 46px; }
  .article { padding: 44px 0 48px; }
  .hero-photo img { height: 300px; }
  .card-img img { height: 230px; }
}

@media (max-width: 560px) {
  :root { --gut: 18px; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .rec > div { flex-basis: 100%; }
  .hero-cta a { width: 100%; }
  .drop .panel { width: auto; left: 0; right: 0; }
}