/* ------------------------------------------------------------------------
   Plug-in Solar Northern Ireland

   The design source is the site's own job: nothing here gets called finished
   until it has been checked against a source and marked. Northern Ireland's
   engineering and manufacturing past, from the linen inspection halls to the
   shipyard, ran on exactly that object: a stamped plate riveted to a thing,
   recording what it is and whether it has passed. This site is built the
   same way, because that is genuinely the news: most of this has not passed
   yet, and the plates say so in plain sight rather than hiding it in prose.

   1. THE RATING PLATE is the signature device. Every object that holds
      content (the hero photograph, every card, the ledger row, the form,
      the nav panel, the page aside, the closing tile) wears a stamped tab
      at its top edge, pinned at both corners by a rivet, carrying a short
      stamped word. On the ledger the word is a status: SETTLED is cast
      solid in ink, PART SETTLED is cast half in ink and half open, OPEN is
      an outline only, cut but not filled in. Nothing here is a coloured
      dot or a badge glued on for decoration: the plate is a whole object
      with its own fill, its own border and real rivets, and the object
      behind it is unfinished without one. It is never a corner glyph and
      never a footnote: the status IS the object's identity, not a note
      added to it.

   2. THE ISOLATOR IS THE SEAM AND THE ONLY SEAM. Where two light grounds
      meet, they meet through a 10px reveal of plain ink, and an amber
      blade sits centred in that reveal, thrown open at an angle, the way
      the blade of a knife switch sits when a circuit has been isolated
      rather than closed. It is a literal seam, not a decorative one: the
      one part of this whole story that is not yet connected is the wiring,
      so the page itself never quite connects either. Where a dark plane
      meets a light ground, that plane's own edge is the seam and no reveal
      is added on top of it. The blade never appears anywhere except at a
      seam, and a seam never gets a rule or a ground change added to it.

   3. THE SWEEP is the one ambient motion. A single soft amber beam passes
      once across the ink hero plane, the way a bench light passes over a
      part to check it, then goes still for several seconds before it runs
      again. It is not a current and it does not loop continuously: it is
      an inspection, with a rest between passes, which is the correct
      rhythm for a site whose whole content is "we keep checking; most of
      it is still open." Transform and opacity only, and it does not run
      at all for anyone who has asked for less movement.

   Radius is 0 everywhere, so the glyphs are Lucide geometry rendered with
   square caps and mitred joins to match the corners. Texture is used
   twice and no more: a fine, non-directional grain on the two ink planes
   (the hero and the footer), never behind body copy and never on an
   object standing on those planes.
   ------------------------------------------------------------------------ */

:root {
  /* Eight roles. ink: the deep plane, all body text, the SETTLED plate fill.
     paper: the page, warm ledger paper. panel: the alternate ground, 1.226
     against paper, where two grounds separate for the eye without banding.
     amber: ACTION ONLY, the isolator blade, links and buttons. harbour:
     information, used for the settled/product facts and their icons.
     signal: the highlight, one phrase in the headline and the plate's PART
     fill, used only on the ink plane where its contrast is highest. muted:
     secondary text. hairline: borders inside a plate, never at a seam. */
  --ink: #191B1D;
  --paper: #FBF6EC;
  --panel: #EEDFBB;
  --amber: #8A5209;
  --harbour: #2C4A52;
  --signal: #E7A93D;
  --muted: #5A5343;
  --hairline: #DFD2B2;
  --hairline-ink: rgba(251, 246, 236, 0.22);

  --font-display: 'Manrope', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Karla', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Fragment Mono', 'Courier New', monospace;

  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--amber); font-weight: 600; text-decoration: none; }
a:hover { color: #6E3F07; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--amber); color: #fff;
  padding: 12px 18px; z-index: 200; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

.ico { display: inline-block; vertical-align: -4px; margin-right: 8px; flex: none; }

/* ------------------------------------------------------------- textures -- */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/tex/stardust.png');
  mix-blend-mode: overlay; opacity: 0.5;
}

/* ---------------------------------------------------------- the plate ---- */
/* THE RATING PLATE. A bordered object with a stamped tab riveted at its top
   edge. The tab is offset left, never centred, so it reads as fixed to the
   object rather than a caption above it. */
.plate {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 30px 26px 26px;
}
.plate.on-panel { background: var(--panel); }
.plate.on-ink { border-color: var(--hairline-ink); background: transparent; }
.plate-tab {
  position: absolute; top: -16px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  padding: 5px 14px 5px 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
.plate-tab::before, .plate-tab::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--paper); transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.plate-tab::before { left: 6px; }
.plate-tab::after { right: 6px; display: none; }
.plate-tab.wide::after { display: block; }

/* Status fills for the ledger's own plates. */
.plate-tab.settled { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* "Part settled" is two real halves, each with its own solid fill and matching
   text colour, split on the label's own word gap: ink-filled first, panel-open
   second. A single flat text colour over a split background vanishes wherever
   it lands on its own-colour half, so the halves are separate boxes instead. */
.plate-tab.part { background: none; border-color: var(--ink); padding: 0; gap: 0; overflow: hidden; }
.plate-tab.part .pt-a { background: var(--ink); color: var(--paper); padding: 5px 10px 5px 20px; }
.plate-tab.part .pt-b { background: var(--panel); color: var(--ink); padding: 5px 14px 5px 10px; }
.plate-tab.open { background: transparent; color: var(--amber); border-color: var(--amber); }

/* -------------------------------------------------------- the isolator --- */
/* THE ISOLATOR. A 10px reveal of ink between two light sections, with an
   amber blade thrown open, centred. Dark planes meet the next section at
   their own edge and get no reveal added. */
.isolator {
  position: relative; height: 10px; background: var(--ink); overflow: visible;
}
.isolator::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 4px; background: var(--amber);
  transform: translate(-50%, -50%) rotate(-34deg);
}

/* ------------------------------------------------------------ sections --- */
.sec { padding: 76px 0; }
.sec--panel { background: var(--panel); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink h2, .sec--ink h3 { color: var(--paper); }
.sec--ink p { color: rgba(251,246,236,0.86); }
.sec--harbour { background: var(--harbour); color: var(--paper); }
.sec--harbour h2, .sec--harbour h3 { color: var(--paper); }
.sec--harbour p { color: rgba(251,246,236,0.9); }
.sec-lede { max-width: 640px; color: var(--muted); font-size: 1.15rem; }
.sec--ink .sec-lede, .sec--harbour .sec-lede { color: rgba(251,246,236,0.82); }
.eyebrow-free { margin: 0; }

/* -------------------------------------------------------------- header --- */
.mast-strip { background: var(--harbour); color: var(--paper); font-size: 13.5px; }
.mast-strip .wrap { display: flex; align-items: center; gap: 22px; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
.mast-strip ol { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; flex-wrap: wrap; }
.mast-strip ol li::after { content: '\00b7'; margin-left: 16px; opacity: 0.6; }
.mast-strip ol li:last-child::after { content: none; }
.mast-strip p { margin: 0; opacity: 0.94; }
.mast-strip b { color: var(--signal); }

.mast { background: var(--ink); position: relative; z-index: 40; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; position: relative; }
.brand {
  position: relative; display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
  padding: 10px 20px 10px 26px; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: 0.02em; line-height: 1.25; text-transform: uppercase;
  margin-bottom: -22px;
}
.brand::before, .brand::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); transform: translateY(-50%);
}
.brand::before { left: 7px; }
.brand::after { right: 7px; }
.brand b { color: var(--signal); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a.lg { color: var(--paper); font-weight: 700; font-size: 15px; }
.nav a.lg:hover { color: var(--signal); }
.nav a.cta-top {
  background: var(--amber); color: #fff; border: 2px solid var(--amber);
  padding: 11px 20px; font-weight: 700;
}
.nav a.cta-top:hover { background: #7A4909; border-color: #7A4909; color: #fff; }
.burger {
  display: none; background: transparent; color: var(--paper); border: 2px solid var(--paper);
  padding: 10px 16px; font-family: var(--font-body); font-weight: 700; font-size: 14px;
}
.mobile { display: none; }

@media (max-width: 900px) {
  .nav a.lg, .nav .cta-top { display: none; }
  .burger { display: inline-block; }
  .mast .wrap { height: 76px; }
  .brand { font-size: 13px; padding: 8px 14px 8px 20px; margin-bottom: -18px; }
  .mobile {
    display: block; background: var(--ink);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .mobile[data-open="true"] { max-height: 480px; }
  .mobile .wrap { padding-top: 22px; padding-bottom: 26px; display: block; height: auto; }
  .mobile ul { list-style: none; margin: 0 0 18px; padding: 0; }
  .mobile li + li { margin-top: 4px; }
  .mobile a { display: block; padding: 13px 2px; color: var(--paper); font-weight: 700; }
  .mobile .btn { width: 100%; text-align: center; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  background: var(--ink); color: var(--paper); position: relative;
  overflow: hidden; padding: 34px 0 60px;
}
.hero h1 { max-width: 1000px; margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 52px; align-items: start; }
.hero .lede { font-size: 1.1rem; max-width: 50ch; margin-bottom: 14px; color: rgba(251,246,236,0.88); }
.chips { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chips li {
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px;
  color: var(--paper);
}
.chips .ico { color: var(--signal); }
.hero-figure { margin: 0; }
.hero-figure figcaption { font-size: 13.5px; color: rgba(251,246,236,0.68); margin-top: 10px; }

.sweep-beam {
  position: absolute; top: 0; bottom: 0; left: -10%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(231,169,61,0.30), transparent);
  transform: translateX(-40%); opacity: 0; pointer-events: none;
  animation: sweep 11s ease-in-out infinite;
}
@keyframes sweep {
  0%, 62% { transform: translateX(-40%); opacity: 0; }
  70% { opacity: 0.7; }
  80% { transform: translateX(430%); opacity: 0.55; }
  90%, 100% { transform: translateX(430%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sweep-beam { animation: none; opacity: 0; } }

/* ------------------------------------------------------------ figures --- */
figure { margin: 0; }
figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.sec--ink figcaption, .sec--harbour figcaption { color: rgba(251,246,236,0.7); }
.figure-plated { position: relative; }

/* ------------------------------------------------------- the band ------- */
.band {
  position: relative;
}
.band img { width: 100%; height: 420px; object-fit: cover; }
.band .plate {
  margin-top: -110px; position: relative; z-index: 5; max-width: 460px;
}
.band .n { font-family: var(--font-mono); font-size: 3rem; line-height: 1; margin: 0 0 6px; }
.band .n small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; margin-left: 8px; color: var(--muted); }
.band-note { background: var(--panel); }
.band-note .wrap { padding: 12px 24px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- cards --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
.card { position: relative; }
.card a { display: block; color: inherit; }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card .plate { padding-top: 26px; }
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--amber); font-size: 14.5px; }
.card a:hover .go { color: #6E3F07; }
.card a:hover .go .ico { transform: translateX(3px); }
.go .ico { transition: transform 0.15s ease; margin-right: 0; }

/* -------------------------------------------------------------- ledger --- */
.ledger { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.ledger-row { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: start; }
.ledger-row .plate { width: 100%; }
.ledger-stamp {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding-top: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.07em;
}
.ledger-plate.settled .ledger-stamp { color: var(--ink); }
.ledger-plate.part .ledger-stamp { color: var(--ink); }
.ledger-plate.open .ledger-stamp { color: var(--amber); }
.ledger-q { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.ledger-a { color: var(--muted); font-size: 15.5px; margin-bottom: 10px; }
.who { font-size: 14px; font-weight: 700; }
.who span { font-weight: 400; color: var(--muted); }
.attrib { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* ----------------------------------------------------------------- bars -- */
.bars-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { margin-bottom: 20px; }
.bar-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14.5px; }
.bar-head span { font-family: var(--font-mono); }
.bar-track { height: 14px; background: var(--panel); border: 1px solid var(--hairline); }
.bar-fill { height: 100%; background: var(--amber); }

/* ------------------------------------------------------------------ ask -- */
.ask-band { background: var(--panel); padding: 70px 0; }
.ask-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: start; }
.ask-band .counties { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ask-band .counties li {
  border: 2px solid var(--ink); padding: 6px 12px; font-size: 13.5px; font-weight: 700;
}

/* ----------------------------------------------------------------- form -- */
.form-card { max-width: 560px; color: var(--ink); padding-top: 24px; padding-bottom: 20px; }
.form-card h3 { margin-bottom: 5px; font-size: 1.15rem; }
.form-card .said { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.form-card form { margin-top: 14px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { display: block; margin-bottom: 16px; }
.f span { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 11px 12px; font: inherit; font-size: 15.5px;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--amber); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-block; background: var(--amber); color: #fff; border: 2px solid var(--amber);
  padding: 13px 24px; font-weight: 700; font-size: 15.5px; cursor: pointer;
}
.btn:hover { background: #7A4909; border-color: #7A4909; color: #fff; }
.after { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------------------------------------------------------------- finding -- */
.finding { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.finding .plate-tab.warn-tab { position: static; display: inline-flex; margin-bottom: 16px; }

/* --------------------------------------------------------------- closer --- */
.closer { position: relative; background: var(--ink); color: var(--paper); padding: 0; }
.closer-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.closer-grid img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.closer-plate { padding: 60px 52px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { color: var(--paper); }
.closer-plate p { color: rgba(251,246,236,0.85); margin-bottom: 24px; }

/* --------------------------------------------------------------- footer --- */
.foot { background: var(--ink); color: rgba(251,246,236,0.86); padding-top: 62px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.foot .mark { font-family: var(--font-display); font-weight: 800; color: var(--paper); font-size: 1.1rem; margin-bottom: 12px; }
.foot .mark b { color: var(--signal); }
.foot h4 { color: var(--paper); font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 14.5px; }
.foot a { color: rgba(251,246,236,0.86); font-weight: 600; }
.foot a:hover { color: var(--signal); }
.foot-legal {
  padding: 34px 0 34px;
  font-size: 12.5px; color: rgba(251,246,236,0.6); display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.foot-legal a { color: rgba(251,246,236,0.8); }

/* ----------------------------------------------------------- page head --- */
.page-head { background: var(--panel); padding: 54px 0 40px; }
.crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; font-weight: 700; }
.crumb a { color: var(--muted); }
.page-head h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); max-width: 880px; }
.page-head h1 em { font-style: normal; color: var(--amber); }
.pull { font-size: 1.1rem; color: var(--muted); max-width: 640px; margin: 0; }

.article { padding: 56px 0 20px; }
.article .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16.5px; }
.prose .cr-figure { margin: 30px 0; }
.aside { position: sticky; top: 26px; border: 2px solid var(--ink); padding: 22px; }
.aside h4 { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.aside ol { list-style: none; margin: 0 0 22px; padding: 0; }
.aside ol li { margin-bottom: 9px; }
.aside ol a { color: var(--ink); font-weight: 600; }
.aside ol a:hover { color: var(--amber); }
.aside-card { background: var(--panel); padding: 18px; margin-top: 18px; }
.aside-card p { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .article .wrap { grid-template-columns: 1fr; }
  .aside { position: static; }
}

/* ----------------------------------------------------------------- faq --- */
.q { border: 2px solid var(--ink); padding: 18px 20px; margin-bottom: 14px; }
.q summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { transition: transform 0.18s ease; margin-right: 0; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding-top: 14px; color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------- siblings --- */
.siblings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }

/* -------------------------------------------------------------- credits --- */
.credits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }
.credit { border: 2px solid var(--ink); padding: 20px; background: var(--paper); }
.credit h3 { font-size: 1.05rem; }
.credit p { font-size: 14px; color: var(--muted); margin-bottom: 6px; }

/* --------------------------------------------------------------- thanks --- */
.thanks-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.thanks-grid .plate { max-width: 460px; }

/* ---------------------------------------------------------- reveal anim --- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rise.in { opacity: 1; transform: translateY(0); }
.rise.d1 { transition-delay: 0.08s; }
.rise.d2 { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- helpers --- */
.warn-line { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--amber); margin-bottom: 12px; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
  .hero-grid, .finding, .ask-grid, .thanks-grid, .bars-split { grid-template-columns: 1fr; }
  .band .plate { margin-top: -70px; max-width: none; }
  .cards { grid-template-columns: 1fr 1fr; }
  .closer-grid { grid-template-columns: 1fr; }
  .closer-grid img { min-height: 280px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sec { padding: 54px 0; }
  .cards, .cards-2, .siblings, .credits { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .mast-strip ol { display: none; }
  .band img { height: 260px; }
}