/* Dr Rawand Shado — site styles.

   Lineage: the Measured Motion canvas (Measured motion mockup/Main.dc.html),
   ported 2026-08-20 and recoloured gold-and-blue the same day. Token NAMES are
   the canvas author's and their VALUES are unchanged, so --color-copper-bright
   still holds a gold, not a copper.

   2026-08-30, at Rawand's request, the page was reworked twice: first an
   evidence-first pass that stripped the ambient motion layers (intro curtain,
   nav wipe, crosshair, drifting canvas grid, parallax, scan line, ruler), then
   this one — a compact disclosure layout in an Apple-ish register. Sections are
   native <details> cards on a white surface, opening on a spring curve. The
   canvas is no longer the design source of truth; /site is.

   Additions to :root are marked 2026-08-30. They are neutral surface, radius
   and easing values — no new hue enters the palette. Single font: Archivo
   variable (width axis 62–125). */

:root{
  --color-bg:#F4F6FB;            /* cool porcelain page ground */
  --color-panel:#0A1330;         /* deep-navy bands, diagram screens, footer */
  --color-text:#0E1A33;          /* navy ink */
  --color-muted:#4A5670;         /* secondary text on porcelain */
  --color-accent:#1350A6;        /* royal blue — marks, numerals, buttons, contact band */
  --color-accent-2:#8A6A12;      /* deep gold — strand labels, years, ruler cursor */
  --color-glow:#5AA6F5;          /* luminous azure — dark surfaces + scanline only */
  --color-copper-bright:#E8BC63; /* bright gold, legible on the navy panel */
  --color-line:color-mix(in srgb,#0E1A33 15%,transparent);
  --color-divider:color-mix(in srgb,#0E1A33 36%,transparent);
  --panel-text:#E9EEF8;
  --panel-muted:#9BA9C6;
  --panel-line:color-mix(in srgb,#E9EEF8 20%,transparent);
  --panel-grid:color-mix(in srgb,#E9EEF8 8%,transparent);
  --panel-link:#8FBEF7;
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  /* 2026-08-30 — card surface, corner radii and the open/close curve */
  --color-surface:#FFFFFF;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:800;
  line-height:1.15;letter-spacing:-0.02em;margin:0;
}
img{display:block;max-width:100%}
a{color:#0F3F85;text-decoration:none}
a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb, var(--color-glow) 35%, transparent)}
[id]{scroll-margin-top:78px}

/* container shared by header, the card stack and the full-bleed bands */
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}

/* — header — */
.hdr{
  position:sticky;top:10px;z-index:60;min-height:50px;display:flex;align-items:center;
  width:min(1080px,calc(100% - clamp(16px,4vw,32px)));margin:10px auto 0;
  border-radius:var(--pill);border:1px solid var(--color-line);
  background:color-mix(in srgb,var(--color-surface) 94%,transparent);
}
.hdr .wrap{padding-inline:clamp(14px,2.2vw,20px)}
.mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-heading);font-weight:900;font-stretch:112%;font-size:13.5px;letter-spacing:.01em;color:var(--color-text)}
.mark:hover{text-decoration:none;color:var(--color-text)}
.mark svg{flex:none;display:block}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.nav a{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--color-muted);transition:color .2s}
.nav a:hover{color:var(--color-text);text-decoration:none}
/* the pill in the nav is a button first — .nav a must not win the colour */
.nav a.btn,.nav a.btn:hover{color:#fff}
/* SPEC §13 said wordmark + Contact only on a phone. Relaxed 2026-09-01:
   Research and Work are in-page anchors and still collapse, but Lectures is now
   a real page carrying three decks — the strongest content on the site — and
   hiding it left mobile visitors with no route to it at all. */
@media (max-width:619px){
  /* match BOTH forms: the profile's in-page anchors carry data-nav, while the
     standalone lecture pages link back with href="/#research". Targeting only
     the first left the hub's header uncollapsed and wrapped the wordmark. */
  .nav a[data-nav="research"],.nav a[data-nav="focus"],
  .nav a[href="/#research"],.nav a[href="/#focus"]{display:none}
  .nav a[href^="/lectures"]{font-size:12px}
  .mark{white-space:nowrap}
}
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill);
  background:var(--color-accent);color:#fff;font-family:var(--font-heading);
  font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:transform .2s var(--ease),filter .2s;
}
.btn:hover{color:#fff;text-decoration:none;filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{font-size:12.5px;padding:7px 15px}
.btn-lg{font-size:14.5px;padding:12px 22px}

/* reading progress, tied to document scroll. Browsers without scroll-driven
   animation never paint it, so there is nothing to fall back to and no JS. */
.progress{position:fixed;left:0;right:0;top:0;z-index:70;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  .progress{animation:progress linear;animation-timeline:scroll(root block)}
  @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* — hero — */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(34px,5.5vw,68px) 0 clamp(18px,2.6vw,28px)}
.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.hero h1{font-weight:900;font-stretch:122%;font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.hero h1 span{display:block;overflow:hidden}
.credentials{margin:clamp(12px,1.8vw,18px) 0 0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.credentials b{color:var(--color-text);font-weight:700}
.credentials i{font-style:normal;color:var(--color-line)}
.hero p.bio{margin:clamp(14px,2vw,20px) 0 0;font-size:15.5px;line-height:1.6;max-width:52ch;color:var(--color-muted)}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,26px)}
/* Portrait. The 2026-08-30 dissolve treatment was reverted the same day: a
   desaturated studio headshot, soft-vignetted on all four sides and floating on
   pale grey, is the exact visual grammar of an in-memoriam card. The fade suited
   Augen because that subject is lit and dissolving into light on purpose; a flat
   studio shot has no such light to dissolve into.
   Now: full colour, hard rounded edge, cropped in tight so the face carries the
   frame. Nothing soft, nothing greyed. The grade pulls saturation down slightly
   because the source file is still warm-graded for the retired ivory palette,
   and that sepia cast reads dated against the cool porcelain ground. */
.portrait{
  position:relative;width:100%;max-width:380px;margin-left:auto;aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;background:var(--color-line);
}
.portrait picture{display:block;width:100%;height:100%}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:saturate(.88) contrast(1.08) brightness(1.02);transform:scale(1.2);transform-origin:50% 20%}
@media (max-width:759px){
  .hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .portrait{max-width:230px;margin-left:0;order:-1}
}

/* — stat tiles —
   Four equal cards, so a flip actually works geometrically, and each back face
   carries a real breakdown rather than a repeat of the front. This is the one
   rotation on the page that adds information instead of hiding it.
   Touch devices have no hover to flip with, so there the back is simply printed
   under the front as one continuous card — nobody loses the content. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;perspective:1200px}
.stat{position:relative}
.stat-in{display:grid;height:100%;transform-style:preserve-3d;transition:transform .62s var(--ease)}
.stat-face{
  grid-area:1/1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,2vw,20px) clamp(12px,1.8vw,18px);
  background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--radius);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.stat-back{transform:rotateY(180deg)}
.stat-n{display:block;font-family:var(--font-heading);font-weight:900;font-stretch:115%;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;letter-spacing:-.035em;color:var(--color-accent)}
.stat-l{display:block;margin-top:7px;font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.01em;color:var(--color-muted)}
.stat-b{font-size:12px;line-height:1.45;font-weight:600;color:var(--color-text)}

@media (hover:hover) and (pointer:fine){
  .stat:hover .stat-in{transform:rotateY(180deg)}
}
/* no hover: never rotate, print both faces as one card */
@media (hover:none),(pointer:coarse){
  .stat-in{display:block;transform:none}
  .stat-face{backface-visibility:visible;border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}
  .stat-back{transform:none;border-radius:0 0 var(--radius) var(--radius);border-top:0;padding-top:0}
  .stat-b{color:var(--color-muted);font-weight:500}
}
@media (max-width:899px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:539px){ .stats{grid-template-columns:minmax(0,1fr)} }

/* — the deck —
   Compact cards on a horizontal snap track; clicking one expands it in place.
   Deliberately NOT a two-face 3D flip any more: that needed `preserve-3d` and
   `backface-visibility:hidden` on every face, which cost 22 composited layers
   and rendered both sides of all seven cards at once. One surface per card, and
   large cards became small ones, cuts the composited area by roughly four
   fifths. The scroll turn stays, minus the `scale` — scaling a layer during a
   scroll-driven animation forces it to re-rasterise every frame. */
.deck{--cardw:300px;--cardh:196px;--cardw-open:min(820px,90vw);
      position:relative;margin:clamp(14px,2.2vw,24px) 0}
.deck-track{
  display:flex;gap:14px;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:20px max(16px,calc(50% - var(--cardw)/2)) 22px;
  scrollbar-width:none;cursor:grab;
}
.deck-track::-webkit-scrollbar{display:none}
.deck-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
/* No transition on flex-basis. Animating it reflows the whole track on every
   frame — the one layout-animating property left on the page — and it looked
   broken besides: the panel content disappears instantly while the width takes
   420ms to follow, leaving a large empty card that reads as "it didn't
   collapse". The size change is now instant; the panel fades in instead, which
   is compositor-only. */
.card{
  flex:0 0 var(--cardw);position:relative;scroll-snap-align:start;
}
.card.is-open{flex-basis:var(--cardw-open)}
.card-inner{
  display:flex;flex-direction:column;min-height:var(--cardh);height:100%;overflow:hidden;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);
}
.card-front{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:15px 17px;cursor:pointer;flex:none;height:100%;
}
.card-front:hover{background:color-mix(in srgb,var(--color-accent) 4%,var(--color-surface))}
.card-num{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--color-accent);white-space:nowrap}
.card-den{color:var(--color-muted);font-weight:600}
.card-title{display:block;font-family:var(--font-heading);font-size:1.02rem;font-weight:800;font-stretch:104%;letter-spacing:-.025em;line-height:1.15;margin:1px 0}
.card-note{font-size:11.5px;font-weight:600;color:var(--color-muted)}
.card-front .spark{height:18px}
.card-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--pill);
  background:var(--color-accent);color:#fff;font-family:var(--font-heading);
  font-weight:700;font-size:11.5px;padding:6px 13px;cursor:pointer;
}
.card-more::after{content:"+"}
.card.is-open .card-more::after{content:"–"}
/* the panel is height-collapsed rather than display:none, so it stays in the
   layout tree for crawlers and find-in-page */
.card-panel{flex:0 0 0;min-height:0;height:0;overflow:hidden}
.card.is-open .card-panel{flex:0 0 auto;height:auto;overflow:visible;
  animation:panel-in .3s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card.is-open .card-front{height:auto}
/* no inner scrollbar: an opened card is as tall as its content */
.card-scroll{padding:0 18px 18px;content-visibility:auto}
.chev{flex:none;color:var(--color-muted);transition:transform .42s var(--ease)}

/* No scroll-driven turn any more. It restyled and recomposited seven layers on
   every scroll tick, and after three rounds of trimming it was the last
   continuous cost left. A snap scroller with no per-frame animation is close to
   free. The 3D is gone from the deck; the stat tiles still flip on hover. */

.deck-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.deck-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--color-line);
  background:var(--color-surface);color:var(--color-text);font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.deck-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.deck-dots{display:inline-flex;gap:6px}
.deck-dots i{width:6px;height:6px;border-radius:50%;background:var(--color-line);transition:background .25s,transform .25s var(--ease)}
.deck-dots i.on{background:var(--color-accent);transform:scale(1.35)}
.sec-lead{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--color-muted);max-width:64ch}

/* — publication ledger —
   Collapsed, a row states the paper and its live citation count. Opened, it adds
   the study type, venue, a plain-English line and, where the paper clears the top
   quartile, its same-year dentistry percentile. Click, keyboard and screen reader
   all reach the same content. */
.pub-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.pub-list>li{border-bottom:1px solid var(--color-line)}
.pub{border-radius:var(--radius-sm)}
.pub-sum{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:22px minmax(0,1fr) auto auto;gap:10px;align-items:baseline;
  padding:11px 8px;margin:0 -8px;border-radius:var(--radius-sm);transition:background .22s ease;
}
.pub-sum::-webkit-details-marker{display:none}
.pub-sum::marker{content:""}
.pub-sum:hover{background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
.pub-num{font-family:var(--font-heading);font-weight:800;font-size:12px;color:var(--color-accent)}
.pub-title{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.012em;color:var(--color-text)}
.pub-cites{font-size:11.5px;font-weight:700;letter-spacing:-.005em;color:var(--color-muted);white-space:nowrap}
.pub>.pub-sum .chev{align-self:center;transform:translateY(1px)}
.pub[open]>.pub-sum .chev{transform:translateY(1px) rotate(180deg)}
.pub-metric:empty{display:none}
.pub-body{padding:0 0 14px 32px;display:flex;flex-direction:column;gap:7px}
.pub-plain{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-muted);max-width:60ch}
.pub-meta{margin:0;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted)}
.pub-kind{color:var(--color-accent-2)}
.pub-metric{margin:0;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted)}
.pub-rank{color:var(--color-accent-2)}
.pub-foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12.5px;font-weight:600}
.method{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--color-muted);max-width:70ch}
/* thematic group headings inside the ledger */
.pub-group{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:18px 0 2px;font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-2)}
.pub-group:first-of-type{margin-top:4px}
.pub-group-n{color:var(--color-muted);font-weight:600;white-space:nowrap}

/* About */
.lead{margin:0 0 12px;font-size:clamp(1rem,1.7vw,1.16rem);line-height:1.45;font-weight:600;letter-spacing:-.02em;color:var(--color-text);max-width:46ch}
.prose{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--color-muted);max-width:66ch}
.prose:last-child{margin-bottom:0}

/* Projects */
.proj-link{margin:8px 0 0;font-size:12.5px;font-weight:600}
@media (max-width:619px){
  .pub-sum{grid-template-columns:22px minmax(0,1fr) auto;row-gap:2px}
  .pub-cites{grid-column:2}
  .pub-body{padding-left:0}
}

/* — generic content inside the cards — */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
@media (max-width:719px){ .grid3,.grid2{grid-template-columns:minmax(0,1fr)} }
.strand h3{margin:5px 0 6px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.strand p{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-muted)}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-2)}
.qual{border-top:2px solid var(--color-line);padding-top:11px}
.qual dt{margin:0 0 4px;font-family:var(--font-heading);font-weight:900;font-stretch:112%;font-size:17px;letter-spacing:-.025em}
.qual dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-muted)}
/* "In progress" — these are being read for, not held. SPEC §2.3 (credential
   precision) means they must never sit in the list looking like the others. */
.tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--pill);background:color-mix(in srgb,var(--color-accent-2) 13%,transparent);color:var(--color-accent-2);font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:11px 0;border-top:1px solid var(--color-line);font-size:14px;line-height:1.5}
.rows li:first-child{border-top:0}
.rows.split li{display:flex;justify-content:space-between;gap:18px}
.rows .year{font-family:var(--font-heading);font-weight:800;color:var(--color-accent-2);white-space:nowrap}
.note{margin:14px 0 0;font-size:14px;line-height:1.5}
/* marks a link whose destination is behind a login, so nobody clicks into a
   wall expecting to see the thing */
.gated{display:inline-block;margin-left:4px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted);border:1px solid var(--color-line);border-radius:var(--pill);padding:1px 8px;vertical-align:1px;white-space:nowrap}

/* — contact band — */
.contact{background:var(--color-accent);color:#fff}
.contact a{color:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,4vw,48px);align-items:start}
.mailto{display:inline-block;max-width:100%;font-family:var(--font-heading);font-weight:900;font-stretch:110%;font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.05;letter-spacing:-.03em;border-bottom:3px solid rgba(255,255,255,.45)}
.mailto:hover{text-decoration:none;border-bottom-color:#fff}
.links{margin:0;padding:0;list-style:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);overflow:hidden}
.links li+li{border-top:1px solid rgba(255,255,255,.3)}
.links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:-.01em;transition:background .2s}
.links a:hover{text-decoration:none;background:rgba(255,255,255,.13)}
.links span{display:flex;align-items:center;gap:11px}

.foot{background:var(--color-panel);color:var(--panel-muted)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* — the shape of the evidence, at a glance —
   A collapsed row should say something, not just sit there. The publications
   row draws one bar per paper, height proportional to its citation count; the
   others draw one pip per item, filled where the thing is held or built and
   hollow where it is still in progress. Decorative motion is what this design
   removed; this is the opposite — the animation is the data arriving. */
.spark{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.spark i{
  width:3px;height:var(--h,45%);border-radius:1.5px;
  background:var(--color-accent);opacity:.65;transform-origin:50% 100%;
}
.spark--pips{align-items:center}
.spark--pips i{
  width:7px;height:7px;border-radius:50%;background:none;
  border:1.5px solid var(--color-accent);opacity:.45;transform-origin:50% 50%;
}
.spark--pips i.on{background:var(--color-accent);opacity:1}
.spark--pips i.gold{border-color:var(--color-accent-2);background:var(--color-accent-2)}
.card-front:hover .spark i,.card.is-open .spark i{opacity:1}
.spark i{transition:opacity .3s ease}

/* The bars and pips are drawn static. They used to grow on a scroll-driven
   `view()` timeline — 31 separately animated elements, which once they moved
   inside the horizontally scrolling deck were re-evaluated on every scroll
   tick. That was the largest remaining per-frame cost on the page, larger than
   the card turn it outlived. The marks still carry the same information; they
   simply arrive already drawn. */



/* ============================================================
   Lead card + heading turn  (2026-08-30)
   The stack was seven identical rows, which read as inert no matter how much
   interaction was layered on. Publications now carries the weight of the page
   as a dark card; the other six compress into quieter rows beneath it.
   Every foreground here is a --panel-* token on --color-panel, the pairing this
   design already used when the research section was a navy band, re-measured:
   panel-text 15.71:1 · panel-muted 7.73:1 · glow 7.15:1 · copper-bright 10.28:1
   · panel-link 9.47:1. --color-accent is NOT usable on navy (2.37:1).
   ============================================================ */
.card--lead .card-inner{background:var(--color-panel);border-color:var(--color-panel)}
.card--lead .card-front:hover{background:color-mix(in srgb,var(--panel-text) 6%,transparent)}
.card--lead .card-front::before{background:var(--color-glow)}
.card--lead .card-title{color:var(--panel-text);font-size:clamp(1.25rem,2.5vw,1.72rem)}
.card--lead .card-num{color:var(--color-glow)}
.card--lead .card-den,.card--lead .card-note{color:var(--panel-muted)}
.card--lead .spark i{background:var(--color-glow);opacity:.75}
.card--lead:hover .spark i,.card--lead[open] .spark i{opacity:1}
.card--lead .sec-lead{color:var(--panel-muted)}

/* the ledger, on the dark surface */
.card--lead .pub-list{border-top-color:var(--panel-line)}
.card--lead .pub-list>li{border-bottom-color:var(--panel-line)}
.card--lead .pub-sum:hover{background:color-mix(in srgb,var(--panel-text) 7%,transparent)}
.card--lead .pub-num{color:var(--color-glow)}
.card--lead .pub-title{color:var(--panel-text)}
.card--lead .pub-cites{color:var(--panel-muted)}
.card--lead .pub-plain,.card--lead .pub-meta,.card--lead .pub-metric{color:var(--panel-muted)}
.card--lead .pub-kind,.card--lead .pub-rank{color:var(--color-copper-bright)}
.card--lead .pub-group{color:var(--color-copper-bright)}
.card--lead .pub-group-n{color:var(--panel-muted)}
.card--lead .method{color:var(--panel-muted)}
.card--lead a{color:var(--panel-link)}
.card--lead a:hover{color:#fff}
.card--lead .card-more{background:var(--color-glow);color:var(--color-panel)}