/* =========================================================================
   Cyropaedia — a reading edition of Xenophon
   Design thesis: a Greek author idealising a Persian king. The reading
   surface is warm papyrus with Greek ink discipline; the chrome is Achaemenid
   imperial lapis-and-gold (the glazed brick of Susa). The five margin voices
   are tesserae in a frieze running down the right of the page.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------- */
:root {
  --paper:      #ECE3CF;
  --leaf:       #F4EEDE;
  --leaf-2:     #EFE7D3;
  --ink:        #241C12;
  --ink-soft:   #6B5C44;
  --rule:       #D8C9A9;
  --rule-soft:  #E4DAC1;
  --lapis:      #1C4E73;
  --lapis-deep: #143A57;
  --gold:       #B0801F;
  --gold-bright:#C8973F;
  --terra:      #B0532E;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
  --ui: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --measure: 34rem;
  --rail: 17.5rem;
  --rail-gap: 2.5rem;

  --shadow: 0 1px 2px rgba(20,14,4,.05), 0 6px 22px -12px rgba(20,14,4,.22);
}
.night {
  --paper:      #0F161C;
  --leaf:       #161F27;
  --leaf-2:     #131C23;
  --ink:        #E9DEC6;
  --ink-soft:   #A99C82;
  --rule:       #2A3946;
  --rule-soft:  #202E38;
  --lapis:      #3C82AE;
  --lapis-deep: #1C4E73;
  --gold:       #CDA34E;
  --gold-bright:#DCB45C;
  --terra:      #CE7048;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
}

/* per-voice accent (used by glosses, pills, voice-cards) */
[data-persona="guide"]      { --accent: #B0532E; }
[data-persona="historian"]  { --accent: #1F5E86; }
[data-persona="philosopher"]{ --accent: #5C6A30; }
[data-persona="strategist"] { --accent: #51616D; }
[data-persona="dakyns"]     { --accent: #6B4A2B; }
.night [data-persona="guide"]      { --accent: #DC8C5D; }
.night [data-persona="historian"]  { --accent: #67A9D2; }
.night [data-persona="philosopher"]{ --accent: #A7B36C; }
.night [data-persona="strategist"] { --accent: #9DABB7; }
.night [data-persona="dakyns"]     { --accent: #C0976A; }

/* ---- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.075rem;
  line-height: 1.72;
  font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lapis); text-underline-offset: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; }
:focus-visible { outline: 2.5px solid var(--gold-bright); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--lapis); color: #fff; padding: .6rem 1rem;
  font-family: var(--ui); border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* shared section furniture */
.eyebrow {
  font-family: var(--ui); text-transform: uppercase; letter-spacing: .26em;
  font-size: .68rem; font-weight: 600; color: var(--gold); display: inline-block;
}
.section-head { max-width: 40rem; margin: 0 auto 2.6rem; text-align: center; padding: 0 1.25rem; }
.section-title {
  font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: .01em; margin: .5rem 0 .8rem;
}
.section-intro { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }
.greek { font-style: italic; letter-spacing: .01em; }

/* ---- masthead ----------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 20; }
.masthead__inner {
  max-width: 72rem; margin: 0 auto; padding: .85rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.masthead__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.masthead__mark { width: 1.6rem; height: 1.6rem; color: var(--lapis); display: inline-block; }
.masthead__mark svg { width: 100%; height: 100%; }
.masthead__title {
  font-family: var(--display); font-weight: 600; font-size: 1.18rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.masthead__links { display: flex; align-items: center; gap: 1.5rem; }
.masthead__link {
  font-family: var(--ui); font-size: .86rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; transition: color .15s;
}
.masthead__link:hover { color: var(--lapis); }
.theme-toggle { background: none; border: 0; padding: .25rem; cursor: pointer; color: var(--ink-soft); line-height: 0; }
.theme-toggle:hover { color: var(--gold); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle__sun { display: none; }
.night .theme-toggle__sun { display: block; }
.night .theme-toggle__moon { display: none; }
.masthead__burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.masthead__burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .2s; }

/* ---- buttons & pills ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ui);
  font-weight: 600; font-size: .92rem; letter-spacing: .02em; text-decoration: none;
  padding: .72rem 1.5rem; border-radius: 2px; border: 1.5px solid transparent;
  transition: transform .12s, box-shadow .2s, background .2s, color .2s;
}
.btn--gold { background: var(--gold-bright); color: #20160a; box-shadow: var(--shadow); }
.btn--gold:hover { transform: translateY(-1px); background: #d6a64b; }
.btn--ghost { border-color: currentColor; color: var(--leaf); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 3px solid var(--gold); }
.hero__frieze {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  z-index: -2; filter: saturate(1.02);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,30,46,.62) 0%, rgba(12,30,46,.74) 55%, rgba(10,24,38,.92) 100%);
}
.hero__body {
  max-width: 44rem; margin: 0 auto; padding: clamp(4rem, 11vw, 8.5rem) 1.5rem clamp(3rem, 8vw, 6rem);
  text-align: center; color: #F4EEDE;
}
.hero__eyebrow { font-family: var(--ui); letter-spacing: .34em; text-transform: uppercase; font-size: .72rem; color: var(--gold-bright); }
.hero__title {
  font-family: var(--display); font-weight: 700; letter-spacing: .04em;
  font-size: clamp(3rem, 11vw, 6rem); margin: .6rem 0 .1rem; line-height: .98;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero__sub { font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 3.4vw, 1.7rem); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.4rem; color: #e9dec6; }
.hero__lede { max-width: 32rem; margin: 0 auto 2rem; font-size: 1.12rem; color: #e7ddca; }
.hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ---- voices section ----------------------------------------------------- */
.voices { max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.4rem 1rem; }
.voice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.voice-card {
  display: flex; gap: .9rem; padding: 1.25rem 1.3rem; background: var(--leaf);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 3px;
  box-shadow: var(--shadow);
}
.voice-card__icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; color: var(--accent); }
.voice-card__icon svg { width: 100%; height: 100%; }
.voice-card__name { font-family: var(--display); font-size: 1.12rem; margin: 0; letter-spacing: .01em; }
.voice-card__role { font-family: var(--ui); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: .15rem 0 .5rem; font-weight: 600; }
.voice-card__blurb { margin: 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.55; }

/* ---- library / book grid ----------------------------------------------- */
.library { max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.4rem clamp(3.5rem, 8vw, 6rem); }
.book-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); counter-reset: none; }
.book-card { border-radius: 4px; }
.book-card__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: var(--leaf); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .22s, border-color .2s;
}
.book-card__link:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -16px rgba(20,14,4,.45); border-color: var(--gold); }
.book-card__art { position: relative; aspect-ratio: 3 / 4; background: var(--lapis-deep); overflow: hidden; }
.book-card__art img { width: 100%; height: 100%; object-fit: cover; }
.book-card__numeral {
  position: absolute; left: .7rem; bottom: .4rem; font-family: var(--display); font-weight: 700;
  font-size: 2.2rem; color: var(--gold-bright); letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.8);
}
.book-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.book-card__kicker { font-family: var(--ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 600; }
.book-card__title { font-family: var(--display); font-size: 1.16rem; line-height: 1.2; }
.book-card__blurb { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

/* ---- essays (introduction / about) ------------------------------------- */
.essay-wrap { max-width: 40rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.4rem 4rem; }
.essay-head { text-align: center; margin-bottom: 2.2rem; }
.essay-title { font-family: var(--display); font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .02em; margin: .4rem 0 0; }
.essay { font-size: 1.12rem; line-height: 1.78; }
.essay p { margin: 0 0 1.3rem; }
.essay h2 { font-family: var(--display); font-size: 1.5rem; margin: 2.4rem 0 1rem; }
.essay a { color: var(--lapis); }
.essay > p:first-of-type::first-letter {
  font-family: var(--display); float: left; font-size: 3.4rem; line-height: .8;
  padding: .35rem .5rem 0 0; color: var(--terra);
}
.dedication { text-align: center; font-style: italic; color: var(--ink-soft); letter-spacing: .04em; }
.essay > p.dedication::first-letter { all: unset; }

/* ornamental rule */
.meander-rule, .colophon__rule {
  border: 0; height: 1.4rem; margin: 2.6rem auto; width: 100%;
  -webkit-mask: var(--rosette) center/1.3rem no-repeat; mask: var(--rosette) center/1.3rem no-repeat;
  background: var(--gold-bright);
  position: relative;
}
.meander-rule::before, .meander-rule::after { content: none; }

/* leaf pagination (intro/about) */
.leaf-nav { display: flex; justify-content: space-between; margin-top: 3rem; gap: 1rem; flex-wrap: wrap; }
.leaf-nav a { font-family: var(--ui); font-weight: 600; text-decoration: none; color: var(--lapis); font-size: .9rem; }
.leaf-nav__next { margin-left: auto; }

/* =========================================================================
   THE READER
   ========================================================================= */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 60; }
.reading-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lapis), var(--gold-bright)); transition: width .1s linear; }

.book { max-width: 55rem; margin: 0 auto; padding: 0 1.4rem 1rem; }

/* book header */
.book-header {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  padding: clamp(2rem, 5vw, 3.4rem) 0 1.6rem;
}
.book-header__numeral { font-family: var(--display); font-weight: 700; font-size: clamp(3.5rem, 12vw, 6rem); color: var(--gold-bright); line-height: .9; margin: .3rem 0 .2rem; letter-spacing: .03em; }
.book-header__title { font-family: var(--display); font-size: clamp(1.5rem, 4.4vw, 2.2rem); margin: 0 0 .7rem; line-height: 1.12; }
.book-header__of { display: block; font-family: var(--ui); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.book-header__blurb { color: var(--ink-soft); font-size: 1.05rem; max-width: 30rem; margin: 0; }
.book-header__art { width: clamp(8rem, 22vw, 12rem); border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.book-header__art img { aspect-ratio: 3/4; object-fit: cover; }

/* sticky voice toolbar */
.persona-bar {
  position: sticky; top: 0; z-index: 40; margin: 0 -1.4rem; padding: 0 1.4rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.persona-bar__inner { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; flex-wrap: wrap; }
.persona-bar__label { font-family: var(--ui); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.persona-bar__pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-family: var(--ui); font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  padding: .3rem .65rem .3rem .5rem; border-radius: 100px;
  border: 1.5px solid var(--accent); color: #fff; background: var(--accent);
  transition: opacity .15s, background .15s, color .15s;
}
.pill__icon { width: 1rem; height: 1rem; line-height: 0; }
.pill__icon svg { width: 100%; height: 100%; }
.pill[aria-pressed="false"] { background: transparent; color: var(--accent); opacity: .72; }
.pill[aria-pressed="false"] .pill__icon { opacity: .8; }
.pill:hover { opacity: 1; }
.pill--focus { border-color: var(--ink-soft); background: transparent; color: var(--ink-soft); margin-left: auto; }
.pill--focus[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* chapter nav */
.chapter-nav { display: flex; align-items: baseline; gap: .8rem; padding: 1rem 0 .4rem; flex-wrap: wrap; }
.chapter-nav__label { font-family: var(--ui); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.chapter-nav__links { display: flex; gap: .3rem; flex-wrap: wrap; }
.chapter-nav__links a {
  font-family: var(--ui); font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--lapis); width: 1.85rem; height: 1.85rem; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 3px;
  transition: background .15s, color .15s, border-color .15s;
}
.chapter-nav__links a:hover, .chapter-nav__links a.is-current { background: var(--lapis); color: #fff; border-color: var(--lapis); }

/* the text flow + margin rail */
.reader {
  position: relative;
  padding-right: calc(var(--rail) + var(--rail-gap));
  padding-top: 1.4rem;
}
.reader > .verse, .reader > .chapter-head { max-width: var(--measure); }
.verse { margin: 0 0 1.25rem; }
.verse em { font-style: italic; }
.verse strong { font-weight: 600; }

/* chapter divider */
.chapter-head { text-align: center; margin: 3.4rem 0 1.9rem; padding-top: 1.6rem; position: relative; }
.chapter-head:first-child { margin-top: .6rem; }
.chapter-head::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.4rem; height: 1.4rem; background: var(--gold-bright);
  -webkit-mask: var(--rosette) center/contain no-repeat; mask: var(--rosette) center/contain no-repeat;
}
.chapter-kicker { display: block; font-family: var(--ui); text-transform: uppercase; letter-spacing: .24em; font-size: .66rem; font-weight: 600; color: var(--ink-soft); }
.chapter-num { display: block; font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--lapis); margin-top: .2rem; letter-spacing: .02em; }

/* section seals */
.sec {
  font-family: var(--ui); font-size: .6em; font-weight: 700; color: var(--lapis);
  vertical-align: .42em; text-decoration: none; letter-spacing: .02em;
  margin: 0 .28em 0 .04em; padding: 0 .12em; border-radius: 2px; transition: background .12s, color .12s;
}
.sec:first-child { margin-left: 0; }
.sec:hover { color: var(--gold-bright); background: color-mix(in srgb, var(--lapis) 12%, transparent); }
.sec:target { color: var(--terra); }

/* margin glosses (tesserae) */
.gloss {
  float: right; clear: right; width: var(--rail);
  margin: .1rem 0 1rem; margin-right: calc(-1 * (var(--rail) + var(--rail-gap)));
  background: color-mix(in srgb, var(--accent) 9%, var(--leaf));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--rule));
  border-left: 3px solid var(--accent); border-radius: 3px;
  font-size: .9rem; line-height: 1.55;
}
.gloss-head {
  display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left;
  background: none; border: 0; cursor: default; padding: .55rem .7rem .35rem;
  font-family: var(--ui); color: var(--accent);
}
.gloss-icon { width: .7rem; height: .7rem; flex: 0 0 auto; background: var(--accent); border-radius: 1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent); }
.gloss-who { font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; }
.gloss-ref { margin-left: auto; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); opacity: .8; }
.gloss-body { padding: 0 .7rem .65rem; color: var(--ink); }
.gloss-body .greek { color: color-mix(in srgb, var(--accent) 60%, var(--ink)); }

/* persona visibility toggles */
body.hide-guide       .gloss[data-persona="guide"],
body.hide-historian   .gloss[data-persona="historian"],
body.hide-philosopher .gloss[data-persona="philosopher"],
body.hide-strategist  .gloss[data-persona="strategist"],
body.hide-dakyns      .gloss[data-persona="dakyns"] { display: none; }
body.reading-only .gloss { display: none; }
body.reading-only .reader { padding-right: 0; }
body.reading-only .reader > .verse, body.reading-only .reader > .chapter-head { max-width: 42rem; margin-left: auto; margin-right: auto; }

/* book foot nav */
.book-foot { display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.book-foot a { text-decoration: none; font-family: var(--ui); }
.book-foot__prev, .book-foot__next { display: flex; flex-direction: column; gap: .1rem; color: var(--lapis); }
.book-foot__next { margin-left: auto; text-align: right; }
.book-foot__dir { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); font-weight: 600; }
.book-foot__name { font-family: var(--display); font-size: 1.05rem; }
.book-foot__top { color: var(--ink-soft); font-size: .8rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 100px; padding: .3rem .8rem; }
.book-foot__top:hover { color: var(--lapis); border-color: var(--lapis); }

/* ---- colophon ----------------------------------------------------------- */
.colophon { border-top: 3px solid var(--gold); background: var(--lapis-deep); color: #e7ddca; margin-top: 3rem; }
.layout-book .colophon, .layout-home .colophon { margin-top: 0; }
.colophon__inner { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 3.5rem; text-align: center; }
.colophon__rule { background: var(--gold-bright); margin: 0 auto 1.4rem; }
.colophon__line { font-family: var(--body); font-size: 1.05rem; margin: 0 0 .7rem; color: #f1e8d3; }
.colophon__meta { font-family: var(--ui); font-size: .82rem; color: #b9c6cf; margin: 0; line-height: 1.7; }
.colophon a { color: var(--gold-bright); }

/* ---- the rosette ornament (shared mask) -------------------------------- */
:root {
  --rosette: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='16'%20cy='16'%20r='3.4'/%3E%3Ccircle%20cx='25'%20cy='16'%20r='2.5'/%3E%3Ccircle%20cx='7'%20cy='16'%20r='2.5'/%3E%3Ccircle%20cx='16'%20cy='25'%20r='2.5'/%3E%3Ccircle%20cx='16'%20cy='7'%20r='2.5'/%3E%3Ccircle%20cx='22.36'%20cy='22.36'%20r='2.5'/%3E%3Ccircle%20cx='9.64'%20cy='9.64'%20r='2.5'/%3E%3Ccircle%20cx='22.36'%20cy='9.64'%20r='2.5'/%3E%3Ccircle%20cx='9.64'%20cy='22.36'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 64rem) {
  .reader { padding-right: 0; }
  .reader > .verse, .reader > .chapter-head { max-width: 42rem; margin-left: auto; margin-right: auto; }
  .gloss {
    float: none; clear: none; width: auto; max-width: 42rem;
    margin: .9rem auto 1.1rem; margin-right: auto;
  }
  .gloss-head { cursor: pointer; padding-bottom: .55rem; }
  .gloss-head::after {
    content: ""; width: .5rem; height: .5rem; margin-left: .4rem; flex: 0 0 auto;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg); transition: transform .2s;
  }
  .gloss.is-open .gloss-head::after { transform: rotate(225deg); }
  .gloss .gloss-body { display: none; }
  .gloss.is-open .gloss-body { display: block; }
}

@media (max-width: 46rem) {
  .masthead__burger { display: block; }
  .masthead__links {
    position: absolute; top: 100%; right: 0; left: 0; flex-direction: column;
    align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem 1.4rem 1rem; box-shadow: var(--shadow); display: none;
  }
  .masthead__links.is-open { display: flex; }
  .masthead__link { padding: .6rem 0; font-size: 1rem; }
  .theme-toggle { padding: .6rem 0; }
  .book-header { grid-template-columns: 1fr; }
  .book-header__art { width: clamp(7rem, 34vw, 10rem); order: -1; }
  .book-foot { flex-wrap: wrap; }
}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}