/* Bastion — the setting site.
   A sourcebook to read, not a wiki to skim: one column, a real measure, and tables and
   pull-quotes treated as first-class, because the prose leans on both throughout. */

:root {
  --paper:      #f7f4ee;
  --paper-2:    #efeae1;
  --ink:        #23201c;
  --ink-soft:   #55503f;
  --ink-faint:  #8c8676;
  --rule:       #ddd6c8;
  --rule-soft:  #e8e2d6;
  --accent:     #7a2f2a;
  --accent-2:   #3d5566;
  --secret:     #6b4a86;
  --secret-bg:  #efe9f5;
  --dm:         #8c3a52;
  --dm-bg:      #f6e9ec;
  --gm:         #4a6b5a;
  --gm-bg:      #e8f0ea;
  --player:     #3d5566;
  --player-bg:  #e6edf2;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --measure: 40rem;
  --side: 19rem;
}

html[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #16150f;
    --paper-2:   #1e1c16;
    --ink:       #e6e0d2;
    --ink-soft:  #b0a893;
    --ink-faint: #7e7768;
    --rule:      #33302a;
    --rule-soft: #262420;
    --accent:    #d38b74;
    --accent-2:  #8fb0c4;
    --secret:    #b79ad6;
    --secret-bg: #221a2c;
    --dm:        #e08ba0;
    --dm-bg:     #2a1a1f;
    --gm:        #8fc0a4;
    --gm-bg:     #16241c;
    --player:    #8fb0c4;
    --player-bg: #151f26;
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --paper:     #16150f;
  --paper-2:   #1e1c16;
  --ink:       #e6e0d2;
  --ink-soft:  #b0a893;
  --ink-faint: #7e7768;
  --rule:      #33302a;
  --rule-soft: #262420;
  --accent:    #d38b74;
  --accent-2:  #8fb0c4;
  --secret:    #b79ad6;
  --secret-bg: #221a2c;
  --dm:        #e08ba0;
  --dm-bg:     #2a1a1f;
  --gm:        #8fc0a4;
  --gm-bg:     #16241c;
  --player:    #8fb0c4;
  --player-bg: #151f26;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 18px/1.62 var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- chrome */

.stamp {
  position: sticky; top: 0; z-index: 40;
  background: var(--dm); color: #fff;
  font: 600 12px/1 var(--sans); letter-spacing: .02em;
  padding: .55rem 1rem; text-align: center;
}
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.stamp + .top { top: 2.1rem; }
.brand {
  font: 600 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.search { position: relative; flex: 1; max-width: 30rem; }
.search input {
  width: 100%; padding: .45rem .75rem; border: 1px solid var(--rule);
  border-radius: 5px; background: var(--paper-2); color: var(--ink);
  font: 400 14px/1.4 var(--sans);
}
.search input:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.results {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 50;
  max-height: 60vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.results a {
  display: block; padding: .55rem .8rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft); font: 400 14px/1.45 var(--sans);
}
.results a:last-child { border-bottom: 0; }
.results a:hover, .results a.sel { background: var(--paper-2); }
.results b { color: var(--accent); font-weight: 600; }
.results .rsec { color: var(--ink-faint); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; display: block; }
.results .empty { padding: .8rem; color: var(--ink-faint); font: 400 14px var(--sans); }

.toggle { display: flex; align-items: center; gap: .4rem; white-space: nowrap;
  font: 500 13px var(--sans); color: var(--ink-soft); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.themer {
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-soft);
  border-radius: 5px; padding: .3rem .5rem; cursor: pointer; font-size: 14px; line-height: 1;
}
.burger { display: none; border: 1px solid var(--rule); background: var(--paper-2);
  color: var(--ink); border-radius: 5px; padding: .3rem .55rem; cursor: pointer; }

/* ---------------------------------------------------------------- layout */

.wrap { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 0; }
/* The lightbox. An overlay, a picture and three keys - no library. */
.lightbox { display: none; position: fixed; inset: 0; z-index: 50;
            background: rgba(10, 9, 7, .93); align-items: center; justify-content: center; }
body.lb-open { overflow: hidden; }
body.lb-open .lightbox { display: flex; }
.lightbox figure { margin: 0; display: flex; flex-direction: column;
                   align-items: center; gap: .7rem; max-width: 92vw; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto;
                border-radius: 4px; box-shadow: 0 10px 50px rgba(0, 0, 0, .65); }
.lightbox figcaption { font: 400 13px/1.5 var(--sans); color: #cfc7b6;
                       max-width: 44rem; text-align: center; }
.lb-x, .lb-nav { position: absolute; background: none; border: 0; cursor: pointer;
                 color: #b8b0a0; font-family: var(--sans); font-weight: 300;
                 line-height: 1; padding: .4rem .9rem; }
.lb-x { top: .5rem; right: .9rem; font-size: 30px; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 48px; }
.lb-prev { left: .3rem; }
.lb-next { right: .3rem; }
.lb-x:hover, .lb-nav:hover, .lb-x:focus, .lb-nav:focus { color: #fff; outline: none; }
.lightbox.one .lb-nav { display: none; }
@media (max-width: 40rem) { .lb-nav { font-size: 34px; } }

/* A one-page build: no rail, no search, and the column takes the whole width. */
body.solo .wrap { grid-template-columns: minmax(0, 1fr); }
body.solo .side, body.solo .search, body.solo .burger { display: none; }
body.solo .top { justify-content: center; }
.side {
  border-right: 1px solid var(--rule);
  padding: 1.5rem 1rem 4rem 1.25rem;
  position: sticky; align-self: start;
  top: 3.4rem; max-height: calc(100vh - 3.4rem); overflow-y: auto;
}
.stamp ~ .wrap .side { top: 5.5rem; max-height: calc(100vh - 5.5rem); }
.side .sec { margin-bottom: 1.6rem; }
.side h2 {
  margin: 0 0 .5rem; font: 600 11px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.side ul { list-style: none; margin: 0; padding: 0; }
.navlink {
  display: block; padding: .22rem .5rem; margin-left: -.5rem; border-radius: 4px;
  color: var(--ink-soft); text-decoration: none; font: 400 14px/1.4 var(--sans);
}
.navlink:hover { background: var(--paper-2); color: var(--ink); }
/* A title in a name. Italic is the convention for a term the reader may not parse as
   English; the weight drop is what makes the seam visible at a glance in a list. */
.navlink em, .door b em { font-style: italic; font-weight: 400; color: var(--ink-faint); }
.navlink.here em { color: inherit; }
.navlink.here { color: var(--accent); font-weight: 600; background: var(--paper-2); }
.navlink.notplayer::after {
  content: "not in player site"; display: inline-block; margin-left: .4rem;
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dm); border: 1px solid currentColor; border-radius: 3px;
  padding: 0 .25rem; vertical-align: 1px; opacity: .8;
}
.toc { margin: .2rem 0 .5rem .3rem; border-left: 1px solid var(--rule); }
.toc li a {
  display: block; padding: .12rem .5rem; color: var(--ink-faint);
  text-decoration: none; font: 400 13px/1.4 var(--sans);
}
.toc li a:hover { color: var(--accent); }
.toc li.l3 a { padding-left: 1.25rem; font-size: 12.5px; }

.main { padding: 2.5rem 2rem 6rem; min-width: 0; }
.doc { max-width: var(--measure); margin: 0 auto; }

/* ---------------------------------------------------------------- prose */

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: var(--serif); font-weight: 600; line-height: 1.22;
  color: var(--ink); scroll-margin-top: 6rem;
}
.doc h1 {
  font-size: 2.05rem; margin: 0 0 1.6rem; padding-bottom: .7rem;
  border-bottom: 2px solid var(--rule); letter-spacing: -.01em;
}
.doc h2 {
  font-size: 1.42rem; margin: 3rem 0 .9rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule-soft);
}
.doc h3 { font-size: 1.14rem; margin: 2.1rem 0 .7rem; }
.doc h4 { font-size: 1rem; margin: 1.6rem 0 .55rem; color: var(--ink-soft); }
.doc h5, .doc h6 {
  font: 600 .82rem/1.35 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  margin: 1.5rem 0 .5rem; color: var(--ink-faint);
}
.doc p { margin: 0 0 1.05rem; }
.doc a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.doc strong { font-weight: 600; color: var(--ink); }
.doc em { font-style: italic; color: var(--ink-soft); }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0; }
.doc ul, .doc ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
.doc li { margin: .3rem 0; }
.doc li > ul, .doc li > ol { margin: .3rem 0; }
.doc code {
  font: 400 .84em/1.4 var(--mono); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-radius: 3px; padding: .06em .32em;
  color: var(--ink-soft);
}
.doc a code { color: inherit; border-color: currentColor; background: transparent; }
.doc pre {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
  padding: .9rem 1.1rem; overflow-x: auto; font-size: .8rem; line-height: 1.5;
}
.doc pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.doc img, .doc video { max-width: 100%; height: auto; border-radius: 4px; }
/* A portrait in a table cell is a thumbnail, not an illustration. The panels are one
   canvas now, so a plain fixed width is enough - it was a height cap while two aspect
   ratios were in play and the taller ones came out larger. */
.doc td img { width: 150px; height: auto; display: block; margin: 0 auto; }
.doc td:first-child { width: 170px; }
.doc td { vertical-align: middle; }
.doc video { display: block; background: #000; }

/* Blockquotes carry the pull-quotes — often a heading plus a line. Treat them as cards. */
.doc blockquote {
  margin: 1.7rem 0; padding: 1.05rem 1.3rem;
  background: var(--paper-2); border-left: 3px solid var(--accent-2);
  border-radius: 0 5px 5px 0;
}
.doc blockquote > :first-child { margin-top: 0; }
.doc blockquote > :last-child { margin-bottom: 0; }
.doc blockquote h2, .doc blockquote h3, .doc blockquote h4 {
  border: 0; padding: 0; margin: 0 0 .6rem; font-size: 1.08rem; color: var(--accent-2);
}
.doc blockquote blockquote { background: transparent; }

/* Tables are load-bearing here — the split rule, the glossary, every decision table. */
.doc table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font: 400 .87rem/1.5 var(--sans);
}
.doc .tw { overflow-x: auto; margin: 1.5rem 0; }
.doc .tw table { margin: 0; }
.doc th, .doc td {
  border: 1px solid var(--rule); padding: .5rem .7rem;
  text-align: left; vertical-align: top;
}
.doc th {
  background: var(--paper-2); font-weight: 600; color: var(--ink-soft);
  font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
}
.doc tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.doc td code { font-size: .8em; }

/* ---------------------------------------------------------------- marks */

.am { position: relative; border-radius: 4px; padding: .1rem .8rem; margin: .9rem 0 .9rem -.8rem; }
.am::before {
  content: attr(data-mark); position: absolute; top: -.62rem; left: .7rem;
  font: 700 9px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 0 .35rem; border-radius: 3px; color: #fff;
}
.am > :first-child { margin-top: .7rem; }
.am > :last-child { margin-bottom: .7rem; }
.am-review { background: var(--paper-2); box-shadow: inset 2px 0 var(--ink-faint);
             border: 1px dashed var(--rule); }
.am-review::before { background: var(--ink-faint); content: "review \2014 " attr(data-note); }
.am-secret { background: var(--secret-bg); box-shadow: inset 2px 0 var(--secret); }
.am-secret::before { background: var(--secret); content: "secret \2014 they could find this"; }
.am-dm     { background: var(--dm-bg);     box-shadow: inset 2px 0 var(--dm); }
.am-dm::before     { background: var(--dm); content: "dm — secret"; }
.am-gm     { background: var(--gm-bg);     box-shadow: inset 2px 0 var(--gm); }
.am-gm::before     { background: var(--gm); content: "gm — to the DM"; }
/* A spoiler reaches the player - it hides nothing, it only asks first. Drawn as an
   object to click rather than an annotation over the prose. */
.spoiler { margin: 1.1rem 0; border: 1px solid var(--rule); border-radius: 5px;
           background: var(--paper-2); }
.spoiler > summary {
  cursor: pointer; padding: .5rem .8rem; list-style: none;
  font: 600 13px var(--sans); color: var(--ink-soft);
  letter-spacing: .02em; border-radius: 4px;
}
.spoiler > summary::-webkit-details-marker { display: none; }
.spoiler > summary::before { content: "\25B8"; display: inline-block; margin-right: .5rem;
                             color: var(--ink-faint); transition: transform .12s; }
.spoiler[open] > summary::before { transform: rotate(90deg); }
.spoiler > summary:hover { color: var(--ink); }
.spoiler[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.spoiler > :not(summary) { margin-left: .8rem; margin-right: .8rem; }
.spoiler > :last-child { margin-bottom: .8rem; }

.am-player { background: var(--player-bg); box-shadow: inset 2px 0 var(--player); }
.am-player::before { background: var(--player); content: "player-safe"; }

/* Player view: a review aid, not a strip. The secrets are still in the page source. */
body.playerview .am-dm, body.playerview .am-gm,
body.playerview .am-secret { display: none; }
body.playerview .doc.inverse > *:not(h1):not(.am-player) { display: none; }
body.playerview .am-player { background: none; box-shadow: none; padding: 0; margin: 0; }
body.playerview .am-player::before { display: none; }
body.playerview .navlink.notplayer,
body.playerview .toc li.notplayer a,
body.playerview .side h2.notplayer { opacity: .35; text-decoration: line-through; }
body.playerview .notice { display: block; }

/* Update markers — infrastructure for the play arc. Nothing renders these yet. */
.upd {
  margin: 1.5rem 0; padding: 1rem 1.15rem .6rem; border-radius: 5px;
  background: var(--paper-2); border: 1px dashed var(--rule);
}
.upd-tag {
  display: inline-block; margin-bottom: .5rem;
  font: 700 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-2);
}
.upd-corrected { border-style: solid; }
.upd-corrected .upd-tag { color: var(--dm); }

/* ---------------------------------------------------------------- bits */

.notice {
  max-width: var(--measure); margin: 0 auto 1.6rem; padding: .7rem 1rem;
  background: var(--dm-bg); border-left: 3px solid var(--dm); border-radius: 0 4px 4px 0;
  font: 400 14px/1.5 var(--sans); color: var(--ink-soft);
}
.notice.leaks { background: var(--paper-2); border-left-color: var(--accent); }
.notice.leaks b { color: var(--accent); display: block; margin-bottom: .35rem; }
.notice.leaks ul { margin: 0; padding-left: 1.15rem; }
.notice.leaks li { margin: .15rem 0; font-family: var(--mono); font-size: 12.5px; }
a.offsite { color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed; }

.home .lede { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.8rem; }
.home > h1 { margin-bottom: .9rem; }
.home video { margin: 0 0 1.8rem; width: 100%; }

/* The change feed. Generated from the update markers, so it cannot drift. */
.feed { margin: 2.6rem 0 0; }
.feed > h2 { font-size: 1.05rem; margin-bottom: .7rem; }
.feed.empty p { color: var(--ink-soft); font-size: .95rem; }
.feed ol { list-style: none; margin: 0; padding: 0; }
.fd a { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 .8rem;
        padding: .5rem .6rem; border-radius: 5px; text-decoration: none;
        border-left: 2px solid var(--rule); }
.fd a:hover { background: var(--paper-2); border-left-color: var(--accent); }
.fd .when { font: 600 12px var(--sans); color: var(--ink-faint);
            text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem; }
.fd b { font: 600 14px var(--sans); color: var(--ink); }
.fd .where { grid-column: 2; font: 400 13px var(--sans); color: var(--ink-soft); }
.fd-corrected .when { color: var(--accent); }

/* The doors: a short, deliberate set. Everything else is the rail and the search. */
.doors { display: grid; gap: .6rem; margin: 2.4rem 0 0;
         grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.door { display: block; padding: .85rem 1rem; text-decoration: none;
        border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
        transition: border-color .12s, background .12s; }
.door:hover { border-color: var(--accent); background: var(--paper-2); }
.door b { display: block; font: 600 15px var(--sans); color: var(--ink); margin-bottom: .2rem; }
.door span { display: block; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); }
.door.notplayer b::after {
  content: "not in player site"; display: inline-block; margin-left: .4rem;
  font: 400 9px var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--dm); border: 1px solid currentColor; border-radius: 3px;
  padding: 0 .25rem; vertical-align: 2px;
}
body.playerview .door.notplayer { opacity: .35; }
.card { margin: 2.2rem 0; }
.card p { color: var(--ink-soft); font-size: .95rem; }
.grid { list-style: none; padding: 0; margin: .8rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .3rem .9rem; }
.grid a { font: 400 14px var(--sans); }
.grid .notplayer { opacity: .6; }

.pager {
  max-width: var(--measure); margin: 4rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--rule); display: flex; gap: 1rem; justify-content: space-between;
}
.pn {
  flex: 1; text-decoration: none; color: var(--ink); font: 500 15px/1.4 var(--serif);
  padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: 5px;
}
.pn:hover { border-color: var(--accent); }
.pn.next { text-align: right; }
.pn span { display: block; font: 600 10px/1.6 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

mark.hit { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit;
  border-radius: 2px; padding: 0 .1em; }

@media (max-width: 60rem) {
  body { font-size: 17px; }
  .wrap { grid-template-columns: 1fr; }
  .side {
    display: none; position: fixed; inset: 3.4rem 0 0 0; z-index: 25; max-height: none;
    background: var(--paper); border-right: 0; padding-bottom: 6rem;
  }
  body.menu .side { display: block; }
  .burger { display: block; }
  .main { padding: 1.75rem 1.1rem 5rem; }
  .toggle span { display: none; }
}
@media print {
  .top, .side, .stamp, .pager, .toggle { display: none !important; }
  .wrap { display: block; }
  body { font-size: 11pt; }
}