/* Night of the Gray Death: the Twilight Talons papers.
   The desk around the leaves is the Sentinel Productions dark leather, one look like the rest of the site.
   Layout: parchment leaves stacked on an ash-gray desk. Glosses hang in a red-ruled left margin on wide
   screens, sit above their paragraph on phones, and run in at the head of the paragraph when printed.
   Every leaf (title page, each numbered section) starts a fresh sheet of paper in print. */

:root {
  --desk: #050505;
  --desk-fg: #E0E0E0;
  --desk-soft: #9A9A9A;
  --desk-line: #333;
  --gold: #C5A059;
  --site: 'Inter', sans-serif;
  --paper: #E9D9B8;
  --ink: #2B1E14;
  --ink-soft: #5A4632;
  --rubric: #7A1E18;
  --margin-rule: rgba(122, 30, 24, .3);
  --stain: rgba(150, 95, 40, .13);
  --bleed: rgba(43, 30, 20, .45);
  --edge: rgba(110, 72, 28, .42);
  --shadow: rgba(0, 0, 0, .7);
  --label: 'IM Fell English SC', Georgia, serif;
  --print: 'IM Fell DW Pica', Georgia, serif;
  --hand: 'Meddon', 'IM Fell DW Pica', Georgia, serif;
  --size: 21px;
  --scale: 1;
  --mscale: 1;
  --lh: 1.72;
  color-scheme: dark;
}
/* The four hands */
:root[data-hand="roundhand"] { --hand: 'Mr De Haviland', 'IM Fell DW Pica', Georgia, serif; --scale: 1.42; --lh: 1.5; }
:root[data-hand="formal"] { --hand: 'Petit Formal Script', 'IM Fell DW Pica', Georgia, serif; --scale: .86; --lh: 1.85; }
:root[data-hand="print"] { --hand: 'IM Fell DW Pica', Georgia, serif; --scale: .9; --lh: 1.58; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--desk);
  background-image: url('https://www.transparenttextures.com/patterns/dark-leather.png');
  color: var(--desk-fg);
  font: 15px/1.5 var(--site);
  padding-block: 20px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desk: navigation, controls, footer */
.desk-nav {
  max-width: 880px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  font-family: var(--site);
  font-size: 14px;
  font-weight: 600;
}
.desk-nav a { color: var(--gold); text-decoration: none; padding: 6px 0; }
.desk-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.desk-foot a { color: #C8C8C8; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.bar {
  max-width: 880px;
  margin: 0 auto 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--site);
  font-size: 13px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 1px;
}
.group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group > span { margin-right: 4px; }
.bar button {
  font: inherit;
  letter-spacing: 0;
  font-variant: normal;
  color: var(--desk-fg);
  background: #111;
  border: 1px solid var(--desk-line);
  border-left: 3px solid #444;
  border-radius: 0;
  min-height: 40px;
  padding: 4px 14px;
  cursor: pointer;
}
.bar button[data-pick="quill"] { font-family: 'Meddon', var(--print); font-size: 15px; }
.bar button[data-pick="roundhand"] { font-family: 'Mr De Haviland', var(--print); font-size: 24px; }
.bar button[data-pick="formal"] { font-family: 'Petit Formal Script', var(--print); font-size: 14px; }
.bar button[data-pick="print"] { font-family: var(--print); font-size: 16px; }
.bar button[aria-pressed="true"] { background: #2E2618; color: var(--gold); border-left-color: var(--gold); }
.bar button:hover { border-left-color: var(--gold); color: var(--gold); }
.bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bar button:disabled { opacity: .45; cursor: default; }
.bar .sz { min-width: 44px; font-family: var(--print); font-size: 16px; }

.desk-foot {
  max-width: 880px;
  margin: 40px auto 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--desk-soft);
}
.desk-foot p { margin: 0 0 .6em; }

/* The leaves */
.bundle { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.leaf {
  position: relative;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 64px) clamp(26px, 5vw, 44px);
  font-family: var(--hand);
  font-size: calc(var(--size) * var(--scale) * var(--mscale));
  line-height: var(--lh);
  font-synthesis: none;
  color: var(--ink);
  text-shadow: 0 0 .7px var(--bleed);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 248, 228, .5), rgba(255, 248, 228, 0) 70%),
    radial-gradient(circle at 90% 4%, var(--stain), transparent 90px),
    radial-gradient(circle at 6% 58%, var(--stain), transparent 110px),
    radial-gradient(circle at 76% 96%, var(--stain), transparent 80px),
    repeating-linear-gradient(0deg, rgba(110, 80, 40, .03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(110, 80, 40, .05) 0 1px, transparent 1px 30px);
  box-shadow: inset 0 0 100px var(--edge), inset 0 0 16px var(--edge), 0 18px 40px -12px var(--shadow), 0 2px 6px var(--shadow);
  overflow: hidden;
  scroll-margin-top: 16px;
}
.leaf:nth-child(3n+2) { background-position: 0 0, -40px 30px, 20px -60px, 30px 0, 0 0, 0 0; }
.leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: url(#paper);
  mix-blend-mode: multiply;
  opacity: .32;
  pointer-events: none;
}
.leaf > * { position: relative; }
.leaf p { margin: 0 0 .6em; }
.leaf em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-hand="print"] .leaf em { font-style: italic; text-decoration: none; }
.leaf a { color: inherit; text-decoration: none; }
.leaf a:hover { color: var(--rubric); }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; font-size: .8em; color: var(--ink-soft); margin-bottom: 1.6em; }
.secret { color: var(--rubric); text-decoration: underline; text-decoration-thickness: 1.2px; text-underline-offset: 5px; }

/* Section headings */
.hd { text-align: center; margin: 0 0 1.3em; }
.no { font-size: 1.15em; line-height: 1.2; }
.ht { font-size: 1.7em; line-height: 1.25; font-weight: 400; margin: .15em 0 0; text-wrap: balance; }
.hs { font-size: .78em; color: var(--ink-soft); }
.fls { display: block; width: min(240px, 70%); height: auto; margin: .2em auto .1em; }
.fl { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.ss { font-size: 1.12em; font-weight: 400; text-align: center; margin: 1.3em 0 .5em; }
.ss::after { content: ""; display: block; width: 70px; margin: .15em auto 0; border-top: 1px solid var(--margin-rule); }

/* Body text with glosses */
.txt { position: relative; padding-left: calc(var(--gw) + var(--gg)); --gw: 170px; --gg: 26px; }
.txt::before { content: ""; position: absolute; left: var(--gw); top: -14px; bottom: 0; border-left: 1px solid var(--margin-rule); }
.row { display: grid; grid-template-columns: var(--gw) minmax(0, 1fr); column-gap: var(--gg); margin-left: calc(-1 * (var(--gw) + var(--gg))); }
.row > * { min-width: 0; }
.row > div:last-child > :last-child { margin-bottom: .6em; }
.gl { font-size: .8em; line-height: 1.4; text-align: right; padding: .42em 14px 0 0; color: var(--ink-soft); }
.gl.red { color: var(--rubric); }
:root[data-hand="print"] .gl { font-style: italic; }

.ab { font-size: .6em; vertical-align: .62em; line-height: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mk { color: var(--rubric); text-decoration: underline; text-decoration-thickness: 1.2px; text-underline-offset: 4px; }
.sub { color: var(--rubric); }
.dry { opacity: .84; }
.note { text-align: center; color: var(--ink-soft); margin-top: 1em; }

/* Annotations in red ink, and ruled lines left for the pen */
.hand { color: var(--rubric); transform: rotate(-.35deg); margin: 0 0 .2em; }
.lns { margin: 0 0 .9em; }
.ln { height: 1.45em; border-bottom: 1px solid rgba(43, 30, 20, .32); }

/* Lists */
ol.r { margin: 0 0 .7em; padding-left: 2em; list-style: lower-roman; }
ol.r li { margin-bottom: .3em; padding-left: .2em; }
ol.r li::marker { color: var(--rubric); }
ul.m { list-style: none; margin: 0 0 .6em; padding: 0; }
ul.m li { position: relative; padding-left: 1.1em; margin-bottom: .2em; }
ul.m li::before { content: "–"; position: absolute; left: .1em; color: var(--rubric); }

/* Boxes to tick, kept in this browser */
.ck { position: relative; display: grid; grid-template-columns: 1.2em minmax(0, 1fr); column-gap: .55em; margin-bottom: .55em; cursor: pointer; }
.ck input { position: absolute; left: 0; top: .25em; width: 1.2em; height: 1.2em; margin: 0; opacity: 0; cursor: pointer; }
.bx { position: relative; width: .8em; height: .8em; margin-top: .45em; border: 1.5px solid var(--ink); }
.bx::after { content: ""; position: absolute; left: .18em; top: -.28em; width: .32em; height: .75em; border: solid var(--rubric); border-width: 0 2px 2px 0; transform: rotate(40deg); opacity: 0; }
.ck input:checked + .bx::after { opacity: 1; }
.ck input:focus-visible + .bx { outline: 2px solid var(--rubric); outline-offset: 3px; }

/* The register of the blades */
.cap { text-align: center; font-size: .85em; color: var(--ink-soft); margin: .3em 0 .3em; }
.tw { overflow-x: auto; margin: 0 0 .9em; }
table.reg { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .88em; line-height: 1.45; }
table.reg th { font-weight: 400; text-align: left; color: var(--rubric); padding: .3em .5em; border-top: 1px solid rgba(43, 30, 20, .5); border-bottom: 3px double rgba(43, 30, 20, .5); }
table.reg td { padding: .4em .5em; vertical-align: top; border-bottom: 1px solid rgba(43, 30, 20, .28); }
table.reg tr.bl td { height: 2em; }

/* Scores (Section VIII) */
.sc { text-align: center; margin: 1.6em 0 .7em; }
.scn { font-size: .78em; color: var(--ink-soft); }
.sct { font-size: 1.3em; font-weight: 400; line-height: 1.3; margin: 0; }
.sc::after { content: ""; display: block; width: 90px; margin: .2em auto 0; border-top: 1px solid var(--margin-rule); }

/* Memorandum (Section IX) */
.mm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .4em 2em; }
.mh { font-size: 1.1em; font-weight: 400; text-align: center; margin: 0 0 .5em; padding-bottom: .2em; border-bottom: 1px solid var(--margin-rule); }

/* Closing (Section X) */
.em1 { font-size: 1.3em; line-height: 1.35; text-align: center; margin: 1.2em 0 .1em; }
.em2 { font-size: 1.6em; line-height: 1.2; text-align: center; color: var(--rubric); margin: 0 0 1.2em; }
.close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.close p { margin: 0 0 .2em; }
.sig { font-family: 'Mr De Haviland', var(--print); font-size: 2.6em; line-height: 1.1; transform: rotate(-3deg); transform-origin: left center; margin: .1em 0 .1em 1.2em; }

/* Wax seal */
.seal { width: 104px; height: auto; display: block; }
.w0 { stop-color: #B4402F; } .w1 { stop-color: #8A1D16; } .w2 { stop-color: #560E0A; }
.rb { fill: #6E1712; } .rb2 { fill: #821F17; }
.r1 { fill: none; stroke: #4E0C09; stroke-width: 2.5; opacity: .65; }
.r2 { fill: none; stroke: #C65A4A; stroke-width: 1; opacity: .45; }
.sx { font-family: var(--label); font-size: 32px; text-anchor: middle; fill: #4E0C09; opacity: .85; }
.sx2 { font-family: var(--label); font-size: 32px; text-anchor: middle; fill: #D36A58; opacity: .35; }
.hl { fill: #FFFFFF; opacity: .13; }

/* Title page */
.cover { text-align: center; }
.cover .head { text-align: left; }
.c-ta { font-size: 1em; color: var(--ink-soft); }
.c-tb { font-size: 2.3em; line-height: 1.1; font-weight: 400; margin: .2em 0 0; text-wrap: balance; }
.c-tc { font-size: 1.45em; color: var(--rubric); margin-top: .1em; }
.c-td { max-width: 30em; margin: .6em auto 1.6em; }
.c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.2em 2.4em; text-align: left; }
.c-grid h3, .c-toc h3 { font-size: 1.1em; font-weight: 400; text-align: center; margin: 0 0 .4em; padding-bottom: .2em; border-bottom: 1px solid var(--margin-rule); }
.pr { margin: 0 0 .55em; line-height: 1.4; }
.pl { display: block; font-size: .78em; color: var(--rubric); }
.c-toc { margin-top: 1.6em; text-align: left; }
.c-toc ol { list-style: none; margin: 0; padding: 0; columns: 2 16em; column-gap: 2.4em; }
.c-toc li { break-inside: avoid; margin-bottom: .25em; line-height: 1.4; }
.c-toc .n { display: inline-block; min-width: 2.4em; color: var(--rubric); }
.c-foot { display: flex; flex-direction: column; align-items: center; gap: .6em; margin-top: 1.8em; }

/* Catchword at the foot of each leaf */
.ft { margin-top: 1.8em; display: flex; justify-content: flex-end; font-size: .85em; color: var(--ink-soft); }

/* Phones: glosses sit above their paragraph */
@media (max-width: 640px) {
  :root { --mscale: .9; }
  .txt { --gw: 0px; --gg: 0px; }
  .txt::before { display: none; }
  .row { display: block; margin-left: 0; }
  .gl { text-align: left; padding: 0; margin: .5em 0 0; color: var(--rubric); }
  .close { grid-template-columns: 1fr; justify-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .bar button { transition: background-color .15s, border-color .15s; }
}

/* Print: US Letter, parchment to the edge of every sheet, one fresh sheet per leaf.
   Glosses run in at the head of their paragraph. Headings carry an invisible tail so they
   never sit alone at the foot of a page. */
@page { size: letter; margin: 0; }
@media print {
  html { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: transparent; color: var(--ink); padding: 0; }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
      radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 248, 228, .45), rgba(255, 248, 228, 0) 70%),
      radial-gradient(circle at 90% 5%, var(--stain), transparent 90px),
      radial-gradient(circle at 7% 62%, var(--stain), transparent 110px),
      radial-gradient(circle at 74% 93%, var(--stain), transparent 80px),
      repeating-linear-gradient(90deg, rgba(110, 80, 40, .045) 0 1px, transparent 1px 30px);
    box-shadow: inset 0 0 90px var(--edge), inset 0 0 14px var(--edge);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .desk-nav, .bar, .desk-foot { display: none; }
  .bundle { display: block; max-width: none; margin: 0; }
  .leaf {
    padding: .55in .7in .5in;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: none;
    box-shadow: none;
    text-shadow: none;
    overflow: visible;
    break-before: page;
    font-size: 16px;
    --lh: 1.62;
  }
  :root[data-hand="roundhand"] .leaf { font-size: 19px; --lh: 1.42; }
  :root[data-hand="formal"] .leaf { font-size: 13.5px; --lh: 1.8; }
  :root[data-hand="print"] .leaf { font-size: 14.5px; --lh: 1.5; }
  .bundle > .leaf:first-child { break-before: auto; }
  .leaf::before { display: none; }
  .txt { padding-left: 0; }
  .txt::before { display: none; }
  .row { display: block; margin: 0 0 .6em; }
  .row > .gl { display: inline; padding: 0; margin-right: .35em; font-size: inherit; line-height: inherit; text-align: left; color: var(--rubric); }
  .row > p { display: inline; margin: 0; }
  .row > div:last-child { display: block; margin-top: .1em; }
  .row > div:last-child > :last-child { margin-bottom: 0; }
  .row, .leaf p, .leaf li, .hd, .ck, .pr, tr, .close, .c-foot, .score { break-inside: avoid; }
  .ss, .sc, .mh, .cap { break-inside: avoid; break-after: avoid; padding-bottom: 3.4em; }
  .ss { margin-bottom: calc(.5em - 3.4em); }
  .sc { margin-bottom: calc(.7em - 3.4em); }
  .mh { margin-bottom: calc(.5em - 3.4em); }
  .cap { margin-bottom: calc(.3em - 3.4em); }
  .tw { overflow: visible; }
  table.reg { min-width: 0; }
  .c-toc a { color: inherit; }
}