/* Amar RPG: a leather-bound rulebook on aged vellum. */
@font-face { font-family: "Garamond"; src: url(fonts/garamond.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(fonts/garamond-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(fonts/garamond-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertine Display"; src: url(fonts/libertine-display.woff2) format("woff2"); font-display: swap; }

:root {
  --vellum: #E8D5AE;
  --vellum-2: #F0E2C3;
  --pane: #DCC598;
  --ink: #2B1D12;
  --ink-soft: #5E4731;
  --oxblood: #7D4733;
  --gold: #B58A3C;
  --rubric: #8A2A17;
  --leather: #2E1F14;
  --rule: #C2A574;
  --display: "Libertine Display", "Linux Libertine Display O", Georgia, serif;
  color-scheme: light;
}
/* dark: from the device setting, unless the reader chose light with the header button */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vellum: #1D1510;
    --vellum-2: #281D16;
    --pane: #271D15;
    --ink: #EADCBF;
    --ink-soft: #BCA583;
    --oxblood: #DDA06B;
    --gold: #C9A04E;
    --rubric: #E47C58;
    --leather: #110B07;
    --rule: #5C4631;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --vellum: #1D1510;
  --vellum-2: #281D16;
  --pane: #271D15;
  --ink: #EADCBF;
  --ink-soft: #BCA583;
  --oxblood: #DDA06B;
  --gold: #C9A04E;
  --rubric: #E47C58;
  --leather: #110B07;
  --rule: #5C4631;
  color-scheme: dark;
}

html { background: var(--vellum); color: var(--ink); -webkit-text-size-adjust: 100%;
  font: 400 clamp(1.06rem, 0.98rem + 0.3vw, 1.22rem)/1.55 Garamond, "EB Garamond", Georgia, serif;
  font-kerning: normal; font-variant-ligatures: common-ligatures; }
body { margin: 0; }
a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--oxblood) 45%, transparent); }
a:hover { color: var(--rubric); text-decoration-color: currentColor; }
a.wiki { text-decoration-style: dotted; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 0.6rem; z-index: 20; background: var(--vellum); padding: 0.3rem 0.6rem; }

/* ── header: the leather spine ── */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.2rem;
  height: 3.3rem; padding: 0 max(1.2rem, calc((100vw - 76rem) / 2)); background: var(--leather);
  border-bottom: 2px solid var(--gold); }
.mark { font: 1.3rem var(--display); letter-spacing: 0.34em; text-transform: uppercase; color: #E3BE72; text-decoration: none;
  padding-left: 0.3em; }
.mark:hover { color: #F4D48E; }
.search { position: relative; margin-left: auto; width: min(19rem, 46vw); }
.search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; color: #F1E2C4;
  background: rgba(255, 240, 210, 0.08); border: 1px solid rgba(227, 190, 114, 0.45); border-radius: 3px;
  padding: 0.28rem 0.6rem; }
.search input::placeholder { color: rgba(241, 226, 196, 0.6); }
#hits { position: absolute; right: 0; top: 2.3rem; width: min(26rem, 92vw); max-height: 70vh; overflow: auto;
  margin: 0; padding: 0.3rem 0; list-style: none; background: var(--vellum-2); border: 1px solid var(--rule);
  border-top: 3px solid var(--oxblood); box-shadow: 0 10px 30px rgba(20, 10, 4, 0.35); }
#hits li { padding: 0.25rem 0.9rem; line-height: 1.3; }
#hits li span { display: block; font-size: 0.8rem; font-style: italic; color: var(--ink-soft); }
#hits li.none { color: var(--ink-soft); font-style: italic; }
#hits a { text-decoration: none; }
#hits li:first-child { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.mode { background: none; border: 0; padding: 0.25rem; cursor: pointer; color: #E3BE72; line-height: 0; }
.mode:hover { color: #F4D48E; }
.mode svg { width: 1.25rem; height: 1.25rem; }
.mode .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode .sun { display: block; }
  :root:not([data-theme="light"]) .mode .moon { display: none; }
}
:root[data-theme="dark"] .mode .sun { display: block; }
:root[data-theme="dark"] .mode .moon { display: none; }
.menu-btn { display: none; color: #E3BE72; font-size: 0.95rem; cursor: pointer; padding: 0.3rem 0; }
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-toggle:focus-visible ~ .bar .menu-btn { outline: 2px solid var(--gold); }

/* ── frame: menu and page ── */
.frame { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 3.5rem;
  max-width: 76rem; margin: 0 auto; padding: 0 1.2rem; box-sizing: border-box; }
/* the menu: its own shade, the full height of the window, so it reads as navigation */
.side { position: sticky; top: 3.3rem; align-self: start; height: calc(100vh - 3.3rem); overflow-y: auto;
  padding: 1.5rem 0.8rem 2rem; font-size: 0.9rem; line-height: 1.3; scrollbar-width: thin;
  background: var(--pane); border-right: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); box-sizing: border-box; }
.side h2 { font: 1.02rem var(--display); color: var(--oxblood); margin: 1rem 0 0.25rem; }
.side h2:first-child { margin-top: 0; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li a { display: block; padding: 0.12rem 0 0.12rem 0.7rem; color: var(--ink-soft); text-decoration: none;
  border-left: 2px solid transparent; }
.side li a:hover { color: var(--ink); border-left-color: var(--rule); }
.side a[aria-current], .side a.here { color: var(--ink); border-left-color: var(--gold); }
.side a[aria-current] { font-weight: 700; }

main { min-width: 0; max-width: 50rem; padding: 1.6rem 0 4rem; }
.text > :is(p, ul, ol, dl, blockquote, pre, h2, h3, h4, h5, h6), .toc { max-width: 38rem; }
.crumbs { margin: 0 0 0.2rem; font-size: 0.88rem; font-style: italic; color: var(--ink-soft); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: normal; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem); margin: 0 0 1.1rem; }
h1::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 0.55rem; background: var(--gold); }
h2 { font-size: 1.6rem; margin: 2.2rem 0 0.6rem; color: var(--oxblood); }
h3 { font-size: 1.27rem; margin: 1.7rem 0 0.4rem; }
h4 { font-size: 1.08rem; font-style: italic; margin: 1.3rem 0 0.3rem; }
h5, h6 { font-size: 1rem; margin: 1.1rem 0 0.2rem; }
p { margin: 0 0 0.85rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 0.9rem; }
li { margin-bottom: 0.2rem; }
li::marker { color: var(--oxblood); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--gold); font-style: italic; }
code, pre { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 0.82em; }
pre { white-space: pre-wrap; background: var(--vellum-2); padding: 0.8rem 1rem; border-left: 2px solid var(--rule); }

/* the one flourish: a rubricated initial, as in a manuscript */
.lede::first-letter { float: left; font: 3.7em/0.8 var(--display); color: var(--rubric);
  padding: 0.07em 0.09em 0 0; margin-top: 0.02em; }

/* contents of a long page */
.toc { margin: 0 0 1.6rem; }
.toc summary { cursor: pointer; font-style: italic; color: var(--ink-soft); margin-bottom: 0.3rem; }
.toc ol { list-style: none; padding: 0.55rem 0 0.55rem 0.9rem; margin: 0; columns: 2 12rem; column-gap: 2rem;
  border-left: 2px solid var(--gold); font-size: 0.93rem; line-height: 1.35; }
.toc li { break-inside: avoid; margin: 0 0 0.22rem; }
.toc a { text-decoration: none; }

/* ledger card for the numbers of a spell, ritual or potion */
.stats { float: right; width: 15.5rem; margin: 0.3rem 0 1.2rem 1.8rem; padding: 0.55rem 0.9rem 0.65rem;
  background: var(--vellum-2); border: 1px solid var(--rule); border-top: 3px solid var(--oxblood);
  font-size: 0.9rem; line-height: 1.3; }
.stats dl { display: grid; grid-template-columns: auto 1fr; gap: 0.28rem 0.9rem; margin: 0; }
.stats dt { font-style: italic; color: var(--ink-soft); }
.stats dd { margin: 0; font-variant-numeric: lining-nums; }
.symbol { width: 2rem; height: auto; image-rendering: pixelated; mix-blend-mode: multiply; }
.stats .symbol { display: block; margin: 0.35rem auto 0.7rem; }
ul.index .symbol { float: left; width: 1.6rem; margin: 0.2rem 0.7rem 0 0; }
ul.index li:has(.symbol) { display: flow-root; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .symbol { mix-blend-mode: screen; filter: invert(0.88); } }
:root[data-theme="dark"] .symbol { mix-blend-mode: screen; filter: invert(0.88); }

/* tables */
/* tables are blocks of their own width, so short ones sit side by side */
.tw { display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; margin: 0.6rem 2.4rem 1.3rem 0; }
.tw .note { max-width: 24rem; margin: 0.45rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--ink-soft); line-height: 1.3; }
table { border-collapse: collapse; font-size: 0.9rem; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
caption { text-align: left; font: 1.08rem var(--display); color: var(--oxblood); padding: 0 0 0.35rem; }
th { font: 0.98rem var(--display); text-align: left; vertical-align: bottom; padding: 0.3rem 0.8rem 0.3rem 0;
  border-bottom: 1.5px solid var(--ink-soft); }
td { padding: 0.28rem 0.8rem 0.28rem 0; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
th:first-child, td:first-child { padding-left: 0.35rem; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--vellum-2) 70%, transparent); }
td em:only-child { color: var(--oxblood); }
table.list td:first-child { white-space: nowrap; }
td a { text-decoration: none; }
.key { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.jump { line-height: 1.9; }
.jump a { margin-right: 0.8rem; white-space: nowrap; }

/* lists of pages */
ul.index { list-style: none; padding: 0; }
ul.index li { margin: 0 0 0.55rem; }
ul.index a { font-size: 1.05rem; }
ul.index span { display: block; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; }
.cats { clear: both; margin-top: 3rem; padding-top: 0.7rem; border-top: 1px solid var(--rule);
  font-size: 0.88rem; font-style: italic; color: var(--ink-soft); }

/* pictures */
figure { margin: 0.3rem 0 1.2rem; }
figure.right { float: right; clear: right; margin-left: 1.8rem; max-width: 48%; }
figure.left { float: left; margin-right: 1.8rem; max-width: 48%; }
figure.center { text-align: center; }
img { max-width: 100%; height: auto; }
figure img { display: block; }
figure.center img { margin: 0 auto; }
figcaption { font-size: 0.86rem; font-style: italic; color: var(--ink-soft); margin-top: 0.35rem; line-height: 1.3; }
img.art { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.art { mix-blend-mode: normal; background: #E8D5AE; padding: 0.4rem; border-radius: 2px; }
}
:root[data-theme="dark"] img.art { mix-blend-mode: normal; background: #E8D5AE; padding: 0.4rem; border-radius: 2px; }

/* footer */
.foot { border-top: 2px solid var(--gold); background: var(--leather); color: #CDB58D;
  padding: 1.4rem max(1.2rem, calc((100vw - 76rem) / 2)); font-size: 0.9rem; }
.foot p { margin: 0 0 0.4rem; }
.foot a { color: #E3BE72; }
.foot p:last-child a { margin-right: 1.4rem; }

/* ── front page ── */
.home main { max-width: none; }
.hero { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 3rem; align-items: center;
  margin: 0.8rem 0 3rem; }
.hero .cover { width: 100%; height: auto; display: block; border: 1px solid var(--leather);
  box-shadow: 6px 8px 0 rgba(46, 31, 20, 0.22); }
.hero h1 { font-size: clamp(3rem, 2rem + 4vw, 5rem); letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 0.3rem; line-height: 1; }
.hero h1::after { display: none; }
.hero .tag { font: italic 1.35rem/1.35 Garamond, serif; color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 30rem; }
.roll { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1.1rem; align-items: start;
  max-width: 34rem; border-left: 2px solid var(--gold); padding: 0.1rem 0 0.1rem 1rem; margin: 0 0 1.6rem; }
.roll .diagram { width: 100%; height: auto; }
.roll p { margin: 0 0 0.4rem; }
.roll .eq { font: 1.7rem var(--display); letter-spacing: 0.04em; color: var(--oxblood); margin-bottom: 0.3rem; }
.doors { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.doors p { margin: 0; }
.doors a { display: inline-block; padding: 0.5rem 1.05rem; border-radius: 3px; text-decoration: none;
  border: 1.5px solid var(--oxblood); line-height: 1.25; }
.doors a.first { background: var(--oxblood); color: var(--vellum); }
.doors a.first:hover { background: var(--rubric); border-color: var(--rubric); }
.quote { font-style: italic; color: var(--ink-soft); margin: -1rem 0 1.6rem; }

/* the wiki's quick introduction box, on the front page */
.intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 2.4rem;
  background: var(--vellum-2); border: 1px solid var(--rule); border-top: 3px solid var(--oxblood);
  padding: 0.9rem 1.4rem 0.4rem; margin: 0 0 1.8rem; }
.intro h2 { grid-column: 1 / -1; font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 0.2rem; }
.intro h3 { color: var(--oxblood); margin: 0.5rem 0 0.4rem; font-size: 1.25rem; }
.intro p, .intro li { font-size: 0.97rem; }

/* the listening room: video, music and the Faerie Forest on dark leather */
.mood { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: start;
  background: var(--leather); color: #D9C6A1; padding: 1.5rem; margin: 0 0 1.6rem; border-top: 2px solid var(--gold); }
.mood h2 { color: #E3BE72; margin: 0 0 0.6rem; font-size: 1.4rem; }
.mood a { color: #E3BE72; }
.mood ul { list-style: none; padding: 0; }
.mood li { margin-bottom: 0.4rem; }
.mood p { margin: 0 0 0.6rem; }
.mood .banner { display: block; width: 100%; height: auto; margin-top: 0.3rem; }
a.video { position: relative; display: block; aspect-ratio: 16 / 9; }
a.video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  background: rgba(24, 15, 9, 0.84); color: #F4D48E; padding: 0.5rem 1.1rem 0.5rem 2.3rem; border-radius: 3px;
  font: 1.1rem var(--display); }
.play::before { content: ""; position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
  border-left: 0.75rem solid #E3BE72; border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; }
a.video:hover .play { background: rgba(24, 15, 9, 0.95); }
iframe.video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
ul.news { list-style: none; padding: 0; }
ul.news b { font-variant-numeric: lining-nums; font-weight: normal; color: var(--oxblood); margin-right: 0.4rem; }

/* image library */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.gallery a { text-decoration: none; font-size: 0.82rem; line-height: 1.25; color: var(--ink-soft); }
.gallery img { display: block; width: 100%; height: 7.5rem; object-fit: contain; background: var(--vellum-2);
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); margin-bottom: 0.3rem; }
.gallery a:hover img { border-color: var(--oxblood); }
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem 2.8rem; }
.shelf section { break-inside: avoid; }
.shelf h2 { font-size: 1.35rem; margin: 1.2rem 0 0.4rem; }
.shelf ul { list-style: none; padding: 0; }
.shelf li { margin-bottom: 0.45rem; line-height: 1.35; }
.shelf li span { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.shelf p { font-size: 0.97rem; }

/* ── phones ── */
@media (max-width: 52rem) {
  .frame { display: block; }
  .menu-btn { display: block; }
  .side { display: none; position: static; height: auto; margin: 0 -1.2rem; padding: 0.8rem 1.2rem 1.2rem;
    border-right: 0; border-bottom: 2px solid var(--gold); columns: 2 8rem; column-gap: 1.2rem; font-size: 0.86rem; }
  #hits { position: fixed; left: 0.5rem; right: 0.5rem; top: 3.1rem; width: auto; }
  figure img { max-height: 60vh; width: auto; }
  .side h2 { break-after: avoid; }
  .side ul { break-inside: avoid; }
  .menu-toggle:checked ~ .frame .side { display: block; }
  main { padding-top: 1.1rem; }
  .stats { float: none; width: auto; margin: 0 0 1.2rem; }
  .stats dl { grid-template-columns: auto 1fr auto 1fr; }
  figure.right, figure.left { float: none; margin: 0.3rem auto 1.2rem; max-width: 100%; }
  .hero { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 0; }
  .mood { grid-template-columns: 1fr; padding: 1.1rem; gap: 1.2rem; }
  .hero .cover { max-height: 16rem; object-fit: cover; object-position: 50% 30%; }
  .bar { gap: 0.9rem; }
}
@media (max-width: 30rem) {
  .stats dl { grid-template-columns: auto 1fr; }
  .mark { font-size: 1.2rem; letter-spacing: 0.22em; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
@media print {
  .bar, .side, .foot, .toc { display: none; }
  .frame { display: block; }
  html { background: none; }
}