/* Session Dial — a day drawn as a clock: deep indigo ground for the bar, dawn-to-dusk colour roles. */
@font-face { font-family: "Sora"; src: url(fonts/sora.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --night: #241f4f;
  --night-2: #3a3470;
  --ivory: #fbf7f2;
  --paper: #ffffff;
  --ink: #221d3d;
  --muted: #5a5574;
  --dawn: #f3b27a;
  --noon: #f0cf6b;
  --dusk: #8c6bb8;
  --dusk-ink: #5e4196;
  --post: #a9a6c4;
  --line: #e5ddd2;
  --sans: "Sora", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1.15rem/1.65 var(--serif); }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p, ul, ol, figure { margin: 0; }
a { color: var(--dusk-ink); text-underline-offset: 0.2em; }
a:focus-visible, summary:focus-visible, .scroll:focus-visible { outline: 3px solid var(--dusk-ink); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 5; font-family: var(--sans); }
.skip:focus { inset-block-start: 1rem; }

/* bar */
.bar { background: var(--night); color: #f1eefb; }
.bar-inner { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; }
.brand-mark { inline-size: 2.1rem; block-size: 2.1rem; }
.bm-face { fill: var(--night-2); stroke: #fff; stroke-width: 1.5; }
.bm-hand { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.bm-sun { fill: none; stroke: var(--dawn); stroke-width: 2.5; }
.brand-name { font: 650 1.3rem/1 var(--sans); }
.brand-sub { font: 400 0.95rem/1.2 var(--sans); color: #c8c3e6; display: none; }
@media (min-width: 36rem) { .brand-sub { display: inline; } }
.top-links { display: none; }
.top-links ul { list-style: none; padding: 0; display: flex; gap: 0.4rem; }
.top-links a { display: block; color: #f1eefb; text-decoration: none; font: 500 0.95rem/1 var(--sans); padding: 0.55rem 0.8rem; border-radius: 2rem; }
.top-links a[aria-current="page"] { background: linear-gradient(90deg, var(--dawn), var(--noon)); color: var(--night); }
@media (hover: hover) and (pointer: fine) { .top-links a:hover { background: var(--night-2); } .top-links a[aria-current="page"]:hover { background: linear-gradient(90deg, var(--dawn), var(--noon)); } }
.menu summary { list-style: none; cursor: pointer; font: 600 1rem/1 var(--sans); padding: 0.6rem 1rem; border-radius: 2rem; background: linear-gradient(90deg, var(--dawn), var(--noon)); color: var(--night); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] { flex-basis: 100%; }
.menu ul { list-style: none; padding: 0.6rem 0 0.2rem; display: grid; }
.menu a { display: block; color: #f1eefb; text-decoration: none; padding: 0.55rem 0; border-block-end: 1px solid var(--night-2); font: 500 1.05rem/1.3 var(--sans); }
.menu a[aria-current="page"] { color: var(--noon); }
.bar a:focus-visible, .bar summary:focus-visible { outline-color: var(--noon); }
@media (min-width: 64rem) { .top-links { display: block; } .menu { display: none; } }

/* layout */
main { max-width: 72rem; margin: 0 auto; padding: 2.2rem 1rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
.hero { display: grid; gap: 0.7rem; max-width: 46rem; }
.kicker { font: 600 0.95rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dusk-ink); }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); }
.lede { font-size: 1.25rem; color: var(--muted); }
.sec { display: grid; gap: 1rem; max-width: 50rem; }
.sec h2 { font-size: 1.6rem; }
.cap, .src-line, .dial-note { font: 400 0.95rem/1.5 var(--sans); color: var(--muted); }

/* day: dial + rail */
.day { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 64rem) { .day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .day-dial { position: sticky; inset-block-start: 1rem; } }
.day-dial { display: grid; gap: 1rem; justify-items: center; }
.dial { inline-size: 100%; max-inline-size: 30rem; block-size: auto; }
.face { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.sunarc { fill: none; stroke: #fbe7cf; stroke-width: 16; stroke-linecap: round; }
.tick { stroke: var(--muted); stroke-width: 1.5; }
.hr { font: 600 20px/1 var(--sans); fill: var(--muted); text-anchor: middle; }
.seg { fill: none; stroke-linecap: butt; }
.ring-cash { stroke-width: 18; }
.ring-fo { stroke-width: 12; }
.seg-pre { stroke: var(--dawn); }
.seg-cts { stroke: var(--noon); }
.seg-cas { stroke: var(--dusk); }
.seg-tr, .seg-post { stroke: var(--post); }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font: 400 0.95rem/1.4 var(--sans); justify-content: center; }
.legend li { display: flex; align-items: center; gap: 0.4rem; }
.sw { inline-size: 1.4rem; block-size: 0.8rem; border-radius: 1rem; }
.sw-pre { background: var(--dawn); } .sw-cts { background: var(--noon); } .sw-cas { background: var(--dusk); } .sw-post { background: var(--post); }
.dial-note { text-align: center; }
.day-rail { display: grid; gap: 1rem; }
.day-rail h2 { font-size: 1.6rem; }

.rail { list-style: none; padding: 0 0 0 1.6rem; position: relative; display: grid; gap: 0.9rem; }
.rail::before { content: ""; position: absolute; inset-block: 0.4rem; inset-inline-start: 0.45rem; inline-size: 4px; border-radius: 2px; background: linear-gradient(var(--dawn), var(--noon) 45%, var(--dusk) 80%, var(--night)); }
.rail li { position: relative; display: grid; gap: 0.15rem; }
.rail li::before { content: ""; position: absolute; inset-inline-start: -1.55rem; inset-block-start: 0.35rem; inline-size: 0.95rem; block-size: 0.95rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--night); }
.rail .r-pre::before { border-color: var(--dawn); } .rail .r-cts::before { border-color: #d6ad2d; } .rail .r-cas::before { border-color: var(--dusk); } .rail .r-tr::before, .rail .r-post::before { border-color: var(--post); }
.rail .seg-fo::before { border-style: dotted; }
.r-time { font: 650 1rem/1.3 var(--sans); color: var(--night); }
.r-name { font: 600 1.05rem/1.35 var(--sans); }
.r-seg { display: inline-block; font: 500 0.85rem/1.2 var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: 1rem; padding: 0.1rem 0.5rem; margin-inline-start: 0.3rem; }
.r-det { color: var(--muted); }
.log li { gap: 0.5rem; }
.next { padding-inline-start: 1.3rem; display: grid; gap: 0.5rem; }

/* quotes, notes, tables */
.q { background: var(--paper); border: 1px solid var(--line); border-inline-start: 4px solid var(--dusk); border-radius: 0 0.5rem 0.5rem 0; padding: 0.85rem 1.1rem; display: grid; gap: 0.4rem; }
.q blockquote { margin: 0; }
.q blockquote p { font-style: italic; font-size: 1.15rem; }
.q figcaption { font: 400 0.9rem/1.45 var(--sans); color: var(--muted); }
.note { background: linear-gradient(120deg, #fdf0e0, #f6eefc); border-radius: 0.6rem; padding: 0.95rem 1.15rem; display: grid; gap: 0.4rem; }
.note-h { font: 650 0.95rem/1.2 var(--sans); color: var(--dusk-ink); }
.scroll { overflow-x: auto; position: relative; }
table { border-collapse: collapse; inline-size: 100%; font: 400 0.98rem/1.45 var(--sans); background: var(--paper); }
th, td { text-align: start; vertical-align: top; padding: 0.55rem 0.7rem; border-block-end: 1px solid var(--line); }
thead th { border-block-end: 2px solid var(--night); font-weight: 650; }
tbody th { font-weight: 600; }
.auc { font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { table { font-size: 0.88rem; } th, td { padding: 0.45rem 0.3rem; } .auc { letter-spacing: -0.01em; } }
.auc td { text-align: end; }
.auc tr.eq { background: #fbe7cf; }
.auc tr.eq th::after { content: "equilibrium" / "(equilibrium)"; display: block; font-weight: 500; font-size: 0.85em; color: var(--dusk-ink); }
.book { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); font-family: var(--sans); }
.book > div { background: var(--paper); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.8rem 1rem; }
.book h3 { font-size: 1rem; margin-block-end: 0.3rem; }
.book ul { padding-inline-start: 1.1rem; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.src { padding-inline-start: 1.2rem; display: grid; gap: 0.6rem; font-family: var(--sans); font-size: 1rem; }

/* footer */
.foot { background: var(--night); color: #dcd8f2; }
.foot-inner { max-width: 72rem; margin: 0 auto; padding: 1.6rem 1rem 2rem; display: grid; gap: 0.6rem; font: 400 0.98rem/1.6 var(--sans); }
.foot a { color: #fff; }
.foot a:focus-visible { outline-color: var(--noon); }