/* Reel Words — a printed-dictionary system. Layers: fonts, tokens, base, masthead,
   dictionary shell, entries, index, comparisons, screen, diagrams, footer, responsive. */

/* Fonts (SIL OFL 1.1, self-hosted) */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-opsz.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --paper: #f5efe3;
  --paper-deep: #ece3d1;
  --sheet: #faf6ee;
  --ink: #26303b;
  --ink-soft: #55606b;
  --oxblood: #7b2232;
  --oxblood-soft: color-mix(in oklch, var(--oxblood) 12%, var(--paper));
  --gold: #b8892b;
  --rule: #cdbfa6;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --step-0: 1.0625rem;
  --step-1: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --title: clamp(3rem, 1.6rem + 6.5vw, 6.5rem);
  --letter: clamp(3.4rem, 2.4rem + 4vw, 6rem);

  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --measure: 42rem;
  --page: 74rem;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-wrap: break-word; -webkit-text-size-adjust: 100%; scroll-padding-block-start: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; line-height: 1.15; margin: 0; color: var(--ink); }
p, ul, ol, dl, figure, table { margin: 0; }
a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; border-radius: 2px; }
em { font-style: italic; }
sup { font: 600 0.62em/0 var(--sans); color: var(--gold); margin-inline-start: 0.1em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; z-index: 5; }
.skip:focus { inset-block-start: 1rem; }
.label { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-inline-end: 0.5rem; }
.kicker { font: 600 0.78rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxblood); margin-block-end: 0.6rem; }

/* Masthead */
.masthead { border-block-end: 1px solid var(--ink); box-shadow: 0 3px 0 -2px var(--paper), 0 4px 0 -2px var(--ink); background: var(--paper); }
.mast-inner { max-width: var(--page); margin-inline: auto; padding: 1rem var(--gap); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; }
.wordmark { text-decoration: none; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.7rem; }
.wm-name { font: italic 650 1.55rem/1 var(--serif); color: var(--oxblood); }
.wm-tag { font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.sections ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.sections a { display: inline-block; padding-block: 0.3rem; font-weight: 500; font-size: 0.95rem; color: var(--ink); text-decoration: none; border-block-end: 2px solid transparent; }
.sections a[aria-current="page"] { border-block-end-color: var(--oxblood); color: var(--oxblood); }
@media (hover: hover) and (pointer: fine) { .sections a:hover { border-block-end-color: var(--rule); } }

.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font: 600 0.85rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 0.9rem; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " +"; color: var(--oxblood); }
.menu[open] summary::after { content: " −"; }
.menu .sections ul { flex-direction: column; gap: 0; padding-block-start: 0.6rem; }
.menu .sections a { padding-block: 0.55rem; font-size: 1.05rem; border-block-end: 1px solid var(--rule); display: block; }

main { display: block; }

/* Dictionary shell: alphabet rail + one entries column */
.dict { max-width: var(--page); margin-inline: auto; padding: var(--gap); display: flex; flex-wrap: wrap; gap: var(--gap) clamp(1.5rem, 1rem + 3vw, 4rem); }
.rail { flex: 0 0 auto; align-self: start; position: sticky; top: 1.25rem; max-block-size: calc(100vh - 2.5rem); overflow-y: auto; }
.rail ol { list-style: none; padding: 0.75rem 0.6rem; display: grid; grid-template-columns: repeat(2, 2.1rem); gap: 0.2rem; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 4px; }
.rail a, .rail .off { display: grid; place-items: center; min-block-size: 2rem; font: 600 1.05rem/1 var(--serif); text-decoration: none; border-radius: 3px; }
.rail a { color: var(--oxblood); }
@media (hover: hover) and (pointer: fine) { .rail a:hover { background: var(--oxblood); color: var(--paper); } }
.rail .off { color: color-mix(in oklch, var(--ink-soft) 45%, var(--paper-deep)); font-weight: 400; }
.entries { flex: 1 1 32rem; min-inline-size: 0; max-inline-size: var(--measure); }
.page-index { flex: 0 0 13rem; align-self: start; position: sticky; top: 1.25rem; margin-block-start: 7rem; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--rule); font-size: 0.92rem; }
.page-index ol { list-style: none; padding: 0.6rem 0 0; display: grid; gap: 0.25rem; }
.page-index a { color: var(--ink); text-decoration-color: var(--rule); }
@media (max-width: 74.99rem) { .page-index { display: none; } }

.section-head { padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) 1.5rem; }
.section-head h1 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.01em; }
.lede { font-size: 1.15rem; color: var(--ink-soft); margin-block-start: 0.9rem; max-inline-size: 38rem; }

.letter-group { margin-block-start: 1.5rem; }
.letter { font-size: var(--letter); font-weight: 800; color: var(--oxblood); line-height: 0.9; display: flex; align-items: flex-end; gap: 1rem; padding-block-end: 0.4rem; }
.letter::after { content: ""; flex: 1; border-block-end: 1px solid var(--gold); margin-block-end: 0.5rem; }

/* Entries */
.entry { position: relative; padding-block: 1.4rem 1.5rem; }
.entry + .entry { border-block-start: 1px solid var(--rule); }
.entry + .entry::before { content: ""; position: absolute; inset-block-start: -0.36rem; inset-inline-start: 0; width: 0.62rem; height: 0.62rem; background: var(--paper); border: 1px solid var(--gold); transform: rotate(45deg); }
.entry > * + * { margin-block-start: 0.6rem; }
.headword { font-size: var(--step-1); font-weight: 650; color: var(--ink); }
.pos { font: italic 400 0.82em/1 var(--serif); color: var(--oxblood); margin-inline-start: 0.3rem; }
.variants { font-style: italic; color: var(--ink-soft); margin-block-start: 0.25rem; }
.def { max-inline-size: 40rem; }
.example { padding: 0.7rem 0.9rem; background: var(--sheet); border-inline-start: 3px solid var(--gold); font-variant-numeric: tabular-nums; }
.xref { display: grid; gap: 0.35rem; font-size: 0.95rem; }
.xref div { display: flex; flex-wrap: wrap; gap: 0 0.6rem; }
.xref dt { font: 600 0.72rem/1.9 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.xref dd { margin: 0; }
.entry:target .headword { background: linear-gradient(transparent 62%, color-mix(in oklch, var(--gold) 35%, transparent) 62%); }

.turns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-block: 2.5rem 1rem; padding-block-start: 1.25rem; border-block-start: 3px double var(--ink); }
.turn { display: grid; gap: 0.1rem; text-decoration: none; font: 600 var(--step-1)/1.2 var(--serif); }
.turn span { font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.turn.next { text-align: end; margin-inline-start: auto; }

/* Sheet pages (mix-ups, screen, about, 404) */
.sheet { max-width: 60rem; margin-inline: auto; padding: 0 var(--gap) 3rem; }
.toc ol { margin-block-start: 1.25rem; padding-inline-start: 1.4rem; columns: 2 16rem; column-gap: 2rem; }
.toc li { margin-block-end: 0.35rem; break-inside: avoid; }

.pair { padding-block: 2.25rem 1rem; border-block-start: 3px double var(--ink); }
.pair > * + * { margin-block-start: 0.9rem; }
.pair h2 { font-size: var(--step-2); font-weight: 600; }
.pair-no { font: 600 0.78rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxblood); }
.pair > p { max-inline-size: var(--measure); }
.test { padding: 0.8rem 1rem; background: var(--oxblood-soft); border-radius: 3px; }
.pair-entries { font-size: 0.95rem; }

.compare { inline-size: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); font-size: 0.98rem; }
.compare th, .compare td { text-align: start; vertical-align: top; padding: 0.7rem 0.85rem; border-block-start: 1px solid var(--rule); }
.compare thead th { font: 650 1.05rem/1.2 var(--serif); color: var(--oxblood); border-block-start: 0; border-block-end: 2px solid var(--ink); }
.compare thead td { border-block-end: 2px solid var(--ink); border-block-start: 0; }
.compare tbody th { font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); inline-size: 11rem; }
.compare td { font-variant-numeric: tabular-nums; }

/* Index */
.titlepage { max-width: var(--page); margin-inline: auto; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--gap) clamp(2rem, 1rem + 3vw, 3.5rem); text-align: center; }
.titlepage h1 { font: italic 700 var(--title)/0.95 var(--serif); color: var(--oxblood); letter-spacing: -0.02em; }
.titlepage .sub { font: 400 var(--step-1)/1.4 var(--serif); max-inline-size: 34rem; margin: 1.25rem auto 0; }
.imprint { display: inline-block; margin-block-start: 1.5rem; padding-block: 0.55rem; border-block: 1px solid var(--ink); font: 500 0.8rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

.lookup { max-width: var(--page); margin-inline: auto; padding: 0 var(--gap) 2rem; }
.lookup-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; padding-block-end: 1rem; border-block-end: 3px double var(--ink); }
.lookup h2, .index-lower h2, .anatomy h2, .rules-words h2, .prose h2 { font-size: var(--step-2); font-weight: 600; }
.finder { display: grid; gap: 0.3rem; flex: 0 1 22rem; }
.finder[hidden] { display: none; }
.finder label { font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.finder input { font: 400 1.1rem/1.3 var(--sans); padding: 0.6rem 0.75rem; border: 1px solid var(--ink); border-radius: 3px; background: var(--sheet); color: var(--ink); inline-size: 100%; }
.finder-status { font-size: 0.85rem; color: var(--ink-soft); }
.finder-status:empty { display: none; }
.headwords { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem 2rem; padding-block-start: 1.5rem; }
.hw-group h3 { font: 800 2rem/1 var(--serif); color: var(--oxblood); padding-block-end: 0.3rem; border-block-end: 1px solid var(--gold); }
.hw-group ul { list-style: none; padding: 0.5rem 0 0; display: grid; gap: 0.2rem; }
.hw-group a { color: var(--ink); text-decoration-color: var(--rule); }
.hw-group [hidden] { display: none; }
.no-match { padding: 1rem; margin-block-start: 1rem; background: var(--sheet); border: 1px dashed var(--rule); }

.index-lower { max-width: var(--page); margin-inline: auto; padding: 1rem var(--gap) 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 4rem; }
.index-lower section { border-block-start: 3px double var(--ink); padding-block-start: 1.25rem; }
.index-lower section > * + * { margin-block-start: 0.8rem; }
.mixups-list ol { padding-inline-start: 1.4rem; display: grid; gap: 0.3rem; }

.anatomy { max-width: var(--page); margin-inline: auto; padding: 1rem var(--gap) 3.5rem; }
.anatomy h2 { padding-block-end: 1rem; }
.anatomy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem 3rem; align-items: start; }
.sample { background: var(--sheet); border: 1px solid var(--rule); padding: 1.25rem 1.4rem; border-radius: 3px; }
.sample > * + * { margin-block-start: 0.6rem; }
.sample-hw { font: 650 var(--step-1)/1.2 var(--serif); }
.anatomy-notes { padding-inline-start: 1.4rem; display: grid; gap: 0.5rem; }
.anatomy-notes li::marker { font: 700 1em var(--serif); color: var(--gold); }

/* Annotated screen */
.diagram { margin-block: 1.25rem; padding: 1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.diagram figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-block-start: 0.6rem; }
.diagram-svg { display: block; inline-size: 100%; block-size: auto; }
.panels { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.panel-item { flex: 1 1 9rem; max-inline-size: 16rem; min-inline-size: 0; }
.diagram.wide .panel-item { flex-basis: 12rem; }
.diagram.narrow .panel-item { max-inline-size: 9rem; }
.diagram.single { inline-size: fit-content; max-inline-size: 100%; }
.diagram.single figcaption { max-inline-size: 22rem; }
.diagram.triple .panel-item { flex: 1 1 5rem; max-inline-size: 11rem; }
.panel-text { margin-block-end: 2rem; }
.panel-text ul { margin-block-start: 0.5rem; padding-inline-start: 1.2rem; display: grid; gap: 0.2rem; }
.panel-cap { font: 600 0.8rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-block-end: 0.4rem; }
.diagram.screen .diagram-svg { max-inline-size: none; }
.thumb { margin-block-start: 1rem; padding: 0.6rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; max-inline-size: 26rem; }
.callouts { counter-reset: call; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.5rem 1.5rem; margin-block: 1rem 2.5rem; }
.callouts li { counter-increment: call; display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.6rem; align-items: baseline; }
.callouts li::before { content: counter(call); grid-row: span 2; display: grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; background: var(--oxblood); color: var(--paper); font: 700 0.9rem/1 var(--sans); }
.callouts a { font-weight: 600; }
.callouts span { color: var(--ink-soft); font-size: 0.95rem; }
.rules-words { border-block-start: 3px double var(--ink); padding-block-start: 1.25rem; }
.rules-words > * + * { margin-block-start: 0.8rem; }
.inline-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.inline-list a { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: 2rem; background: var(--sheet); text-decoration: none; }
.inline-list.big a { font: 600 1.1rem/1.3 var(--serif); padding: 0.5rem 1rem; }

/* Prose (about) */
.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: 1rem; }
.prose h2 { margin-block-start: 2.2rem; }

/* Diagrams: SVG drawing classes */
.diagram-svg .frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.diagram-svg .hair { stroke: var(--rule); stroke-width: 1; }
.diagram-svg .sym { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linejoin: round; }
.diagram-svg .sym.on { stroke: var(--oxblood); stroke-width: 2.25; fill: var(--oxblood-soft); }
.diagram-svg .sym.scat { stroke: var(--gold); stroke-width: 2; fill: color-mix(in oklch, var(--gold) 22%, var(--paper)); }
.diagram-svg .sym.new { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 2; }
.diagram-svg .sym.small { stroke-width: 1.25; }
.diagram-svg .glyph { font: 700 22px var(--serif); fill: var(--ink-soft); stroke: none; }
.diagram-svg .glyph.on, .diagram-svg .wild { fill: var(--oxblood); stroke: none; }
.diagram-svg .line-path { fill: none; stroke: var(--oxblood); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.diagram-svg .line-path.thin { stroke-width: 2; }
.diagram-svg .reel-band { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; }
.diagram-svg .lock { fill: color-mix(in oklch, var(--gold) 25%, var(--paper)); stroke: var(--gold); }
.diagram-svg .counter { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.diagram-svg .count-text { font: 600 17px var(--sans); fill: var(--ink); }
.diagram-svg .arrow { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram-svg .window { fill: none; stroke: var(--oxblood); stroke-width: 2.5; }
.diagram-svg .blank-mark { stroke: var(--ink-soft); stroke-width: 1.5; }
.diagram-svg .tick { font: 500 11px var(--sans); fill: var(--ink-soft); }
.diagram-svg .tick.strong { font: 600 13px var(--sans); fill: var(--oxblood); }
.diagram-svg .cap { font: 600 14px var(--sans); fill: var(--ink); letter-spacing: 0.04em; }
.diagram-svg .note { font: 400 14px var(--sans); fill: var(--ink-soft); }
.diagram-svg .device { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 2; }
.diagram-svg .panel { fill: var(--sheet); stroke: var(--rule); stroke-width: 1.5; }
.diagram-svg .panel-h { font: 700 20px var(--serif); fill: var(--oxblood); }
.diagram-svg .panel-t { font: 400 16px var(--sans); fill: var(--ink); }
.diagram-svg .meter { fill: var(--ink); }
.diagram-svg .meter-l { font: 600 11px var(--sans); letter-spacing: 0.1em; fill: var(--paper-deep); }
.diagram-svg .meter-v { font: 600 20px var(--sans); fill: var(--paper); font-variant-numeric: tabular-nums; }
.diagram-svg .btn { fill: var(--oxblood); }
.diagram-svg .btn.alt { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.diagram-svg .btn-t { font: 700 16px var(--sans); fill: var(--paper); letter-spacing: 0.08em; }
.diagram-svg .btn-t.dark { fill: var(--ink); }
.diagram-svg .callout { fill: var(--gold); stroke: var(--paper); stroke-width: 3; }
.diagram-svg .callout-n { font: 700 16px var(--sans); fill: var(--ink); }

/* Footer */
.colophon { border-block-start: 1px solid var(--ink); background: var(--paper-deep); margin-block-start: 2rem; }
.colophon-inner { max-width: var(--page); margin-inline: auto; padding: 1.5rem var(--gap) 2rem; display: grid; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.colophon strong { color: var(--ink); font-family: var(--serif); font-style: italic; }

/* Narrow screens: the rail becomes a wrapping alphabet strip above the entries */
@media (max-width: 47.99rem) {
  .wide-nav { display: none; }
  .menu { display: block; flex-basis: 100%; }
  .mast-inner { align-items: center; }
  .rail { position: static; flex-basis: 100%; }
  .rail ol { grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); }
  .headwords { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 1.25rem 1.25rem; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { padding-block: 0.4rem; border-block-start: 2px solid var(--ink); }
  .compare tr:first-child { border-block-start: 0; }
  .compare tbody th { inline-size: auto; border: 0; padding-block-end: 0.2rem; }
  .compare td { border: 0; padding-block: 0.25rem; }
  .compare td::before { content: attr(data-label); display: block; font: 650 0.95rem/1.3 var(--serif); color: var(--oxblood); }
  .turn.next { text-align: start; margin-inline-start: 0; }
}