/* SenToh v2 — booth-first, phone-first, no framework. */
:root {
  color-scheme: dark;
  --ink: #0d1113;
  --panel: #151b1e;
  --panel-raised: #1b2428;
  --panel-soft: #111719;
  --line: #435057;
  --cream: #f4f0e8;
  --muted: #c4c8c5;
  --faint: #aab2b0;
  --clay: #f5c27f;
  --water: #a4e5df;
  --gutter: 16px;
  --wide: 1120px;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Smooth scrolling is motion, and motion is a thing some people have told
   their operating system to stop sending them — it is a migraine or a
   vestibular trigger, not a taste. Honour the setting the OS already carries. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--cream);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
img, svg { max-width: 100%; }
button, input, select { font: inherit; }

/* The browser's own `[hidden] { display: none }` is in the user-agent sheet,
   which ANY author rule setting `display` outranks — so `.action-bar
   { display: flex }` kept the bar on screen while `.hidden` said otherwise,
   and U6's duplicate Publish button survived being hidden. Caught by counting
   the visible buttons rather than by reading the page. */
[hidden] { display: none !important; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

h1, h2, h3, h4, p, figure { margin-top: 0; }
h1, h2, h3, h4 { font-family: ui-serif, Georgia, "Times New Roman", serif; font-weight: 620; line-height: 1.13; letter-spacing: -0.018em; }
h1 { font-size: clamp(2.1rem, 8vw, 4.5rem); margin-bottom: 12px; }
h2 { font-size: clamp(1.55rem, 4.5vw, 2.3rem); margin-bottom: 12px; }
h3 { font-size: clamp(1.18rem, 3vw, 1.55rem); margin-bottom: 8px; }
h4 { font-size: 1.08rem; margin-bottom: 8px; }
p { max-width: 68ch; margin-bottom: 14px; }
a { color: var(--water); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #d1fff8; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
}
strong, b { color: var(--cream); }

.wrap { width: min(100%, var(--wide)); margin-inline: auto; padding-inline: var(--gutter); }
.page-wrap { padding-top: 36px; padding-bottom: 30px; }
.page-intro { padding: 8px 0 26px; }
.page-intro h1 { font-size: clamp(2.15rem, 7vw, 3.6rem); }
.lead { color: var(--muted); font-size: clamp(1.05rem, 2.5vw, 1.2rem); max-width: 58ch; }
.muted { color: var(--muted); }
.eyebrow, .kicker {
  color: var(--clay);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; font-weight: 650; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Example strip and shared navigation */
.notice {
  padding: 8px var(--gutter);
  border-bottom: 1px solid #68502d;
  background: #352815;
  color: #ffe3b4;
  font-size: .84rem;
  line-height: 1.45;
  text-align: center;
}
.notice b { color: #fff0d0; }
.bar {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgb(13 17 19 / 96%);
  backdrop-filter: blur(10px);
}
.bar-in {
  width: min(100%, var(--wide));
  min-height: 64px;
  margin-inline: auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mark { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--cream); text-decoration: none; }
.mark:hover { color: #fff; text-decoration: none; }
.mark b { font: 650 1.2rem/1 ui-serif, Georgia, serif; }
.mark-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #193334; color: var(--water); font-size: 1.1rem; }
.navlinks { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; }
.navlinks a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a:hover { background: var(--panel-raised); color: var(--cream); }
.navlinks a[aria-current="page"] { background: var(--cream); color: var(--ink); font-weight: 700; }
.navlinks [data-shortlist-count] { margin-left: 3px; }

/* Buttons, labels and common controls */
.btn {
  display: inline-flex;
  min-height: 46px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #59656a;
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--cream);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--water); background: #243337; color: #fff; text-decoration: none; }
.btn-go { border-color: var(--clay); background: var(--clay); color: #231606; }
.btn-go:hover { border-color: #ffdda9; background: #ffdda9; color: #231606; }
.btn-small { min-height: 44px; padding-inline: 13px; font-size: .88rem; }
.btn-shortlist[aria-pressed="true"] { border-color: var(--water); background: #183536; color: #d2fffa; }
.pill, .tag-example, .need-tag, .read-chip, .agent-chip, .letter-access {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1.25;
  white-space: normal;
}
.pill { color: var(--muted); }
.pill-pillar { border-color: #3f6662; color: #c0f2ec; }
.pill-type { border-color: #765832; color: #ffe1ad; }
.tag-example { min-height: 22px; border-color: #806438; background: #382b17; color: #ffe2ad; font-size: .65rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.price { color: var(--clay); font-weight: 700; }
.price-free { color: var(--water); font-weight: 700; }
.need-tag { min-height: 22px; padding: 2px 8px; color: var(--muted); font-size: .74rem; }

/* Floor: need first, one clear sign */
.floor-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(20px, 5vw, 64px);
  padding-block: clamp(28px, 7vw, 76px) 34px;
}
.floor-question h1 { max-width: 14ch; font-size: clamp(2.5rem, 7vw, 4.5rem); }
.hero-art { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 22px 54px rgb(0 0 0 / 22%); }
.hero-art .banner { display: block; width: 100%; aspect-ratio: 3 / 1; }
.hero-caption { display: flex; min-height: 46px; align-items: center; flex-wrap: wrap; gap: 0 7px; padding: 5px 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.hero-caption a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); font-weight: 700; }
.loading-mark { padding: 32px 16px; color: var(--muted); }
.needs-section, .aisle-section, .shelf-section { padding-block: 28px 34px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { margin: 0; }
.need-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.need-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid #465358;
  border-radius: 999px;
  background: var(--panel);
  color: var(--cream);
  text-decoration: none;
}
.need-chip:hover { border-color: var(--water); background: #1b3031; text-decoration: none; }
.aisle { padding: 21px 0 26px; border-top: 1px solid var(--line); }
.aisle-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.aisle-heading h3 { margin: 0; }
.booth-row, .booth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; min-width: 0; }
.aisle-booths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aisle-cta { display: flex; min-width: 0; min-height: 100%; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; border: 1px dashed #5b696d; border-radius: var(--radius); background: linear-gradient(145deg, #172022, var(--panel-soft)); color: var(--cream); text-decoration: none; }
.aisle-cta:hover { border-color: var(--water); background: #182627; color: #fff; text-decoration: none; }
.aisle-cta strong { font: 650 clamp(1.2rem, 2vw, 1.55rem)/1.15 ui-serif, Georgia, serif; }
.aisle-cta > span:not(.eyebrow):not(.text-link) { color: var(--muted); }
.aisle-cta .text-link { margin-top: 2px; }
.booth-tile {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #3d494d;
  border-top: 3px solid hsl(var(--h), 68%, 63%);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 7px 24px rgb(0 0 0 / 13%);
}
.booth-link { display: block; color: var(--cream); text-decoration: none; }
.booth-link:hover { color: #fff; text-decoration: none; }
.booth-art { overflow: hidden; background: #171d20; }
.booth-art .banner { display: block; width: 100%; aspect-ratio: 3 / 1; transition: transform .25s ease; }
.booth-link:hover .banner { transform: scale(1.025); }
.booth-copy { padding: 14px 15px 2px; }
.booth-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
.booth-copy h3 { margin-bottom: 5px; }
.booth-tagline { margin-bottom: 7px; color: var(--muted); }
.by { margin: 0; color: var(--faint); font-size: .84rem; }
.booth-bottom { display: grid; gap: 12px; padding: 12px 15px 15px; border-top: 1px solid var(--line); }
.booth-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.booth-metrics span { min-width: 0; overflow-wrap: anywhere; }
.booth-metrics b { display: block; color: hsl(var(--h), 76%, 77%); font-size: 1rem; }
.booth-bottom > .btn { justify-self: start; }

/* Dated hand-picked shelf */
.shelf-note { color: var(--muted); font-size: .9rem; }
.pick-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.feed-row { display: grid; grid-template-columns: 115px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 15px; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feed-main { min-width: 0; }
.feed-main h3 { margin: 0 0 4px; font-size: 1.13rem; }
.feed-main h3 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); }
.feed-main p { margin: 0; color: var(--muted); font-size: .9rem; }
.feed-meta { display: grid; justify-items: end; gap: 4px; color: var(--faint); font-size: .82rem; }
.principle-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 22px 34px; }
.principle-strip > div { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.principle-strip p:last-child { margin-bottom: 0; }
.principle-strip .eyebrow { margin-bottom: 5px; }

/* Agent finding and agent cards */
.filter-panel { display: grid; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.field-label, .field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .9rem; font-weight: 650; }
input[type="search"], input[type="text"], select {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #59656a;
  border-radius: 10px;
  background: #101618;
  color: var(--cream);
}
input::placeholder { color: var(--faint); opacity: 1; }
.filter-group h2 { margin: 0 0 8px; color: var(--muted); font: 700 .78rem/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #4a575c;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .86rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--water); color: var(--cream); }
.chip[aria-pressed="true"] { border-color: var(--water); background: var(--water); color: #092020; font-weight: 700; }
.results-section { padding-top: 30px; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 13px; min-width: 0; }
.agent-card, .saved-agent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.card-main { display: block; min-width: 0; color: var(--cream); text-decoration: none; }
.card-main:hover { color: #fff; text-decoration: none; }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
.card-main h3 { margin: 0 0 5px; }
.card-line { margin: 9px 0 11px; color: var(--muted); }
.need-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--faint); font-size: .83rem; }
.btn-shortlist { align-self: flex-start; min-width: 150px; }

/* Circle detail: distinctive sign and computed metrics */
.circle-page { --h: 200; min-width: 0; }
.circle-banner { position: relative; display: flex; min-height: 290px; align-items: end; overflow: hidden; isolation: isolate; background: hsl(var(--h), 38%, 14%); }
.circle-banner-art, .circle-banner-shade { position: absolute; z-index: -1; inset: 0; }
.circle-banner-art .banner { display: block; width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
.circle-banner-shade { background: linear-gradient(90deg, rgb(8 12 14 / 90%) 0%, rgb(8 12 14 / 68%) 52%, rgb(8 12 14 / 14%) 100%), linear-gradient(0deg, rgb(8 12 14 / 68%), transparent 65%); }
.circle-banner-copy { padding-block: 30px 27px; }
.circle-banner-copy h1 { max-width: 16ch; margin: 9px 0; font-size: clamp(2.25rem, 7vw, 4.4rem); text-shadow: 0 2px 16px #000; }
.circle-banner-copy .eyebrow { color: #fff0cc; }
.circle-tagline { margin-bottom: 6px; color: #fff8eb; font-size: clamp(1rem, 2.5vw, 1.2rem); }
.circle-maker { margin: 0; color: #e4e8e3; font-size: .9rem; }
.circle-content > section { padding-block: 30px; border-bottom: 1px solid var(--line); }
.circle-content > section:last-child { border-bottom: 0; }
.circle-content .eyebrow { color: hsl(var(--h), 78%, 78%); }
.graphic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.graphic-card { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; margin: 0; padding: 12px; border: 1px solid hsl(var(--h), 28%, 34%); border-radius: 13px; background: hsl(var(--h), 22%, 13%); }
.graphic-art { display: grid; width: 100%; min-height: 110px; place-items: center; color: hsl(var(--h), 73%, 76%); }
.graphic-art svg { display: block; width: min(100%, 180px); max-height: 125px; overflow: visible; color: hsl(var(--h), 73%, 76%); }
.graphic-art .g-clock { width: min(100%, 145px); max-height: 145px; }
.graphic-art .g-reads { width: min(100%, 180px); }
.graphic-card figcaption { display: grid; gap: 2px; margin-top: 9px; }
.graphic-card figcaption b { font-size: .88rem; }
.graphic-card figcaption span { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.graphic-art text { fill: currentColor; font-family: system-ui, sans-serif; }
.graphic-art .g-rhythm rect, .graphic-art .g-spark .dot { fill: currentColor; }
.graphic-art .g-rhythm rect[opacity="0.28"], .graphic-art .g-spark .dot.off { opacity: .28; }
.number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin-top: 12px; }
.number-grid > div { display: grid; min-width: 0; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.number-grid b { color: hsl(var(--h), 76%, 78%); font: 650 1.65rem/1.05 ui-serif, Georgia, serif; }
.number-grid span { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 295px), 1fr)); gap: 13px; }
.team-card { min-width: 0; padding: 16px; border: 1px solid hsl(var(--h), 27%, 36%); border-radius: var(--radius); background: linear-gradient(150deg, hsl(var(--h), 25%, 15%), var(--panel) 65%); }
.team-card-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.team-card-head > div { min-width: 0; }
.team-card-head h3 { margin: 7px 0 0; }
.team-price { flex: 0 0 auto; white-space: nowrap; }
.team-one-line { color: var(--muted); }
.team-card h4 { margin: 15px 0 8px; font: 700 .77rem/1.35 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.read-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.read-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: .81rem; }
.read-chip { min-height: 29px; border-color: hsl(var(--h, 190), 35%, 42%); color: #e1fffb; font-size: .75rem; font-weight: 700; }
.team-limits, .compare-limits { margin: 0; padding-left: 19px; color: var(--muted); font-size: .88rem; }
.team-limits li, .compare-limits li { margin: 5px 0; }
.sample-details, .instructions-details { margin-top: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / 14%); }
.sample-details > summary, .instructions-details > summary { display: flex; min-height: 46px; align-items: center; padding: 9px 12px; color: var(--cream); font-weight: 700; cursor: pointer; }
.sample-details[open] > summary, .instructions-details[open] > summary { border-bottom: 1px solid var(--line); }
.sample-details > h4 { margin: 12px 12px 0; }
.sample-chat { display: grid; gap: 8px; padding: 12px; }
.chat-line { display: grid; gap: 3px; max-width: 92%; margin: 0; padding: 9px 11px; border: 1px solid #47555a; border-radius: 12px; background: #121a1c; color: var(--cream); font-size: .88rem; overflow-wrap: anywhere; }
.chat-line.from-you { justify-self: end; border-color: #53604a; background: #22271c; }
.chat-speaker { color: var(--faint); font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.team-card > .btn-shortlist { margin-top: 13px; }
.letter-list { display: grid; gap: 10px; }
.letter-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-left: 3px solid hsl(var(--h), 66%, 61%); border-radius: 12px; background: var(--panel); }
.letter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; color: var(--muted); font-size: .78rem; }
.letter-card h3 { margin: 9px 0 6px; }
.letter-title-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); }
.letter-title-link:hover { color: var(--water); }
.letter-excerpt { margin-bottom: 11px; color: var(--muted); }
.letter-access { min-height: 24px; font-size: .7rem; font-weight: 700; }
.letter-access.is-free { border-color: #3f6964; color: #c8fff6; }
.letter-access.is-member { border-color: #75613e; color: #ffe3b6; }
.agent-chip { min-height: 44px; justify-content: flex-start; color: #d0fffa; text-decoration: none; }
.agent-chip:hover { border-color: var(--water); text-decoration: none; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.tier-card { min-width: 0; padding: 16px; border: 1px solid hsl(var(--h), 27%, 36%); border-radius: var(--radius); background: hsl(var(--h), 20%, 14%); }
.tier-card h3 { margin: 10px 0 3px; }
.tier-price { margin-bottom: 12px; font-size: 1.05rem; }
.plain-list { min-height: 65px; margin: 0 0 16px; padding-left: 20px; color: var(--muted); }
.plain-list li { margin: 6px 0; }
.tier-card .btn { width: 100%; }
.stub-note { margin: 9px 0 0; color: var(--faint); font-size: .8rem; }
.leaves-section { padding: 20px; border: 1px solid hsl(var(--h), 34%, 40%); border-radius: var(--radius); background: hsl(var(--h), 24%, 14%); }
.leaves-section h2 { margin-bottom: 7px; }
.leaves-section p:last-child { margin-bottom: 0; }

/* Letter reading page */
.letter-reading { max-width: 760px; margin: 0 auto; }
.letter-reading-head { margin-bottom: 24px; }
.letter-reading-head h1 { max-width: 20ch; font-size: clamp(2rem, 6.5vw, 3.5rem); }
.letter-reading-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.letter-byline { color: var(--muted); }
.letter-reading-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--faint); font-size: .88rem; }
.letter-body { max-width: 62ch; margin: 26px auto 42px; color: var(--cream); font-size: 1.125rem; line-height: 1.85; }
.letter-body p { max-width: none; margin: 0 0 1.35em; }
.letter-body p:last-child { margin-bottom: 0; }
.member-excerpt { max-width: 62ch; margin: 24px auto; color: var(--cream); font-size: 1.12rem; line-height: 1.75; }
.member-gate { max-width: 62ch; margin: 28px auto 42px; padding: 20px; border: 1px solid hsl(var(--h), 34%, 42%); border-radius: var(--radius); background: hsl(var(--h), 23%, 14%); }
.member-gate h2 { font-size: clamp(1.35rem, 4vw, 1.9rem); }
.member-gate .plain-list { min-height: 0; }
.member-tier-name { color: var(--cream); font-weight: 650; }
.letter-after { margin: 40px 0 26px; padding-top: 25px; border-top: 1px solid var(--line); }
.letter-agent-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); gap: 18px; padding: 18px; border: 1px solid hsl(var(--h), 30%, 40%); border-radius: var(--radius); background: linear-gradient(140deg, hsl(var(--h), 24%, 15%), var(--panel) 66%); }
.letter-agent-info { min-width: 0; }
.letter-agent-head { display: flex; align-items: center; gap: 8px; }
.letter-agent-info h3 { margin: 8px 0 4px; }
.letter-agent-info h3 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); }
.letter-agent-line { color: var(--muted); }
.letter-agent-info h4 { margin: 14px 0 7px; color: var(--faint); font: 700 .78rem/1.35 system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.letter-agent-info .read-list { margin-bottom: 13px; }
.letter-agent-price { margin-bottom: 10px; }
.letter-actions { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-left: 17px; border-left: 1px solid var(--line); }
.letter-actions .btn { width: 100%; }
.letter-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0 8px; }
.letter-direction { display: inline-flex; min-height: 46px; align-items: center; }
.letter-direction[aria-disabled="true"] { color: var(--faint); font-size: .88rem; }

/* Agent résumé */
.breadcrumbs { display: flex; align-items: center; gap: 9px; padding-bottom: 18px; color: var(--muted); font-size: .88rem; }
.breadcrumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.agent-profile-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(130deg, #1b2828, var(--panel) 64%); }
.agent-profile-head h1 { max-width: 18ch; margin: 7px 0; font-size: clamp(2.1rem, 7vw, 4rem); }
.profile-by { margin-bottom: 8px; color: var(--muted); }
.agent-profile-head .lead { margin-bottom: 0; }
.agent-page { --h: 190; }
.agent-stats { margin: 20px 0 4px; padding: 17px; border: 1px solid hsl(var(--h), 28%, 36%); border-radius: var(--radius); background: hsl(var(--h), 18%, 13%); }
.agent-graphic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.agent-graphic-grid .graphic-card { padding: 9px; border-color: hsl(var(--h), 27%, 34%); background: hsl(var(--h), 18%, 12%); }
.agent-graphic-grid .graphic-art { min-height: 92px; }
.agent-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.agent-number-grid > div { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.agent-number-grid b { color: hsl(var(--h), 76%, 78%); font: 650 1.45rem/1.1 ui-serif, Georgia, serif; }
.agent-number-grid span { color: var(--muted); font-size: .78rem; }
.on-demand-chip { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid hsl(var(--h), 36%, 43%); border-radius: 999px; background: hsl(var(--h), 26%, 19%); color: hsl(var(--h), 75%, 82%); font-weight: 700; text-align: center; }
.agent-core-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0; }
.agent-core-facts .profile-block { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.agent-core-facts .profile-block h2 { font-size: 1.45rem; }
.profile-actions { display: grid; flex: 0 0 auto; justify-items: start; gap: 12px; }
.belongs-to { margin: 10px 2px 0; color: var(--muted); font-size: .88rem; }
.profile-block { padding: 25px 2px; border-bottom: 1px solid var(--line); }
.profile-block h2 { margin-bottom: 12px; }
.profile-copy { color: var(--muted); font-size: 1.08rem; }
.profile-block .read-list { max-width: 620px; }
.limit-list, .adaptation-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.limit-list li { display: flex; gap: 11px; color: var(--muted); }
.limit-list li > span { color: var(--clay); font-weight: 800; }
.adaptation-list li { padding: 11px 13px; border-left: 2px solid var(--water); background: var(--panel-soft); color: var(--muted); }
.instructions-details { margin: 0 0 10px; }
.instructions { display: block; max-width: 100%; margin: 0; padding: 15px; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: 0 0 12px 12px; background: #0b0f11; color: #e7f1ee; font: .88rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.history-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.history-list li:last-child { border-bottom: 0; }
.history-list time { color: var(--cream); font-size: .87rem; }
.lineage-list { padding-left: 20px; color: var(--muted); }
.lineage-list li { margin: 7px 0; }
.add-stub { border-bottom: 0; }
.add-stub > p:not(.eyebrow) { color: var(--muted); }
.empty-state { padding: clamp(20px, 5vw, 42px); border: 1px dashed #667276; border-radius: var(--radius); background: var(--panel-soft); }
.empty-state h2 { margin-bottom: 9px; }
.empty-state p { color: var(--muted); }

/* Comparison is cards, never a squeezed table */
.unknown-id-note { margin: 0 0 8px; color: var(--faint); font-size: .88rem; }
.compare-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 17px; padding: 6px 0 16px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); align-items: start; gap: 13px; }
.compare-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.compare-card-head { padding: 15px; border-bottom: 1px solid var(--line); background: var(--panel-raised); }
.compare-card-head h2 { margin: 10px 0 5px; font-size: 1.45rem; }
.compare-card-head h2 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); }
.compare-card-head p { color: var(--muted); font-size: .88rem; }
.compare-card-head .btn { margin-top: 4px; }
.compare-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-row h3 { margin: 2px 0 0; color: var(--faint); font: 700 .73rem/1.35 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.compare-row > div { min-width: 0; color: var(--cream); font-size: .87rem; overflow-wrap: anywhere; }
.compare-row .read-list li { grid-template-columns: 1fr; gap: 4px; font-size: .76rem; }
.compare-row .read-chip { justify-self: start; }
.compare-rhythm { color: var(--water); }
.compare-rhythm svg { display: block; width: min(100%, 180px); height: auto; }
.compare-rhythm .g-rhythm rect { fill: currentColor; }
.compare-rhythm .g-rhythm text { fill: currentColor; font-family: system-ui, sans-serif; }
.compare-demand { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 12px; border: 1px solid #3f6964; border-radius: 999px; color: #c8fff6; font-weight: 700; }
.compare-limits { padding-left: 16px; }

/* Shortlist and waitlist */
.shortlist-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.shortlist-tools p { margin: 0; color: var(--muted); }
.saved-agent h2 { margin: 6px 0 0; font-size: 1.35rem; }
.saved-agent h2 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); }
.saved-agent > p:not(.by) { margin: 0; color: var(--muted); }
.saved-agent-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.join-page { max-width: 760px; }
.join-page > p a { display: inline-flex; min-height: 44px; align-items: center; }
.join-note { display: flex; align-items: start; gap: 12px; padding: 15px; border: 1px solid #675333; border-radius: var(--radius); background: #241d12; }
.join-note p { margin: 0; color: #f4e6ca; }
.join-form { margin: 21px 0 26px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.field { margin-bottom: 15px; }
.field select { appearance: auto; }

/* Shared footer and load failure */
footer { margin-top: 28px; padding: 24px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
footer p { max-width: 78ch; }
footer p:last-child { margin-bottom: 0; }
footer a, .belongs-to a, .profile-block a:not(.btn), .lineage-list a { display: inline-flex; min-height: 44px; align-items: center; }
footer b { color: var(--cream); }
.loaderr { padding: 16px; border: 1px solid #815344; border-radius: 12px; background: #261915; color: #ffd2c3; }
.loaderr code { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .bar-in { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 8px; }
  .navlinks { width: 100%; justify-content: flex-start; gap: 1px; }
  .navlinks a { padding-inline: 9px; font-size: .82rem; }
  .floor-intro { grid-template-columns: 1fr; gap: 17px; padding-top: 28px; }
  .floor-question h1 { max-width: 13ch; }
  .aisle-booths { grid-template-columns: 1fr; }
  .agent-core-facts { grid-template-columns: 1fr; }
  .agent-graphic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-graphic-grid .graphic-card:last-child { grid-column: 1 / -1; }
  .letter-agent-card { grid-template-columns: 1fr; }
  .letter-actions { align-items: stretch; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .letter-pagination { align-items: stretch; }
  .letter-direction { max-width: 50%; text-align: center; }
  .feed-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  .feed-labels { grid-column: 1 / -1; }
  .feed-main { grid-column: 1; }
  .feed-meta { grid-column: 2; grid-row: 2; align-content: start; justify-items: end; text-align: right; }
  .principle-strip { grid-template-columns: 1fr; }
  .agent-profile-head { align-items: start; flex-direction: column; }
  .profile-actions { display: flex; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 430px) {
  .navlinks { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
  .navlinks a { min-height: 44px; padding-inline: 9px; }
  .page-wrap { padding-top: 25px; }
  .graphic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphic-card { padding: 9px; }
  .graphic-art { min-height: 77px; }
  .number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-list li { grid-template-columns: 1fr auto; }
  .history-list time { grid-column: 1 / -1; }
  .compare-row { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; padding-inline: 10px; }
  .booth-metrics { font-size: .7rem; }
  .circle-banner { min-height: 270px; }
  .circle-banner-art .banner { min-height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========================================================================
   The working app — appended 2026-10-28 when SenToh stopped being a static
   example. The tokens, the dark panels and the circle hues above are
   unchanged; everything here is either a control the example pages did not
   need, or a fix for a row of the round-1 persona playtest (T1–T9).
   ======================================================================== */

/* T9: ONE HEADER ROW AT 375px. The rules above turn .bar-in into a column
   under 700px and the links into a 3-wide grid under 430px, which is where
   the two-row header came from. The app's header carries a mark and three
   links, which fits 375px on one line, so both of those are overridden here
   rather than edited above — the example pages' own header still wants them. */
@media (max-width: 700px) {
  .bar-in { align-items: center; flex-direction: row; gap: 8px; }
  .navlinks { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 0; }
}
@media (max-width: 430px) {
  .navlinks { display: flex; }
  .navlinks a { padding-inline: 7px; font-size: .8rem; }
  .mark b { font-size: 1.05rem; }
}

/* The header wrapper must not become .bar's containing block. A sticky box
   cannot travel outside the block that contains it, and [data-chrome] is a
   plain div exactly as tall as the bar inside it — so `position: sticky` on
   .bar had nowhere to go and the header scrolled away. `display: contents`
   removes the wrapper from the box tree and hands .bar back to <body>.
   Measured: header top goes from -600 to 0 after scrolling 600px. */
[data-chrome] { display: contents; }

/* T9: nothing smaller than 12px anywhere in the app's own furniture. */
.card-foot, .footlinks, .pill, .status-pill, .meta-line, .hint { font-size: .82rem; }

/* T1: the confirmation. One live region, bottom of the screen on a phone so a
   thumb never covers it, and it is read aloud as well as drawn. */
.toast {
  position: fixed;
  z-index: 60;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  left: var(--gutter);
  max-width: 460px;
  margin-inline: auto;
  padding: 13px 16px;
  border: 1px solid #3f6964;
  border-radius: 12px;
  background: #11302d;
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
  color: #ddfff8;
  font-weight: 650;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-bad { border-color: #8a5243; background: #2d1a15; color: #ffd8c9; }

/* T4: the one action is reachable without scrolling. Every action bar sits
   above the fold; on the two long pages — a Circle and an agent — it is also
   pinned to the bottom of a phone screen, so "Join" is still there after
   three letters of scrolling. That was the actual complaint: the button was
   four screens down.

   `position: fixed`, NOT `position: sticky`. Sticky only DELAYS a box
   leaving the viewport — it never pulls a box that is already above the
   bottom edge down to it. A bar near the top of a long page has passed its
   sticky window before the first scroll, so `sticky; bottom: 0` renders it in
   flow and lets it scroll away. Measured on a 375px Circle page: the bar
   ended at -369px, exactly its unstuck flow position, and a bare control div
   behaved the same. Fixed is the right tool for a bar that must not move. */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.action-bar .btn { flex: 1 1 auto; }
.action-bar p { margin: 0; color: var(--muted); font-size: .88rem; }
@media (max-width: 700px) {
  .action-bar-pinned {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgb(13 17 19 / 97%);
    backdrop-filter: blur(10px);
  }
  .action-bar-pinned .btn { width: 100%; }
  /* Room at the end of the page so the pinned bar never covers the footer. */
  body:has(.action-bar-pinned) { padding-bottom: 150px; }

  /* U7: with the keyboard up the bar was eating the page. A soft keyboard
     leaves roughly 520px of a 375x812 phone, and a focused input is the one
     moment the person is reading the thing they are typing into rather than
     looking for the button — so the bar gets out of the way entirely and comes
     back the moment focus leaves. `:has()` does this with no script and no
     resize listener; the VisualViewport API would be a listener, a state
     variable and a race with the browser's own scroll. */
  body:has(.action-bar-pinned):has(input:focus, textarea:focus, select:focus) .action-bar-pinned {
    display: none;
  }
}

/* U7, the measured part: at 375x520 the bar was ~40% of the screen, because
   the helper sentence beside the button wraps to three lines at that width.
   Below 620px of height the sentence goes and the button stays — one 44px
   control plus its padding, about 61px, under 15% of 520. The sentence is
   still there on a full-height phone, where there is room for it. */
@media (max-width: 700px) and (max-height: 620px) {
  .action-bar-pinned p { display: none; }
  .action-bar-pinned { padding-block: 8px calc(8px + env(safe-area-inset-bottom)); }
  /* The agent page's bar carries two buttons. Full width each, they stack and
     the bar measured 119px — 23% of a 520px screen. Sharing one row puts it
     back to 61px. Measured, not guessed: a full-width button is right on a
     tall phone and wrong the moment the keyboard halves the screen. */
  .action-bar-pinned .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-inline: 10px;
    font-size: .9rem;
    /* Two buttons sharing 375px wrap their labels to two lines, which puts the
       height straight back where it was. The label is three or four short
       words; it does not need to wrap. */
    white-space: nowrap;
  }
  body:has(.action-bar-pinned) { padding-bottom: 86px; }
}

/* T5: filters start closed, so the first result is on the first screen. */
.filters { margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.filters > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  color: var(--cream);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { margin-left: auto; color: var(--muted); content: 'Show'; font-size: .85rem; font-weight: 500; }
.filters[open] > summary::after { content: 'Hide'; }
.filters[open] > summary { border-bottom: 1px solid var(--line); }
.filters-body { display: grid; gap: 14px; padding: 15px; }

/* Primary and quiet buttons */
.btn-go { border-color: var(--water); background: var(--water); color: #07211f; font-weight: 700; }
.btn-go:hover { background: #c6fff7; }
.btn-quiet { background: transparent; }
.btn-danger { border-color: #8a5243; background: #2d1a15; color: #ffd8c9; }
.btn:disabled { opacity: .62; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Forms. One stack, labelled, with the hint under the label and not inside the
   box — a placeholder disappears the moment somebody starts typing. */
.form-card { max-width: 620px; margin-bottom: 24px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.form-card h2 { margin-bottom: 6px; }
/* The stylesheet above styles search/text/select only — the example site had
   no password field. Without these, a password box renders at the browser's
   default width beside a full-width email box, which reads as a broken form. */
input[type="password"], input[type="email"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #59656a;
  border-radius: 10px;
  background: #101618;
  color: var(--cream);
}

textarea {
  width: 100%;
  min-height: 130px;
  padding: 10px 13px;
  border: 1px solid #59656a;
  border-radius: 10px;
  background: #101618;
  color: var(--cream);
  font: inherit;
  resize: vertical;
}
.hint { display: block; margin: -2px 0 6px; color: var(--faint); }

/* U2: the error sits with the control, not in a bar at the bottom of the
   screen. The red edge is backed up by the words underneath and by
   aria-invalid on the input, because colour alone is not a message. */
.field-error {
  display: block;
  margin: 7px 0 0;
  padding: 8px 11px;
  border: 1px solid #8a5243;
  border-left-width: 4px;
  border-radius: 9px;
  background: #2d1a15;
  color: #ffd8c9;
  font-size: .88rem;
  font-weight: 650;
}
/* The whole-form one: a wrong password or a wrong invite code does not blame
   one box, so it goes directly above the submit button where the reader's eye
   already is. */
.form-error { margin: 0 0 13px; }
.field-bad input, .field-bad textarea, .field-bad select { border-color: #b4705c; }
.field-bad > label, .field-bad > .field-label { color: #ffd8c9; }
/* U8: required was invisible while "Optional" was spelled out one box below. */
.req { color: var(--faint); font-weight: 500; }

/* U3: numbered steps. A person following a sequence of button presses in
   another program needs to see where they are in it; a paragraph of prose
   with "then" in it does not give them that. */
.steps { margin: 0 0 13px; padding-left: 1.3em; color: var(--cream); }
.steps li { margin-bottom: 7px; line-height: 1.55; }
.steps li:last-child { margin-bottom: 0; }

/* U4: the confirmation a published letter was missing. Green, at the top of
   the page it published to, and read aloud (role="status") — not a toast,
   because a toast is gone in four seconds and this is the one sentence that
   says an irreversible thing happened. */
.published-note {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #3f6964;
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #11302d;
  color: #ddfff8;
}
.published-note p { margin: 0; }
.published-note b { color: #fff; }

/* U8: the one line that says who is on the other end of "Hire". */
.hire-sub { margin: -4px 0 9px; color: var(--cream); font-weight: 650; }
.radio-row { display: grid; gap: 9px; }
.radio-row label { display: flex; min-height: 44px; align-items: center; gap: 9px; color: var(--cream); font-weight: 500; }
.radio-row input { width: 20px; height: 20px; accent-color: var(--water); }

/* Cards and lists the app draws */
.stack { display: grid; gap: 13px; }
.row-card { display: grid; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.row-card h3 { margin: 0; }
/* T9, 44px: a card's title is how you open the card, so it is a tap target and
   not inline prose. Same inline-flex trick the stylesheet above already uses
   for footer and breadcrumb links. A link inside a sentence is left alone —
   stretching those to 44px tears holes in the paragraph, and WCAG 2.5.8
   exempts inline targets for exactly that reason. */
.row-card h3 a { display: inline-flex; min-height: 44px; align-items: center; color: var(--cream); text-decoration: none; }
.row-card h3 a:hover { color: #fff; text-decoration: underline; }
.row-card p { margin: 0; color: var(--muted); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--faint); }
.status-pill { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid #4a575c; border-radius: 999px; color: var(--muted); font-weight: 650; }
.status-pill.is-open { border-color: #3f6964; color: #b9fff4; }
.status-pill.is-locked { border-color: #68502d; color: #ffe3b4; }
.status-pill.is-accepted { border-color: #3f6964; background: #11302d; color: #ddfff8; }
.status-pill.is-declined { border-color: #8a5243; color: #ffd8c9; }
.prompt-card { padding: 16px; border: 1px dashed #667276; border-radius: var(--radius); background: var(--panel-soft); }
.prompt-card p { margin: 0 0 12px; color: var(--muted); }
.panel { margin-bottom: 26px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.panel > h2 { font-size: 1.35rem; }

/* A word the reader has not met yet gets its one line here, where it is first
   seen — T2 and T3 both came back to vocabulary nobody had defined. */
.define { margin: 0 0 16px; padding-left: 13px; border-left: 2px solid var(--clay); color: var(--muted); }
.define b { color: var(--clay); }

/* The pasted instructions, read before adding. Monospace because it is text a
   machine will read literally, and whitespace in it is meaningful. */
.instructions-box {
  max-height: 440px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e1416;
  color: var(--cream);
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.beta-note { display: flex; gap: 11px; padding: 14px; border: 1px solid #675333; border-radius: var(--radius); background: #241d12; color: #f4e6ca; }
.beta-note p { margin: 0; }
/* .letter-body keeps its 62ch reading measure from the rule above, but not
   that rule's `margin: … auto`: inside a panel the centred column sat visibly
   off-axis from the heading above it and read as a layout fault. */
.letter-body { white-space: pre-wrap; }
.panel > .letter-body, article.panel > .letter-body { margin-inline: 0; }
.hero { padding-block: clamp(34px, 9vw, 72px) clamp(26px, 6vw, 44px); }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-bottom: 22px; font-size: clamp(1.1rem, 2.8vw, 1.35rem); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 15px; }
.not-found { padding-block: clamp(50px, 14vw, 120px); text-align: center; }
.not-found p { margin-inline: auto; }