/* ==========================================================================
   MetaGeo — site styles
   Vanilla CSS, no framework, no build step. Light-first with dark data panels.
   Palette from the MetaGeo logo (Adam, 21 Aug 2026).
   ========================================================================== */

:root {
  /* brand */
  --orange:      #F55F0B;
  --orange-dark: #C94806;
  --navy:        #014E76;
  --green:       #45AE81;
  --brown:       #A69277;
  --charcoal:    #333334;

  /* derived data-viz ramp, navy -> teal -> green -> orange */
  --d1: #014E76;
  --d2: #20698A;
  --d3: #2189A0;
  --d4: #45AE81;
  --d5: #F55F0B;

  /* surfaces */
  --bg:        #FFFFFF;
  --surface:   #F7F6F4;
  --surface-2: #EFEDE9;
  --line:      #E2DFDA;
  --line-soft: #EDEAE5;

  /* ink */
  --ink:       #333334;
  --ink-soft:  #5C5C60;
  --ink-mute:  #83838A;
  --on-dark:   #F4F3F1;
  --on-dark-mute: #A9AEB6;

  /* dark panels */
  --dark:    #14202E;
  --dark-2:  #1B2A3C;
  --dark-line: #2C3E54;

  --radius: 4px;
  --maxw: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Type: Inter for headings/UI, Roboto for body/print, JetBrains Mono for data.
     Every fallback is a real stack, so the page still reads if fonts are blocked. */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.35rem); }
p  { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--orange-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

img, svg { max-width: 100%; height: auto; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.lede { font-size: clamp(1.06rem, 1.9vw, 1.22rem); color: var(--ink-soft); max-width: 62ch; }
.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-dark); margin: 0 0 .9rem;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand svg, .brand img { width: 2.35rem; height: 2.35rem; flex: none; }
.brand__word {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: .045em; line-height: 1;
}
.brand__word b { font-weight: 700; color: var(--charcoal); }
.brand__word span { color: var(--orange); }
.brand__tag {
  display: block; font-family: var(--font-display);
  font-size: .53rem; font-weight: 600; letter-spacing: .2em;
  color: var(--ink-mute); margin-top: .28rem; text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.7rem); }
.nav a {
  font-size: .93rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .45rem .6rem; cursor: pointer; color: var(--ink);
}
@media (max-width: 46rem) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1rem;
  }
  /* Closed by default, driven purely off the toggle's aria state — no
     load-time JS, so the menu is never briefly open before script runs. */
  .nav { display: none; }
  .nav-toggle[aria-expanded="true"] ~ .nav { display: flex; }
  .nav a { padding-block: .7rem; border-bottom: 1px solid var(--line-soft); }
  .nav a[aria-current="page"] { border-bottom-color: var(--orange); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  padding: .68rem 1.25rem; border-radius: var(--radius);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--charcoal); color: var(--ink); }
.btn--on-dark { border-color: rgba(255,255,255,.32); color: var(--on-dark); }
.btn--on-dark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

/* ---------- hero ---------- */
.hero { background: var(--dark); color: var(--on-dark); position: relative; overflow: hidden; }
/* 60-30-10: the wash is navy/green (secondary); orange is left for CTAs only. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 30rem at 82% -10%, rgba(1,78,118,.55), transparent 62%),
    radial-gradient(40rem 26rem at 6% 110%, rgba(69,174,129,.16), transparent 64%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lede { color: var(--on-dark-mute); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- cards ---------- */
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.card h3 { margin-bottom: .35rem; }
.card p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 0; }
.card__icon { width: 2rem; height: 2rem; color: var(--orange); margin-bottom: .8rem; }

a.card { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--brown); transform: translateY(-2px); }

/* deposit cards */
.deposit-card__commodities { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.chip {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  padding: .2rem .5rem; border-radius: 2px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.chip--accent { background: rgba(245,95,11,.1); color: var(--orange-dark); border-color: rgba(245,95,11,.3); }
.deposit-card__type { font-size: .88rem; color: var(--ink-mute); margin: 0; }

/* ---------- stat strip ---------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.stat { background: var(--bg); padding: 1rem 1.1rem; }
.stat__value { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.1; color: var(--charcoal); }
.stat__value small { font-size: .55em; font-weight: 600; color: var(--ink-mute); margin-left: .15em; }
.stat__label { font-size: .78rem; color: var(--ink-mute); margin-top: .25rem; line-height: 1.35; }

/* ---------- viewer ---------- */
.viewer {
  background: var(--dark); border-radius: var(--radius);
  border: 1px solid var(--dark-line); overflow: hidden; color: var(--on-dark);
}
.viewer__canvas-wrap { position: relative; aspect-ratio: 16 / 11; }
@media (max-width: 40rem) { .viewer__canvas-wrap { aspect-ratio: 4 / 5; } }
.viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }

.viewer__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-top: 1px solid var(--dark-line); background: var(--dark-2);
}
.viewer__bar .spacer { margin-left: auto; }
.vbtn {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  padding: .38rem .7rem; border-radius: 3px; cursor: pointer;
  background: transparent; color: var(--on-dark-mute);
  border: 1px solid var(--dark-line);
}
.vbtn:hover { color: #fff; border-color: #4A627E; }
.vbtn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.viewer__hint { font-size: .74rem; color: var(--on-dark-mute); font-family: var(--font-mono); }

/* On a phone the toolbar has to fit two rows, and "scroll to zoom" is wrong
   advice for a touch screen anyway. */
@media (max-width: 34rem) {
  .viewer__bar { gap: .35rem; padding: .5rem .55rem; }
  .vbtn { font-size: .72rem; padding: .34rem .55rem; }
  .viewer__bar .spacer { display: none; }
  .viewer__legend { font-size: .64rem; padding: .35rem .45rem; }
}

.viewer__readout {
  position: absolute; left: .7rem; bottom: .7rem;
  font-family: var(--font-mono); font-size: .73rem; line-height: 1.5;
  background: rgba(10,18,28,.82); border: 1px solid var(--dark-line);
  border-radius: 3px; padding: .45rem .6rem; color: var(--on-dark);
  pointer-events: none; max-width: 60%;
}
.viewer__readout b { color: var(--orange); font-weight: 600; }
.viewer__readout[hidden] { display: none; }

.viewer__legend {
  position: absolute; right: .7rem; top: .7rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--font-mono); font-size: .7rem; color: var(--on-dark-mute);
  background: rgba(10,18,28,.72); border: 1px solid var(--dark-line);
  border-radius: 3px; padding: .45rem .55rem; pointer-events: none;
}
.viewer__legend span { display: flex; align-items: center; gap: .4rem; }
.viewer__legend i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }

.viewer__nodata {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; padding: 2rem; color: var(--on-dark-mute); font-size: .9rem;
}

/* ---------- dossier ---------- */
.dossier { border-top: 1px solid var(--line); margin: 0; }
.dossier div {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .5rem 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 34rem) { .dossier div { grid-template-columns: 1fr; gap: .1rem; } }
.dossier dt { font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--ink-mute);
              letter-spacing: .04em; text-transform: uppercase; }
.dossier dd { margin: 0; font-size: .96rem; }

/* ---------- callouts ---------- */
.note {
  border-left: 3px solid var(--brown); background: var(--surface);
  padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem; color: var(--ink-soft);
}
.note--accent { border-left-color: var(--orange); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

/* ---------- comp banner ---------- */
.comp {
  background: linear-gradient(135deg, var(--dark) 0%, #23364C 100%);
  color: var(--on-dark); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem);
}
.comp h2 { color: #fff; margin-bottom: .4rem; }
.comp p { color: var(--on-dark-mute); margin-bottom: 0; }
.comp ol { color: var(--on-dark-mute); margin: .9rem 0 0; padding-left: 1.2rem; }
.comp ol li { margin-bottom: .35rem; }
.comp ol li::marker { color: var(--orange); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--charcoal); color: var(--on-dark-mute);
  padding-block: clamp(2.5rem, 5vw, 3.5rem); margin-top: auto;
  font-size: .9rem;
}
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--orange); }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer__base {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; font-size: .82rem;
}
.site-footer__base .spacer { margin-left: auto; }

.source-note { font-size: .82rem; color: var(--ink-mute); }
.source-note a { color: inherit; }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ---------- breadcrumb ---------- */
.crumb { font-size: .85rem; color: var(--ink-mute); margin-bottom: 1rem; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--orange-dark); text-decoration: underline; }

/* ---------- deposit hero ---------- */
.dep-hero { background: var(--dark); color: var(--on-dark); }
.dep-hero .crumb { color: var(--on-dark-mute); }
.dep-hero h1 { color: #fff; margin-bottom: .35rem; }
.dep-hero__type { font-family: var(--font-mono); font-size: .92rem; color: var(--orange); margin: 0 0 1rem; }
.dep-hero__inner { padding-block: clamp(2rem, 5vw, 3.25rem); }

.prose h2 { margin-top: 2.2rem; }
.prose h2:first-child { margin-top: 0; }

/* ==========================================================================
   Downhole mineralogy strip + core trays
   Palette is the validated reference set, not the brand hues -- see corelog.js.
   ========================================================================== */
:root {
  --corelog-other: #8A8578;
  --corelog-aspectral: #E6E2D9;
  --corelog-aspectral-ink: #B4AC9C;
}
/* The site commits to a light theme, so the strip does too. Flipping only the
   log while the header and page stay light was worse than either option.
   Dark steps (#3987e5 #d95926 #199e70 on #1a1a19) are validated and recorded in
   corelog.js if the site ever gains a dark mode. */

.corelog { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (max-width: 44rem) { .corelog { grid-template-columns: 1fr; } }

.corelog__stripwrap { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; height: 30rem; }
.corelog__axis { position: relative; }
.corelog__tick {
  position: absolute; right: 0; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.corelog__tick::after {
  content: ""; position: absolute; right: -.42rem; top: 50%;
  width: .3rem; height: 1px; background: var(--line-2, #D3CEC2);
}

.corelog__strip { position: relative; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); }
.corelog__band { position: absolute; left: 0; right: 0; cursor: pointer; }
/* 2px surface gap between adjacent fills, per the mark spec */
.corelog__band + .corelog__band { box-shadow: 0 -2px 0 0 var(--surface); }
.corelog__band.is-hot { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 3; }
.corelog__band:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; z-index: 3; }

/* aspectral: hatched, deliberately not a colour -- it is an absence */
.corelog__band.is-aspectral {
  background:
    repeating-linear-gradient(45deg,
      var(--corelog-aspectral) 0 5px,
      var(--corelog-aspectral-ink) 5px 6px);
}

.corelog__banlabel {
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none; white-space: nowrap;
}

.corelog__readout {
  position: absolute; left: 3.7rem; bottom: .5rem; z-index: 5;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line-2, #D3CEC2);
  border-radius: 3px; padding: .45rem .6rem; pointer-events: none;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.3);
}
.corelog__readout[hidden] { display: none; }

.corelog__lede { font-size: .96rem; color: var(--ink-soft); }
.corelog__lede b { color: var(--ink); font-family: var(--font-display); }

.corelog__legend { display: flex; flex-wrap: wrap; gap: .4rem .95rem; margin: 1.1rem 0; }
.corelog__legrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--ink-soft); }
.corelog__legrow i { width: .78rem; height: .78rem; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,.14); }
.corelog__legrow i.is-aspectral {
  background: repeating-linear-gradient(45deg,
    var(--corelog-aspectral) 0 3px, var(--corelog-aspectral-ink) 3px 4px);
}

.corelog__table summary { cursor: pointer; font-size: .88rem; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; }
.corelog__tablewrap { overflow-x: auto; max-height: 18rem; overflow-y: auto; margin-top: .7rem; border: 1px solid var(--line); border-radius: 3px; }
.corelog__tablewrap table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.corelog__tablewrap th, .corelog__tablewrap td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line-soft); }
.corelog__tablewrap th { position: sticky; top: 0; background: var(--surface-2); font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.corelog__tablewrap td:first-child, .corelog__tablewrap td:nth-child(2) { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ---- core trays ---- */
.coretrays { margin-top: 2.5rem; }
.coretrays h3 { margin-bottom: .3rem; }
.coretrays__strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin-top: 1rem; }
.coretrays__item { margin: 0; }
.coretrays__item img { width: 100%; display: block; border-radius: 2px; border: 1px solid var(--line); background: var(--surface-2); }
.coretrays__item figcaption { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-mute); margin-top: .25rem; }

/* Not scanned is a different thing from aspectral: never measured, versus
   measured and returned nothing. Flat and pale, so it recedes behind both. */
.corelog__band.is-notlogged {
  background: var(--surface-2);
  border-bottom: 1px dashed var(--line-2, #D3CEC2);
}
.corelog__legrow i.is-notlogged {
  background: var(--surface-2);
  border: 1px dashed var(--line-2, #D3CEC2);
}

/* Legend doubles as the drill-method filter. */
.viewer__legend .vlegbtn {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.viewer__legend .vlegbtn:hover { color: #fff; }
.viewer__legend .vlegbtn.is-off { opacity: .38; text-decoration: line-through; }
.viewer__legend .vlegbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.viewer__legend { pointer-events: auto; }
.viewer__legcount {
  margin-top: .3rem; padding-top: .3rem;
  border-top: 1px solid var(--dark-line);
  font-variant-numeric: tabular-nums; opacity: .8;
}

/* ---------- idealised deposit type model ---------- */
.dmodel { background: var(--dark); border: 1px solid var(--dark-line);
          border-radius: var(--radius); overflow: hidden; color: var(--on-dark); }
.dmodel__canvas-wrap { position: relative; aspect-ratio: 16 / 10; }
@media (max-width: 40rem) { .dmodel__canvas-wrap { aspect-ratio: 4 / 3.4; } }
.dmodel canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.dmodel canvas:active { cursor: grabbing; }

.dmodel__legend {
  position: absolute; left: .7rem; top: .7rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--font-mono); font-size: .7rem; color: var(--on-dark);
  background: rgba(10,18,28,.74); border: 1px solid var(--dark-line);
  border-radius: 3px; padding: .45rem .55rem; pointer-events: none; max-width: 62%;
}
.dmodel__legend span { display: flex; align-items: center; gap: .4rem; }
.dmodel__legend i { width: .62rem; height: .62rem; border-radius: 2px; flex: none;
                    border: 1px solid rgba(255,255,255,.2); }

.dmodel__bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
               padding: .6rem .8rem; border-top: 1px solid var(--dark-line);
               background: var(--dark-2); }
.dmodel__title { font-family: var(--font-display); font-weight: 600; font-size: .88rem; }
.dmodel__hint { margin-left: auto; font-family: var(--font-mono); font-size: .74rem;
                color: var(--on-dark-mute); }
.dmodel__note { padding: 1rem 1.1rem 1.2rem; margin: 0; font-size: .93rem;
                color: var(--on-dark-mute); background: var(--dark-2);
                border-top: 1px solid var(--dark-line); max-width: none; }