/* Metric-compatible fallbacks, measured (not guessed) against the real faces via
   canvas metrics. When fonts arrive late on a throttled connection, text set in
   these occupies the same space, so the swap moves nothing: the CLS 0.30 that
   Lighthouse saw on slow 4G was the page reflowing when Marcellus and Inter landed. */
@font-face{font-family:'Marcellus-fallback';src:local('Georgia');
  size-adjust:102.3%;ascent-override:94.9%;descent-override:27.4%;line-gap-override:0%}
@font-face{font-family:'Inter-fallback';src:local('Arial');
  size-adjust:107%;ascent-override:90.6%;descent-override:22.4%;line-gap-override:0%}
/* jew.tech — single-panel app. v5, 2026-08-14.
   Rebuilt on the Digital Twin Pro design system (dtp-shopify/_ops/DESIGN_STANDARD.md)
   so jew.tech, joshualazoff.com and digitaltwinpro.com read as one hand.

   The navigation is still the chain of transmission: a thread down the panel, each
   section a link in it. What changed is the ground. This was a dark beit-midrash by
   night with a parchment day mode; the DTP standard is ONE composed theme on a light
   ground, with dark passages used as punctuation rather than as the whole room.

   The gold/green split is inherited from the previous version and matters more now:
   --gold carries TEXT and must clear 4.5:1, --gold-bright carries rails, rings,
   borders and fills. NVIDIA green measures 2.3:1 on white, so it is never allowed to
   become text -- links are ink with a green rule beneath them. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/marcellus-400.woff2') format('woff2')}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-glow: #f7f8f5;
  --panel: #ffffff;
  --card: #ffffff;
  --card-edge: #e2e4dd;
  --fg: #000000cf;
  --muted: #5c635a;
  --dim: #5c635a;

  --gold: #000000cf;                       /* text accent: ink, never green */
  --gold-bright: #76B900;                  /* rails, rings, borders, fills */
  --gold-soft: #3c4139;
  --gold-wash: rgba(118, 185, 0, 0.10);
  --gold-line: rgba(118, 185, 0, 0.45);
  --line: #e2e4dd;
  --btn-ink: #F2F3F2;   /* light text, only ever on a DARK slab */
  --ring-idle: rgba(118, 185, 0, 0.28);
  --ring-visited: rgba(118, 185, 0, 0.45);
  --ring-glow: rgba(118, 185, 0, 0.35);
  --select-bg: rgba(118, 185, 0, 0.22);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --scrim-bg: rgba(11, 11, 12, 0.5);
  --panel-shadow: rgba(20, 25, 39, 0.10);
  --mark-opacity: 0.10;

  /* the drawn daf */
  --daf-frame: rgba(20, 25, 39, 0.20);
  --daf-strip: rgba(20, 25, 39, 0.26);
  --daf-center-fill: rgba(118, 185, 0, 0.12);
  --daf-side-fill: #ffffff;
  --daf-side-stroke: rgba(118, 185, 0, 0.50);
  --daf-tie: rgba(118, 185, 0, 0.65);

  /* DTP dark surfaces, for the passages that stay dark on purpose */
  --dark: #0B0B0C;
  --dark-2: #0f1113;
  --dark-ink: #F2F3F2;
  --dark-muted: #a8aea6;

  --serif: 'Marcellus', 'Marcellus-fallback', Georgia, serif;
  --sans: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
  --panel-w: 19rem;
  --measure: 68ch;                         /* 60-72 characters */

  /* Canonical DTP token names, aliased onto this site's own. Present by name so a
     component lifted from digitaltwinpro.com or joshualazoff.com lands unchanged. */
  --dtp-muted: #5c635a;
  --dtp-ink-soft: #3c4139;
  --dtp-border: #e2e4dd;
  --dtp-accent: #76B900;
  --dtp-radius-btn: 2px;
  --dtp-radius-card: 4px;
  --rhythm: clamp(48px, 8vw, 96px);
  --gutter: clamp(16px, 4vw, 40px);
  --display: clamp(2.25rem, 5.4vw, 3.5rem);
  --title: clamp(1.75rem, 3.6vw, 2.5rem);
  --sub: clamp(1.35rem, 2.4vw, 2rem);
}

/* fixed-dark is retained as a no-op: four pages still carry the class, and the
   standard is one theme for all of them. Removing the attribute from the markup
   without neutralising it here would leave those pages half-styled. */
.fixed-dark { color-scheme: light; }


* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  background-image: radial-gradient(1200px 700px at 78% -10%, var(--bg-glow) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
a:hover { border-bottom-color: var(--gold-bright); }
a.ring, a.door, .chain-nav a, .topbar a, .sitelist a, .panel-foot a, a:has(> .ring) { border-bottom: 0; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--select-bg); }
b, strong { color: var(--fg); }

/* ============ app frame ============ */
.app { display: grid; grid-template-columns: var(--panel-w) 1fr; min-height: 100vh; }

/* ============ the chain panel ============ */
.chainpanel {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 1.6rem 0 2rem;
  display: flex; flex-direction: column;
}
.brand {
  padding: 0 1.5rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.brand a { color: var(--fg); font-size: 1.3rem; letter-spacing: 0.02em; }
.brand a:hover { text-decoration: none; }
.brand .tld { color: var(--gold); }
.brand p {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.05em;
  color: var(--muted); margin-top: 0.35rem;
}

.chain-nav { position: relative; padding: 1.4rem 0 0.6rem; flex: 0 0 auto; }
/* the gold thread */
.chain-nav::before {
  content: ""; position: absolute; top: 1.6rem; bottom: 1rem; left: calc(1.35rem + 6.5px);
  width: 2px; background: linear-gradient(180deg, transparent, var(--gold-line) 6%, var(--gold-line) 94%, transparent);
}
.chain-nav a {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.52rem 1.2rem 0.52rem 1.35rem;
  color: var(--muted);
  font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.02em;
}
.chain-nav a:hover { color: var(--fg); text-decoration: none; }
/* each link in the chain */
.chain-nav a .ring {
  flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--ring-idle);
  background: var(--panel);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.chain-nav a.visited .ring { border-color: var(--gold-bright); background: var(--ring-visited); }
.chain-nav a[aria-current="true"] { color: var(--fg); }
.chain-nav a[aria-current="true"] .ring {
  background: var(--gold-bright); border-color: var(--gold-bright);
  box-shadow: 0 0 0 4px var(--gold-wash), 0 0 12px var(--ring-glow);
}
.chain-nav .you {
  margin-top: 0.4rem; padding: 0.5rem 1.2rem 0 1.35rem;
  display: flex; align-items: center; gap: 0.9rem;
  color: var(--dim); font-family: var(--sans); font-size: 0.78rem; font-style: italic;
}
.chain-nav .you .ring {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px dashed var(--gold-line); background: transparent; flex: 0 0 auto;
}
.panel-foot {
  margin-top: auto;
  padding: 1.1rem 1.5rem 0; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.75rem; color: var(--dim); line-height: 1.9;
}
.panel-foot a { color: var(--muted); }
.panel-foot a:hover { color: var(--gold); }

/* mobile top bar */
.topbar { display: none; }

/* ============ the stage ============ */
.stage { min-width: 0; display: flex; flex-direction: column; }
.stage:focus { outline: none; }
.panel-section.active {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: safe center;
  min-height: calc(100vh - 8rem);
}
.panel-section { display: none; padding: 3.2rem clamp(1.25rem, 5vw, 4rem) 4rem; }
.panel-section.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .panel-section.active { animation: arrive 0.45s ease both; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}
.panel-section > .inner { max-width: var(--measure); margin: 0 auto; }

/* the big Hebrew letter behind each section head */
.section-mark {
  position: relative; margin-bottom: 0.5rem; height: 0;
}
.section-mark span {
  position: absolute; top: -1.4rem; right: -0.5rem;
  font-size: 7.5rem; line-height: 1; color: var(--gold);
  opacity: var(--mark-opacity); pointer-events: none; user-select: none;
}

.eyebrow {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.panel-section h1, .panel-section h2.display {
  font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.18;
  font-weight: 700; letter-spacing: -0.01em;
  margin: 0.7rem 0 1.2rem;
}
.lede { font-size: 1.14rem; color: var(--fg); }
p { margin-bottom: 1rem; color: var(--muted); }
p.bright, .lede { color: var(--fg); }
/* Section headings must outrank body copy (1.14rem). 1.12rem left them a hair
   smaller than the paragraphs beneath, so weight alone carried the hierarchy. */
h3 { font-size: 1.45rem; line-height: 1.25; margin: 2.2rem 0 0.6rem; color: var(--fg); }

/* illuminated drop cap for section openers */
.dropcap::first-letter {
  float: left;
  font-size: 3.4em; line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--gold);
  font-weight: 700;
}

/* cards, doors, grids */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; margin: 1.8rem 0 0.6rem; }
.door {
  display: block; padding: 1.15rem 1.2rem 1.25rem;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 6px;
  border-top: 2px solid var(--gold-line);
  color: var(--fg); transition: border-color 0.15s ease, transform 0.15s ease;
}
.door:hover { text-decoration: none; border-top-color: var(--gold-bright); transform: translateY(-2px); }
@media (max-width: 700px), (min-width: 901px) and (max-width: 1080px) {
  .doors .door:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.door .k {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
.door h3 { margin: 0.35rem 0 0.3rem; font-size: 1.05rem; }
.door p { font-size: 0.88rem; margin: 0; color: var(--muted); }

.defs { margin: 1.2rem 0; display: grid; gap: 0.65rem; }
.defs > div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding: 0.65rem 0.9rem; background: var(--card);
  border: 1px solid var(--card-edge); border-left: 2px solid var(--gold-line);
  border-radius: 4px;
}
.defs dt { color: var(--fg); font-weight: 700; }
.defs dt .he { color: var(--gold); font-weight: 400; font-size: 0.95em; }
.defs dd { color: var(--muted); font-size: 0.94rem; }

.rules { list-style: none; margin: 1.2rem 0; display: grid; gap: 0.55rem; }
.rules li {
  padding: 0.7rem 1rem 0.7rem 2.4rem; position: relative;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 4px;
  color: var(--muted); font-size: 0.97rem;
}
.rules li::before {
  content: ""; position: absolute; left: 0.95rem; top: 0.85em; width: 6px; height: 6px; background: var(--gold-bright);
}
.rules li b { color: var(--fg); }

blockquote {
  margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--gold-bright);
  color: var(--fg); font-style: italic; font-size: 1.05rem;
}
blockquote .who {
  display: block; margin-top: 0.4rem;
  font-style: normal; font-family: var(--sans); font-size: 0.75rem; color: var(--muted);
}

.stat-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.5rem 0; }
.stat {
  flex: 1 1 9rem; padding: 0.9rem 1rem;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 5px;
}
.stat .n { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; color: var(--gold); display: block; }
.stat .l { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--muted); }

.note {
  margin: 1.4rem 0; padding: 0.95rem 1.15rem;
  background: var(--gold-wash); border: 1px solid var(--gold-line); border-radius: 5px;
  font-size: 0.94rem; color: var(--fg);
}
.note.quiet { background: var(--card); border-color: var(--card-edge); color: var(--muted); }

/* did-you-know cards */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; margin: 1.6rem 0; }
.fact {
  padding: 1.05rem 1.15rem; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: 6px;
  font-size: 0.93rem; color: var(--muted);
}
.fact .cat {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; display: block; margin-bottom: 0.4rem; color: var(--gold);
}
.fact b { color: var(--fg); }
.shuffle {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.05em;
  background: none; border: 1px solid var(--gold-line); color: var(--gold);
  border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer;
}
.shuffle:hover { background: var(--gold-wash); }

/* learning paths */
.paths { display: grid; gap: 1rem; margin: 1.5rem 0; }
.path-card {
  padding: 1.2rem 1.3rem; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: 6px;
}
.path-card h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.path-card p { font-size: 0.93rem; margin-bottom: 0.7rem; }
.path-card ol { margin: 0 0 0 1.2rem; color: var(--muted); font-size: 0.95rem; }
.path-card ol li { margin-bottom: 0.35rem; }

/* sites directory */
.filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0; }
.filterbar button {
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.04em;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--card-edge); border-radius: 999px;
  padding: 0.4rem 0.95rem; cursor: pointer;
}
.filterbar button[aria-pressed="true"] { color: var(--dark-ink); background: var(--dark); border-color: var(--dark); }
.sitelist { display: grid; gap: 0.5rem; margin: 0.4rem 0 1.5rem; }
.siterow {
  display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.6rem 0.9rem; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: 4px;
}
.siterow a { font-family: var(--mono); font-size: 0.82rem; }
.siterow span { color: var(--muted); font-size: 0.9rem; }
.group-head {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold); margin: 1.6rem 0 0.6rem;
}

/* continue + pager */
.continue { margin-top: 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.continue .pos { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--dim); }
.continue a {
  display: inline-block; padding: 0.7rem 1.3rem;
  background: var(--dark); color: var(--dark-ink); border-radius: var(--dtp-radius-btn);
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.03em; font-weight: 600;
}
.continue a:hover { text-decoration: none; filter: brightness(1.08); }
.continue a.back { background: none; color: var(--muted); border: 1px solid var(--card-edge); font-weight: 400; }
.continue a.back:hover { color: var(--fg); }

/* email button */
.email-btn {
  display: inline-block; margin: 1rem 0;
  font-family: var(--mono); font-size: 1rem;
  padding: 0.8rem 1.4rem; background: var(--gold-bright); color: var(--btn-ink); border-radius: 4px;
}
.email-btn:hover { text-decoration: none; filter: brightness(1.08); }

/* footer inside stage */
.stage-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 1.6rem clamp(1.25rem, 5vw, 4rem) 2.4rem;
  font-family: var(--sans); font-size: 0.75rem; color: var(--dim); line-height: 2;
}
.stage-foot a { color: var(--muted); }
.stage-foot a:hover { color: var(--gold); }

.mini-ring {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px dashed var(--gold-line); vertical-align: -2px; margin: 0 2px;
}
#sec-begin .section-mark span { opacity: 0.09; top: -0.6rem; }
body:has(.chainpanel.open) { overflow: hidden; }

/* ============ responsive ============ */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .chainpanel {
    position: fixed; inset: 0; z-index: 40; height: 100dvh; width: min(20rem, 85vw);
    transform: translateX(-102%);
    transition: transform 0.28s ease;
    box-shadow: 0 0 40px var(--panel-shadow);
  }
  @media (prefers-reduced-motion: reduce) { .chainpanel { transition: none; } }
  .chainpanel.open { transform: none; }
  .topbar {
    display: flex; position: sticky; top: 0; z-index: 30;
    align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--topbar-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1.1rem;
  }
  .topbar .t-brand { color: var(--fg); font-size: 1.05rem; }
  .topbar .t-here {
    flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted);
  }
  .topbar .t-brand:hover { text-decoration: none; }
  .topbar .t-brand .tld { color: var(--gold); }
  .menu-btn {
    font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em;
    background: none; border: 1px solid var(--gold-line); color: var(--gold);
    border-radius: 4px; padding: 0.45rem 0.9rem; cursor: pointer;
  }
  .scrim {
    position: fixed; inset: 0; z-index: 35; background: var(--scrim-bg);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .panel-section { padding: 2.2rem 1.25rem 3rem; }
  .section-mark span { font-size: 5rem; right: 0; }
  .defs > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .siterow { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (min-width: 901px) {
  .scrim { display: none; }
}

/* the Talmud page, drawn */
/* The labels are sized in viewBox units, so shrinking the drawing below 34rem
   shrinks them with it. Hold the drawing at its drawn size and let a narrow
   screen scroll the figure instead — the smallest label then stays above 12px. */
.daf-fig { margin: 1.8rem 0 0.6rem; overflow-x: auto; }
.daf-fig svg { display: block; width: 34rem; height: auto; margin: 0 auto; }
.daf-fig figcaption {
  text-align: center; font-family: var(--sans); font-size: 0.78rem;
  color: var(--muted); margin-top: 0.7rem;
}
/* the daf is drawn in tokens so it turns over with the ground */
.daf-frame  { stroke: var(--daf-frame); }
.daf-strip  { stroke: var(--daf-strip); }
.daf-center { fill: var(--daf-center-fill); stroke: var(--gold-bright); }
.daf-side   { fill: var(--daf-side-fill); stroke: var(--daf-side-stroke); }
.daf-lead   { stroke: var(--gold-bright); }
.daf-tie    { stroke: var(--daf-tie); }
.daf-t      { fill: var(--fg); }
.daf-s      { fill: var(--muted); }
.daf-cap    { fill: var(--dim); }


/* ============ Digital Twin Pro type system ============
   Two families only. Fluid sizes so nothing overflows a 390px screen, balanced
   headings, and a measure that holds at 60-72 characters. */
body { font-family: var(--sans); text-wrap: pretty; }
h1, h2, h3, h4, .display { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1, .display { font-size: var(--display); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--title); line-height: 1.1; }
h3 { font-size: var(--sub); line-height: 1.2; }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.25; }
p, li { max-width: var(--measure); }
.lede { font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem); }

.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 0.875rem; line-height: 1.6;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
  display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--gold-bright); flex: none;
}

.panel-section { padding-block: var(--rhythm); }
:where(button, .btn, .shuffle) { border-radius: var(--dtp-radius-btn); }
:where(.card, .path-card, .fact, .stat, .siterow) { border-radius: var(--dtp-radius-card); }

/* The sticky topbar covers an anchored heading on arrival. Every nav item on a
   one-page site is an anchor, so without this each click hides its own target. */
[id] { scroll-margin-top: 88px; }

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

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


/* Tap targets. WCAG 2.2 asks for 24px minimum on anything you touch; the chain
   links and the topbar sat at 17-18px on a phone. */
.chain-nav a, .topbar a, .panel-foot a, .sitelist a, .connect-links a,
.stage-foot a, .siterow a, li > a:only-child, dd > a:only-child {
  min-height: 24px;
}
.chain-nav a, .topbar a, .panel-foot a, .sitelist a, .connect-links a,
.stage-foot a, li > a:only-child, dd > a:only-child {
  display: inline-flex; align-items: center;
}
/* .door and .siterow wrap block content -- height only, never display. */
.door, .siterow a { min-height: 24px; }
.chain-nav a { padding-block: 0.3rem; }

/* Every link inside a <nav> is a control, so all of them get the 24px target.
   Targeting classes missed two cases: the breadcrumb is .crumbs (not .breadcrumb),
   and the chain items are not :only-child because each carries a number span.

   BUT display must not be forced on a link that wraps block content. Some of these
   cards are anchors containing an eyebrow, a heading and a paragraph; making them
   inline-flex laid those three out as three cramped columns on a phone. Height is
   safe for every link, the display switch only for single-line ones. */
nav a { min-height: 24px; }
nav a:not(:has(p, h1, h2, h3, h4, ul, ol, div)) {
  display: inline-flex; align-items: center;
}

/* Touch comfort: 24px is the WCAG minimum, 44px is what a thumb wants. Touch
   widths only, so the desktop chain stays dense. */
@media (max-width: 1024px) {
  nav a:not(:has(p, h1, h2, h3, h4, ul, ol, div)),
  .chain-nav a, .topbar a, .panel-foot a, .sitelist a, .connect-links a,
  .stage-foot a, li > a:only-child, dd > a:only-child, td > a:only-child,
  .continue a, .email-btn, .shuffle { min-height: 44px; }
  .chain-nav a { padding-block: 0.55rem; }
  .menu-btn { min-height: 44px; }
}