/* Hallmark · checked: 2026-10-30 · genre: editorial (inferred)
 * floor: 0 FAIL · fixed: 26a, 34, 48, 54, 63, 67, 24b, 64, 29, 41, F1, F3, F5 · structural: 4 printed (44c, 58, 59, 77)
 * finish review: fix · 4 resolved (slashed zeros, hero columns, vitals scale, tagline) · 1 dismissed (375 capture: the sticky tab bar over a full-page shot)
 * added at the owner's request: the vitals block in the Now hero, SEO metadata, a static no-script intro
 * built: Claude Design port · redesign: polish · v2.0.0 */
/* Hallmark · dropped 02days, the nav ordinals 01 to 08 · 54 names an ordinal eyebrow, and each view name reads alone */
/* Karyasthan public site — ported from the Claude Design component (Karyasthan.dc.html).
   Tokens: :root = light; dark via the system (unless data-theme="light") or data-theme="dark". */
:root {
  --bg: #EDF0EE; --surface: #F7F9F8; --sunk: #E2E7E4; --ink: #15201E; --ink2: #3F4D4A; --ink3: #57645F;
  --rule: #C9D2CE; --rule2: #DAE1DD; --now: #E9A21A;
  --sleep: #5560A8; --work: #2B6A88; --way: #78817B; --meal: #5B8A30; --free: #A0628F; --out: #C8466E;
  --track: rgba(21,32,30,.09); --dialCenter: rgba(255,255,255,.5); --bar: #EDF0EE;
  --shadow: 0 24px 48px -28px rgba(21,32,30,.38);
  --focus: #15201E; --on-now: #1C1604;
  --night-ink: #EEF0FA; --night-ink2: #C6CAE2; --night-ink3: #A9AECB; --night-rule: rgba(255,255,255,.22); --night-rule2: rgba(255,255,255,.16);
  --night-track: rgba(255,255,255,.13); --night-center: rgba(8,10,28,.38); --night-surface: #232850; --night-star: #FFFFFF;
  --swatch-sunny: #F2CF6B; --swatch-fair: #A9D3E0; --swatch-cloudy: #B9C2C6; --swatch-grey: #9AA2A6; --swatch-stormy: #7E8B98; --swatch-night: #2B3160;
  --sky-sunny: linear-gradient(165deg,#F5E2AE 0%,#EAEFD8 48%,#CFE4EA 100%);
  --sky-fair: linear-gradient(165deg,#D3E8EF 0%,#E7F0EC 55%,#EFE8D3 100%);
  --sky-cloudy: linear-gradient(165deg,#D3DADD 0%,#E5E9E9 100%);
  --sky-grey: linear-gradient(165deg,#C6CDD0 0%,#DCE1E1 100%);
  --sky-stormy: linear-gradient(165deg,#B5BFC8 0%,#D2D8DC 100%);
  --sky-night: linear-gradient(165deg,#181E3D 0%,#272C52 60%,#36375B 100%);
  --sans: 'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  --serif: 'Newsreader',Georgia,serif;
  --mono: 'Spline Sans Mono',ui-monospace,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1416; --surface: #141D20; --sunk: #0A1012; --ink: #E3EBE7; --ink2: #B0BEB9; --ink3: #8E9D98;
    --rule: #2A383C; --rule2: #1F2B2F; --now: #F2B23A;
    --sleep: #9CA5F2; --work: #6DB1D3; --way: #98A19B; --meal: #A0C96E; --free: #D69FC7; --out: #F08AA8;
    --track: rgba(227,235,231,.09); --dialCenter: rgba(8,12,14,.42); --bar: #0D1416;
    --shadow: 0 24px 48px -28px rgba(0,0,0,.9); --focus: #E3EBE7;
    --sky-sunny: linear-gradient(165deg,#3A3320 0%,#1E292A 75%);
    --sky-fair: linear-gradient(165deg,#1C3137 0%,#162426 60%,#25261F 100%);
    --sky-cloudy: linear-gradient(165deg,#242D31 0%,#182023 100%);
    --sky-grey: linear-gradient(165deg,#20262A 0%,#161B1E 100%);
    --sky-stormy: linear-gradient(165deg,#262B37 0%,#181C24 100%);
    --sky-night: linear-gradient(165deg,#0F1430 0%,#1A1D3B 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1416; --surface: #141D20; --sunk: #0A1012; --ink: #E3EBE7; --ink2: #B0BEB9; --ink3: #8E9D98;
  --rule: #2A383C; --rule2: #1F2B2F; --now: #F2B23A;
  --sleep: #9CA5F2; --work: #6DB1D3; --way: #98A19B; --meal: #A0C96E; --free: #D69FC7; --out: #F08AA8;
  --track: rgba(227,235,231,.09); --dialCenter: rgba(8,12,14,.42); --bar: #0D1416;
  --shadow: 0 24px 48px -28px rgba(0,0,0,.9); --focus: #E3EBE7;
  --sky-sunny: linear-gradient(165deg,#3A3320 0%,#1E292A 75%);
  --sky-fair: linear-gradient(165deg,#1C3137 0%,#162426 60%,#25261F 100%);
  --sky-cloudy: linear-gradient(165deg,#242D31 0%,#182023 100%);
  --sky-grey: linear-gradient(165deg,#20262A 0%,#161B1E 100%);
  --sky-stormy: linear-gradient(165deg,#262B37 0%,#181C24 100%);
  --sky-night: linear-gradient(165deg,#0F1430 0%,#1A1D3B 100%);
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { background: var(--bg); overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.45; min-height: 100dvh; overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }
.ink2 { color: var(--ink2); text-wrap: pretty; }
.sample-tag { display: inline-block; margin-bottom: 4px; padding: 4px 8px; border-radius: 999px; border: 1px dashed var(--ink3); font: 600 13px/1.3 var(--sans); color: var(--ink); }

/* press feedback on every tappable thing; hover only for fine pointers */
.tap { transition: transform 120ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; touch-action: manipulation; }
.tap:active { transform: scale(0.97); }

@keyframes kDraw { to { stroke-dashoffset: 0; } }
@keyframes kSettle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kBreathe { 0%, 100% { transform: scale(1); opacity: .38; } 50% { transform: scale(1.9); opacity: 0; } }
@keyframes kDrift { from { transform: translate(var(--dx), var(--dy)); } to { transform: translate(0, 0); } }
@keyframes kRain { from { transform: translate(0, -24px); } to { transform: translate(-6px, 24px); } }

/* shared type */
.cap { font: 600 14px/1.3 var(--sans); color: var(--ink2); }
.cap-s { font: 600 14px/1.3 var(--sans); color: var(--ink2); }
.mono13 { font: 400 15px/1.45 var(--sans); color: var(--ink2); }
.mono12 { font: 400 14px/1.2 var(--sans); color: var(--ink2); }
.wordmark { font: 400 36px/1 var(--serif); letter-spacing: -0.015em; color: var(--ink); text-decoration: none; display: inline-block; }
.wordmark-side { font-size: 44px; }
.wordmark-xl { font-size: 48px; }
.tagline { margin: 8px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink2); text-wrap: pretty; }

/* ── offline ──────────────────────────────────────────────────────────── */
.offline { min-height: 100dvh; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 32px) max(24px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(24px, env(safe-area-inset-left)); }
.offline-in { max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.offline-in .tagline { margin-top: 12px; }
.hr { height: 1px; background: var(--rule); }
.offline-h { font: 400 30px/1.15 var(--serif); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.offline-line { font: 400 14px/1.5 var(--sans); color: var(--ink3); }

/* ── shell ────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.side { display: none; }
.col-main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: calc(env(safe-area-inset-top) + 24px) max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); }
.top-id { min-width: 0; }
.theme-btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; font: 400 14px/1 var(--sans); }
.theme-btn-top { flex: none; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; font-size: 12px; }
.theme-ico { width: 1em; height: 1em; flex: none; }
#main { flex: 1; display: flex; flex-direction: column; gap: 40px; padding: 4px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); max-width: 1000px; width: 100%; }
.view { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.view-msg { font: italic 400 20px/1.4 var(--serif); color: var(--ink2); padding: 24px 0; }
.foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 20px; font: 400 14px/1.5 var(--sans); color: var(--ink3); }
.foot span:empty { display: none; }

.stale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 16px 20px; border: 1px dashed var(--ink3); border-radius: 14px; }
.stale-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink2); }
.stale-line { font: 600 15px/1.4 var(--sans); color: var(--ink); }
.stale-note { grid-column: 2; font-size: 16px; color: var(--ink2); text-wrap: pretty; }

/* bottom tab bar (narrow) */
.tabbar-wrap { position: sticky; bottom: 0; z-index: 5; }
.more-sheet { margin: 0 12px 8px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.more-sheet a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 12px 16px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.more-sheet a[aria-current="page"] { background: var(--sunk); }
.more-sheet .lab { font: 400 22px/1 var(--serif); }
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--bar); border-top: 1px solid var(--rule); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tab { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink2); font: 400 14px/1 var(--sans); background: transparent; border: 0; padding: 0; cursor: pointer; }
.tab .mark { width: 20px; height: 2px; border-radius: 2px; background: transparent; }
.tab.is-on { color: var(--ink); }
.tab.is-on .mark { background: var(--ink); }

/* side (wide) */
.side-nav { display: flex; flex-direction: column; gap: 4px; margin: 0 -12px; }
.side-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.side-nav .lab { font: 400 21px/1.2 var(--serif); }
.side-nav a[aria-current="page"] { background: var(--sunk); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.side-foot .theme-btn { align-self: flex-start; }
.updated { font: 400 14px/1.5 var(--sans); color: var(--ink3); }

@media (min-width: 880px) {
  .shell { grid-template-columns: 264px minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 36px; padding: 40px 24px 28px max(40px, env(safe-area-inset-left)); border-right: 1px solid var(--rule); overflow-y: auto; }
  .side .tagline { margin-top: 12px; }
  .top, .tabbar-wrap { display: none; }
  #main { padding: 44px max(56px, env(safe-area-inset-right)) 56px 56px; }
}

/* ── shared blocks ────────────────────────────────────────────────────── */
.page-head { display: flex; flex-direction: column; gap: 12px; }
.h1 { font: 400 38px/1.05 var(--serif); letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.lede { max-width: 600px; color: var(--ink2); text-wrap: pretty; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.h2 { font: 400 30px/1.1 var(--serif); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.h2.dim { font-style: italic; color: var(--ink2); }
.empty { font: italic 400 19px/1.4 var(--serif); color: var(--ink2); }
.card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule2); }
.fig { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--sunk); }
.fig svg, .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.textlist { border-top: 1px solid var(--rule); padding-top: 4px; }
.textlist summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 400 15px/1 var(--sans); color: var(--ink2); }
@media (min-width: 880px) {
  .h1 { font-size: 52px; }
  .fig { padding: 24px; }
}

/* glyph + rows */
.g { flex: none; display: block; }
.rows { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rows.plan { border-top-style: dashed; }
.row { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule2); }
.rows.plan .row { border-bottom-style: dashed; opacity: .72; }
.rows.day .row { padding: 12px 0; }
.row time { font: 400 14px/22px var(--mono); color: var(--ink2); font-variant-numeric: tabular-nums; }
.row .gl { display: flex; height: 22px; align-items: center; }
.row .body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row .moment { font: italic 400 19px/1.35 var(--serif); text-wrap: pretty; }
.row .span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; line-height: 22px; text-wrap: pretty; }
.row .meta { font: 400 15px/1.45 var(--sans); color: var(--ink3); text-wrap: pretty; }
.row .meta:empty { display: none; }
.now-pill { font: 600 13px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--now); color: var(--on-now); }

/* ── today ────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--sky-fair); box-shadow: var(--shadow); color: var(--ink); }
.hero[data-sky="sunny"] { background: var(--sky-sunny); }
.hero[data-sky="cloudy"] { background: var(--sky-cloudy); }
.hero[data-sky="grey"] { background: var(--sky-grey); }
.hero[data-sky="stormy"] { background: var(--sky-stormy); }
.hero[data-sky="night"] {
  background: var(--sky-night);
  --ink: var(--night-ink); --ink2: var(--night-ink2); --ink3: var(--night-ink3); --rule2: var(--night-rule2); --rule: var(--night-rule);
  --track: var(--night-track); --dialCenter: var(--night-center); --surface: var(--night-surface); --focus: var(--night-ink);
}
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient .rain { animation: kRain 2.4s linear infinite; }
.hero-in { position: relative; display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center; padding: 24px 20px 28px; }
.hero-dial { flex: 1 1 240px; max-width: 300px; margin: 0 auto; }
.hero-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-txt { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero-head { display: flex; flex-direction: column; gap: 8px; }
.hero-label { font: 400 36px/1.04 var(--serif); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.hero-meta { color: var(--ink2); text-wrap: pretty; }
.readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--rule2); padding-top: 20px; }
.readout { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.readout dt { font: 600 14px/1.2 var(--sans); color: var(--ink2); }
.readout .big { display: flex; align-items: center; gap: 8px; font: 400 24px/1.1 var(--serif); }
.readout .small { font-size: 14px; color: var(--ink2); }
.readout .of { font-size: 15px; color: var(--ink2); }
.swatch { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rule); }
.swatch[data-sky="sunny"] { background: var(--swatch-sunny); } .swatch[data-sky="fair"] { background: var(--swatch-fair); }
.swatch[data-sky="cloudy"] { background: var(--swatch-cloudy); } .swatch[data-sky="grey"] { background: var(--swatch-grey); }
.swatch[data-sky="stormy"] { background: var(--swatch-stormy); } .swatch[data-sky="night"] { background: var(--swatch-night); }
.ebar { margin: 4px 0 0; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.ebar span { display: block; height: 100%; background: var(--ink); border-radius: 3px; transform-origin: left; }
.vitals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; border-top: 1px solid var(--rule2); padding-top: 16px; }
.vital { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; min-width: 0; }
.vital dt { font: 400 14px/1.2 var(--sans); color: var(--ink2); }
.vital .vv { font: 400 20px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.vital .vv small { font: 400 13px/1 var(--sans); color: var(--ink2); }
.vital .vb { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.vital .vb span { display: block; height: 100%; background: var(--ink); border-radius: 2px; transform-origin: left; }
.vital .vb span.hi { background: var(--ink2); }
.body { display: flex; flex-direction: column; gap: 8px; }
.body .vitals + .scale { font: 400 13px/1.4 var(--sans); color: var(--ink3); }
.tm { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .vitals, .readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: baseline; border-top: 1px solid var(--rule2); padding-top: 16px; }
.next .t { font: 500 15px/1 var(--mono); }
.hard { position: relative; padding: 16px 24px 20px; border-top: 1px solid var(--rule2); font: italic 400 20px/1.4 var(--serif); color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: -20px; padding: 0 4px; }
.legend span { display: flex; align-items: center; gap: 8px; font: 400 14px/1 var(--sans); color: var(--ink2); }
.since { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 0 20px; }
.since > .bar { background: var(--ink); border-radius: 2px; opacity: .85; }
.since > div { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.since .it { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.since .it time { font: 400 14px/1 var(--mono); color: var(--ink2); }
.since .it .l { font: 400 17px/1.4 var(--sans); text-wrap: pretty; }
.since .it .l.m { font: italic 400 18px/1.35 var(--serif); }
.since .more { font-size: 15px; color: var(--ink2); }
@media (min-width: 880px) {
  .hero { border-radius: 28px; }
  .hero-in { padding: 36px 40px 36px; }
  .hero-dial { max-width: 330px; }
  .hero-label { font-size: 46px; }
}

/* dial svg text */
.t-hour { font: 500 11px var(--mono); fill: var(--ink2); }
.t-clock { font-family: var(--serif); font-weight: 400; fill: var(--ink); letter-spacing: -0.01em; }
.t-sub { font: 400 13px var(--sans); fill: var(--ink2); }
.halo { transform-box: fill-box; transform-origin: center; animation: kBreathe 3.6s cubic-bezier(.4,0,.6,1) infinite; }

/* ── days ─────────────────────────────────────────────────────────────── */
.strip { display: grid; grid-template-columns: repeat(var(--n7, 7), minmax(0, 1fr)); gap: 16px 8px; }
.strip button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 8px; min-height: 48px; min-width: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.strip button.is-today { background: var(--sunk); }
.strip .ring { width: 100%; max-width: 64px; }
.strip .ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.strip .wd { font: 400 13px/1 var(--sans); color: var(--ink2); }
.strip .dn { font: 400 17px/1 var(--serif); }
@media (min-width: 880px) { .strip { grid-template-columns: repeat(var(--n14, 14), minmax(0, 1fr)); } }
.daylist { display: flex; flex-direction: column; }
.day { border-top: 1px solid var(--rule); scroll-margin-top: 12px; }
.day-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 12px; align-items: center; padding: 20px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.day-btn .ttl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.day-btn .tt { font: 400 24px/1.1 var(--serif); }
.day-btn .sm { font: 400 15px/1.4 var(--sans); color: var(--ink2); text-wrap: pretty; }
.day-btn .chev { justify-self: end; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font: 400 18px/1 var(--mono); color: var(--ink2); }
.day-btn .lb { grid-column: 1 / -1; display: block; }
.day-btn .lb svg { display: block; width: 100%; height: 10px; border-radius: 4px; background: var(--track); }
.day .rows { margin: 0 0 20px; border-top: 1px solid var(--rule2); }

/* ── story ────────────────────────────────────────────────────────────── */
.hard-card { padding: 20px 24px; border-radius: 16px; background: var(--sunk); color: var(--ink); font: italic 400 21px/1.4 var(--serif); }
.timeline { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.timeline svg { display: block; width: 100%; height: auto; overflow: visible; }
.timeline figcaption { font: 400 15px/1.45 var(--sans); color: var(--ink2); }
.t-ch { font: 400 16px var(--serif); fill: var(--ink); }
.t-ax { font: 400 12px var(--sans); fill: var(--ink2); }
.t-ax.b { font-weight: 500; fill: var(--ink); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.chapter { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; border-radius: 18px; background: transparent; border: 1px dashed var(--rule); }
.chapter.is-open { background: var(--surface); border-style: solid; }
.chapter .top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chapter .st { display: flex; align-items: center; gap: 8px; font: 400 14px/1 var(--sans); color: var(--ink2); }
.chapter .st i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink2); }
.chapter.is-open .st i { background: var(--ink2); }
.chapter .nm { display: flex; flex-direction: column; gap: 8px; }
.chapter h3 { font: 400 28px/1.1 var(--serif); text-wrap: balance; }
.chapter .when { font-size: 15px; color: var(--ink2); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 16px; }
.kv dt { font: 400 14px/22px var(--sans); color: var(--ink3); }
.beats { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.beats li { display: flex; flex-direction: column; gap: 4px; }
.beats .w, .pbeat .w { font: 400 14px/1.2 var(--sans); color: var(--ink3); }
.beats .x, .pbeat .x { font: italic 400 18px/1.35 var(--serif); text-wrap: pretty; }
.h2-prev { margin: 0 0 16px; font: italic 400 34px/1.1 var(--serif); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.recap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; padding: 24px 0; border-top: 1px solid var(--rule); }
.recap .wk { display: flex; flex-direction: column; gap: 8px; }
.recap .rg { font: 400 21px/1.2 var(--serif); }
.recap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recap li { display: grid; grid-template-columns: 18px minmax(0, 1fr); text-wrap: pretty; }
.recap li::before { content: "–"; color: var(--ink3); }
.recap-empty { padding: 24px 0; border-top: 1px solid var(--rule); font: italic 400 20px/1.4 var(--serif); color: var(--ink2); }
@media (min-width: 880px) { .recap, .friends-sec { grid-template-columns: 200px minmax(0, 1fr); } }

/* ── people ───────────────────────────────────────────────────────────── */
.textlist ol { margin: 0 0 8px; padding-left: 24px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.t-name { font-family: var(--serif); font-weight: 400; fill: var(--ink); }
.t-ring { font: 400 11px var(--sans); fill: var(--ink3); }
.t-him { font: 600 12px var(--sans); fill: var(--ink2); }
.t-leg { font: 400 12px var(--sans); fill: var(--ink2); }
.drift { animation: kDrift 1600ms cubic-bezier(.2,.7,.2,1) both; }
.grid-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.person header { display: flex; flex-direction: column; gap: 4px; }
.person h3 { font: 400 26px/1.1 var(--serif); }
.person .role { font: 400 15px/1.4 var(--sans); color: var(--ink2); }
.person .lately { font-size: 16px; text-wrap: pretty; }
.person .lately span { color: var(--ink2); }
.meters { display: flex; flex-direction: column; gap: 8px; }
.meter { display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px; gap: 12px; align-items: center; }
.meter .k { font: 400 14px/1 var(--sans); color: var(--ink2); }
.meter .v { font: 400 12px/1 var(--mono); text-align: right; }
.meter .tr { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.meter .tr span { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.meter .tr span.trust { background: var(--ink2); }
.meter .tr span.tension { background: repeating-linear-gradient(135deg, var(--ink2) 0 2px, transparent 2px 5px); }
.spark { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule2); }
.spark svg { display: block; width: 100%; height: 40px; overflow: visible; }
.spark .tw { font: 400 14px/1.4 var(--sans); color: var(--ink2); }
.pbeat { display: flex; flex-direction: column; gap: 4px; }
.friends-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.friends-sec > div { display: flex; flex-direction: column; gap: 8px; }
.friends-sec h2 { font: 400 26px/1.1 var(--serif); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.friends-sec .note { font-size: 16px; color: var(--ink2); text-wrap: pretty; }
.friends { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.friends li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; border: 1px solid var(--rule); }
.friends .n { font: 400 20px/1 var(--serif); }

/* ── city ─────────────────────────────────────────────────────────────── */
.city { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1180px) { .city { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.t-pin { font: 500 12px var(--mono); fill: var(--ink); }
.t-place { font: 400 13px var(--serif); fill: var(--ink); }
.places { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.place { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule2); }
.place .pn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font: 500 12px/1 var(--mono); }
.place .pn.off { border-style: dashed; border-color: var(--ink3); color: var(--ink2); }
.place .pm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.place .pk { display: flex; align-items: center; gap: 8px; font: 400 14px/1.2 var(--sans); color: var(--ink2); }
.place .pc { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.place .pc b { font: 400 14px/1 var(--mono); }
.place .pb { width: 64px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.place .pb span { display: block; height: 100%; background: var(--ink2); }

/* ── stats ────────────────────────────────────────────────────────────── */
.figures { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-top: 1px solid var(--rule); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 20px 16px 24px 0; border-bottom: 1px solid var(--rule2); }
.figures dt { font-size: 16px; color: var(--ink2); text-wrap: pretty; }
.figures dd { font: 400 64px/0.95 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.chart { display: flex; flex-direction: column; gap: 16px; }
.t-gl { font: 400 10px var(--mono); fill: var(--ink3); }
.t-val { font: 400 11px var(--mono); fill: var(--ink2); }
.t-day { font-family: var(--serif); font-weight: 400; fill: var(--ink); }
.t-avg { font: 500 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.rise { transform-box: fill-box; transform-origin: 50% 100%; }
.textlist ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 20px; font-size: 16px; }
.textlist.thin { border-top-color: var(--rule2); padding-top: 0; }
.grid-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.box { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule2); }
.box h2 { font: 400 26px/1.1 var(--serif); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.tallies { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; }
.tallies .k { font: 400 15px/1.2 var(--sans); color: var(--ink2); }
.tallies .v { display: flex; align-items: center; gap: 12px; }
.tallies .v b { font: 400 22px/1 var(--serif); }
.tallies .none { color: var(--ink3); }
.raincells { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.raincells span { aspect-ratio: 1 / 2; border-radius: 4px; border: 1px solid var(--rule); }
.raincells span.wet { background: repeating-linear-gradient(160deg, var(--work) 0 1.5px, transparent 1.5px 6px); }
.box .ln { font-size: 16px; color: var(--ink2); }

/* ── journal ──────────────────────────────────────────────────────────── */
.journal { display: flex; flex-direction: column; max-width: 660px; }
.entry { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 32px; border-top: 1px solid var(--rule); }
.entry .tx { font: 400 22px/1.55 var(--serif); text-wrap: pretty; white-space: pre-line; }
.entry .pub { font: 400 14px/1.2 var(--sans); color: var(--ink3); }
.blank { max-width: 520px; padding: 32px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.blank .b1 { font: italic 400 24px/1.35 var(--serif); }
.blank .b2 { color: var(--ink2); }

/* ── votes ────────────────────────────────────────────────────────────── */
.grid-votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.vote header { display: flex; flex-direction: column; gap: 8px; }
.vote h3 { font: 400 26px/1.15 var(--serif); text-wrap: balance; }
.vote .closes { font: 400 14px/1.4 var(--sans); color: var(--ink2); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--rule); background: transparent; color: var(--ink); text-align: left; font-size: 17px; cursor: pointer; }
.opt[aria-checked="true"] { border-color: var(--ink); background: var(--sunk); }
.opt:disabled { cursor: default; opacity: .6; }
.opt .rd { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; }
.opt .rd i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: 0; }
.opt[aria-checked="true"] .rd i { opacity: 1; }
.opt span:last-child { text-wrap: pretty; }
.submit { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 600; cursor: pointer; }
.submit:disabled { opacity: .4; cursor: default; }
.vnote { font-size: 15px; color: var(--ink2); text-wrap: pretty; }
.vnote:empty { display: none; }
.tally { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tally li { display: flex; flex-direction: column; gap: 8px; }
.tally .tl { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tally .tl span:first-child { text-wrap: pretty; }
.tally .tl.mine span:first-child { font-weight: 600; }
.tally .pct { flex: none; font: 400 13px/1 var(--mono); }
.tally .tb { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.tally .tb span { display: block; height: 100%; border-radius: 5px; background: var(--ink3); transform-origin: left; }
.tally .tb span.top { background: var(--ink); }
.tally .yp { font: 400 14px/1.2 var(--sans); color: var(--ink2); }
.vtotal { padding-top: 12px; border-top: 1px solid var(--rule2); font-size: 15px; color: var(--ink2); text-wrap: pretty; }
.human { display: flex; flex-direction: column; gap: 8px; }
.ts-slot { width: 300px; max-width: 100%; min-height: 65px; }
.ts-placeholder { width: 300px; max-width: 100%; height: 65px; border-radius: 8px; border: 1px dashed var(--ink3); display: grid; place-items: center; font: 400 14px/1.3 var(--sans); color: var(--ink2); text-align: center; padding: 0 12px; }
.human p { font-size: 14px; color: var(--ink2); }

/* ── hover (fine pointers only) ───────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .side-nav a:hover, .theme-btn:hover, .more-sheet a:hover, .strip button:hover { background: var(--sunk); }
  .opt:not(:disabled):hover { border-color: var(--ink2); }
  .day-btn:hover .chev { border-color: var(--ink2); color: var(--ink); }
  .tab:hover { color: var(--ink); }
  .textlist summary:hover { color: var(--ink); }
}

/* ── reduced motion: fewer and gentler ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .halo, .ambient .rain { animation: none; }
  .drift { animation: kFade 300ms ease-out both; }
  .tap { transition: none; }
}