/* Omica pathology wireframes — production tokens, new pages.
   Tissue plates are drawn by live.js from real sections. */

.site {
  background: var(--paper);
  color: var(--dark);
  --fs-title: clamp(28px, 3.2vw, 48px);
  --measure: 40rem;
}

/* Floats over the hero, same inset as the live .navbar pill. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: var(--nav-gap) var(--nav-side) 0;
  background: transparent;
  pointer-events: none;
}

.site-header .navbar-inner,
.site-header a,
.site-header button {
  pointer-events: auto;
}

/* The nav rides below the announcement bar while it shows */
.site-header { transition: transform 0.6s var(--ease-out); }

.site:has(.announcement-bar:not(.announcement-bar--hidden)) .site-header {
  transform: translateY(var(--banner-h));
}

.site .announcement-bar .u {
  color: inherit;
  text-decoration: none;
}

.site .announcement-bar .u:hover { text-decoration: underline; text-underline-offset: 3px; }
.site .announcement-bar .u:focus-visible,
.site .announcement-close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

.announcement-meta { opacity: 0.7; }

@media (max-width: 600px) {
  .announcement-meta { display: none; }
}

/* Navbar actions container & minimal login link */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  margin-left: auto;
}

.navbar-login {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track-label, 0.04em);
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--duration-micro) var(--ease-out);
}

.navbar-login:hover {
  opacity: 1;
}

/* Footer language switcher */
.footer-lang {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.8vw, 13px);
  letter-spacing: var(--track-label, 0.04em);
  color: var(--black);
}

.footer-lang-sep {
  opacity: 0.35;
  user-select: none;
}

.footer-lang-link {
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--black);
  text-decoration: none;
  opacity: 0.45;
  transition: opacity var(--duration-micro) var(--ease-out);
}

.footer-lang-link:hover {
  opacity: 1;
}

.footer-lang-link.is-active {
  opacity: 1;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Same content column as .hm-wrap / .bb-wrap / .dx-wrap / .px-wrap */
.wrap {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* The homepage hero copy keeps its original inset over the tide */
.hero--print .wrap.hero-copy {
  padding-inline: clamp(20px, 4vw, 48px);
}

.section {
  padding-block: clamp(80px, 9vw, 128px) clamp(72px, 8vw, 128px);
}

.section + .section {
  padding-top: 0;
}

/* A paper hero already ends in its own bottom padding */
.hero:not(.hero--dark):not(.hero--void) + .section {
  padding-top: 0;
}

.section > .wrap.stack { gap: 16px; }
.section > .wrap:not(.legal-body) > h2 { max-width: 24ch; }

/* Dark sections always get their own vertical padding */
.section--void {
  padding-block: clamp(96px, 12vw, 180px);
  margin-top: clamp(96px, 12vw, 180px);
}

/* Section after a dark section gets its top padding back */
.section--void + .section {
  padding-top: clamp(96px, 12vw, 180px);
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

h1, .title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--dark);
}

h1 {
  font-size: var(--fs-display);
  max-width: 16ch;
}

body[data-page="about"] .hero h1 {
  font-size: clamp(32px, 3.6vw, 50px);
  max-width: 24ch;
  line-height: 1.12;
}

h2, .title {
  font-size: var(--fs-title);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  max-width: 18ch;
}

.lede,
.prose {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--weight-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.prose { font-size: var(--fs-body); }

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
}

/* Wider gap between major sub-blocks inside a combined section */
.stack--section {
  gap: clamp(24px, 2.4vw, 36px);
}

.stack--section .doors {
  margin-top: clamp(32px, 4vw, 56px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  color: var(--dark);
  transition: color var(--duration-micro) var(--ease-out);
}

.link:hover { color: var(--blue); }

.link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Image slots ── */
.frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Slots are defined below with wireframe grid pattern */

/* Prints. Paper stays paper. The bitmap is the picture. */
.live {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(10, 8, 24, 0.84) 0%,
      rgba(10, 8, 24, 0.58) 20%,
      rgba(10, 8, 24, 0.16) 46%,
      rgba(10, 8, 24, 0.0) 68%
    ),
    linear-gradient(
      to bottom,
      rgba(10, 8, 24, 0.42) 0%,
      rgba(10, 8, 24, 0.0) 22%
    );
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.door .live,
.flow .live,
.instrument .live,
.ops .live {
  margin-bottom: 4px;
}

.flow .live,
.instrument .live {
  margin-bottom: 16px;
}

.ops .live { margin-bottom: 16px; }

.folio { margin-top: clamp(36px, 5vw, 64px); }

.caption,
.note {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-width: 52ch;
}

.fig {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ── Hero ── */
.hero {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(28px, 4vw, 64px));
  padding-bottom: clamp(64px, 8vw, 112px);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ── Void hero — fills viewport, content at bottom ── */
.hero--void {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--void-media);
  color: var(--paper);
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: clamp(56px, 8vw, 108px);
}

.hero--void h1 {
  color: var(--paper);
  font-size: clamp(44px, 5.8vw, 92px);
}

.hero--void .lede {
  color: var(--fog);
  max-width: 36ch;
}

.hero--void .link {
  color: var(--paper);
  opacity: 0.85;
}

.hero--void .link:hover {
  color: var(--paper);
  opacity: 1;
}

/* ── Print hero — the tissue as a black-on-white print, a reading in the tide ── */
.hero--print {
  background: var(--paper);
  color: var(--ink);
}

.hero--print .hero-canvas {
  object-fit: cover;
  image-rendering: auto;
  background: var(--paper);
}

.hero--print .hero-copy { pointer-events: none; }

.hero--print .strip {
  background: var(--paper);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  pointer-events: auto;
}

.hero--print h1 {
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.hero--print h1 .strip { padding: 0 0.12em 0.02em; }

.hero-pick {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 3;
  display: flex;
  gap: 14px;
  padding: 7px 10px;
  line-height: 1;
  background: var(--paper);
}

.hero-pick button {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-muted);
  opacity: 0.7;
  cursor: pointer;
}

.hero-pick button:hover,
.hero-pick button[aria-pressed="true"] { color: var(--ink); opacity: 1; }

.hero-pick button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── Dark hero — interiors, normal height ── */
.hero--dark {
  background: var(--void-media);
  color: var(--paper);
  padding-bottom: 0;
}

.hero--dark h1 { color: var(--paper); }
.hero--dark .lede { color: var(--fog); }

/* ── Dark section ── */
.section--void {
  background: var(--void-media);
  color: var(--paper);
  padding-block: clamp(48px, 6vw, 96px) clamp(96px, 12vw, 180px);
}

.section--void .index { color: var(--fog); }
.section--void h2 { color: var(--paper); }
.section--void h3 { color: var(--paper); }
.section--void p { color: var(--fog); }
.section--void .prose { color: var(--fog); }
.section--void .kicker-link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-micro) var(--ease-out);
}
.section--void .kicker-link { opacity: 0.75; }
.section--void .kicker-link:hover { opacity: 1; }

.section--void .flow-label {
  color: var(--fog);
  border-bottom-color: rgba(255, 253, 249, 0.2);
}
.section--void .flow li {
  color: var(--paper);
  border-bottom-color: rgba(255, 253, 249, 0.1);
}

/* ── Mechanism split (text + image, two-column) ── */
.split--mechanism {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split--mechanism .slot {
  aspect-ratio: 850 / 592;
  min-height: 0;
}

.split--mechanism .nucleo {
  width: 100%;
  height: auto;
  background: var(--paper);
  image-rendering: auto;
}

.section--void .split--mechanism .link { color: var(--paper); opacity: 0.85; }
.section--void .split--mechanism .link:hover { opacity: 1; }

@media (max-width: 768px) {
  .split--mechanism { grid-template-columns: 1fr; }
}
.section--void .instrument {
  border-top-color: rgba(255, 253, 249, 0.12);
}

.field[hidden] { display: none; }

/* ── Specimen line ── */
.specimen-line {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--ink-muted);
  max-width: 48ch;
}

.lede--intro {
  color: var(--ink);
  max-width: 44ch;
  margin-bottom: clamp(32px, 4vw, 64px);
}

/* ── Insight (bold standalone statement) ── */
.insight {
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.25;
  max-width: 22ch;
  color: var(--dark);
}

.insight-turn {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--weight-body);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 32ch;
  margin-top: clamp(8px, 1vw, 12px);
}

.insight-turn + .frame {
  width: 100%;
  margin-top: clamp(16px, 2vw, 32px);
}

.insight + .frame {
  width: 100%;
  margin-top: clamp(16px, 2vw, 32px);
}
.insight + .frame .slot {
  aspect-ratio: 880 / 300;
  min-height: 0;
}

/* ── Proof section ── */
.proof-header h2 {
  max-width: 20ch;
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--dark);
}

.proof-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proof-stat .proof-icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: 8px;
  object-fit: cover;
  image-rendering: auto;
  background: var(--stone);
}

.proof-number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--dark);
}

.proof-label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink-muted);
  max-width: 20ch;
}

.stat {
  max-width: none;
}

.stat ~ .frame {
  width: 100%;
  margin-top: clamp(16px, 2vw, 32px);
}

/* ── Preprints ── */
.preprints {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  width: 100%;
}

.preprint-list {
  list-style: none;
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.preprint-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-bottom: 1px solid var(--line);
}

.preprint-link {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--dark);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-out);
}

.preprint-link:hover { color: var(--blue); }

.preprint-venue {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Doors (pillar cards) ── */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

.door {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--dark);
  padding-top: clamp(24px, 3vw, 40px);
}

.door .slot {
  aspect-ratio: 5 / 4;
  min-height: 0;
  margin-bottom: 4px;
}

.door h2 {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  max-width: 28ch;
  transition: color var(--duration-move) var(--ease-out);
  flex: 1;
}

.door .door-arrow {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-muted);
  transition: color var(--duration-micro) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.door:hover h2 { color: var(--blue); }
.door:hover .door-arrow { color: var(--dark); }
.door:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; border-radius: 4px; }

/* ── Four objects ── */
.objects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(36px, 4vw, 56px);
}

.objects.objects--3 { grid-template-columns: repeat(3, 1fr); }

.object .slot { min-height: clamp(180px, 18vw, 260px); }

.object figcaption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.object strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: var(--track-section);
  color: var(--dark);
}

/* ── Two panels ── */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}

.panel {
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  min-height: clamp(420px, 36vw, 560px);
  background: var(--paper-card);
}

.panel--void {
  background: var(--void);
  color: var(--paper);
}

.panel--void .kicker { color: var(--paper); opacity: 0.7; }
.panel--void h2,
.panel--void .prose,
.panel--void .link { color: var(--paper); }
.panel--void .link { opacity: 0.75; }
.panel--void .link:hover { color: var(--paper); opacity: 1; }
.panel--void .slot { background: var(--void-media); }

.panel h2 { max-width: 14ch; }
.panel .slot { flex: 1; min-height: 180px; }

/* ── Product stage ── */
.callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(20px, 2vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.callouts--4 { grid-template-columns: repeat(4, 1fr); }

.callout-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: var(--track-section);
  color: var(--dark);
}

.callout p {
  margin-top: 6px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 32ch;
}

/* ── Schematic ── */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(36px, 4vw, 56px);
}

.flow-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dark);
}

.flow li {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-section);
  line-height: 1.25;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.gates {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: clamp(28px, 3vw, 40px);
}

.gate {
  background: var(--paper-card);
  border-radius: var(--radius-sm);
  padding: 16px 14px 18px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.gate span {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}

.gate strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: var(--track-section);
  line-height: 1.2;
}

/* ── Fields ── */
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 64px);
  margin-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--dark);
}

.fields div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.fields dt {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--dark);
}

.fields dd {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Evidence / stages / rows ── */
.modules,
.stages {
  display: flex;
  flex-direction: column;
  margin-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--dark);
}

.module,
.stage,
.row-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}

.module h3,
.stage h3,
.row-item h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: var(--track-section);
  line-height: 1.15;
}

.index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
  padding-top: 6px;
}

.stage p,
.module p,
.row-item p,
.plain-list li {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ── Stages 2×2 grid variant ── */
.stages--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
}
.stages--grid .stage {
  border-bottom: 1px solid var(--line);
}
.stages--grid .stage:nth-child(-n+2) {
  border-top: 1px solid var(--dark);
}

.plain-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plain-list li {
  padding-left: 14px;
  position: relative;
}

.plain-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  position: absolute;
  left: 0;
  top: 0.65em;
}

.schema {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}

.schema article {
  background: var(--paper-card);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2vw, 28px);
  min-height: 220px;
}

.schema h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 16px;
}

.schema li {
  font-size: var(--fs-body);
  line-height: 1.4;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

/* ── Split ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}

.split article {
  background: transparent;
}

.split .slot { min-height: 200px; }
.split div { padding: 12px 0 0; }

.split h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: var(--track-section);
}

/* ── Instrument ── */
.instrument,
.asks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.instrument {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 20px;
  border-top: 1px solid var(--dark);
}

.instrument h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: var(--track-section);
  line-height: 1.15;
  margin: 10px 0 8px;
}

.instrument p,
.asks p {
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ── Three questions ── */
.asks {
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--dark);
  max-width: 46rem;
}

.asks li {
  padding: clamp(24px, 2.4vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}

.asks h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: var(--track-section);
  margin-bottom: 8px;
}

/* ── Biobank folio ── */
.folio {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 88px);
}

.folio .fields {
  margin-top: 0;
  grid-template-columns: 1fr;
}

.margin-note .prose { font-size: 15px; }

.limits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.limits strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 16px;
  letter-spacing: var(--track-section);
  color: var(--dark);
  margin-bottom: 4px;
}

.limits p {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* ── About operations ── */
.ops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--dark);
}

.ops .slot {
  aspect-ratio: 9 / 7;
  min-height: 0;
  margin-bottom: 16px;
}

.ops h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: var(--track-section);
  margin-bottom: 8px;
}

/* ── Principles ── */
.principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 28px) clamp(32px, 4vw, 64px);
  margin-top: clamp(28px, 3vw, 40px);
}

.principles article {
  padding-top: 16px;
  border-top: 1px solid var(--dark);
}

.principles h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: var(--track-section);
  margin-bottom: 8px;
}

/* ── Contact ── */
.routes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.route {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 16px 20px;
  cursor: pointer;
  color: var(--dark);
  transition: border-color var(--duration-micro) var(--ease-out), background var(--duration-micro) var(--ease-out);
}

.route:hover { border-color: var(--ink-muted); }

.route[aria-checked="true"] {
  background: var(--void);
  border-color: var(--void);
  color: var(--paper);
}

.route[aria-checked="true"] p { color: rgba(255, 253, 249, 0.72); }

.route strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: var(--track-section);
  margin-bottom: 8px;
}

.route p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  margin-top: clamp(28px, 3vw, 40px);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field[hidden] { display: none; }

.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field input,
.field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}

.form-note {
  grid-column: 1 / -1;
}

.confirm {
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--dark);
  max-width: var(--measure);
}

.confirm h2 { margin-bottom: 12px; }

.site .footer-copy {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--black);
  max-width: 36ch;
}

/* Footer edges match the nav pill's logo and button edges */
.site .footer-inner {
  max-width: none;
  margin: 0;
  padding-left: calc(var(--nav-side) + 20px);
  padding-right: calc(var(--nav-side) + 16px);
}

.site .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(12px, 1.8vw, 24px);
  margin-left: auto;
}

.footer-copy-text {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 400;
  letter-spacing: var(--track-label, 0.04em);
  color: var(--black);
  opacity: 0.6;
}

/* Nav collapses to a hamburger here; the footer follows the content column */
@media (max-width: 768px) {
  .site .footer-inner { padding-inline: clamp(20px, 4vw, 48px); }
  .site .footer-legal { margin-left: 0; }
  .navbar-inner > .navbar-actions {
    display: none;
    width: 100%;
    order: 11;
    margin-left: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .navbar-inner.navbar--open > .navbar-actions {
    display: flex;
  }
  .navbar-inner.navbar--open .navbar-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .navbar-inner.navbar--open .navbar-actions .navbar-login {
    text-align: center;
    padding: 6px 0;
  }
}

@media (max-width: 480px) {
  .site .footer-copy-text { flex-basis: 100%; }
}

/* Legal pages layout */
/* Left edge stays on the site column; only the reading measure is capped */
.legal-body > * {
  max-width: 42rem;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.25;
  margin-top: clamp(36px, 3.5vw, 56px);
  margin-bottom: clamp(12px, 1vw, 18px);
  letter-spacing: -0.01em;
  max-width: 42rem;
}

.legal-body h3 {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.3;
  margin-top: clamp(24px, 2vw, 36px);
  margin-bottom: clamp(8px, 0.8vw, 12px);
  max-width: 42rem;
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-muted);
  margin-bottom: 1.2em;
}

.legal-body strong {
  color: var(--dark);
  font-weight: 500;
}

.legal-body ul,
.legal-body ol {
  padding-left: 1.5em;
}

.legal-body ul {
  list-style: disc;
}

.legal-body ol {
  list-style: decimal;
}

.legal-body li {
  margin-bottom: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-muted);
}

.legal-body a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-body a:hover {
  opacity: 0.75;
}

.legal-contact-card {
  margin-top: 24px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.legal-contact-card p {
  margin-bottom: 0.5em;
}

.legal-contact-card p:last-child {
  margin-bottom: 0;
}

/* ── Responsive: tablet (768px — aligns with navbar hamburger) ── */
@media (max-width: 768px) {
  .hero--void h1 { font-size: clamp(32px, 8vw, 52px); }
  h1 { max-width: 16ch; }
  h2 { max-width: none; }

  .hero--void { padding-top: 0; padding-bottom: clamp(48px, 10vw, 96px); }
  .hero--print { padding-bottom: 84px; }
  .hero-pick { bottom: 20px; right: auto; left: clamp(11px, 5vw - 9px, 37px); }
  .hero:not(.hero--void) {
    padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(20px, 4vw, 36px));
    padding-bottom: clamp(48px, 8vw, 80px);
  }

  .hero-split,
  .panels,
  .pair,
  .doors,
  .split,
  .schema,
  .principles,
  .folio,
  .ops,
  .form,
  .routes { grid-template-columns: 1fr; }

  .instrument { grid-template-columns: 1fr 1fr; }
  .proof-stats { grid-template-columns: 1fr 1fr; }

  .objects,
  .objects.objects--3,
  .callouts,
  .callouts--4,
  .flow,
  .gates { grid-template-columns: 1fr 1fr; }

  .module,
  .stage,
  .row-item { grid-template-columns: 72px 1fr; }

  .fields { grid-template-columns: 1fr; }

  .door h2 { font-size: clamp(20px, 4vw, 28px); max-width: none; }
}

/* ── Responsive: mobile (480px) ── */
@media (max-width: 480px) {
  .hero--void h1 { font-size: clamp(28px, 9vw, 40px); }
  h1 { font-size: clamp(28px, 7vw, 40px); }

  .section--void { margin-top: clamp(56px, 10vw, 96px); }

  .objects,
  .objects.objects--3,
  .callouts,
  .callouts--4,
  .flow,
  .gates,
  .instrument,
  .ops { grid-template-columns: 1fr; }

  .module,
  .stage,
  .row-item { grid-template-columns: 1fr; gap: 8px; }

  .door h2 { font-size: clamp(20px, 5vw, 26px); }
  .lede { font-size: clamp(16px, 4vw, 19px); }

  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature-visual { order: -1; }
  .ribbon-inner { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ── Subpage: full-bleed scene ── */
.scene {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
}

.scene--half { min-height: 50vh; }
.scene--auto { min-height: 0; }

.scene--void {
  background: var(--void-media);
  color: var(--paper);
}

.scene--void h2 { color: var(--paper); }
.scene--void p,
.scene--void .prose { color: var(--fog); }
.scene--void .kicker { color: var(--fog); opacity: 0.7; }

.scene__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scene__visual .slot {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.scene__copy {
  position: relative;
  z-index: 1;
}

/* ── Subpage: visual showcase (full-width visual above text) ── */
.showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

.showcase .slot {
  min-height: clamp(360px, 45vw, 600px);
}

.showcase-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: flex-start;
  max-width: 38rem;
}

/* ── Subpage: alternating feature sections ── */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.feature--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feature--flip .feature-copy { order: 2; }
.feature--flip .feature-visual { order: 1; }

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: flex-start;
}

.feature-copy h2 {
  max-width: 14ch;
}

.feature-visual .slot {
  min-height: clamp(280px, 32vw, 480px);
}

/* ── Slots: intentional wireframe aesthetic ── */
.slot {
  position: relative;
  background: var(--stone);
  border-radius: var(--radius-md);
  min-height: clamp(220px, 28vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 24px);
  color: var(--ink);
  overflow: hidden;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.45;
  pointer-events: none;
}

.slot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
}

.slot--void {
  background: var(--void);
  color: var(--paper);
}

.slot--void::before {
  background:
    linear-gradient(rgba(255,253,249,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,253,249,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
}

.slot--void::after {
  border-color: rgba(255,253,249,0.15);
}

.slot--screen {
  min-height: clamp(320px, 42vw, 560px);
  background: var(--void-media);
  color: var(--paper);
}

.slot--screen::before {
  background:
    linear-gradient(rgba(255,253,249,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,253,249,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
}

.slot--screen::after {
  border-color: rgba(255,253,249,0.1);
}

.slot--short {
  min-height: clamp(140px, 16vw, 200px);
}

.slot-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  opacity: 0.55;
  position: relative;
  z-index: 1;
}

.slot-subject {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  max-width: 36ch;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

/* ── Subpage: big number + prose pair ── */
.datum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.datum:first-child {
  border-top: 1px solid var(--dark);
}

.datum-number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--dark);
  white-space: nowrap;
}

.datum-body h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: var(--track-section);
  line-height: 1.2;
  margin-bottom: 8px;
}

.datum-body p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 48ch;
}

/* ── Subpage: datum 2×2 grid ── */
.datum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
}
.datum-grid .datum {
  border-bottom: 1px solid var(--line);
}
.datum-grid .datum:nth-child(-n+2) {
  border-top: 1px solid var(--dark);
}
.datum-grid .datum:first-child {
  border-top: 1px solid var(--dark);
}
.datum-grid .datum-number {
  font-size: clamp(32px, 4vw, 52px);
}

/* ── Subpage: statement (big typographic moment) ── */
.statement {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: var(--track-display);
  line-height: 1.15;
  max-width: 18ch;
  color: var(--dark);
}

.scene--void .statement { color: var(--paper); }

/* ── Subpage: detail grid (2-col prose, no bullets) ── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
}

.detail-grid article {
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--dark);
}

.detail-grid h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: var(--track-section);
  line-height: 1.2;
  margin-bottom: 10px;
  max-width: 16ch;
}

.detail-grid p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 36ch;
}

@media (max-width: 768px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature-visual { order: -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .datum { grid-template-columns: 1fr; gap: 8px; }
  .datum-grid { grid-template-columns: 1fr; }
  .stages--grid { grid-template-columns: 1fr; }
  .scene { min-height: 60vh; }
  .scene--half { min-height: 40vh; }
}

/* ── Small screens and touch ──
   The label tokens scale with vw, so on phones they bottom out at 10-11px.
   PRISMA's own content is locked; its nav and footer still follow the shared chrome. */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
  .site:not([data-page="prisma"]),
  .site .site-header,
  .site #site-footer {
    --fs-label: 13px;
    --fs-label-sm: 12px;
  }

  .site:not([data-page="prisma"]) .btn,
  .site .site-header .btn,
  .site #site-footer .btn { font-size: 13px; }

  .site .footer-legal-link,
  .site .footer-copy-text { font-size: 13px; }

  .site .hm-fig, .site .hm-badge, .site .bb-fig, .site .dx-fig, .site .dx-spec-axis { font-size: 12px; }

  /* The homepage hero keeps its picker exactly as designed */
  .hero--print .hero-pick button { font-size: 10px; }
}

@media (max-width: 768px) {
  .navbar-inner .navbar-links .navbar-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  .navbar-inner .navbar-links .navbar-link.is-active::after {
    bottom: 10px;
    left: 4px;
    right: 4px;
  }
}

@media (max-width: 480px) {
  .preprint-list li { flex-wrap: wrap; gap: 6px 24px; }
}

/* Touch: every control gets a 44px target. Hit areas grow invisibly where a
   bigger box would change the design; lists that stack get real row height. */
@media (pointer: coarse) {
  .site .btn,
  .navbar-logo,
  .navbar-toggle,
  .navbar-link,
  .bb-link-quiet, .dx-link-quiet,
  .bb-card-link, .dx-card-link,
  .hm-prisma-copy > .hm-card-link,
  .preprint-link,
  .legal-contact-card a,
  .hero--print .hero-pick button { position: relative; }

  .site .btn::before,
  .navbar-logo::before,
  .navbar-toggle::before,
  .navbar-link::before,
  .bb-link-quiet::before, .dx-link-quiet::before,
  .bb-card-link::before, .dx-card-link::before,
  .hm-prisma-copy > .hm-card-link::before,
  .preprint-link::before,
  .legal-contact-card a::before,
  .hero--print .hero-pick button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .site .footer-col-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .site .footer-legal { row-gap: 0; }

  .site .footer-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .field input { min-height: 44px; }
}

/* ── Motion — one hover vocabulary for the whole site ──
   Links rest muted and come up to full ink; arrows travel 3px; buttons change
   colour and press, nothing lifts or glows. Overrides the shared styles.css. */
.site .navbar-link,
.site .navbar-login,
.site .footer-col-link,
.site .footer-legal-link {
  opacity: 0.7;
  transition: opacity var(--duration-micro) var(--ease-out);
}

.site .navbar-link:hover,
.site .navbar-link.is-active,
.site .navbar-login:hover,
.site a.footer-col-link:hover,
.site .footer-legal-link:hover { opacity: 1; }

.site .btn {
  transition: background var(--duration-micro) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}

.site .btn:hover,
.site .btn-primary:hover { transform: none; box-shadow: none; }
.site .btn-primary:active { transform: scale(0.98); box-shadow: none; }

.site .navbar-toggle span {
  transition: transform var(--duration-micro) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out);
}

@keyframes site-drop {
  from { opacity: 0; transform: translateY(-4px); }
}

.site .navbar-inner.navbar--open .navbar-links,
.site .navbar-inner.navbar--open > .navbar-actions {
  animation: site-drop var(--duration-micro) var(--ease-out) both;
}

.hero-pick button {
  transition: color var(--duration-micro) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out);
}

.site .navbar-logo:focus-visible,
.site .navbar-link:focus-visible,
.site .navbar-login:focus-visible,
.site .footer-col-link:focus-visible,
.site .footer-legal-link:focus-visible,
.site .footer-lang-link:focus-visible,
.site .preprint-link:focus-visible {
  opacity: 1;
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

.form-error {
  margin: 12px 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #b42318;
}

.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }