/*
 * The manuscript (docs/plans/2026-11-02-the-roll-design.md): one roll of skins sewn end to end, read from the sky down to
 * the seal. Tokens, fonts, skins and controls, shared by every page. Its materials are drawn by the plates' own engine
 * (scripts/manuscript-assets.mjs) and its capitals are the plates' own alphabet (scripts/lettering-font/).
 */
@font-face { font-family: 'Litterae Cellarii'; src: url('/fonts/litterae-cellarii.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Litterae Cellarii Small'; src: url('/fonts/litterae-cellarii-small.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Manuscript'; src: url('/fonts/im-fell-dw-pica.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Manuscript'; font-style: italic; src: url('/fonts/im-fell-dw-pica-italic.woff2') format('woff2'); font-display: swap; }
/* The Fell types' old 5 reads as a long s and their 1 as a small capital I: dates are the plates' own digits. */
@font-face { font-family: 'Manuscript'; src: url('/fonts/litterae-cellarii.woff2') format('woff2'); unicode-range: U+30-39; size-adjust: 78%; font-display: swap; }
@font-face { font-family: 'Manuscript'; font-style: italic; src: url('/fonts/litterae-cellarii.woff2') format('woff2'); unicode-range: U+30-39; size-adjust: 78%; font-display: swap; }
@font-face { font-family: 'Manuscript SC'; src: url('/fonts/im-fell-dw-pica-sc.woff2') format('woff2'); font-display: swap; }

:root {
  --soot: #131114; --vellum: #e4dcc6; --saffron: #d6b873; --crimson: #43101a;
  --iron: #2b2320; --iron-soft: #4a3a2b; --rubric: #a92813; --lapis: #24427e; --leaf: #caa048; --bone: #efe6cf; --bone-soft: #bdb299; --blush: #dcc4ac;
  --text: 'Manuscript', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sc: 'Manuscript SC', 'Manuscript', 'Iowan Old Style', Palatino, Georgia, serif;
  --caps: 'Litterae Cellarii', 'Manuscript', 'Iowan Old Style', Palatino, Georgia, serif;
  --caps-small: 'Litterae Cellarii Small', 'Litterae Cellarii', 'Manuscript', Palatino, Georgia, serif;
  --lh: 31px;
  --measure: 693px;
}

html[data-ms] { background: var(--soot); color-scheme: light; -webkit-text-size-adjust: 100%; }
html[data-ms] body { margin: 0; min-height: 100vh; background: var(--soot); color: var(--iron); font: 21px/var(--lh) var(--text); font-feature-settings: 'kern', 'liga', 'dlig'; -webkit-font-smoothing: antialiased; }
html[data-ms] *, html[data-ms] *::before, html[data-ms] *::after { box-sizing: border-box; }
html[data-ms] img { display: block; max-width: 100%; height: auto; }
html[data-ms] a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html[data-ms] :focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; border-radius: 2px; }
@media (max-width: 620px) { html[data-ms] body { font-size: 19.5px; --lh: 29px; } html[data-ms] { --lh: 29px; } }

html[data-ms] [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The skins, and the thread that joins them ── */
.skin { position: relative; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.nigredo { background: var(--soot) url('/ms/skin-nigredo.webp') 0 0 / 1024px; color: var(--bone); }
.albedo { background: var(--vellum) url('/ms/skin-albedo.webp') 0 0 / 1024px; color: var(--iron); }
.citrinitas { background: var(--saffron) url('/ms/skin-citrinitas.webp') 0 0 / 1024px; color: var(--iron); }
.rubedo { background: var(--crimson) url('/ms/skin-rubedo.webp') 0 0 / 1024px; color: var(--bone); }
.seam { position: relative; z-index: 3; height: 150px; margin: -62px 0; background: 50% 0 / 1536px 150px repeat-x; pointer-events: none; }
.seam-albedo { background-image: url('/ms/seam-albedo.webp'); }
.seam-citrinitas { background-image: url('/ms/seam-citrinitas.webp'); }
.seam-rubedo { background-image: url('/ms/seam-rubedo.webp'); }

/* ── The capitals: real text in the plates' alphabet ── */
.caps { font-family: var(--caps); font-weight: 400; font-style: normal; letter-spacing: 0; text-wrap: balance; hyphens: manual; }
.caps-small { font-family: var(--caps-small); font-weight: 400; font-style: normal; hyphens: manual; }

/* The title: the plates' alphabet, seen through the engine's gold leaf, which catches the light under the hand */
.gold-title { margin: 30px auto 0; max-width: 1240px; font: 400 calc((100vw - 32px) / 6.3) / 1 var(--caps); text-align: center; color: var(--leaf);
  background-image: linear-gradient(105deg, transparent calc(var(--gx, 30%) - 7%), rgba(255, 246, 208, 0.82) var(--gx, 30%), transparent calc(var(--gx, 30%) + 7%)), url('/ms/leaf.webp');
  background-size: 100% 100%, 1000px 257px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gold-title > span:not(.sr) { display: inline-block; }
@media (min-width: 760px) { .gold-title { font-size: min(calc((100vw - 64px) / 12.2), 102px); } }
.meaning { margin: 6px 0 0; text-align: center; font-style: italic; font-size: 24px; line-height: 1.3; color: var(--bone-soft); }
.latin { font-family: var(--caps); font-size: 0.82em; letter-spacing: 0.01em; hyphens: manual; }

/* ── The pages: a rubricated list, its marks turn about in red and blue ── */
.pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 28px; margin: 0; padding: 0; list-style: none; font-size: 20px; line-height: 28px; }
.pages a { display: inline-block; padding: 8px 2px; text-decoration: none; }
.pages a:hover, .pages a[aria-current] { text-decoration: underline; }
.pil { display: inline-block; font-style: normal; margin-right: 5px; }
.pages > :nth-child(odd) .pil { color: #d9553a; }
.pages > :nth-child(even) .pil { color: #6f8fd6; }
.albedo .pages > :nth-child(odd) .pil, .citrinitas .pages > :nth-child(odd) .pil { color: var(--rubric); }
.albedo .pages > :nth-child(even) .pil, .citrinitas .pages > :nth-child(even) .pil { color: var(--lapis); }

/* ── A stage of the Work, named and said plainly ── */
.stage { margin: 0; font-size: 18.5px; line-height: 26px; font-style: italic; hyphens: manual; }
.stage b { display: block; margin-bottom: 4px; font: 400 25px/30px var(--caps); }
.nigredo .stage { color: var(--bone-soft); }
.nigredo .stage b, .rubedo .stage b { color: var(--leaf); }
.rubedo .stage { color: var(--blush); }
.albedo .stage, .citrinitas .stage { color: var(--iron-soft); }

/* ── The buttons: a plate's cartouche, holding real words, burnished under the hand ── */
.strap { --frame: url('/ms/strap-ochre.webp'); position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 1px 12px 0; border-style: solid; border-color: transparent; border-width: 13px 25px; border-image: var(--frame) 46 90 fill / 13px 25px / 0 stretch; background: none; color: var(--iron); font: 400 21px/26px var(--caps-small); text-align: center; text-decoration: none; hyphens: manual; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(20, 8, 0, 0.32)); transition: transform 0.12s ease-out, filter 0.2s; -webkit-tap-highlight-color: transparent; }
.strap.gilt { --frame: url('/ms/strap-gilt.webp'); }
.strap.lapis { --frame: url('/ms/strap-lapis.webp'); }
.strap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 215, 0.72) 50%, transparent 62%) no-repeat -180% 0 / 220% 100%; }
.strap:hover::after, .strap:focus-visible::after { background-position: 280% 0; transition: background-position 0.75s ease-out; }
.strap:hover { filter: drop-shadow(0 5px 7px rgba(20, 8, 0, 0.42)) brightness(1.03); }
.strap:active { transform: translateY(2px); filter: drop-shadow(0 1px 1px rgba(20, 8, 0, 0.5)); }
.strap[disabled] { cursor: default; opacity: 0.55; filter: saturate(0.5); }
.strap.small { min-height: 46px; padding: 0 8px; border-width: 10px 20px; border-image-width: 10px 20px; font-size: 17px; line-height: 20px; }

/* Lesser choices: words, the chosen one rubricated, as a scribe marks a heading */
.tab { padding: 7px 3px 6px; border: 0; background: none; color: inherit; font: italic 19px/24px var(--text); cursor: pointer; text-decoration: none; }
.tab:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tab.on, .tab[aria-pressed='true'] { color: var(--rubric); text-decoration: underline double; text-underline-offset: 4px; }
.nigredo .tab.on, .nigredo .tab[aria-pressed='true'], .rubedo .tab.on, .rubedo .tab[aria-pressed='true'] { color: #e8705a; }

/* ── The text: one column, ruled and pricked by hand, its notes in the margin ── */
.col { position: relative; max-width: 33em; margin: 0 auto; padding-inline: 18px; border-inline: 1px solid rgba(74, 52, 26, 0.17); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), rgba(74, 52, 26, 0.125) calc(var(--lh) - 1px) var(--lh)); background-position: 0 -8px; }
.col > p { margin: 0; text-align: justify; hyphens: auto; }
.col > p + p:not(.plain)::before { content: '¶'; margin-right: 4px; font-style: normal; }
.col > p:nth-of-type(odd)::before { color: var(--rubric); }
.col > p:nth-of-type(even)::before { color: var(--lapis); }
.col h2, .col h3 { margin: 0; padding-block: var(--lh) 0; font-size: 34px; line-height: calc(var(--lh) * 2); color: var(--rubric); }
.col h3 { font-size: 27px; }
.col > h2:first-child, .col > h3:first-child { padding-block: 0; }
.versal { float: left; width: calc(var(--lh) * 4 - 7px); height: calc(var(--lh) * 4 - 7px); margin: 7px 14px 0 0; box-shadow: 0 1px 2px rgba(40, 20, 0, 0.5); }
.gloss { float: right; clear: right; width: 13em; margin: 0 -15.4em 0 0; font-style: italic; font-size: 17.5px; line-height: 23px; color: #7a2a18; text-align: left; hyphens: manual; }
@media (max-width: 1240px) {
  .gloss { float: none; display: block; width: auto; margin: 0 0 calc(var(--lh) / 2); padding-left: 12px; border-left: 2px solid rgba(169, 40, 19, 0.45); }
  .col { background-image: none; border-inline: 0; padding-inline: 0; }
  .col > p + p { margin-top: calc(var(--lh) / 2); }
  .col h2 { line-height: 1.25; padding-block: calc(var(--lh) * 1.4) calc(var(--lh) / 2); }
  .col > h2:first-child { padding-block: 0 calc(var(--lh) / 2); }
}
@media (max-width: 620px) {
  .col > p { text-align: left; }
  .col h2, .col h3 { font-size: 27px; }
}

/* On the dark skins the column is not ruled, and its headings are gold */
.nigredo .col, .rubedo .col { background-image: none; border-inline-color: transparent; }
.nigredo .col h2, .nigredo .col h3, .rubedo .col h2, .rubedo .col h3 { color: var(--leaf); }
.nigredo .col > p:nth-of-type(odd)::before, .rubedo .col > p:nth-of-type(odd)::before { color: #e8705a; }
.nigredo .col > p:nth-of-type(even)::before, .rubedo .col > p:nth-of-type(even)::before { color: #8fa9e0; }
.citrinitas .col h2, .citrinitas .col h3 { color: #2c2118; }
/* The same word for the same place on every page: the roll's foot */
.roll-foot { padding-block: 40px 44px; text-align: center; font-style: italic; font-size: 17px; line-height: 24px; color: var(--blush); }

/* ── The volvelle: a paper dial on a thread ── */
.dial { position: relative; display: block; width: min(72vw, 360px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dial:active { cursor: grabbing; }
.dial img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dial .base { filter: drop-shadow(0 4px 8px rgba(50, 26, 0, 0.45)); }
.dial .wheel { filter: drop-shadow(0 2px 3px rgba(30, 16, 0, 0.6)); transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); will-change: transform; }
.dial.dragging .wheel { transition: none; }
.dial .pearl { position: absolute; left: 50%; top: 50%; width: 5%; height: 5%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fffdf6 0 16%, #efe7d8 34%, #b7ab9b 74%, #7f7468); box-shadow: 0 2px 3px rgba(20, 10, 0, 0.6); pointer-events: none; }

/* ── A line ruled for writing: the ink lands wet and dries ── */
@keyframes ink-dries { from { color: #0a0c26; text-shadow: 0 0 1px rgba(10, 14, 60, 0.55); } to { color: #33241c; text-shadow: none; } }

/* ── The seal, and the Work it sets going ── */
.press { display: block; width: min(62vw, 250px); margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)); transition: transform 0.14s ease-out, filter 0.14s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.press img, .press canvas { display: block; width: 100%; height: auto; }
.press:hover { transform: scale(1.018) rotate(-0.6deg); }
.press:active { transform: scale(0.965); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }
.work-frame { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #0c0a0a; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), 0 30px 70px rgba(0, 0, 0, 0.6); }
.work-frame > img, .work-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out; }
.work-frame > .on { opacity: 1; }
.work-cap { margin: 18px auto 0; max-width: 26em; min-height: 5.2em; font-style: italic; line-height: 26px; hyphens: manual; }
.work-cap b { display: block; font: 400 24px/30px var(--caps); color: var(--leaf); }

@media (prefers-reduced-motion: reduce) {
  .dial .wheel, .work-frame > img, .work-frame > canvas, .strap, .press, .strap:hover::after { transition: none; }
}