/*
 * Freehold — consumer site prototype · the story page
 * One fixed Estate scene behind a normally-scrolling editorial column.
 */

/* ================================================================ stage */
.stage { position: fixed; inset: 0; z-index: 0; background: var(--ink); }
.stage canvas { width: 100%; height: 100%; display: block; }
.stage__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* No shade over the scene: the words sit on glass (see .glass in site.css). All that stays is a faint
   falloff at the very edges of the window, the way a lens darkens toward its rim. */
.stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 110% at 55% 50%, transparent 62%, rgba(3, 6, 9, 0.34) 100%);
}
.stage__cut { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
.stage.is-cut .stage__cut { animation: stage-cut 520ms linear; }
@keyframes stage-cut { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.stage__fallback { display: none; position: absolute; inset: 0; }
.no-webgl .stage canvas, .no-webgl .stage__labels { display: none; }
.no-webgl .stage__fallback { display: block; }
.no-js .stage canvas, .no-js .stage__labels, .no-js .stage-tag__btn { display: none; }
.no-js .stage__fallback { display: block; opacity: 0; animation: fh-show 0.8s var(--ease) 2.2s forwards; }
.stage__fallback { overflow: hidden; background: radial-gradient(90% 80% at 70% 45%, #0e1a25 0%, var(--ink) 70%); }
/* The drawn plan sits in a window beside the copy; each shot pans its subject to the middle and leans in. */
.plan-view {
  position: absolute; top: 0; bottom: 0; right: 0; width: 56vw; overflow: hidden; container-type: size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
body[data-side='right'] .plan-view { right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 14%); mask-image: linear-gradient(270deg, transparent 0, #000 14%); }
body[data-side='center'] .plan-view { left: 0; right: 0; width: auto; opacity: 0.45; -webkit-mask-image: none; mask-image: none; }
/* When the page has measured the free span beside the copy, the window takes exactly that span. */
@media (min-width: 881px) {
  .stage[style*='--plan-l'] .plan-view { left: var(--plan-l); right: var(--plan-r); width: auto; }
}
.plan {
  position: absolute; top: 50%; left: 50%; width: min(78vh, 46vw); width: min(84cqh, 96cqw); height: auto;
  --z: 1; --ox: 50%; --oy: 50%;
  transform: translate(-50%, -50%) translate(calc(50% - var(--ox)), calc(50% - var(--oy))) scale(var(--z)); transform-origin: var(--ox) var(--oy);
  transition: opacity 600ms, transform 1400ms var(--ease), transform-origin 1400ms var(--ease);
}
.reduce-motion .plan { transition: opacity 300ms; }
@media (max-width: 880px) {
  .plan-view, body[data-side='right'] .plan-view { left: 0; right: 0; width: auto; top: var(--nav-h); bottom: auto; height: 46vh; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .plan { width: min(88vw, 42vh); }
}
/* The plan's camera: each shot leans in toward what the chapter is about. */
.plan[data-shot='wake'] { --z: 1.45; --ox: 64%; --oy: 52%; }
.plan[data-shot='debate'] { --z: 1.6; --ox: 51%; --oy: 51%; }
.plan[data-shot='door'], .plan[data-shot='pantry'], .plan[data-shot='work'] { --z: 1.7; --ox: 76%; --oy: 38%; }
.plan[data-shot='tomb'] { --z: 1.8; --ox: 69%; --oy: 67%; }
.plan[data-shot='chronicle'] { --z: 1.7; --ox: 33%; --oy: 55%; }
.plan[data-shot='threads'] { --z: 1.45; --ox: 66%; --oy: 62%; }
.plan[data-shot='time'][data-stop='3'] { --z: 1.5; --ox: 51%; --oy: 51%; }
.plan[data-shot='time'][data-stop='13'] { --z: 1.5; --ox: 76%; --oy: 38%; }
.plan[data-shot='time'][data-stop='19'] { --z: 1.6; --ox: 69%; --oy: 67%; }
.plan[data-shot='time'][data-stop='30'] { --z: 1.6; --ox: 33%; --oy: 55%; }
.plan[data-shot='time'][data-stop='47'] { --z: 1.5; --ox: 56%; --oy: 62%; }
.plan__lbl { opacity: 0; transition: opacity 600ms var(--ease); paint-order: stroke; stroke: #070c12; stroke-width: calc(4px * var(--lbl-k, 1)); }
/* Counter-scaled against the plan's zoom and size (story.js sets --lbl-k), so names stay legible. */
.plan__lbls .plan__lbl { font-size: calc(13px * var(--lbl-k, 1)); }
.plan__lbl--others { font-size: calc(27px * var(--lbl-k2, 1)); stroke-width: calc(5px * var(--lbl-k2, 1)); }
.plan__lbl--plot { font-size: calc(24px * var(--lbl-k2, 1)); stroke-width: calc(5px * var(--lbl-k2, 1)); }
.plan[data-shot='debate'] .plan__lbl--forum, .plan[data-shot='time'][data-stop='3'] .plan__lbl--forum,
.plan[data-shot='wake'] .plan__lbl--homes, .plan[data-shot='threads'] .plan__lbl--homes, .plan[data-shot='threads'] .plan__lbl--contact,
.plan[data-shot='door'] .plan__lbl--publish, .plan[data-shot='door'] .plan__lbl--pantry, .plan[data-shot='pantry'] .plan__lbl--pantry, .plan[data-shot='pantry'] .plan__lbl--publish, .plan[data-shot='work'] .plan__lbl--pantry,
.plan[data-shot='time'][data-stop='13'] .plan__lbl--pantry, .plan[data-shot='time'][data-stop='13'] .plan__lbl--publish,
.plan[data-shot='tomb'] .plan__lbl--grave, .plan[data-shot='time'][data-stop='19'] .plan__lbl--grave,
.plan[data-shot='chronicle'] .plan__lbl--library, .plan[data-shot='time'][data-stop='30'] .plan__lbl--library,
.plan[data-shot='steward'] .plan__lbl--publish, .plan[data-shot='steward'] .plan__lbl--contact { opacity: 0.92; }
.plan[data-day='-1'] .plan__lbl { opacity: 0; }
.plan { overflow: visible; }
.plan__others { opacity: 0; transition: opacity 900ms var(--ease); }
.plan[data-shot='world'] .plan__others, .plan[data-shot='yours'] .plan__others, .plan[data-shot='get'] .plan__others { opacity: 1; }
.plan[data-shot='world'] .plan__lbl--others, .plan[data-shot='yours'] .plan__lbl--plot, .plan[data-shot='get'] .plan__lbl--plot { opacity: 0.92; }
.plan[data-shot='world'] { --z: 0.5; }
.plan[data-shot='yours'], .plan[data-shot='get'] { --z: 0.62; --ox: 10%; --oy: 66%; }
.plan[data-plot] .plan__plot circle:first-child { stroke-dasharray: none; stroke-width: 4; }
.plan .plan__survey { opacity: 0; transition: opacity 600ms; }
.plan[data-day='-1'] .plan__survey { opacity: 1; }
.plan[data-day='-1'] .plan__ring, .plan[data-day='-1'] .plan__built, .plan[data-day='-1'] .plan__doors, .plan[data-day='-1'] .plan__grave { opacity: 0; }
.plan__ring, .plan__built, .plan__doors, .plan__grave, .plan__odile, .plan__pantry, .plan__tidemark, .plan__stele, .plan__door { transition: opacity 600ms; }
.plan:not([data-odile]) .plan__odile, .plan:not([data-pantry]) .plan__pantry, .plan:not([data-tidemark]) .plan__tidemark, .plan:not([data-stele]) .plan__stele { opacity: 0; }
.plan__door { opacity: 0; }
.plan[data-door-web='open'] .plan__door--web, .plan[data-door-publish='open'] .plan__door--publish, .plan[data-door-contact='open'] .plan__door--contact, .plan[data-door-payments='open'] .plan__door--payments, .plan[data-door-accounts='open'] .plan__door--accounts { opacity: 1; }
.plan[data-door-web='requested'] .plan__door--web, .plan[data-door-publish='requested'] .plan__door--publish, .plan[data-door-contact='requested'] .plan__door--contact, .plan[data-door-payments='requested'] .plan__door--payments, .plan[data-door-accounts='requested'] .plan__door--accounts { opacity: 1; stroke: var(--amber); stroke-dasharray: 6 6; }
.plan[data-paused] { opacity: 0.45; }

/* labels projected from the scene */
.scene-label { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 500ms var(--ease); will-change: transform; }
.scene-label.is-on { opacity: 1; }
.scene-label__dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px rgba(236, 230, 217, 0.15); }
.scene-label__text {
  position: absolute; left: 10px; top: -30px; white-space: nowrap; font-size: var(--fs-label); color: var(--paper);
  padding: 5px 10px; border-radius: 8px; background: rgba(8, 14, 22, 0.5); border: 0;
  backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
 font-weight: 500;}
.scene-label__text::before { content: ''; position: absolute; left: -7px; top: 100%; width: 10px; height: 1px; background: rgba(236, 230, 217, 0.4); transform: rotate(-58deg); transform-origin: right; }

/* the persistent scene tag + pause */
.stage-tag {
  position: fixed; right: 16px; top: calc(var(--nav-vis) + 10px); z-index: 70;
  transition: top 460ms var(--ease), bottom 460ms var(--ease), opacity 300ms, visibility 300ms;
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px;
  background: rgba(8, 14, 22, 0.42); border-radius: 12px; backdrop-filter: blur(12px) saturate(165%); -webkit-backdrop-filter: blur(12px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  font-size: var(--fs-label); color: rgba(241, 238, 232, 0.8); max-width: calc(100vw - 32px);
}
.stage-tag__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-tag__btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px 0 10px; border-radius: 9px;
  background: rgba(236, 230, 217, 0.07); border: 0; cursor: pointer; font-size: var(--fs-label); font-weight: 500;
  transition: background-color var(--dur-1);
}
.stage-tag__btn:hover { background: rgba(236, 230, 217, 0.14); }
.stage-tag__icon { width: 8px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.stage-tag__btn[aria-pressed='true'] .stage-tag__icon { border: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.no-webgl .stage-tag__btn { display: none; }
/* Over a centered, full-width block the tag steps down to the corner so it never sits on the content. */
@media (min-width: 881px) {
  body[data-side='center'] .stage-tag { top: auto; bottom: 16px; }
  body[data-side='center'] .rail a.is-active span, body[data-side='right'] .rail a.is-active span { opacity: 0; }
}
/* While the Soundings workbench is in use it carries its own labels, so the scene's furniture steps aside. */
body[data-shot='work'] .stage-tag, body[data-shot='work'] .rail { opacity: 0; visibility: hidden; pointer-events: none; }
.reduce-motion .stage-tag { transition: opacity 300ms, visibility 300ms; }

/* chapter rail */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 60; transition: opacity 300ms, visibility 300ms; }
@media (max-height: 780px) { .rail a { height: 16px !important; } .rail span { font-size: 0.75rem; padding: 1px 6px; } }
@media (max-height: 620px) { .rail a { height: 13px !important; } .rail a::after { width: 11px; } .rail a.is-active::after { width: 22px; } }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 20px; text-decoration: none; color: rgba(236, 230, 217, 0.32); }
.rail a::after { content: ''; width: 14px; height: 1px; background: currentColor; transition: width var(--dur-2) var(--ease), background-color var(--dur-2); }
.rail span { font-size: var(--fs-label); font-weight: 500; color: var(--paper); opacity: 0; transform: translateX(6px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease); background: rgba(7, 12, 18, 0.8); padding: 2px 8px; border-radius: var(--radius); }
.rail a:hover span, .rail a:focus-visible span, .rail a.is-active span { opacity: 1; transform: none; }
.rail a:hover, .rail a.is-active { color: var(--paper); }
.rail a.is-active::after { width: 28px; }
.progress { display: none; }
@media (max-width: 1180px) {
  .rail { display: none; }
  .progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 81; }
  .progress span { display: block; height: 100%; width: 100%; background: var(--brass); transform-origin: left; transform: scaleX(0); }
}

/* ================================================================ chapters
 * The page's rules, in one place:
 *   - A beat is a headline, a short paragraph and one piece of work, each on its own glass pane over the
 *     Estate (nothing shades the scene itself). An object you read or use — a charter, a request, a
 *     tombstone, an app — is its own pane, shaped like the thing it is; never a pane inside a pane.
 *   - Inside a pane, things are separated by space and hairlines, not by boxes or fills.
 *   - Labels are plain words in a quiet tone. The accent (brass) marks the primary action, the selected
 *     state, and what is waiting on you — nothing else.
 * ============================================================================================== */
main { position: relative; z-index: 10; }
@media (min-width: 2200px) {
  main .wrap { max-width: min(76vw, 2400px); }
  main .app { max-width: 1400px; }
}
.chapter { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--vpad) + 20px) 0 var(--vpad); }
.chapter > .wrap { width: 100%; }
.panel { max-width: 35rem; position: relative; }
.panel--wide { max-width: 46rem; }
.panel--right { margin-left: auto; margin-right: clamp(0px, 3vw, 48px); }
.panel .body { margin-bottom: 8px; }
.footnote { font-size: var(--fs-small); color: var(--faint); max-width: 34em; margin: 16px 0 0; line-height: 1.5; }

@media (max-width: 880px) {
  .chapter { min-height: 0; display: block; padding: 46vh 0 6vh; }
  .chapter.hero { padding: 0; }
  /* phones: no panel behind the panes; they stack over the scene's window */
  .panel, .panel--wide, .panel--right { max-width: none; margin: 0; display: grid; gap: 14px; }
  .panel > .glass, .panel .beat__work > .glass, .panel .failure__grid > .glass, .panel.glass { padding: 22px 20px; }
  .stage::after { background: linear-gradient(0deg, rgba(3, 6, 9, 0.3) 0, rgba(3, 6, 9, 0) 30%); }
  .stage-tag { top: calc(var(--nav-vis) + 8px); right: 12px; }
  .stage-tag__name { display: none; }
  body.tag-covered .stage-tag { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ================================================================ hero */
.hero { align-items: flex-end; padding: calc(var(--nav-h) + var(--vpad)) 0 max(40px, 8vh); }
.hero__wrap { display: grid; gap: 40px; }
.hero__copy { max-width: 54rem; }
.hero__title { font-size: clamp(2.4rem, min(1.2rem + 4.2vw, 0.45rem + 10.4vh), 6.25rem); margin-bottom: clamp(14px, 3.2vh, 28px); }
.hero__eyebrow { margin-bottom: clamp(10px, 2.2vh, 18px); }
.hero__foot { display: grid; gap: clamp(22px, 4.4vh, 40px); margin-top: clamp(18px, 3.6vh, 30px); }
.hero__foot .hero__actions { margin-top: 0; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: block; transform: translateY(105%); transition: transform 1400ms var(--ease); }
.hero__title .line:nth-child(2) > span { transition-delay: 160ms; }
.is-loaded .hero__title .line > span, .reduce-motion .hero__title .line > span { transform: none; }
.reduce-motion .hero__title .line > span { transition: none; }
.hero .hero__eyebrow, .hero .hero__lede, .hero .hero__actions, .hero .hero__facts { opacity: 0; transition: opacity 1200ms var(--ease) 500ms; }
.is-loaded .hero .hero__eyebrow, .is-loaded .hero .hero__lede, .is-loaded .hero .hero__actions, .is-loaded .hero .hero__facts { opacity: 1; }
/* Without scripts the story must still read. These only take effect if scripts have not run after a moment. */
.no-js .hero__title .line > span { animation: fh-unshift 0.8s var(--ease) 2.2s forwards; }
.no-js .hero__eyebrow, .no-js .hero__lede, .no-js .hero__actions, .no-js .hero__facts { animation: fh-show 0.8s var(--ease) 2.2s forwards; }
@keyframes fh-unshift { to { transform: none; } }
@keyframes fh-show { to { opacity: 1; } }
.hero__lede { max-width: 30em; color: rgba(241, 238, 232, 0.88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.arrow--down { display: inline-block; }
.btn:hover .arrow--down { transform: translateY(2px); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 3vw, 44px); margin: 0; max-width: 60rem; }
.hero__facts dt { font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.hero__facts dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.hero__facts-key dd { color: var(--brass-hi); }
@media (min-width: 1100px) {
  .hero__copy { max-width: min(70rem, 66vw); }
  .hero__lede { max-width: 36em; }
  .hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 48px; }
}
@media (max-width: 880px) {
  .hero { min-height: 0; display: block; }
  .hero::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 12, 18, 0.9) 0, rgba(7, 12, 18, 0.62) 24%, rgba(7, 12, 18, 0) 38%, rgba(7, 12, 18, 0) 50%, rgba(7, 12, 18, 0.82) 64%, rgba(7, 12, 18, 0.96) 100%);
  }
  .hero__wrap { position: relative; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 170px; gap: 30px; }
  /* The promise starts below the scene tag; the first screen is measured from there. */
  .hero__copy { position: relative; min-height: calc(100svh - var(--nav-h) - 56px - 24px); display: flex; flex-direction: column; }
  .hero__eyebrow { margin-bottom: 10px; }
  .hero__title { font-size: clamp(2.2rem, min(9.6vw, 6.4vh), 3.9rem); margin-bottom: auto; padding-bottom: 18px; }
  .hero__lede { font-size: 1.02rem; line-height: 1.55; margin: 0; }
  .hero__foot { margin-top: 18px; display: block; }
  .hero__facts { position: absolute; left: 0; right: 0; top: calc(100% + 26px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .hero__facts-key { grid-column: 1 / -1; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* ================================================================ what */
.contrasts { list-style: none; padding: 0; margin: 30px 0 0; }
.contrasts li { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2.1rem); line-height: 1.2; padding: 14px 0; font-weight: 600; letter-spacing: -0.025em; }
.contrasts li + li { border-top: 1px solid var(--line); }
.contrasts em { color: var(--muted); }

/* ================================================================ founding */
.chapter--founding { display: block; }
.founding, .seal-moment { min-height: 100vh; display: flex; align-items: center; padding: 6vh 0; }
.seal-moment { min-height: 90vh; }
@media (max-width: 880px) { .founding, .seal-moment { min-height: 0; display: block; padding: 0; } .seal-moment { padding-top: 42vh; } }












@media (max-width: 640px) { .deed__law { grid-template-columns: 1fr; gap: 12px; } }
.seal-moment__stamp { width: 112px; height: 112px; color: var(--brass); margin-bottom: 24px; }
.seal-moment__stamp svg { width: 100%; height: 100%; }
.seal-moment__stamp[data-reveal] { opacity: 0; transform: scale(1.4) rotate(-12deg); transition: opacity 500ms var(--ease), transform 700ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.seal-moment__stamp[data-reveal].is-in { opacity: 1; transform: none; }









/* ================================================================ argument */
.debate { margin: 30px 0 20px; padding: 0; }

.debate__turns { list-style: none; margin: 0; padding: 0; }
.turn { display: grid; grid-template-columns: 5.4rem 1fr; grid-template-areas: 'who stance' 'who text'; column-gap: 16px; padding: 12px 0; }
.turn + .turn { border-top: 1px solid var(--line); }
.turn__who { grid-area: who; font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.turn__stance { grid-area: stance; font-size: var(--fs-label); color: var(--faint); }
.turn p { grid-area: text; margin: 2px 0 0; color: var(--paper); font-size: 0.97rem; line-height: 1.5; }
.turn--vote .turn__who, .turn--vote .turn__stance { color: var(--brass-hi); }
.turn--vote p { color: var(--muted); }




/* ================================================================ door */
.request { margin: 0; padding: clamp(20px, 3.2vh, 28px) clamp(22px, 2.2vw, 30px); }
.request__from { font-size: var(--fs-label); color: var(--brass-hi); font-weight: 500; margin: 0 0 8px; }
.request__title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 10px; font-weight: 600; letter-spacing: -0.02em; }
.request__title strong { font-weight: 600; }
.request__reason { margin: 0 0 6px; color: var(--paper); font-size: 0.97rem; }
.request__terms { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }
.request__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.request.is-decided .request__actions { display: none; }
.perspective { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.perspective[hidden] { display: none; }
.perspective__k { font-size: var(--fs-label); color: var(--faint); font-weight: 500; margin: 0 0 4px; }
.perspective__v { margin: 0; font-size: 0.97rem; }
.perspective__next { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.9rem; }
.perspective__reset { grid-column: 1 / -1; justify-self: start; border: 0; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0; }
.perspective__reset:hover { color: var(--paper); }
.weather__line { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 600; }
.weather__line em { color: var(--muted); }
@media (max-width: 520px) { .perspective { grid-template-columns: 1fr; } }

/* ================================================================ time */
.chapter--time { display: block; padding: 0; min-height: 0; }
.time__intro { min-height: 90vh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 6vh); }
.time__track { position: relative; height: calc(7 * 80vh); }
.time__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.time__wrap { width: 100%; }
.timecard {
  position: relative; width: min(44rem, 100%); padding: 24px 30px 22px;
}
.timecard__clock { margin: 0; display: grid; align-content: start; color: var(--paper); pointer-events: none; }
.timecard__clock-k { font-size: 0.95rem; color: var(--faint); font-weight: 500; }
.timecard__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.timecard .stop .h3 { font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); }
.timecard .stop p { font-size: 1.02rem; line-height: 1.5; }
.timecard .bonds { margin-top: 2px; font-size: 0.93rem; color: var(--faint); }
.timecard__clock [data-clock-day] { font-size: clamp(3.4rem, 2.4rem + 3vw, 5.4rem); line-height: 0.92; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; min-width: 2.1ch; }
/* the dial: a thin line with a mark for each day, its number above and its name below */
.dial { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 0 22px; }
.dial__rail { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 27px; height: 1px; background: rgba(236, 230, 217, 0.16); }
.dial__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--brass); transition: width 600ms var(--ease); }
.dial__stop { position: relative; display: grid; justify-items: center; gap: 0; background: transparent; border: 0; padding: 0 0 4px; cursor: pointer; color: var(--faint); min-height: 44px; }
.dial__day { display: block; height: 22px; font-size: var(--fs-label); font-weight: 500; font-variant-numeric: tabular-nums; transition: color var(--dur-2); }
.dial__stop::before { content: ''; width: 1px; height: 11px; margin: 0 0 6px; background: rgba(236, 230, 217, 0.28); transition: background-color var(--dur-2), height var(--dur-2) var(--ease); }
.dial__name { font-size: var(--fs-micro); white-space: nowrap; transition: color var(--dur-2); }
.dial__stop:hover { color: var(--paper); }
.dial__stop.is-past::before { background: var(--brass); }
.dial__stop[aria-current='step'] { color: var(--paper); }
.dial__stop[aria-current='step']::before { background: var(--brass-hi); width: 3px; border-radius: 2px; }
.dial__stop[aria-current='step'] .dial__day { color: var(--brass-hi); }
.stops { min-height: 9rem; }
.stop[hidden] { display: none; }
.stop { animation: stop-in 700ms var(--ease); }
.reduce-motion .stop { animation: none; }
@keyframes stop-in { from { opacity: 0; transform: translateY(10px); } }
.stop .h3 { margin-bottom: 0.35em; }
.stop p { color: var(--muted); margin-bottom: 10px; }
.stop__aside { color: var(--paper) !important; font-size: var(--fs-small); }
.bonds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; font-size: var(--fs-small); color: var(--faint); }
.glance { display: grid; grid-template-columns: repeat(5, auto); gap: 8px 18px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); justify-content: space-between; }
.glance dt { font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.glance dd { margin: 2px 0 0; font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.glance dd.is-changed { color: var(--brass-hi); }
@media (max-width: 880px) {
  .time__intro { min-height: 0; display: block; padding: 42vh 0 6vh; }
  .time__track { height: calc(7 * 70vh); }
  .time__sticky { align-items: flex-end; padding-bottom: 14px; }
  .timecard { padding: 16px 16px 14px; }
  .timecard__clock [data-clock-day] { font-size: 3rem; }
  .timecard__body { gap: 16px; }
  .dial__name { display: none; }
  .stops { min-height: 11rem; }
  .stop p { font-size: 0.92rem; margin-bottom: 6px; }
  .glance { grid-template-columns: repeat(3, auto); }
  .glance div:nth-child(4) { display: none; }
}

/* ================================================================ failure */
.failure__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 30px; }
.tomb {
  text-align: center; padding: 34px 26px 22px; border-radius: 140px 140px 22px 22px; --glass-tint: rgba(16, 22, 28, 0.38);
}
.tomb__here { font-size: var(--fs-label); color: var(--faint); margin: 0; }
.tomb__name { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 600; margin: 2px 0 0; line-height: 1; letter-spacing: -0.035em; }
.tomb__what { color: var(--muted); margin: 6px 0 16px; font-size: 0.95rem; }
.tomb__rows { text-align: left; margin: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.tomb__rows dt { font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.tomb__rows dd { margin: 0; font-size: 0.93rem; color: var(--paper); }
.failure__text .h3 { margin-top: 28px; }
.forecast { margin-top: 16px; display: grid; gap: 8px; max-width: 30rem; }
.forecast__claim { margin: 0; font-size: 1.05rem; font-weight: 500; }
.forecast__k { font-size: var(--fs-label); color: var(--faint); font-weight: 400; margin-left: 6px; }
.forecast__meter { position: relative; height: 4px; border-radius: 2px; background: rgba(236, 230, 217, 0.1); overflow: hidden; }
.forecast__meter span { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--muted); }
.forecast__row { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); color: var(--muted); }
.forecast__res { color: var(--paper); font-weight: 500; }
@media (max-width: 1080px) { .failure__grid { grid-template-columns: 1fr; } .tomb { max-width: 26rem; } }

/* ================================================================ chronicle */
.chronicle { margin: 0; padding: clamp(22px, 3.6vh, 34px) clamp(24px, 2.6vw, 38px) clamp(18px, 3vh, 28px); }
.chronicle__kicker { color: var(--faint); font-size: var(--fs-label); font-weight: 500; margin: 0 0 6px; }
.chronicle__title { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.25rem); font-weight: 600; margin: 0 0 14px; letter-spacing: -0.03em; }
.chronicle__text { font-size: clamp(1.08rem, 0.98rem + 0.35vw, 1.26rem); line-height: 1.6; color: var(--paper); margin: 0 0 20px; letter-spacing: -0.012em; }
/* a source mark: a small raised number, no ring */
.fn {
  display: inline-block; min-width: 1.1em; margin: 0 1px 0 2px; padding: 0 2px; vertical-align: 0.45em; line-height: 1;
  border: 0; border-radius: 3px; background: transparent; color: var(--brass-hi); font-size: 0.62em; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background-color var(--dur-1), color var(--dur-1);
}
.fn:hover, .fn[aria-expanded='true'] { background: rgba(200, 162, 74, 0.2); color: #fff; }
.chronicle__notes { list-style: none; counter-reset: fn; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.chronicle__notes li { counter-increment: fn; display: grid; grid-template-columns: 1.2rem 5.6rem 1fr; gap: 6px; font-size: 0.86rem; color: var(--muted); padding: 4px 6px; border-radius: var(--radius); transition: background-color var(--dur-2), color var(--dur-2); }
.chronicle__notes li::before { content: counter(fn); color: var(--faint); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chronicle__notes li .mono { color: var(--faint); font-size: 0.8rem; }
.chronicle__notes li.is-active { background: rgba(236, 230, 217, 0.07); color: var(--paper); }
/* phones: each note reads as one line of text (its words are a bare text node, so a grid would squeeze them) */
@media (max-width: 560px) { .chronicle__notes li { display: block; } .chronicle__notes li::before { margin-right: 8px; } .chronicle__notes li .mono { margin-right: 8px; } }

/* ================================================================ what they made */
.chapter--made { display: block; padding: 0; min-height: 0; }
.made__lead, .made__threads { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 8vh) 0 10vh; }
.made__lead > .wrap, .made__threads > .wrap { width: 100%; }






.made__lead .stop__aside { margin: 0 0 18px; }

.walls__link { margin: 0; }
.beat__more { margin-top: 10px; }
@media (max-width: 880px) { .made__lead, .made__threads { min-height: 0; display: block; padding: 42vh 0 6vh; } }

/* Soundings, shown before it's used: the moment the colony corrected itself */
.made__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.made__note { margin: 0; max-width: 22em; font-size: var(--fs-small); color: var(--faint); line-height: 1.45; }
.turn-about { margin: 0; }
.turn-about__cap { font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 24px; }
.turn-about__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.turn-about__side { padding: 2px 30px 2px 0; }
.turn-about__side--now { padding: 2px 0 2px 30px; border-left: 1px solid var(--line-strong); }
.turn-about__when { font-size: var(--fs-small); color: var(--faint); font-weight: 500; margin: 0 0 10px; }
.turn-about__lead { margin: 0 0 10px; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--paper); }
.turn-about__lead span { display: block; margin-top: 6px; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); }
.turn-about__side:not(.turn-about__side--now) .turn-about__lead { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(226, 115, 92, 0.7); }
.turn-about__side:not(.turn-about__side--now) .turn-about__lead span { text-decoration: none; display: block; }
.turn-about__why { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.turn-about__side--now .turn-about__why { color: var(--paper); }
.turn-about__end { margin: 26px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--muted); max-width: 34em; }
@media (max-width: 640px) {
  .turn-about__pair { grid-template-columns: 1fr; gap: 18px; }
  .turn-about__side { padding: 0; }
  .turn-about__side--now { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
}
@media (min-width: 1100px) {
  .panel.beat--made { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); width: min(80rem, 74vw); }
}

/* still open */
.threads__title { font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3.2rem); }
.threads { list-style: none; margin: 24px 0 22px; padding: 0; }
.thread { padding: 13px 0 12px; }
.thread + .thread { border-top: 1px solid var(--line); }
.thread__k { display: block; font-size: var(--fs-label); color: var(--faint); font-weight: 500; margin-bottom: 2px; }
.thread.is-waiting .thread__k { color: var(--brass-hi); }
.thread__t { font-weight: 600; font-size: 1.12rem; margin: 0 0 2px; line-height: 1.25; letter-spacing: -0.015em; }
.thread p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.threads__end { font-size: clamp(1.2rem, 0.98rem + 0.8vw, 1.65rem); line-height: 1.3; margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--muted); }

/* ================================================================ mornings */
.chapter--mornings { display: block; padding-top: calc(var(--nav-h) + 10vh); }
.mornings__head { max-width: 46rem; margin-bottom: 40px; }
.app {
  max-width: 1120px; overflow: hidden; padding: 0;
}
.app__bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.app__lights { display: flex; gap: 7px; }
.app__lights i { width: 11px; height: 11px; border-radius: 50%; background: rgba(236, 230, 217, 0.12); }
.app__title { flex: 1; text-align: center; font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
.app__body { display: grid; grid-template-columns: 220px 1fr; min-height: 470px; }
.app__side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); }
.app__side [role='tab'] {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  min-height: 38px; padding: 0 12px; border-radius: var(--radius); border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 0.92rem;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.app__side [role='tab']:hover { color: var(--paper); }
.app__side [role='tab'][aria-selected='true'] { background: rgba(236, 230, 217, 0.08); color: var(--paper); font-weight: 500; }
.app__badge { font-size: 0.75rem; font-weight: 600; min-width: 20px; padding: 1px 6px; border-radius: var(--radius); background: var(--brass); color: #120d03; text-align: center; font-variant-numeric: tabular-nums; }
.app__estate { margin: auto 0 0; padding: 12px; font-size: var(--fs-label); color: var(--faint); }
.app__main { padding: 22px 28px; min-width: 0; }
.pane:focus-visible { outline-offset: 6px; }
.pane__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; }
.pane__head h3 { font-weight: 600; font-size: 1.35rem; margin: 0; letter-spacing: -0.02em; }
.pane__head p { margin: 0; color: var(--faint); font-size: var(--fs-label); }
.pane__foot { margin: 14px 0 0; font-size: var(--fs-small); color: var(--faint); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.feed p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.feed strong { color: var(--paper); font-weight: 500; }
.feed__when { color: var(--faint); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.feed__req strong { color: var(--brass-hi); }
.roster, .chapters, .doorlist, .receipts { list-style: none; margin: 0; padding: 0; }
.roster li, .chapters li { padding: 12px 0; border-top: 1px solid var(--line); }
.roster p, .chapters p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.roster__name, .chapters__t { font-size: 1.05rem; color: var(--paper) !important; font-weight: 600; }
.roster__name span { font-size: var(--fs-label); color: var(--faint); font-weight: 400; margin-left: 8px; }
.balance { font-size: 2.6rem; margin: 4px 0 10px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.receipts li { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.receipts li span:first-child { color: var(--faint); font-size: var(--fs-label); }
.doorlist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.doorlist__scope { color: var(--faint); font-size: var(--fs-label); margin-left: 6px; }
.mornings__note { margin-top: 14px; }
@media (max-width: 880px) {
  .chapter--mornings { padding-top: 40vh; }
  .mornings__head { padding: 22px 18px; }
  .app__body { grid-template-columns: 1fr; }
  .app__side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; scrollbar-width: none; }
  .app__side [role='tab'] { flex: none; }
  .app__estate { display: none; }
  .app__main { padding: 16px; }
  .feed li { grid-template-columns: 1fr; gap: 2px; }
}

/* ================================================================ steward */
.desk { margin: 30px 0 30px; background: rgba(10, 16, 23, 0.84); border-radius: var(--radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; }






.desk__k { margin: 0; font-size: var(--fs-label); color: var(--faint); font-weight: 500; }

.desk__out { padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.desk__out p { margin: 0; }
.desk__them { margin-top: 4px !important; color: var(--muted); }
.desk__them .desk__k { display: inline; margin-right: 8px; }
/* switches: the label, then the switch; the whole row is the control */
.switches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: 28px; }
.switches--compact { grid-template-columns: 1fr; }
[role='switch'] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0; text-align: left;
  border: 0; background: transparent; cursor: pointer; font-size: 0.95rem; color: var(--muted); transition: color var(--dur-1);
}
[role='switch']:hover, [role='switch'][aria-checked='true'] { color: var(--paper); }
.switch { position: relative; width: 36px; height: 20px; border-radius: 10px; background: rgba(236, 230, 217, 0.16); flex: none; transition: background-color var(--dur-2) var(--ease); }
.switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform var(--dur-2) var(--ease); }
[role='switch'][aria-checked='true'] .switch { background: var(--brass); }
[role='switch'][aria-checked='true'] .switch::after { transform: translateX(16px); }






.steward__why { font-size: clamp(1.2rem, 0.98rem + 0.65vw, 1.5rem); line-height: 1.4; max-width: 32em; font-weight: 500; letter-spacing: -0.015em; color: var(--paper); }

/* ================================================================ walls */
.walls { list-style: none; margin: 30px 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.walls li { padding: 16px 0 14px; border-top: 1px solid var(--line); }
.walls h3 { font-weight: 600; font-size: 1.1rem; margin: 0 0 3px; line-height: 1.25; letter-spacing: -0.015em; }
.walls p { margin: 0; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 720px) { .walls { grid-template-columns: 1fr; } }

/* ================================================================ world */
.chapter--world { display: block; padding: 0; min-height: 0; }
.world__atlas, .world__gallery { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--vpad) + 20px) 0 var(--vpad); }
.world__atlas > .wrap, .world__gallery > .wrap { width: 100%; }
@media (max-width: 880px) { .world__atlas, .world__gallery { min-height: 0; display: block; padding: 42vh 0 6vh; } }
.earned { margin: 0; max-width: 34rem; }
.earned__k { margin: 0 0 6px; font-size: var(--fs-label); font-weight: 500; color: var(--faint); }
.earned__t { font-weight: 600; font-size: clamp(1.25rem, 0.92rem + 1.2vh, 1.6rem); line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.02em; }
.earned p { color: var(--muted); font-size: 0.95rem; margin: 0 0 10px; }
.earned .earned__note { color: var(--faint); font-size: var(--fs-small); }

/* other charters: one Estate at a time, each traced like Soundings */
.gallery__title { font-size: clamp(1.9rem, min(1.2rem + 2.1vw, 0.7rem + 4.8vh), 3.3rem); }
.estates { display: grid; margin: 18px 0 12px; }
.estates [role='tab'] {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 46px; padding: 8px 0 8px 16px; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); transition: color var(--dur-1);
}
.estates [role='tab']::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--brass-hi); transform: translateY(-50%); transition: height var(--dur-2) var(--ease); }
.estates [role='tab']:hover { color: var(--paper); }
.estates [role='tab'][aria-selected='true'] { color: var(--paper); }
.estates [role='tab'][aria-selected='true']::before { height: 22px; }
.estates__n { font-size: 1.1rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.estates__k { font-size: var(--fs-label); color: var(--faint); }
.gallery__note { margin-top: 10px; }
.estory { animation: pane-in 500ms var(--ease); }
.reduce-motion .estory { animation: none; }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } }
.estory:focus-visible { outline-offset: 6px; }
.estory__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 14px; }
.estory__head p { margin: 0; }
.estory__name { font-size: 1.6rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.estory__motto { color: var(--muted); }
.estory__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 26px; align-items: start; }
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { padding: 10px 0; }
.chain li:first-child { padding-top: 0; }
.chain li + li { border-top: 1px solid var(--line); }
.chain__k { display: block; color: var(--faint); font-size: var(--fs-label); font-weight: 500; }
.chain p { margin: 2px 0 0; font-size: 0.93rem; color: var(--paper); line-height: 1.45; }
.estory__open { margin: 16px 0 0; font-size: 0.93rem; color: var(--muted); }
.estory__open span { color: var(--paper); font-weight: 500; margin-right: 8px; }
/* the thing each Estate made: its one surface */
/* the artifact is a page the Estate made: a light sheet set into its pane, not a second pane */
.artifact { margin: 0; padding: 16px 18px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.artifact__k { margin: 0 0 6px; color: var(--faint); font-size: var(--fs-label); }
.artifact__t { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.artifact__rows { list-style: none; margin: 0; padding: 0; }
.artifact__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.artifact__rows b { color: var(--paper); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.artifact__rows li.is-marked b { color: var(--faint); }
.artifact__q { margin: 4px 0 2px; font-weight: 500; font-size: 0.93rem; }
.artifact__a { margin: 0 0 10px; font-size: 0.9rem; color: var(--muted); }
.artifact__q--gone s { color: var(--faint); text-decoration-color: rgba(236, 230, 217, 0.5); }
.artifact__a--gone { color: var(--faint); }
.artifact__cap { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
@media (max-width: 1020px) { .estory__body { grid-template-columns: 1fr; } }

/* ================================================================ yours */
.draft { margin-top: 30px; padding: 22px 24px; background: rgba(10, 16, 23, 0.84); border-radius: var(--radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; gap: 20px; }

.draft__clear { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: var(--fs-small); }
.draft__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.draft__set { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.draft__set legend { font-size: var(--fs-small); font-weight: 500; padding: 0; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; width: 100%; }
.draft__set .hint, .field__hint { font-size: var(--fs-label); color: var(--faint); font-weight: 400; margin: 0; }
.draft__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.draft__list .field { position: relative; }
.draft__list .count { position: absolute; right: 12px; top: 15px; pointer-events: none; }
.draft__list .input { padding-right: 84px; }
.draft__funds { font-weight: 600; font-variant-numeric: tabular-nums; }
.ctabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ctabs [role='tab'] {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 0.93rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ctabs [role='tab']:hover { color: var(--paper); }
.ctabs [role='tab'][aria-selected='true'] { color: var(--paper); border-bottom-color: var(--brass-hi); font-weight: 500; }
.ctabs [role='tab'].has-error { color: var(--ember); }
.cpane { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px; }
.cpane[hidden] { display: none; }
.cpane .field--full { grid-column: 1 / -1; }
.ctabs__actions { display: flex; gap: 22px; }
.ctabs__actions .text-link { background-color: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: var(--fs-small); }
.ctabs__actions .text-link:hover { color: var(--paper); }
.ctabs__actions .text-link[disabled] { opacity: 0.4; cursor: not-allowed; }
.draft__seal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sealed { margin: 0; padding: 34px 28px 26px; text-align: center; }
.sealed:focus { outline: none; }
.sealed__stamp { width: 120px; height: 120px; margin: 0 auto 18px; color: var(--brass); }
.sealed__stamp svg { width: 100%; height: 100%; }
.sealed.is-stamping .sealed__stamp { animation: stamp 900ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-18deg); } 55% { opacity: 1; transform: scale(0.94) rotate(2deg); } 100% { transform: none; } }
.reduce-motion .sealed.is-stamping .sealed__stamp { animation: none; }
.sealed .h3 { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); margin-bottom: 4px; }
.sealed__motto { color: var(--muted); }
.sealed__citizens { list-style: none; padding: 0; margin: 16px auto 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 1.05rem; font-weight: 600; }

.sealed .body { margin: 0 auto 20px; }
.sealed__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sealed .footnote { margin: 0 auto; }
@media (max-width: 720px) {
  .draft { padding: 16px; }
  .draft__grid, .draft__list, .cpane { grid-template-columns: 1fr; }
}

/* ================================================================ begin */
.chapter--begin { min-height: 100vh; }
.begin { max-width: 46rem; }
.begin__title { font-size: clamp(2.5rem, 1.35rem + 3.4vw, 5rem); margin-bottom: 24px; }
.begin__facts { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 3vw, 48px); margin: 44px 0 0; }
.begin__facts dt { font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.begin__facts dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 880px) {
  .begin { padding: 26px 20px; }
  .begin__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}

/* ================================================================ Soundings: one workbench, one screen
 * A single product surface sized to the window. What you're looking at (its history and the cancer),
 * what you can do (choose, compare, add a finding) and what changed (the leads and their evidence) stay
 * in view together. Two panes side by side on wide windows; one at a time, behind tabs, on phones.
 * ============================================================================================== */
.ptool { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 3.2vh, 32px) clamp(16px, 2.8vw, 40px) clamp(18px, 3vh, 30px); }
.ptool:focus { outline: none; }
.workspace .scroll-region { overflow: visible; }
.workspace .sleads__wrap, .workspace .pout__scroll { flex: none; }
.stool__head { flex: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 28px; }
.stool__id { flex: 1 1 22rem; min-width: 0; }
.stool__title { font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.4vh, 2.2rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 4px; }
.stool__sub { margin: 0; color: var(--muted); font-size: 1.05rem; }
.stool__note { flex: none; margin: 8px 0 0; max-width: 22rem; font-size: var(--fs-label); font-weight: 500; color: var(--faint); }
/* its history: a segmented control of four named stages */
.pver { flex: none; border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.pver__legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.pver__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--radius); background: rgba(236, 230, 217, 0.06); max-width: 46rem; }
.pver__opt {
  position: relative; display: grid; justify-items: center; gap: 0; padding: 9px 8px; border-radius: 4px; cursor: pointer; text-align: center;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.pver__opt:hover { background: rgba(236, 230, 217, 0.06); }
.pver__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pver__s { font-size: 1rem; font-weight: 500; color: var(--muted); line-height: 1.25; }
.pver__d { font-size: var(--fs-micro); color: var(--faint); }
.pver__opt:has(input:checked) { background: var(--paper); }
.pver__opt:has(input:checked) .pver__s { color: var(--ink); font-weight: 600; }
.pver__opt:has(input:checked) .pver__d { color: #4c4a45; }
.pver__opt:has(input:focus-visible) { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.pver__change { flex: none; margin: 14px 0 20px; color: var(--muted); font-size: 1.02rem; line-height: 1.5; max-width: 52rem; min-height: 3em; }
.pver__change b { color: var(--paper); font-weight: 600; }

/* views: tabs appear only where the two panes can't sit side by side */
.ptool__tabs { flex: none; display: none; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.ptool__tabs [role='tab'] {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 42px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 0.95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.ptool__tabs [role='tab'][aria-selected='true'] { color: var(--paper); border-bottom-color: var(--brass-hi); font-weight: 500; }
.ptool__tab-k { font-size: var(--fs-label); color: var(--faint); font-weight: 400; }

.ptool__panes { flex: 1 1 auto; min-height: 0; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: 16px; border-top: 1px solid var(--line); }
.ppane { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.pin__samples { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 12px; }
.pin__label { font-size: var(--fs-label); color: var(--faint); font-weight: 500; margin-right: 6px; }
.chip {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius); border: 0; background: transparent; color: var(--muted);
  font-size: 0.97rem; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1);
}
.chip:hover { color: var(--paper); background: rgba(236, 230, 217, 0.06); }
.chip[aria-pressed='true'] { background: rgba(236, 230, 217, 0.12); color: var(--paper); font-weight: 500; }
.pin__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pin__status { margin: 0; color: var(--faint); font-size: var(--fs-small); flex: 1 1 100%; }
.pout__scroll { flex: 1 1 auto; min-height: 0; padding: 0 8px 4px 0; margin-right: -8px; }
.sleads__wrap { flex: 1 1 auto; min-height: 0; padding: 0 8px 4px 0; margin-right: -8px; }
.sleads { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sleads__k { margin: 16px 0 4px; color: var(--faint); font-size: var(--fs-label); font-weight: 500; }
.sleads--un .slead__name { color: var(--muted); }
.slead {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; padding: 10px 10px 11px 8px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--paper); transition: background-color var(--dur-1);
}
.slead:hover { background: rgba(236, 230, 217, 0.04); }
.slead.is-on { background: rgba(236, 230, 217, 0.08); }
.slead__n { color: var(--faint); font-size: var(--fs-small); font-weight: 500; padding-top: 1px; font-variant-numeric: tabular-nums; }
.slead.is-on .slead__n { color: var(--brass-hi); }
.slead__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 7px; align-items: baseline; min-width: 0; }
.slead__name { font-size: 1.1rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.slead__use { font-size: var(--fs-small); color: var(--faint); font-weight: 400; letter-spacing: 0; }
.slead__val { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.slead__val--promising { color: var(--brass-hi); font-weight: 500; }
.slead__val--closer, .slead__val--early { color: var(--paper); }
.slead__val--mixed, .slead__val--thin, .slead__val--none, .slead__val--against { color: var(--faint); }
.slead .sbar { grid-column: 1 / -1; }
/* the bar: how much weight each kind of evidence carries — one hue, stronger evidence brighter, patterns for the weakest */
.sbar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; min-width: 6px; gap: 1px; transition: width 600ms var(--ease); }
.reduce-motion .sbar { transition: none; }
.sbar__seg { display: block; min-width: 3px; height: 100%; }
.sbar__seg--count { background: rgba(236, 228, 212, 0.5); }
.sbar__seg--trial { background: var(--brass-hi); }
.sbar__seg--records { background: rgba(227, 199, 126, 0.62); }
.sbar__seg--animal { background: rgba(227, 199, 126, 0.34); }
.sbar__seg--cell { background: repeating-linear-gradient(90deg, rgba(236, 228, 212, 0.4) 0 2px, transparent 2px 4px); }
.sbar__seg--neg { background: repeating-linear-gradient(90deg, rgba(226, 115, 92, 0.75) 0 2px, transparent 2px 4px); }
.slegend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: var(--fs-label); color: var(--faint); }
.slegend span { display: inline-flex; align-items: center; gap: 6px; }
.slegend i { width: 14px; height: 4px; border-radius: 2px; }
.srefuse { margin: 0 0 12px; padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
.srefuse p { margin: 0 0 6px; font-size: 1rem; color: var(--muted); }
.srefuse p:last-child { margin: 0; }
.srefuse strong { color: var(--paper); font-weight: 500; }
.srefuse__t { font-size: 1.3rem !important; line-height: 1.3; color: var(--paper) !important; font-weight: 600; letter-spacing: -0.015em; }
.stable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.stable th, .stable td { text-align: left; vertical-align: top; padding: 8px 8px; border-bottom: 1px solid var(--line); color: var(--muted); }
.stable thead th { font-size: var(--fs-label); color: var(--faint); font-weight: 500; }
.stable tbody th { font-weight: 400; }
.stable tr.is-on td, .stable tr.is-on th { background: rgba(236, 230, 217, 0.06); }
.stable__pick { border: 0; background: none; padding: 0; color: var(--paper); font-size: 0.97rem; cursor: pointer; text-align: left; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(236, 230, 217, 0.3); text-underline-offset: 0.2em; }
.sadd { flex: 1 1 auto; }
.sadd[open] { flex-basis: 100%; }
.sadd summary { cursor: pointer; font-size: 0.97rem; color: var(--paper); padding: 6px 0; list-style-position: inside; }
.sadd summary:hover { color: #fff; }
.sadd__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 0 4px; }
.sadd__f { display: grid; gap: 3px; font-size: var(--fs-label); color: var(--faint); }
.sadd__f .input { min-height: 36px; padding: 5px 8px; font-size: 0.88rem; }
.sadd__go { grid-column: 1 / -1; display: flex; gap: 6px; }
@media (max-width: 640px) { .sadd__form { grid-template-columns: 1fr; } }
.pactions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pactions .btn--quiet, .sadd__go .btn--quiet { min-height: 32px; padding: 0 12px; font-size: 0.86rem; }
.ptoggle[aria-pressed='true'] { background: rgba(236, 230, 217, 0.16); color: var(--paper); }
.pflash { position: absolute; right: 28px; top: 22px; padding: 6px 12px; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: var(--fs-label); font-weight: 600; opacity: 0; pointer-events: none; }
.pflash.is-on { animation: pflash 1.8s var(--ease); }
@keyframes pflash { 0% { opacity: 0; transform: translateY(6px); } 12%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* the evidence for one lead */
.sdetail { animation: sheet-in-soft 420ms var(--ease); }
.reduce-motion .sdetail { animation: none; }
@keyframes sheet-in-soft { from { opacity: 0; transform: translateY(6px); } }
.sdetail__k { margin: 0 0 4px; color: var(--faint); font-size: var(--fs-label); font-weight: 500; }
.sdetail__t { margin: 0 0 12px; font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); line-height: 1.1; letter-spacing: -0.03em; }
.sdetail__use { display: block; margin-top: 4px; font-weight: 400; font-size: 0.93rem; color: var(--muted); letter-spacing: 0; }
.sdetail__tier { margin: 0 0 8px; font-size: 1.02rem; color: var(--muted); }
.sdetail__tier b { color: var(--paper); font-weight: 600; }
.sdetail__tier--promising b { color: var(--brass-hi); }
.sdetail__why { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.5; color: var(--paper); }
.sdetail__next { margin: 0 0 16px; font-size: 1rem; color: var(--muted); }
.sstudies { list-style: none; margin: 0; padding: 0; }
.sstudy { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.4; }
.sstudy__lv { grid-row: span 3; color: var(--faint); font-size: var(--fs-small); padding-top: 1px; }
.sstudy__t { color: var(--paper); }
.sstudy__m { font-size: var(--fs-small); color: var(--faint); }
.sstudy__m--worse { color: var(--muted); }
.sstudy__flag { font-size: var(--fs-small); color: #d9917f; }
.sstudy__flag--mine { color: var(--brass-hi); }
.sstudy.is-aside .sstudy__t { text-decoration: line-through; text-decoration-color: rgba(236, 230, 217, 0.45); color: var(--muted); }
.sdetail__foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--faint); }
.paside { margin-top: 18px; }
.paside__t { margin: 0 0 6px; font-size: 1rem; color: var(--muted); }
.paside__t strong { color: var(--paper); font-weight: 600; }
.paside__cats { list-style: none; margin: 0 0 8px; padding: 0; }
.paside__cats li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.97rem; color: var(--muted); }
.paside__cats b { color: var(--faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.paside__note { margin: 8px 0 0; font-size: var(--fs-small); color: var(--faint); line-height: 1.5; }

/* one pane at a time on phones and narrow tablets */
@media (max-width: 1020px) {
  .ptool__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ptool__panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding-top: 0; border-top: 0; }
  .ppane { display: none; grid-row: 1; grid-column: 1; }
  .ptool[data-tab='leads'] .ppane--page, .ptool[data-tab='evidence'] .ppane--card { display: flex; }
}
@media (max-width: 880px) {
  .stool__note { display: none; }
  .pver { margin-top: 12px; }
  .pver__s { font-size: 0.82rem; }
  .pver__change { font-size: 0.88rem; margin: 10px 0 12px; }
  .pflash { right: 14px; top: 14px; }
}
/* Phones (and short landscape phones): the workbench grows with its content instead of scrolling inside
   itself, so a thumb only ever scrolls the page; the view tabs stay pinned while you read. */
@media (max-width: 560px), (max-width: 1020px) and (max-height: 600px) {
  .ptool__panes { flex: none; grid-template-rows: auto; }
  .ptool .scroll-region { overflow: visible; max-height: none; }
  .ptool .sleads__wrap, .ptool .pout__scroll { flex: none; }
  .ptool__tabs { position: sticky; top: 0; z-index: 3; background: var(--ws-bg); margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .pver__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pver__d { display: none; }
  .stool__title { font-size: 1.6rem; }
}

/* ================================================================ wide windows: spread each beat
 * From 1100px wide, a beat lays its copy and its work side by side, so the context, the thing you read
 * or use, and its result share one screen at any height. The scene keeps the space the panel leaves free
 * (story.js measures it and reframes the camera).
 * ============================================================================================== */
@media (min-width: 1100px) {
  main .wrap { max-width: none; padding-left: clamp(24px, 3.4vw, 80px); padding-right: clamp(24px, 3.4vw, 80px); }
  .beat__lead > :last-child, .beat__work > :last-child { margin-bottom: 0; }
  .panel.beat {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 3.4vw, 72px);
    align-items: center; width: min(73.75rem, 66vw); max-width: none;
  }
  .panel--right.beat { margin-left: auto; margin-right: clamp(112px, 8.5vw, 170px); }
  .hero__wrap { padding-right: 0; }
  .stage-tag__name { display: none; }
  body[data-side='right'] .stage-tag { right: auto; left: 16px; }
  .beat .eyebrow { margin-bottom: 12px; }
  .beat .h2 { margin-bottom: 0.4em; }
  .beat .lede { margin-bottom: 0.7em; }
  .beat .body p { margin-bottom: 0.8em; }

  .contrasts { margin: 0; }
  .contrasts li { font-size: clamp(1.25rem, 0.7rem + 2.3vh, 1.85rem); padding: 12px 0; }










  .seal-moment { min-height: 100svh; }


  .debate { margin: 0 0 14px; }
  .turn { padding: 9px 0; }
  .turn p { font-size: 0.93rem; }
  .request { margin: 0 0 22px; padding: 20px 22px; }
  .request__title { font-size: 1.35rem; }
  .weather__line { font-size: clamp(1.35rem, 0.8rem + 2.2vh, 2rem); margin-bottom: 6px; }
  .weather .body { font-size: 0.95rem; }

  /* time: the card turns landscape — dial across the top, the day's story beside the Estate's numbers */
  .time__intro { min-height: 100svh; padding: var(--vpad) 0; }
  .timecard { width: min(46rem, 100%); padding: 22px 30px 20px; }
  .stops { min-height: 0; }
  .glance { grid-template-columns: 1fr; margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line); gap: 6px; }
  .glance div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .glance dd { font-size: 1.05rem; margin: 0; }

  /* failure: lead, tombstone and the prediction it overturned, in one row */
  .panel.beat--failure { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.6fr); width: min(78.75rem, 72vw); }
  .beat--failure .failure__grid { margin-top: 0; gap: 30px; align-items: center; }
  .tomb { padding: 22px 22px 16px; border-radius: 96px 96px var(--radius) var(--radius); }
  .tomb__name { font-size: clamp(1.9rem, 1.2rem + 2vh, 2.5rem); }
  .tomb__what { margin: 4px 0 12px; }
  .tomb__rows { gap: 8px; padding-top: 12px; }
  .tomb__rows dd { font-size: 0.88rem; }
  .failure__text .h3 { margin-top: 0; }
  .failure__text .body p { font-size: 0.95rem; }

  .panel.beat--chronicle { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); width: min(82.5rem, 78vw); }
  .chronicle { margin-top: 0; padding: 22px 26px 18px; }
  .chronicle__title { margin-bottom: 10px; }
  .chronicle__text { font-size: clamp(1rem, 0.7rem + 1.1vh, 1.2rem); margin-bottom: 14px; }
  .chronicle__notes { grid-template-columns: 1fr 1fr; column-gap: 16px; padding-top: 10px; }
  .chronicle__notes li { grid-template-columns: 1rem 5rem 1fr; font-size: 0.82rem; padding: 3px 6px; }

  .made__lead, .made__threads { padding: var(--vpad) 0; }



  .threads { margin: 0; }
  .thread { padding: 11px 0 10px; }
  .threads__end { margin-top: 18px; }

  /* mornings: the app preview beside its explanation, sized to the window, its panes scrolling inside */
  .chapter--mornings { padding: var(--vpad) 0; display: flex; align-items: center; }
  .mornings__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.5fr); gap: clamp(28px, 3.4vw, 64px); align-items: center; margin-right: 70px; }
  .mornings__head { margin: 0; }
  .app__body { min-height: 0; height: clamp(320px, calc(100svh - 2 * var(--vpad) - 44px), 520px); }
  .app__main { overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; }

  /* steward: the desk next to the Estate it changes; what is and isn't yours follows as its own beat */
  .chapter--steward { display: block; }
  .beat--steward { grid-template-areas: 'lead work' 'more more'; grid-template-rows: minmax(calc(100svh - 2 * var(--vpad) - 20px), auto) auto; row-gap: var(--vpad); }
  .beat--steward > .beat__lead { grid-area: lead; }
  .beat--steward > .beat__work { grid-area: work; }
  .beat--steward > .beat__more { grid-area: more; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }

  .beat--steward .steward__why { margin: 0; align-self: center; }
  .desk { margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'head head' 'treas run' 'doors doors' 'limit limit' 'out out'; }





  .desk__out { grid-area: out; }





  .walls { margin: 0; }
  .walls li { padding: 12px 0 11px; }
  .walls h3 { font-size: 1.05rem; }
  .walls p { font-size: 0.9rem; }

  .world__atlas, .world__gallery { padding: var(--vpad) 0; }
  .earned { margin: 0; }
  .panel.beat--gallery { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); width: min(82.5rem, 82vw); }
  .estates { margin: 12px 0 8px; }
  .estates [role='tab'] { min-height: 42px; }
  .estory__head { margin-bottom: 10px; }
  .chain li { padding: 8px 0; }
  .chain p { font-size: 0.9rem; }
  .estory__open { margin-top: 12px; }

  /* yours: the charter draft in columns — its law beside its citizens, what it starts with along the foot */
  .panel.beat--yours { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); width: min(70rem, 66vw); }
  .draft { margin-top: 0; padding: 16px 22px 18px; gap: 12px; }
  .draft__cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px 26px; }
  .draft__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
  .draft__col--start { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 12px; border-top: 1px solid var(--line); }
  .draft__col--start .draft__grid--start > .field:first-child { flex: 0 1 13rem; }
  .draft__seal { margin-left: auto; }
  .draft__grid { gap: 10px; }
  .draft__grid--start { display: contents; }
  .draft__col--charter .draft__grid { grid-template-columns: 1fr; }
  .draft__set legend { margin-bottom: 4px; }
  .draft__list { grid-template-columns: 1fr; gap: 6px; }
  .draft .field { gap: 4px; }
  .draft .field__msg { font-size: var(--fs-label); }
  .draft .input { min-height: 38px; padding: 7px 12px; font-size: 0.93rem; }
  .draft textarea.input { min-height: 38px; height: 38px; resize: none; overflow: hidden; }
  .draft__list .count { top: 11px; }
  .ctabs [role='tab'] { min-height: 34px; padding: 0 10px; font-size: 0.9rem; }
  .cpane { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .cpane .field--full { grid-column: auto; }
  .ctabs__actions { gap: 18px; }
  .switches--compact { grid-template-columns: repeat(3, max-content); column-gap: 26px; }
  .switches--compact [role='switch'] { min-height: 36px; font-size: 0.9rem; white-space: nowrap; gap: 10px; }
  .draft__seal { flex-wrap: nowrap; }
  .sealed { margin-top: 0; padding: 24px 24px 20px; }
  .sealed__stamp { width: 96px; height: 96px; margin-bottom: 10px; }

  .begin__facts { margin-top: 28px; }
}

/* short, wide windows: the densest beats tighten a little more */
@media (min-width: 1100px) and (max-height: 820px) {
  .turn { padding: 7px 0; grid-template-columns: 4.8rem 1fr; }
  .turn__who { font-size: 0.97rem; }
  .turn p { font-size: 0.88rem; line-height: 1.42; margin-top: 1px; }

  .chronicle__text { line-height: 1.5; }
  .chronicle__notes li { font-size: 0.78rem; padding: 2px 6px; }
  .chronicle__title { font-size: clamp(1.4rem, 0.8rem + 2vh, 2rem); }
  .beat--gallery .estates { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .beat--gallery .estates [role='tab'] { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 6px 0 6px 14px; }
  .beat--gallery .body p { margin-bottom: 0.5em; }



  .pver { margin-top: 12px; }
  .pver__change { margin: 8px 0 12px; font-size: 0.9rem; min-height: 0; }
  .ptool__panes { padding-top: 12px; }
  .slead { padding: 7px 10px 8px 8px; }
  .sstudy { padding: 7px 0; }
}
@media (min-width: 1100px) and (max-height: 700px) { .pin__status { display: none; } .stool__sub { display: none; } }
@media (min-width: 881px) {
  /* the app preview carries its own label; the scene behind it is dimmed */
  body[data-shot='mornings'] .stage-tag { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* taller desktop windows: the same side-by-side beats, with more air */
@media (min-width: 1100px) and (min-height: 821px) {
  .panel.beat { column-gap: clamp(48px, 4.4vw, 96px); }
  .turn { padding: 11px 0; }
  .turn p { font-size: 0.97rem; }

  .chain li { padding: 10px 0; }
  .chain p { font-size: 0.93rem; }
}

/* ================================================================ presentation pieces
 * Each beat leads with its idea and one composed thing to look at or try; detail waits behind "more". */
.beat__link { margin: 22px 0 0; }

/* the argument: the exchange that decided it */
.exchange { margin: 0; }
.exchange__q { margin: 0 0 24px; }
.exchange__q p { margin: 0; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); line-height: 1.24; font-weight: 500; letter-spacing: -0.025em; color: var(--paper); text-wrap: balance; }
.exchange__q footer { margin-top: 8px; font-size: 0.95rem; color: var(--faint); font-weight: 500; }
.exchange__q--reply { padding-left: clamp(28px, 4vw, 72px); }
.exchange__result { padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.02rem; line-height: 1.5; color: var(--muted); }
.exchange__result b { color: var(--paper); font-weight: 600; }
.exchange__aside { margin: 10px 0 0; font-size: 0.95rem; color: var(--faint); }
.more .debate__turns { margin-top: 8px; }

/* founding: the charter, read at a glance */
.charter { margin: 0; padding: clamp(24px, 3.4vh, 40px) clamp(24px, 3vw, 44px); text-align: center; }
.charter:not(.glass) { background: rgba(10, 16, 23, 0.84); border-radius: var(--radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.charter__k { margin: 0 0 10px; font-size: var(--fs-small); color: var(--faint); }
.charter__name { margin: 0; font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.charter__motto { margin: 12px auto 0; max-width: 24em; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); color: var(--muted); }
.charter__citizens { list-style: none; margin: 26px auto 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; max-width: 30rem; font-size: 1.02rem; color: var(--muted); }
.charter__citizens b { color: var(--paper); font-weight: 600; }
.charter__more { margin-top: 18px; }
.charter__law { margin: 10px 0 0; text-align: left; display: grid; gap: 10px; }
.charter__law div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.charter__law dt { font-size: var(--fs-small); color: var(--faint); }
.charter__law dd { margin: 0; font-size: 0.95rem; color: var(--paper); }

/* stewardship: the doors in your hand */
.keys { max-width: 32rem; }
.keys__k { margin: 0 0 8px; font-size: 0.95rem; color: var(--muted); }
.switches--keys { grid-template-columns: 1fr; column-gap: 0; }
.switches--keys li + li { border-top: 1px solid var(--line); }
.switches--keys [role='switch'] { min-height: 60px; font-size: 1.05rem; }
.switch__label { display: grid; gap: 1px; color: inherit; }
.switch__label small { font-size: var(--fs-small); color: var(--faint); font-weight: 400; }
.keys .desk__out { padding: 14px 0 0; border-top: 1px solid var(--line-strong); }
.keys .desk__out p { margin: 0; }

/* the steward's desk, in its sheet */
.desk-sheet { padding: 26px 28px 30px; }
.desk-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.desk-sheet__title { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; }
.desk-sheet__intro { margin: 0 0 8px; color: var(--muted); font-size: 0.97rem; }
.desk-sheet__group { padding: 18px 0 16px; border-top: 1px solid var(--line); }
.desk-sheet__group:first-of-type { margin-top: 14px; }
.desk-sheet__k { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 500; color: var(--faint); }
.desk-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.desk-sheet__big { margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.desk-sheet__label { display: flex; justify-content: space-between; margin: 16px 0 4px; font-size: 0.95rem; color: var(--paper); }
.desk-sheet__label span { font-weight: 600; font-variant-numeric: tabular-nums; }
.desk-sheet .range { max-width: none; }
.desk-sheet .desk__out { padding: 16px 0 0; border-top: 1px solid var(--line-strong); }
.desk-sheet .footnote { margin-top: 18px; }
@media (max-width: 560px) { .stool__id { flex: 1 1 0; } .stool__head { flex-wrap: nowrap; } }

/* your charter: invited on the page, written in a sheet beside your plot, sealed back on the page */
.yours__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.beat.is-sealed .yours__actions { display: none; }
.charter--draft { transition: opacity var(--dur-2); }
.charter--draft .charter__citizens:empty { display: none; }
.charter__motto.is-empty, .charter__empty { color: var(--faint); }
.charter__empty { margin: 26px auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 1rem; }
.charter--draft.is-blank .charter__name { color: var(--muted); }
.workspace--charter .workspace__panel { width: min(40rem, 100%); }
.charter-sheet { padding: 26px 28px 32px; }
.charter-sheet .draft { margin: 0; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 22px; }
.charter-sheet .draft__intro { margin: 0; color: var(--muted); font-size: 0.97rem; }
.charter-sheet .draft__intro .text-link { margin-left: 8px; }
.charter-sheet .draft__cols, .charter-sheet .draft__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.charter-sheet .draft__grid, .charter-sheet .draft__list { grid-template-columns: 1fr; gap: 12px; }
.charter-sheet .draft__col--start { display: grid; grid-template-columns: 1fr; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.charter-sheet .draft__grid--start { display: grid; }
.charter-sheet .draft .input { min-height: 44px; font-size: 1rem; }
.charter-sheet .draft textarea.input { height: auto; min-height: 64px; resize: vertical; }
.charter-sheet .cpane { grid-template-columns: 1fr 1fr; gap: 12px; }
.charter-sheet .cpane .field--full { grid-column: 1 / -1; }
.charter-sheet .switches--compact { grid-template-columns: 1fr; }
.charter-sheet .switches--compact [role='switch'] { min-height: 44px; font-size: 1rem; white-space: normal; }
.charter-sheet .switches--compact li + li { border-top: 1px solid var(--line); }
.charter-sheet .draft__seal { margin: 4px 0 0; flex-wrap: wrap; }
.charter-sheet .draft__seal .btn { min-width: 12rem; }
@media (max-width: 560px) { .charter-sheet .cpane { grid-template-columns: 1fr; } }

/* first light: the cast, side by side, as the Estate wakes behind them */
.cast { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.cast__one { padding-top: 16px; border-top: 1px solid var(--line-strong); }
.cast__one p { margin: 0; }
.cast__name { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.cast__doing { margin-top: 10px !important; font-size: 1rem; color: var(--paper); font-weight: 500; }
.cast__note { margin-top: 4px !important; font-size: 0.95rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 640px) { .cast { grid-template-columns: 1fr; gap: 0; } .cast__one { padding: 14px 0; } }
@media (min-width: 1100px) { .cast { margin: 0; } }

/* the app preview reads at a comfortable size */
.feed p, .roster p, .chapters p, .receipts li, .doorlist li { font-size: 1rem; }
.pane__head h3 { font-size: 1.5rem; }

/* ================================================================ glass chapters
 * No chapter puts a shade over the scene. The Estate is framed large and runs behind the words
 * (data-glass-frame on the block, data-glass-frame-wide for windows wider than 2.2:1), and each group of
 * words sits on a pane of its own (.glass, site.css), shaped to that group. */

/* the day, as a chapter mark */
.eyebrow--day { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; font-size: 0.95rem; }
.eyebrow__day { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
.eyebrow__day::after { content: ''; width: 30px; height: 1px; margin: 0 12px; background: linear-gradient(90deg, rgba(227, 199, 126, 0.9), rgba(227, 199, 126, 0.15)); }
.eyebrow__name { color: var(--muted); font-weight: 500; }

/* a pane around each group of words */
.beat > .glass { padding: clamp(18px, 3.4vh, 36px) clamp(22px, 2.3vw, 38px); }
.beat > .glass > :last-child, .beat > .glass .exchange__aside { margin-bottom: 0; }
.glass .h2 em { color: rgba(241, 238, 232, 0.62); }

/* hero: the title stands in the world; the promise and the way in sit on one pane; Leo's readout on another */
.hero__title { text-shadow: 0 1px 2px rgba(3, 6, 10, 0.35), 0 4px 40px rgba(3, 6, 10, 0.6); }
.hero__title em { color: rgba(241, 238, 232, 0.7); }
.hero__glass { margin-top: clamp(14px, 3vh, 30px); padding: clamp(18px, 3vh, 28px) clamp(22px, 2.2vw, 32px); width: fit-content; max-width: 42rem; }
.hero__glass .hero__lede { margin: 0; max-width: 36em; }
.hero__glass .hero__actions { margin-top: clamp(14px, 2.6vh, 24px); }
.hero__glass { opacity: 0; transition: opacity 1200ms var(--ease) 420ms; }
.is-loaded .hero__glass { opacity: 1; }
.no-js .hero__glass { animation: fh-show 0.8s var(--ease) 2.2s forwards; }
.hero__facts.glass { padding: 14px 6px; border-radius: 18px; gap: 0; flex-wrap: nowrap; width: fit-content; }
.hero__facts.glass > div { padding: 0 clamp(14px, 1.5vw, 24px); }
.hero__facts.glass > div + div { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.08); }
.hero__facts.glass dd { white-space: nowrap; }
.live-dot { position: relative; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 1px; border-radius: 50%; vertical-align: 0.14em; background: #3fd197; }
/* the pulse moves only transform and opacity, so it never repaints the glass it sits on */
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3fd197; animation: live-dot 2.6s ease-out infinite; will-change: transform, opacity; }
@keyframes live-dot { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(3); opacity: 0; } }
.reduce-motion .live-dot::after { animation: none; opacity: 0; }
.btn--glass { --b-bg: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.btn--glass:hover { --b-bg: rgba(255, 255, 255, 0.13); }
@media (min-width: 1100px) {
  .hero__facts.glass { position: absolute; right: clamp(96px, 7.5vw, 160px); bottom: max(40px, 8vh); }
}

/* the founding: the charter as a sealed document on glass */
.charter--deed { padding: clamp(26px, 4.4vh, 46px) clamp(28px, 3vw, 54px); --glass-tint: rgba(10, 14, 20, 0.4); }
.charter__frame { position: absolute; inset: 9px; border-radius: 15px; border: 1px solid rgba(227, 199, 126, 0.16); pointer-events: none; }
.charter--deed .charter__k { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(8px, 1.6vh, 14px); font-size: var(--fs-label); font-weight: 500; color: var(--faint); }
.charter--deed .charter__k::before, .charter--deed .charter__k::after { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(227, 199, 126, 0), rgba(227, 199, 126, 0.7)); }
.charter--deed .charter__k::after { transform: scaleX(-1); }
.charter--deed .charter__name {
  font-size: clamp(2.6rem, min(1.4rem + 2.8vw, 0.6rem + 7.4vh), 4.4rem); letter-spacing: -0.045em; padding-bottom: 0.04em;
  background: linear-gradient(180deg, #fffaf0 35%, #d8ccb2); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 14px rgba(3, 6, 10, 0.45));
}
.charter--deed .charter__motto { margin-top: clamp(8px, 1.6vh, 14px); color: var(--muted); }
.charter__citizens--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); max-width: none; margin-top: clamp(16px, 3vh, 28px); padding-top: clamp(14px, 2.6vh, 24px); border-top-color: rgba(255, 255, 255, 0.1); font-size: 0.92rem; line-height: 1.42; }
.charter__citizens--cols li { text-wrap: balance; }
.charter__citizens--cols b { display: block; margin-bottom: 4px; font-size: 1.08rem; letter-spacing: -0.01em; }
.charter--deed .charter__more { margin-top: clamp(12px, 2.4vh, 20px); }
.charter--deed .charter__law div { border-top-color: rgba(255, 255, 255, 0.09); }
@media (max-width: 640px) { .charter__citizens--cols { grid-template-columns: 1fr; gap: 12px; } }

/* the first argument: the exchange on its own pane, the vote as a tally */
.beat--argument .exchange__q p { text-indent: -0.4em; font-size: clamp(1.3rem, min(1rem + 1.1vw, 0.55rem + 3.1vh), 2rem); }
.exchange__q footer b { color: var(--paper); font-weight: 600; margin-right: 6px; }
.exchange__result { display: flex; align-items: baseline; gap: 14px; border-top-color: rgba(255, 255, 255, 0.1); }
.tally { flex: none; display: inline-flex; gap: 3px; transform: translateY(-3px); }
.tally i { width: 16px; height: 4px; border-radius: 2px; background: rgba(241, 238, 232, 0.2); }
.tally .tally__for { background: var(--brass-hi); box-shadow: 0 0 10px rgba(227, 199, 126, 0.45); }
.glass[data-reveal] .exchange__q, .glass[data-reveal] .exchange__result { opacity: 0; transform: translateY(10px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
.glass[data-reveal] .exchange__q--reply { transition-delay: 260ms; }
.glass[data-reveal] .exchange__result { transition-delay: 520ms; }
.glass.is-in .exchange__q, .glass.is-in .exchange__result, .no-js .glass .exchange__q, .no-js .glass .exchange__result { opacity: 1; transform: none; }
.glass.is-in .tally i { animation: tally-in 700ms var(--ease) both; }
.glass.is-in .tally i:nth-child(1) { animation-delay: 760ms; }
.glass.is-in .tally i:nth-child(2) { animation-delay: 900ms; }
.glass.is-in .tally i:nth-child(3) { animation-delay: 1040ms; }
@keyframes tally-in { from { transform: scaleX(0); opacity: 0; } }
.reduce-motion .glass .exchange__q, .reduce-motion .glass .exchange__result { transition: opacity 300ms linear; transform: none; }
.reduce-motion .glass .tally i { animation: none; }

/* phones: the panes stack over the scene's window, with no panel behind them */
@media (max-width: 880px) {
  .panel:has(> .glass) { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; display: grid; gap: 14px; }
  .beat > .glass { padding: 22px 20px; }
  .hero__glass { padding: 18px 18px 20px; }
  .hero__facts.glass { padding: 12px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; width: auto; }
  .hero__facts.glass > div + div { box-shadow: none; }
}
/* each pane names its chapter, so the rail keeps only its marks and the scene keeps its labels */
@media (min-width: 881px) { .rail a.is-active:not(:hover):not(:focus-visible) span { opacity: 0; } }

/* ---- every chapter, pane by pane */
.beat__work > .glass + .glass, .beat__work > .glass + [hidden] + .glass { margin-top: 14px; }
.beat__work .estory.glass { margin: 0; }
.panel.glass { max-width: 35rem; }
/* what it is: three contrasts, set like a statement */
.beat--what .contrasts { margin: 0; }
.beat--what .contrasts li:first-child { padding-top: 0; }
.beat--what .footnote { margin-top: 14px; }
/* the seal */
.seal-pane .seal-moment__stamp { width: clamp(84px, 13vh, 112px); height: clamp(84px, 13vh, 112px); margin-bottom: 18px; filter: drop-shadow(0 6px 22px rgba(200, 162, 74, 0.35)); }
/* first light: three citizens, each a column */
.beat--wake .cast { margin: 0; }
/* the door: a request waits on you, so its rim catches the brass */
.request.glass::before { background: linear-gradient(162deg, rgba(227, 199, 126, 0.75) 0%, rgba(227, 199, 126, 0.18) 22%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.04) 74%, rgba(227, 199, 126, 0.3) 100%); }
.request.glass { box-shadow: inset 0 1px 0 rgba(227, 199, 126, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.18), 0 30px 70px -34px rgba(0, 0, 0, 0.7), 0 0 60px -30px rgba(200, 162, 74, 0.45); }
.request.is-decided.glass::before { background: linear-gradient(162deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.04) 72%, rgba(190, 215, 255, 0.2) 100%); }
.weather .weather__line { margin-bottom: 8px; }
.weather .body { margin: 0; }
/* time */
.timecard.glass { --glass-tint: rgba(8, 14, 22, 0.42); }
/* failure: the tombstone is stone-tinted glass with an arched top. On an arch the rim is a plain border lit from
   above and there is no outer shadow: a masked rim or a drop shadow on unequal corners makes Chrome compile new
   GPU shaders the moment the stone first appears, which froze the page (70 ms warm, 13.5 s on a cold cache). */
.tomb.glass { border: 1px solid; border-color: rgba(255, 255, 255, 0.32) rgba(255, 255, 255, 0.13) rgba(190, 215, 255, 0.16); box-shadow: inset 0 -26px 40px -34px rgba(0, 0, 0, 0.55); }
.tomb.glass::before { display: none; }
.tomb.glass::after { background: radial-gradient(80% 40% at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%); }
.beat--failure .failure__grid { gap: 14px; align-items: stretch; }
.failure__text.glass .h3 { margin-top: 0; }
/* the chronicle: a page of history */
.chronicle.glass .chronicle__title { font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.5rem); }
/* what they made */
.turn-about.glass .turn-about__cap { margin-bottom: clamp(14px, 2.6vh, 24px); }
.turn-about.glass .turn-about__end { margin-top: clamp(14px, 2.6vh, 24px); }
/* still open */
.beat--threads .threads { margin: 0; }
.beat--threads .thread:first-child { padding-top: 0; }
/* mornings: the app is a deep pane, its sidebar a shade lighter */
.app.glass { border-radius: 18px; }
.app.glass .app__bar { background: rgba(255, 255, 255, 0.035); border-bottom-color: rgba(255, 255, 255, 0.08); }
.app.glass .app__side { background: rgba(255, 255, 255, 0.025); border-right-color: rgba(255, 255, 255, 0.08); }
.app.glass .feed li, .app.glass .roster li, .app.glass .chapters li, .app.glass .receipts li, .app.glass .doorlist li { border-top-color: rgba(255, 255, 255, 0.08); }
.mornings__head.glass { max-width: 46rem; margin-bottom: 20px; }
.mornings__head.glass .footnote { margin-top: 10px; }
/* stewardship */
.keys.glass { max-width: 32rem; }
.beat--steward > .beat__more.glass { align-self: start; }
.beat--steward .steward__why { margin: 0; }
/* the walls */
.beat--walls .walls { margin: 0; }
.beat--walls .walls li:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
/* the wider world */
.earned.glass { max-width: 34rem; }
.estory.glass .estory__head { margin-bottom: 12px; }
/* begin */
.begin.glass { max-width: 50rem; padding: clamp(26px, 4.4vh, 48px) clamp(26px, 3vw, 52px); }
.begin.glass .begin__facts { margin-top: clamp(22px, 4vh, 40px); padding-top: clamp(16px, 2.6vh, 24px); border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (max-width: 880px) {
  .beat--failure .failure__grid { gap: 14px; }
  .beat--walls .walls li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 16px; }
}

/* glass beats take a little more width: the panes carry their own padding */
@media (min-width: 1100px) {
  .panel.beat:not(.beat--deed):not(.beat--made):not(.beat--failure):not(.beat--chronicle):not(.beat--gallery):not(.beat--yours) { width: min(78rem, 72vw); grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .panel--right.beat { margin-right: clamp(64px, 5.5vw, 120px); }
}
/* laptop widths: the lead pane of the two widest chapters gets more room, so its headline doesn't stack five lines deep */
@media (min-width: 1100px) and (max-width: 1499px) {
  .panel.beat--made { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); width: min(80rem, 80vw); }
  .panel.beat--gallery { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); width: min(82.5rem, 86vw); }
}