/* ==========================================================================
   The Cosmic Week — illuminated-manuscript styling
   Day: parchment & iron-gall ink with vermilion rubrics.
   Night ("lamplight"): umber vellum with candle-lit ink and gold.
   ========================================================================== */
:root {
  color-scheme: light;
  --page: #ebdcbc;
  --surface: #f5ead3;
  --surface-2: #ecdfc1;
  --ink: #2b1d12;
  --ink-2: #5a4431;
  --muted: #86704f;
  --rule: #c7b089;
  --grid: #dfcda8;
  --axis: #b49c72;
  --border: rgba(74, 48, 22, 0.28);
  --rubric: #a8321f;
  --gold: #a9802a;
  --gold-hi: #e2c674;
  --gold-lo: #9a7225;
  --today: #a8321f;
  --lane-a: rgba(255, 251, 240, 0.30);
  --lane-b: rgba(120, 86, 40, 0.07);
  --p-a: #ddcaa1;
  --p-b: #ccb486;
  --shadow: rgba(70, 45, 15, 0.18);
  /* Pigments (validated: lapis, vermilion, verdigris, ochre, tyrian, sap green, madder) */
  --s1: #2f5596; --s2: #b8402e; --s3: #0f8a68; --s4: #b07d1c;
  --s5: #7a3b6e; --s6: #5f7f22; --s7: #c25a78; --s8: #b8402e;
  --bar-alpha: 0.30;
  --noise-opacity: 0.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #15100a; --surface: #211a13; --surface-2: #2b2219;
    --ink: #f0e3c7; --ink-2: #cdb88e; --muted: #9a8463;
    --rule: #4d3d29; --grid: #362a1d; --axis: #5c4932; --border: rgba(240, 227, 199, 0.16);
    --rubric: #e27a5d; --gold: #d4ae55; --gold-hi: #e9cd82; --gold-lo: #8f6a22; --today: #e27a5d;
    --lane-a: rgba(255, 240, 210, 0.015); --lane-b: rgba(255, 230, 190, 0.04);
    --p-a: #3b2f21; --p-b: #4d3e2b; --shadow: rgba(0, 0, 0, 0.45);
    --s1: #6a8bd4; --s2: #d9634a; --s3: #1f9c7c; --s4: #b98a26;
    --s5: #b46e9e; --s6: #7c9a3a; --s7: #cc6b8a; --s8: #d9634a;
    --bar-alpha: 0.46; --noise-opacity: 0.35;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #15100a; --surface: #211a13; --surface-2: #2b2219;
  --ink: #f0e3c7; --ink-2: #cdb88e; --muted: #9a8463;
  --rule: #4d3d29; --grid: #362a1d; --axis: #5c4932; --border: rgba(240, 227, 199, 0.16);
  --rubric: #e27a5d; --gold: #d4ae55; --gold-hi: #e9cd82; --gold-lo: #8f6a22; --today: #e27a5d;
  --lane-a: rgba(255, 240, 210, 0.015); --lane-b: rgba(255, 230, 190, 0.04);
  --p-a: #3b2f21; --p-b: #4d3e2b; --shadow: rgba(0, 0, 0, 0.45);
  --s1: #6a8bd4; --s2: #d9634a; --s3: #1f9c7c; --s4: #b98a26;
  --s5: #b46e9e; --s6: #7c9a3a; --s7: #cc6b8a; --s8: #d9634a;
  --bar-alpha: 0.46; --noise-opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Page & type
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--page);
  background-image:
    radial-gradient(ellipse at 50% 0%, transparent 40%, var(--shadow) 120%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.16 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--ink);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: oldstyle-nums;
  padding: 0 16px 40px;
}
/* Text sections keep a readable measure; the timeline uses the full window width. */
.page { margin: 0 auto; }
.masthead, .opening, .week, .lower, .colophon { max-width: 1560px; margin-left: auto; margin-right: auto; }
@media (min-width: 1800px) { body { padding-left: 28px; padding-right: 28px; } }
h1, h2 { margin: 0; font-weight: 600; }
p { margin: 0.45em 0; }
em { font-style: italic; }
.smallcaps { font-family: Cinzel, "EB Garamond", serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.rubric { color: var(--rubric); }
.muted { color: var(--ink-2); }

button, select {
  font: inherit; color: var(--ink);
  background: transparent; border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 10px; cursor: pointer;
}
button:hover { background: var(--surface-2); }
button:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }
button.link { border: 0; padding: 2px 6px; color: var(--rubric); font-style: italic; }
select { width: 100%; background: var(--surface); padding: 5px 8px; font-size: 16px; }

/* Folios: double-ruled leaves */
.folio {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--rule), 0 1px 12px var(--shadow);
  padding: 18px 22px;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead { position: relative; text-align: center; padding: 34px 0 6px; }
.masthead .orn { color: var(--rubric); font-size: 20px; line-height: 1; }
.masthead .menorah { display: block; width: 46px; height: 40px; margin: 0 auto; color: var(--gold); }
.masthead .menorah g { color: var(--rubric); } /* the flames */
.masthead h1 {
  font-family: Cinzel, serif; font-weight: 700; font-size: clamp(30px, 5vw, 54px);
  letter-spacing: 0.08em; margin-top: 6px; color: var(--ink);
}
.masthead h1::first-letter { color: var(--rubric); }
.subtitle { font-style: italic; color: var(--ink-2); font-size: 19px; margin: 4px 0 0; }
.rule-orn { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 14px auto 0; color: var(--gold); }
.rule-orn::before, .rule-orn::after { content: ""; flex: 1; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); height: 3px; }
.theme-toggle {
  position: absolute; right: 0; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; font-size: 18px; color: var(--gold);
}
.theme-toggle::before { content: "☾"; }
:root[data-theme="dark"] .theme-toggle::before { content: "☀"; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle::before { content: "☀"; } }

/* --------------------------------------------------------------------------
   Opening: the year and the reckonings
   -------------------------------------------------------------------------- */
.opening {
  display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr); gap: 20px 48px;
  align-items: center; margin: 22px auto 0; max-width: 1180px;
}
.reckoning { text-align: center; }
.year-figure {
  font-family: "EB Garamond", serif; font-weight: 500; font-size: clamp(76px, 12vw, 128px);
  line-height: 0.95; letter-spacing: 0.01em; color: var(--ink);
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 0 var(--surface);
}
.anno { font-family: Cinzel, serif; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.hebrew { font-family: "Frank Ruhl Libre", serif; font-size: 34px; color: var(--gold); margin-top: 6px; line-height: 1.2; }
.hero-meta { font-style: italic; color: var(--ink-2); font-size: 16px; }

.epigraph { margin: 0 0 14px; padding: 0 0 0 18px; border-left: 2px solid var(--rubric); }
.epigraph p { font-style: italic; font-size: 20px; line-height: 1.4; margin: 0; }
.epigraph cite { display: block; margin-top: 4px; font-style: normal; font-family: Cinzel, serif; font-size: 12px; letter-spacing: 0.12em; color: var(--rubric); }

/* Dotted-leader ledger (like a table of contents) */
.leaders { margin: 0; display: grid; gap: 6px; }
.leaders .row { display: flex; align-items: baseline; gap: 8px; }
.leaders dt { flex: none; }
.leaders .dots { flex: 1; border-bottom: 1px dotted var(--axis); transform: translateY(-5px); min-width: 20px; }
.leaders dd { margin: 0; flex: none; text-align: right; font-weight: 600; font-variant-numeric: lining-nums; }
.leaders dd small { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
.leaders dt { min-width: 0; }
@media (max-width: 600px) {
  .leaders .row { flex-wrap: wrap; column-gap: 8px; border-bottom: 1px dotted var(--axis); padding-bottom: 4px; }
  .leaders .dots { display: none; }
  .leaders dt { flex: 1 1 60%; }
  .leaders dd { margin-left: auto; }
  .leaders dd small { display: block; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   The seven days (arched panels)
   -------------------------------------------------------------------------- */
.week { margin-top: 30px; }
.week-days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.day {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 60px 60px 3px 3px;
  background: var(--surface); padding: 14px 8px 10px; text-align: center;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--rule);
  transition: transform 0.15s;
  min-height: 150px;
}
.day:hover { transform: translateY(-2px); }
.day.current { border-color: var(--rubric); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--rubric); }
.day.sabbath {
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  border-color: var(--gold-lo); color: #2b1d12;
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.25), inset 0 0 0 4px var(--gold-lo);
}
.day .numeral { font-family: Cinzel, serif; font-weight: 700; font-size: 26px; line-height: 1; color: var(--rubric); }
.day.sabbath .numeral { color: #4a2a0c; }
.day svg { width: 30px; height: 30px; margin: 6px auto 2px; display: block; color: var(--ink-2); }
.day.sabbath svg { color: #4a2a0c; }
.day .dname { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.day .range { font-size: 13px; color: var(--muted); font-variant-numeric: lining-nums; }
.day.sabbath .range { color: #4a2a0c; }
.day .keys { font-size: 13px; font-style: italic; line-height: 1.3; margin-top: 4px; color: var(--ink-2); }
.day.sabbath .keys { color: #3a220b; }
.day.past { background: var(--surface-2); }
.day .now-year { font-size: 13px; font-style: italic; color: var(--rubric); }

/* The ruled line beneath the seven days: inked for the years past, dotted for those to come. */
.week { --gap: 8px; }
.week-days { gap: var(--gap); }
.week-rule { position: relative; height: 34px; margin-top: 8px; }
.wr-future { position: absolute; left: 0; right: 0; top: 8px; border-top: 1px dotted var(--axis); }
.wr-past { position: absolute; left: 0; top: 7px; height: 3px; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); }
.wr-tick { position: absolute; top: 3px; width: 1px; height: 12px; background: var(--axis); }
.wr-now { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.wr-now .diamond { width: 9px; height: 9px; margin-top: 4px; background: var(--today); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--page); }
.wr-now .lbl { font-size: 13px; font-style: italic; color: var(--today); white-space: nowrap; margin-top: 2px; }
.week-caption { text-align: center; font-style: italic; color: var(--ink-2); margin: 2px 0 0; }
@media (max-width: 760px) {
  .week { --gap: 4px; }
  .day { min-height: 92px; padding: 10px 2px 6px; border-radius: 30px 30px 3px 3px; }
  .day .keys, .day .dname, .day .range, .day .now-year { display: none; }
  .day svg { width: 22px; height: 22px; }
  .day .numeral { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Interpretations (centred, collapsible, above the timeline)
   -------------------------------------------------------------------------- */
.interp { max-width: 1560px; margin: 26px auto 0; padding: 14px 22px 12px; }
.interp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.interp-title { font-family: Cinzel, serif; font-size: 19px; letter-spacing: 0.08em; color: var(--rubric); }
.interp-title::before { content: "❦ "; color: var(--gold); }
.reckon { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 460px; }
.reckon .smallcaps { white-space: nowrap; color: var(--ink-2); }
.reckon select { flex: 1; min-width: 0; }
.interp-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.interp-toggle { font-family: Cinzel, serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rubric); border-color: var(--rule); padding: 5px 12px; }
.interp-summary { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.interp-summary em { color: var(--ink); }
.sum-key { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rubric); }
.sum-sep { color: var(--axis); }
.interp-body { margin-top: 6px; border-top: 1px solid var(--rule); }
.ctrl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 30px; }
.why { margin-top: 4px; font-size: 14px; color: var(--muted); }
.why summary { cursor: pointer; font-style: italic; color: var(--rubric); width: max-content; list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: "☞ "; }
.why p { margin: 3px 0 0; line-height: 1.4; }

/* The timeline itself uses the full window width. */
.chart-folio { margin-top: 18px; padding: 14px 0 10px; overflow: hidden; }

/* Full view: only the interpretations and the timeline */
body.focus .masthead, body.focus .opening, body.focus .week, body.focus .lower, body.focus .colophon { display: none; }
body.focus .interp { margin-top: 12px; }
.focus-btn[aria-pressed="true"] { background: var(--rubric); color: var(--surface); border-color: var(--rubric); }

/* Language switch */
.lang-switch { position: absolute; left: 0; top: 22px; display: flex; align-items: center; gap: 4px; color: var(--axis); }
.lang-switch button { border: 0; padding: 2px 4px; font-family: Cinzel, serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.lang-switch button[aria-pressed="true"] { color: var(--rubric); text-decoration: underline; text-underline-offset: 4px; }

/* Chart toolbar */
.chart-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 2px 18px 10px; }
.ranges { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.ranges button {
  border: 0; padding: 2px 6px; font-size: 15px; font-style: italic; color: var(--ink-2); border-radius: 2px;
}
.ranges button + button::before { content: "·"; color: var(--axis); margin-right: 10px; font-style: normal; }
.ranges button:hover { color: var(--rubric); background: transparent; }
.ranges button.active { color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }
.zoom-btns { display: flex; gap: 4px; }
.zoom-btns button { min-width: 32px; font-family: Cinzel, serif; font-size: 13px; }

.chart-wrap { position: relative; width: 100%; touch-action: none; }
.chart-wrap svg { display: block; width: 100%; user-select: none; cursor: grab; }
.chart-wrap svg:active { cursor: grabbing; }
.zoom-hint {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); font-size: 14px; font-style: italic; padding: 4px 14px; border-radius: 2px;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.zoom-hint.show { opacity: 0.9; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 18px 0; font-size: 14px; color: var(--ink-2); align-items: center; }
.chart-legend .hint { margin-left: auto; font-style: italic; color: var(--muted); }
.key { display: inline-block; vertical-align: middle; margin-right: 6px; }
.key.today { width: 2px; height: 14px; background: var(--today); }
.key.event { width: 1px; height: 14px; background: var(--ink-2); }
.key.approx { width: 18px; height: 9px; border-radius: 2px; background: var(--s3); opacity: 0.3; }

/* Gloss (selected item) */
.gloss { margin: 12px 18px 4px; padding: 12px 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--lane-b); }
.gloss-head { display: flex; justify-content: space-between; align-items: center; }
#selected { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); gap: 4px 28px; align-items: start; }
#selected .sel-title { grid-column: 1 / -1; font-size: 22px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
#selected dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; margin: 4px 0; font-size: 15px; }
#selected dt { color: var(--muted); font-style: italic; }
#selected dd { margin: 0; font-variant-numeric: lining-nums; }
#selected .note { font-size: 16px; margin: 4px 0; }
#selected .zoom-link { margin-top: 4px; }
@media (max-width: 700px) { #selected { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   SVG chart
   -------------------------------------------------------------------------- */
.chart-wrap svg { font-family: "EB Garamond", serif; }
.lane-bg { fill: var(--lane-a); }
.lane-bg.alt { fill: var(--lane-b); }
.lane-rule { stroke: var(--rule); stroke-width: 1; }
.lane-title { font-family: Cinzel, serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; fill: var(--rubric); text-transform: uppercase; }
.lane-title-bg { fill: var(--surface); opacity: 0.88; }
.axis text { fill: var(--ink-2); font-size: 13px; font-family: "EB Garamond", serif; font-variant-numeric: lining-nums; }
.axis path, .axis line { stroke: var(--axis); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.jubilee { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 1 3; }

.bar rect.body { fill-opacity: var(--bar-alpha); }
.bar.approx rect.body { fill-opacity: calc(var(--bar-alpha) * 0.5); }
.bar.approx rect.cap { opacity: 0.5; }
.bar text { font-size: 13.5px; fill: var(--ink); pointer-events: none; }
.bar.approx text { font-style: italic; }
.bar.foreign rect.body, .bar.foreign rect.cap { fill: var(--muted) !important; }
.bar.foreign text { font-style: italic; fill: var(--ink-2); }
.bar:hover rect.body, .bar.selected rect.body { fill-opacity: 0.6; }
.bar { cursor: pointer; }
.period text { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.06em; font-weight: 600; }

.point path { stroke: var(--surface); stroke-width: 2; }
.point text { font-size: 13.5px; fill: var(--ink); font-style: italic; font-weight: 500; }

.event-line { stroke: var(--ink-2); stroke-width: 1; opacity: 0.32; }
.event-line.major { opacity: 0.55; }
.event-label { font-size: 13.5px; font-style: italic; fill: var(--ink-2); }
.event-hit { fill: transparent; cursor: pointer; }
.today-line { stroke: var(--today); stroke-width: 2; }
.today-label { font-size: 13.5px; font-style: italic; font-weight: 600; fill: var(--today); }
.day-rect { fill: var(--p-a); }
.day-rect.even { fill: var(--p-b); }
.day-rect.sabbath { fill: var(--gold); }
.day-label { font-family: Cinzel, serif; font-size: 11.5px; letter-spacing: 0.08em; fill: var(--ink); font-weight: 600; }
.day-label.sabbath { fill: #2b1d12; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 320px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--rule), 0 8px 26px var(--shadow);
  padding: 10px 13px; font-size: 15px; line-height: 1.35;
}
.tooltip .tt-title { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 7px; }
.tooltip .tt-row { color: var(--ink-2); font-variant-numeric: lining-nums; }
.tooltip .tt-ref { color: var(--rubric); font-style: italic; }
.tooltip .tt-note { margin-top: 4px; }
.swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }

/* --------------------------------------------------------------------------
   Interpretation controls
   -------------------------------------------------------------------------- */
.field-label { display: block; color: var(--ink-2); margin-bottom: 4px; }
.preset-desc { font-size: 15px; font-style: italic; color: var(--ink-2); min-height: 1.4em; }
.control { padding: 11px 0; border-top: 1px solid var(--grid); }
.control-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.control-title { font-size: 16px; font-weight: 600; }
.control-period { font-size: 13px; color: var(--muted); font-style: italic; white-space: nowrap; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seg button { font-size: 15px; padding: 1px 10px; font-variant-numeric: lining-nums; }
.seg button[aria-pressed="true"] { background: var(--rubric); color: var(--surface); border-color: var(--rubric); }
.control-note { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; font-style: italic; }
.control-help { font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.toggle { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.toggle input { margin-top: 5px; accent-color: var(--rubric); }
.group-title { font-family: Cinzel, serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); margin: 18px 0 2px; text-align: center; }
.group-title::before, .group-title::after { content: " ❧ "; color: var(--gold); }
.group-title::before { content: " ☙ "; }

/* --------------------------------------------------------------------------
   Lower folios
   -------------------------------------------------------------------------- */
.lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 18px; }
.lower .about { grid-column: 1 / -1; }
@media (max-width: 900px) { .lower { grid-template-columns: 1fr; } .opening { grid-template-columns: 1fr; } }
.section-title { font-family: Cinzel, serif; font-size: 19px; letter-spacing: 0.08em; color: var(--rubric); }
.section-title::before { content: "❧ "; color: var(--gold); }
.lede { color: var(--ink-2); font-style: italic; }

.about { column-count: 2; column-gap: 40px; column-rule: 1px solid var(--grid); }
.about .section-title { column-span: all; margin-bottom: 6px; }
@media (max-width: 900px) { .about { column-count: 1; } }
.dropcap::first-letter {
  float: left; font-family: Cinzel, serif; font-weight: 700; font-size: 64px; line-height: 0.82;
  padding: 6px 8px 0 0; color: var(--rubric);
}

.compare-svg { width: 100%; display: block; margin-top: 8px; font-family: "EB Garamond", serif; }
.compare-svg .row { cursor: pointer; }
.compare-svg .row:hover .row-bg, .compare-svg .row.active .row-bg { fill: var(--lane-b); }
.compare-svg .row-bg { fill: transparent; }
.compare-svg .name { font-size: 15px; fill: var(--ink); }
.compare-svg .row.active .name { font-weight: 600; fill: var(--rubric); }
.compare-svg .val { font-size: 15px; fill: var(--ink); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.compare-svg .stated { font-size: 13.5px; fill: var(--muted); font-style: italic; }
.compare-svg .track { stroke: var(--grid); stroke-width: 1; }
.compare-svg .dot { stroke: var(--surface); stroke-width: 2; }
.compare-svg .seal-ring { fill: none; stroke-width: 1; }
.compare-svg .limit { stroke: var(--today); stroke-width: 1.5; }
.compare-svg .limit-label { font-size: 13px; fill: var(--today); font-style: italic; }
.compare-svg .tick text { font-size: 13px; fill: var(--muted); font-variant-numeric: lining-nums; }
.compare-svg .tick line { stroke: var(--grid); }
.note-small { font-size: 14px; color: var(--muted); font-style: italic; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--grid); vertical-align: baseline; }
th { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
td.n { font-family: Cinzel, serif; color: var(--rubric); width: 2.2em; }
tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--rule); }
.ref { color: var(--muted); font-size: 14px; font-style: italic; }

.colophon { text-align: center; margin-top: 34px; font-style: italic; color: var(--ink-2); letter-spacing: 0.04em; }
.colophon span { color: var(--rubric); }