/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — MEDIA CENTRE
   Loaded after interior.css, which supplies .sec, .sechead, .xhero,
   .xclose and the split rows. Everything here is specific to this page.

   The page is a utility, not a narrative: a journalist arrives knowing
   what they want and leaves with it. So the rules below are mostly about
   getting out of the way — measured prose, panels that are open rather
   than clicked, and a gallery whose captions carry the credit line.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO CONTACT ─────────────────────────────────────────────────────────
   The same shape the newsroom hero uses (.nr-contact), restated rather than
   shared: moving it into interior.css would put it in front of /markets and
   /advantage too, which is a visual change to two signed-off pages. When a
   third page wants it, promote it then. */
.md-contact{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.md-contact-note{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}

/* ── OUR STORY ────────────────────────────────────────────────────────────
   TWO COLUMNS: the statement and the supporters on the left, the prose on
   the right.

   Why it is not a .sechead over a column. Both of the measures involved cap
   out around 450px — .sechead is 62ch computed at body size, and
   .page-dense p is 52ch — so stacking them left the story hugging the left
   edge of a 1240px wrap with two thirds of the row empty. The measures are
   right; they just needed something beside them.

   Placement is explicit rather than by source order: the prose spans both
   rows so the supporters can sit under the statement without the two
   columns having to be the same height. The narrow rules below unset all of
   it, which puts the page back on DOM order — statement, prose, supporters
   — and that is the right order to read it in on a phone.

   --md-block is the width the story and the film below it BOTH sit at, so
   their edges line up and the pair reads as one centred block. It is set to
   what the two measures actually need rather than to the full 1240px wrap:
   the right column can never draw wider than .page-dense p's 52ch, so a
   full-wrap grid left ~180px of dead track on its right and pulled the whole
   section visibly left of centre. Sizing the block to its content and
   centring it is what fixes that — do not widen this back to the wrap. */
/* .sec's own bottom padding is clamp(76px,12vh,140px), and the next section
   opens with the same again — ~280px of nothing between the film's caption
   and the press panels. That reads as the page having ended. The film is the
   close of this section rather than another item in it, so this section's
   foot is cut to roughly half; the panels' top padding still supplies the
   separation. */
#our-story{padding-bottom:clamp(44px,6vh,76px)}

.md-story-grid,.md-film{max-width:1030px;margin-inline:auto}
.md-story-grid{display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  column-gap:clamp(40px,4vw,72px);align-items:start}
.md-story-head{grid-column:1;grid-row:1}
.md-story{grid-column:2;grid-row:1 / span 2}
.md-partners{grid-column:1;grid-row:2}
.md-story p{color:var(--mist)}
.md-story p+p{margin-top:20px}
.md-story .lede{color:var(--white)}

/* The highlighted sentence. On the live page this is a yellow RTE
   highlight — a Squarespace default that has no equivalent here and would
   read as a warning against this palette. The emphasis is carried by a rule
   and a lift in weight and colour instead, which is how the rest of the
   site does emphasis. */
.md-pull{margin-top:32px;padding-left:clamp(18px,2.5vw,28px);
  border-left:2px solid var(--current);
  color:var(--white);font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;
  font-weight:400}

/* ── SUPPORTERS ───────────────────────────────────────────────────────────
   A named list, not a logo wall — see the note in the template. One name per
   line: the list lives in the left rail now, and at that width two columns
   put "Blue Action Accelerator" and "Energy Systems Catapult" onto two lines
   each, which reads as seven ragged blocks rather than as a set. */
.md-partners{margin-top:clamp(40px,5vh,60px);max-width:38ch}
.md-partners h3{margin:0;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.md-partners ul{list-style:none;margin:20px 0 0;padding:0;
  display:grid;gap:11px}
.md-partners li{padding-left:20px;position:relative}
.md-partners li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--current-lift)}
.md-partners a{color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--line);transition:border-color var(--t-fast) var(--ease-out)}
.md-partners a:hover{border-color:var(--current)}

/* ── THE STORY BLOCK, SIZED FOR A LAPTOP ──────────────────────────────────
   James, 28 Aug 2026: "reduce the size down to fit better on laptop". At a
   1512x700 laptop the block measured 688px from the top of the section to
   the foot of the supporters list — it technically fitted, with 12px to
   spare, which is why it read as filling the screen rather than sitting on
   it. It is 640px now, so there is air above and below it.

   Three things give that back, and only one of them is type:

     · the section's top padding, cut from ~90px to ~56px
     · the paragraph rhythm inside the story column, 20px down to 16 —
       which sets the gap before the pull quote too: .md-pull's own
       margin-top has always lost to .md-story p+p on specificity, so that
       32px in the rule above is decoration. Do not trust it.
     · the statement, from .page-dense .d2's 3.6rem cap to 3.1rem

   THE PULL QUOTE KEEPS ITS SIZE. It is the one sentence the live page
   highlights and it has to stay a step above the prose around it.

   THE BODY COPY IS NOT SMALLER. It is boilerplate a journalist may well
   copy out of the page, and 16px on a 52ch measure is what makes that
   readable; shrinking it would have saved ~25px and cost the one thing this
   page is for.

   The two columns now finish level — 583px of statement-plus-supporters
   against 584px of prose — which is luck rather than design, and it is
   worth knowing that the statement is no longer the slack column. Take the
   heading up again and it, not the prose, sets the height of the block.

   Desktop only. Below 901px the grid is a single column and the block is
   scrolled through rather than taken in at once, so none of this applies. */
@media(min-width:901px){
  #our-story{padding-top:clamp(56px,7vh,92px)}
  #our-story .d2{font-size:clamp(1.9rem,3.6vw,3.1rem)}
  .md-story .lede{font-size:1.1rem;line-height:1.55}
  .md-story p+p{margin-top:16px}
  .md-partners{margin-top:clamp(28px,3.5vh,44px)}
}

/* ── THE FOUNDER STORY FILM ───────────────────────────────────────────────
   Gated in the template on site.video.founderStory — on a build without the
   clip this block is never written, so none of these rules ever apply.

   Shares the story block's width and centring (set above), so the film's
   edges line up with the two columns rather than floating inside them. */
.md-film{margin-top:clamp(44px,6vh,68px)}
.md-film video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;
  background:var(--schematic);border:1px solid var(--line);border-radius:var(--r-md)}
.md-film figcaption{margin-top:14px;font-size:.88rem;color:var(--fog)}

/* ── THE THREE PANELS ─────────────────────────────────────────────────────
   Latest News, Media Contact, Boilerplate Copy. The live page hides all
   three behind closed accordion toggles; here they are open, because three
   short paragraphs cost less to read than they cost to click. */
.md-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden}
.md-panel{background:var(--abyss);padding:clamp(28px,3.4vw,42px)}
.md-panel h3{margin:0;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:500;
  letter-spacing:-.01em;color:var(--white)}
.md-panel h3::before{content:"";display:block;width:34px;height:1px;
  background:var(--current-lift);margin-bottom:18px}
.md-panel p{margin:16px 0 0;font-size:.95rem;line-height:1.68;color:var(--mist)}

/* The boilerplate is written to be lifted verbatim, so it gets a selectable
   ground of its own and a slightly tighter measure — it should look like a
   block somebody is meant to take away, not like more page copy. */
.md-panel-boiler{background:var(--schematic)}
.md-panel-boiler p{color:var(--white)}

/* ── THE QUOTE ────────────────────────────────────────────────────────────
   Not in the closing band — this page's close is the media desk, and a
   third-party endorsement should not be the last thing a journalist reads
   before the contact details. It sits on its own instead. */
/* Neither foot is a full .sec's worth. The top is 0 because the panels above
   already close with theirs; the bottom is cut for the same reason #our-story
   is — .sec's 140px meeting the image library's 140px put ~280px of empty
   navy between the attribution and "IMAGE LIBRARY", which reads as the end
   of the page rather than as a pause. Smaller than #our-story's foot because
   a centred quote carries its own air; a film does not. */
.md-quote-sec{padding-top:0;padding-bottom:clamp(32px,4.5vh,56px)}
/* Sized in px, not ch: .d2 is a clamp, so a ch measure is computed against
   whatever the viewport happens to make the type, and this quote is 18 words
   — long enough that a "safe" 44ch turned it into a ten-line column. The
   quote is also set below .d2's own size for the same reason. */
.md-quote{margin:0 auto;text-align:center;max-width:min(760px,86vw)}
.md-quote blockquote{margin:0;font-weight:300;text-wrap:balance;
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.32;letter-spacing:-.015em}
.md-quote blockquote::before{content:"\201C";display:block;
  font-size:3rem;line-height:1;color:var(--current-lift);opacity:.6;
  margin-bottom:10px}
.md-quote figcaption{margin-top:26px;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}

/* ── IMAGE LIBRARY ────────────────────────────────────────────────────────
   Three across. The frames are a mix of square renders and 16:9 photographs,
   so each tile is given a fixed 4:3 window and the image cropped into it —
   a gallery whose rows are ragged is harder to scan than one whose crops
   are imperfect, and the full frame is one click away in every case. */
.md-gallery{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.md-gallery a{display:block;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--schematic);
  transition:border-color var(--t-fast) var(--ease-out)}
/* height:auto is load-bearing, not tidying. Every frame carries width= and
   height= so the grid does not reflow as the images arrive, and the browser
   turns those attributes into a used height — which beats `aspect-ratio`,
   because a ratio only sizes the axis that is `auto`. Without this line the
   tiles render 360 x 1800. */
.md-gallery img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;
  transition:transform var(--t-base) var(--ease-out),
             filter var(--t-base) var(--ease-out);
  filter:brightness(.94)}
.md-gallery a:hover{border-color:var(--current)}
.md-gallery a:hover img{transform:scale(1.03);filter:brightness(1)}
.md-gallery a:focus-visible{outline:2px solid var(--current-lift);outline-offset:3px}

/* The download affordance. Hidden until hover on a pointer device, but
   ALWAYS present for keyboard focus and always present where hover does not
   exist — a press page whose only download cue is a hover state is a press
   page that does not work on the phone the journalist is holding. */
.md-dl{position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(var(--abyss-rgb),.86);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out)}
.md-gallery a:hover .md-dl,
.md-gallery a:focus-visible .md-dl{opacity:1;transform:translateY(0)}
@media(hover:none){
  .md-dl{opacity:1;transform:none}
}

.md-gallery p{margin:14px 0 0;font-size:.9rem;line-height:1.55;color:var(--mist)}
.md-credit{display:block;margin-top:6px;font-family:var(--mono);font-size:.66rem;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}

/* ── NARROW ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* Back to one column and back to DOM order: statement, prose, supporters.
     grid-row must be unset too, or the prose keeps its `1 / span 2` and
     drops the supporters above it. */
  .md-story-grid{grid-template-columns:1fr}
  .md-story-head,.md-story,.md-partners{grid-column:auto;grid-row:auto}
  .md-story-head{margin-bottom:clamp(30px,4vh,44px)}

  .md-panels{grid-template-columns:1fr}
  .md-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .md-gallery{grid-template-columns:1fr}
  .md-contact .btn{width:100%;justify-content:center}
  .xclose .ctas .btn{width:100%;justify-content:center}
}