/* batteryfireclaims.co.uk — "Ledger Ember".
   One idea: this site is a public record of battery fires, kept the way a record
   should be kept. Mineral paper, soot-black utility structure, one hazard amber.
   Two signature elements carry it — the Source Strip under every figure, and the
   numbered record spine down the left of every page. Source trails, not
   decoration, are the identity.

   Fonts are self-hosted and open-licence (SIL OFL 1.1) — see assets/fonts/OFL.md.
   Charis SIL is Bitstream Charter's open descendant, so the original Charter
   character is kept rather than approximated. */

/* ---- self-hosted faces ---------------------------------------------------- */
@font-face{font-family:"Charis SIL";src:url(fonts/charis-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Charis SIL";src:url(fonts/charis-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Mulish";src:url(fonts/mulish-400-800.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#111412;
  --soot:#232825;
  --graphite:#414943;
  --muted:#687169;
  --line:#C8CEC8;
  --ground:#E6E9E4;
  --paper:#F8F9F6;
  --accent:#E0A000;
  --accent-ink:#171A17;
  --accent-soft:#FFF2C7;
  --ember:#9E361D;
  --focus:#075CC9;
  --maxw:76rem;
  --pad:clamp(1rem,4vw,3rem);
  --font-display:"Charis SIL",Georgia,"Times New Roman",serif;
  --font-body:"Mulish","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);
  font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2{font-family:var(--font-display);line-height:1.06;letter-spacing:-.022em;margin:0 0 .55em}
h1{font-size:clamp(2.5rem,4.4vw,4.2rem);font-weight:700;max-width:16ch}
h2{font-size:clamp(1.7rem,2.7vw,2.5rem);font-weight:700;margin-top:1.4em;max-width:22ch}
h3{font-family:var(--font-body);font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.25;
  letter-spacing:-.005em;font-weight:800;margin:1.6em 0 .5em}
p{margin:0 0 1em;max-width:65ch}
.wrap > ul,.wrap > ol{max-width:66ch;padding-left:1.25rem}
.wrap > li,li{margin-bottom:.55rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-weight:700}

/* ---- header --------------------------------------------------------------- */
.site-header{border-bottom:4px solid var(--accent);background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4.75rem;flex-wrap:wrap}

/* WORDMARK (R12) — hazard mark + two-part stacked lockup, set in the same
   monospaced face that rules every source strip on the site. */
.brand{text-decoration:none;display:flex;align-items:center;gap:.7rem;color:var(--paper)}
.brand-mark{flex:none;width:1.35rem;height:1.35rem;display:block}
.brand-mark path{fill:var(--accent)}
.brand-type{display:block;font-family:var(--font-mono);font-weight:700;line-height:1.05;
  text-transform:uppercase}
.brand-type .l1{display:block;font-size:.95rem;letter-spacing:.02em}
.brand-type .l2{display:block;font-size:.95rem;letter-spacing:.32em;color:var(--accent)}

.nav{display:flex;gap:clamp(.8rem,2vw,1.6rem);flex-wrap:wrap;font-size:.86rem;font-weight:700}
.nav a{text-decoration:none;color:#E3E7E2}
.nav a:hover,.nav a:focus{color:var(--accent)}
.tel{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#DCE1DC;white-space:nowrap;border-left:1px solid #59615B;padding:.25rem 0 .25rem .8rem}

/* ---- hero ----------------------------------------------------------------- */
.hero{background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(3rem,8vw,7rem);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.hero-grid > *,.chapter .wrap > *{min-width:0}
.answer-first{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--graphite);max-width:54ch;line-height:1.45}

/* SIGNATURE — the filing line. Every page opens by declaring what kind of
   record it is and when it was last checked. */
.filing-line{font-family:var(--font-mono);font-size:.71rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--graphite);margin:0 0 1.4rem;font-weight:700;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem}
.filing-line span{display:inline-flex;align-items:center;gap:.55rem}
.filing-line span + span::before{content:"";width:.42rem;height:.42rem;background:var(--ember);
  display:inline-block;transform:rotate(45deg)}
.filing-line .rec{color:var(--accent-ink);background:var(--accent);padding:.22rem .5rem;letter-spacing:.13em}

.incident-ledger{background:var(--ink);color:var(--paper);padding:1.25rem;border-top:6px solid var(--accent);font-family:var(--font-mono);box-shadow:1rem 1rem 0 #D9DDD7}
.incident-ledger .ledger-label{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:#B9C0BA;margin-bottom:1.1rem}
.ledger-row{display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;border-top:1px solid #454B47;padding:.8rem 0;margin:0;max-width:none}
.ledger-row strong{font-size:1.35rem;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.ledger-row span{font-size:.78rem;line-height:1.45;color:#E2E5E1}
.incident-ledger a{color:var(--paper)}

.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;
  font-weight:800;border:2px solid var(--accent);border-radius:0;padding:.85rem 1.2rem;cursor:pointer;font-size:.95rem}
.btn:hover,.btn:focus{background:#F3B800;border-color:#F3B800}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}

section{padding-block:clamp(2.5rem,6vw,5.5rem)}
section + section{border-top:1px solid var(--line)}
.chapter .wrap{display:grid;grid-template-columns:minmax(12rem,.42fr) minmax(0,.58fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.chapter h2{margin-top:0}
.chapter-body h3:first-child{margin-top:.15rem}
.chapter-body > :last-child{margin-bottom:0}
.chapter-dark{background:var(--soot);color:var(--paper);border-top:0}
.chapter-dark .eyebrow{color:#B9C1BA}
.chapter-dark a{color:var(--accent)}
.chapter-dark .answer-first{color:#E1E5E0}

.subject-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:3px solid var(--ink);margin-top:1.5rem}
.subject-index a{display:block;text-decoration:none;padding:1rem 2rem 1rem 0;border-bottom:1px solid var(--line);font-weight:800}
.subject-index a::after{content:" →";color:var(--ember)}
.subject-index a:hover,.subject-index a:focus{text-decoration:underline}

/* ---- the exhibit ----------------------------------------------------------
   The one photograph on this site. It is filed in the heading gutter of the
   opening chapter, ruled in amber like the incident ledger, so it reads as an
   exhibit lodged with the record rather than a decorative header image. The
   source frame is 4:5 portrait around a landscape subject; the crop pulls the
   casing and its bench up to a plate proportion and holds it off the edges.
   The PNG is the provenance master and the <img> fallback; AVIF/WebP
   derivatives in assets/images/derived/ are what a browser actually fetches. */
.exhibit-frame{display:block;margin:1.7rem 0 0}
.exhibit{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 68%;background:var(--ink);
  border-top:6px solid var(--accent)}

/* ---- SIGNATURE ELEMENT 1: the record spine --------------------------------
   Interior pages are kept as a numbered record. Each h2 is an entry, numbered
   in the ruled left gutter. Nothing decorative: the numbering is the reason the
   layout has a gutter at all. */
.ledger-body{counter-reset:rec}
.ledger-body h2{counter-increment:rec;position:relative}
.ledger-body h2::before{
  content:counter(rec,decimal-leading-zero);
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.13em;
  color:var(--ember);display:block;margin-bottom:.5rem}
@media (min-width:60rem){
  .ledger-body{padding-left:5.75rem;border-left:1px solid var(--line)}
  .ledger-body h2::before{position:absolute;left:-5.75rem;top:.62em;margin:0;width:4rem;text-align:right}
  .ledger-body > .filing-note{margin-left:-5.75rem}
}

/* ---- SIGNATURE ELEMENT 2: the Source Strip --------------------------------
   Every statistic on this site sits above an ember-ruled monospaced line naming
   the source it came from. It is the identity and the editorial rule in one: if
   a figure has no strip, the figure does not get published. */
.source-strip{font-family:var(--font-mono);font-size:.78rem;line-height:1.5;
  color:var(--graphite);background:var(--accent-soft);border-left:6px solid var(--accent);
  padding:.8rem 1rem;margin:.4rem 0 1.8rem;max-width:70ch}
.source-strip::before{content:"SOURCE";display:block;font-size:.65rem;letter-spacing:.18em;
  color:var(--ember);font-weight:700;margin-bottom:.35rem}
.source-strip em{font-style:normal}
.source-strip a{color:var(--ember);text-decoration:underline;font-weight:700}

/* data tables — mono numerals, the same ledger voice */
table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.95rem;
  background:var(--paper);border:1px solid var(--line)}
caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 0 .6rem}
th,td{padding:.55rem .7rem;border-bottom:1px solid var(--line);text-align:left}
thead th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--ground)}
td + td,th + th{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* enquiry-status notice — the site's fail-closed state, stated plainly */
.notice{font-family:var(--font-mono);font-size:.85rem;line-height:1.6;
  border:1px solid var(--ink);border-left:6px solid var(--accent);background:var(--paper);
  color:var(--ink);padding:.9rem 1rem;margin:1.4rem 0;max-width:70ch}
.chapter-dark .notice{background:var(--ink);color:#E2E5E1;border-color:#4A524C;border-left-color:var(--accent)}

/* article index — the news record list */
.record-list{border-top:3px solid var(--ink);margin-top:1.5rem}
.record-list article{border-bottom:1px solid var(--line);padding:1.4rem 0;display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);gap:.4rem 2rem;align-items:start}
.record-list .stamp{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember);font-weight:700;padding-top:.28rem}
.record-list h3{margin:0 0 .4rem;font-size:clamp(1.08rem,1.7vw,1.28rem)}
.record-list h3 a{text-decoration:none}
.record-list h3 a:hover,.record-list h3 a:focus{text-decoration:underline}
.record-list p{margin:0;color:var(--graphite);max-width:62ch}

/* legacy form styling retained — no page carries a form while enquiries are closed */
.lead{background:var(--paper);border:1px solid var(--line);border-radius:0;padding:1.4rem;max-width:34rem}
.lead label{display:block;font-weight:600;font-size:.9rem;margin:.9rem 0 .3rem}
.lead input,.lead select,.lead textarea{width:100%;padding:.65rem .7rem;border:1px solid var(--line);
  border-radius:.45rem;font:inherit;background:var(--ground)}
.lead .consent{display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem;font-size:.85rem;color:var(--graphite)}
.lead .consent input{width:auto;margin-top:.2rem}
.form-status{margin-top:.9rem;font-size:.9rem;min-height:1.2em}
.turnstile-slot{margin-top:1rem;min-height:1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---- small screens -------------------------------------------------------- */
@media (max-width:640px){
  .site-header{position:static}
  .site-header .wrap{min-height:auto;padding-block:.85rem;display:grid;grid-template-columns:1fr}
  .nav{gap:.2rem 1rem;font-size:.92rem}
  .nav a,.footer-nav a{display:inline-block;padding:.35rem 0;min-height:44px;line-height:44px}
  .btn{padding:.9rem 1.4rem;min-height:44px}
  .tel{border-left:0;border-top:1px solid #59615B;padding:.65rem 0 0;white-space:normal}
  .hero-grid,.chapter .wrap{grid-template-columns:1fr}
  .incident-ledger{box-shadow:.55rem .55rem 0 #D9DDD7}
  .subject-index{grid-template-columns:1fr}
  h1{font-size:clamp(2.3rem,10.5vw,3.3rem)}
  .cta-row{display:grid;grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .nav{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .nav a:first-child{grid-column:1 / -1}
  .eyebrow,.filing-line{overflow-wrap:anywhere}
  .record-list article{grid-template-columns:1fr;gap:.35rem}
  .record-list .stamp{padding-top:0}
}

/* ---- footer --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:#CBD3CE;margin-top:0;padding-block:2.5rem;font-size:.9rem;border-top:6px solid var(--accent)}
.site-footer a{color:#fff}
.site-footer .disclaimer{max-width:70ch;color:#A7B0AB;margin-top:1rem}
.footer-nav{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;position:fixed;background:#fff;color:#000;padding:.6rem 1rem;z-index:50;border-radius:.4rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}