/* Layout: a storybook spread. Words on the left page, one illustrated plate pinned on the right
   that moves from an ordinary meeting, through a story by lamplight, and back to work. The whole page
   takes the plate's light as you scroll. Single look by design: parchment by day, dusk for the story. */
:root {
  color-scheme: light;
  --parchment: #F3E9D2;
  --vellum:    #FBF6EA;
  --oak:       #3B2A1E;
  --walnut:    #6B4A2F;
  --oxblood:   #7A2E2A;
  --candle:    #D9922E;
  --brass:     #B08D57;
  --moss:      #5E6B3A;
  --dusk:      #2E3A4F;

  /* mood tokens: what the light is doing right now */
  --bg:    var(--parchment);
  --fg:    var(--oak);
  --fg-2:  var(--walnut);
  --h1:    var(--oxblood);
  --h2:    var(--oak);
  --mat:   var(--vellum);
  --line:  var(--brass);

  --f-display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-label:   "Alegreya SC", "Palatino Linotype", Georgia, serif;
  --f-body:    "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --f-book:    "Alegreya", "Palatino Linotype", Georgia, serif;
  --f-hand:    "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.4, .1, .2, 1);
}
body[data-mood="dusk"] {
  --bg:   var(--dusk);
  --fg:   var(--parchment);
  --fg-2: #CFC3A8;
  --h2:   var(--candle);
  --mat:  #3A4760;
  --line: #8C7550;
}
body[data-mood="evening"] { --bg: #EEDFC0; --mat: #F7EEDC; }
body[data-mood="morning"] { --bg: var(--vellum); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.6;
  transition: background-color 1.4s var(--ease), color 1.4s var(--ease);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 4.9vw, 4.3rem); line-height: 1.04; color: var(--h1); letter-spacing: -.005em; }
h2 { font-size: clamp(2.3rem, 3.4vw, 3rem); line-height: 1.08; color: var(--h2); transition: color 1.4s var(--ease); }
h3 { font-family: var(--f-label); font-weight: 500; font-size: 1.2rem; letter-spacing: .03em; margin: 0; line-height: 1.3; }
p { margin: 0; max-width: 34em; text-wrap: pretty; }
.label {
  font-family: var(--f-label); font-weight: 500; font-size: 1.05rem; letter-spacing: .07em;
  color: var(--fg-2); transition: color 1.4s var(--ease); margin: 0;
}
.quiet { color: var(--fg-2); transition: color 1.4s var(--ease); }
.fleuron { display: block; width: 7.5rem; height: 1rem; color: var(--line); margin-top: .9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; transition: color 1.4s; }
.flow { display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- the Baldur's Gate 3 strip ---------- */
.strip { background: var(--dusk); color: var(--parchment); text-align: center; padding-block: .5rem; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.strip a {
  display: inline-flex; align-items: center; gap: .55rem; color: var(--parchment); text-decoration: none;
  font-family: var(--f-label); font-weight: 500; font-size: 1rem; letter-spacing: .05em;
}
.strip a:hover .long, .strip a:hover .short { text-decoration: underline; text-decoration-color: var(--candle); text-underline-offset: .3em; }
.strip .icon { width: 1.35rem; height: 1.35rem; color: var(--candle); flex: none; }
.strip .short { display: none; }

/* ---------- masthead ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 84rem; margin-inline: auto;
  padding-block: 1.1rem; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.wordmark img { width: 2.6rem; height: 2.6rem; }
.wordmark span { font-family: var(--f-display); font-size: 1.4rem; line-height: 1.05; color: var(--oak); }
.wordmark small { display: block; font-family: var(--f-label); font-size: .85rem; letter-spacing: .08em; color: var(--walnut); }
.masthead-right { display: flex; align-items: center; gap: .7rem; }
.masthead nav { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.6rem); }
.masthead nav a { font-family: var(--f-label); font-weight: 500; font-size: 1.05rem; letter-spacing: .05em; text-decoration: none; color: var(--walnut); }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--oak); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--brass); }
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; font-family: var(--f-label); font-weight: 700; font-size: 1rem; letter-spacing: .05em;
  color: var(--oak); padding: .45rem .85rem .5rem; border: 1px solid var(--brass); border-radius: 3px; background: var(--vellum);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--parchment); }
.menu nav {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 15rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--vellum); border: 1px solid var(--brass); padding: .6rem; box-shadow: 0 24px 40px -24px rgba(43,30,20,.6);
}
.menu nav a { padding: .6rem .7rem; color: var(--oak); }
.menu nav .btn { justify-content: center; margin-bottom: .3rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-label); font-weight: 700; font-size: 1.1rem; letter-spacing: .05em;
  color: var(--oak); background: var(--candle); text-decoration: none;
  padding: .75rem 1.35rem .8rem; border: 1px solid #A86F1E; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,235,200,.45), 0 10px 22px -14px rgba(122,46,42,.8);
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:hover { background: #E39E3C; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,235,200,.5), 0 14px 26px -14px rgba(122,46,42,.9); }
.btn svg { width: 1.15rem; height: 1.15rem; }
.link-quiet {
  font-family: var(--f-label); font-weight: 500; font-size: 1.1rem; letter-spacing: .05em;
  color: var(--fg); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: .32em; transition: color 1.4s var(--ease);
}
.masthead .btn { font-size: 1rem; padding: .5rem 1rem .55rem; color: var(--oak); white-space: nowrap; flex: none; }

/* ---------- the story: words + pinned plate ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  max-width: 84rem; margin-inline: auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.chapters { grid-column: 1; grid-row: 1; }
.chapter {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 1.15rem;
  padding-block: 14vh;
}
.chapter.hero { min-height: calc(100svh - 6rem); padding-block: 4vh 12vh; gap: 1.4rem; }
.hero .lede { font-size: 1.28rem; line-height: 1.55; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; margin-top: .4rem; }
.facts { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.facts li { font-family: var(--f-label); font-weight: 500; font-size: 1rem; letter-spacing: .05em; color: var(--fg-2); }
.facts li + li::before { content: "·"; margin-right: 1.1rem; color: var(--brass); }

.plate-sticky {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
}
.plate { margin: 0; width: 100%; }
.plate-frame {
  position: relative; aspect-ratio: 3 / 2; width: 100%;
  padding: 11px; background: var(--mat);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(59,42,30,.06), 0 30px 60px -30px rgba(43,30,20,.55);
  transition: background-color 1.4s var(--ease), border-color 1.4s var(--ease), box-shadow 1.4s var(--ease);
}
.plate-frame::after { /* inner hairline, like a mounted print */
  content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); opacity: .45; pointer-events: none;
}
body[data-mood="dusk"] .plate-frame {
  box-shadow: 0 0 0 1px rgba(217,146,46,.15), 0 0 90px -10px rgba(217,146,46,.32), 0 30px 60px -30px rgba(0,0,0,.6);
  animation: frame-glow 4.2s ease-in-out infinite;
}
.window { position: absolute; inset: 11px; overflow: hidden; background: #2a2219; }
.drift { position: absolute; inset: 0; animation: drift 32s ease-in-out infinite alternate; transform-origin: 46% 48%; }
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transition: opacity 1.5s var(--ease);
}
.scene.is-on { opacity: 1; }
.lantern-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 48%), rgba(255,206,130,.55) 0, rgba(240,170,70,.22) 14%, rgba(217,146,46,0) 34%);
  mix-blend-mode: screen;
  transition: opacity 1.5s var(--ease);
}
.plate.is-dusk .lantern-glow { opacity: 1; animation: flicker 3.4s steps(1, end) infinite; }
.plate.is-dusk .lantern-glow.soft { animation: flicker-soft 2.6s ease-in-out infinite; }
.caption {
  display: grid; margin-top: .9rem; min-height: 2.2rem;
  font-family: var(--f-hand); font-weight: 500; font-size: 1.55rem; line-height: 1.2; color: var(--fg-2);
  transition: color 1.4s var(--ease);
}
.caption span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.caption span.is-on { opacity: 1; transform: none; }

/* the game master's notes */
.notes { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.15rem; padding-left: 1.1rem; border-left: 1px solid var(--line); transition: border-color 1.4s; }
.notes-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.notes-head .label { color: var(--fg); }
.note { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .9rem; align-items: start; }
.note .icon { width: 2.2rem; height: 2.2rem; margin-top: .15rem; color: var(--fg); }
.note .dim { font-family: var(--f-label); font-weight: 500; font-size: .98rem; letter-spacing: .07em; color: var(--fg-2); display: block; transition: color 1.4s; }
.note .hand { font-family: var(--f-hand); font-weight: 500; font-size: 1.6rem; line-height: 1.15; display: block; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ink-in .icon { stroke-dasharray: 90; animation: ink 1.5s var(--ease) both; }
.ink-in .hand { animation: write 1.3s .25s var(--ease) both; }

/* debrief steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .95rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .7rem; }
.steps li::before { content: counter(step); font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--oxblood); padding-top: .1rem; }
.steps strong { font-family: var(--f-label); font-weight: 500; letter-spacing: .04em; font-size: 1.12rem; display: block; line-height: 1.35; }
.steps span { color: var(--fg-2); }
.gm-hand { font-family: var(--f-hand); font-weight: 500; font-size: 1.55rem; line-height: 1.2; color: var(--fg-2); }

/* ---------- bands after the story ---------- */
.band { padding-block: clamp(4.5rem, 10vw, 8rem); }
.wrap { max-width: 76rem; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.band-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.band-head.center { align-items: center; text-align: center; }
.band-head.center p { margin-inline: auto; }

.map-strip {
  height: clamp(64px, 9vw, 104px); max-width: 76rem; margin-inline: auto;
  background-image: url("/art/web/08-map.jpg"); background-size: cover; background-position: 50% var(--y, 50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mix-blend-mode: multiply; opacity: .85;
}

/* the write-up, shown as a field report */
.writeup-grid { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.report {
  position: relative; background: var(--vellum); color: var(--oak);
  border: 1px solid var(--brass); padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.25rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.2rem) clamp(3.6rem, 7vw, 5rem);
  box-shadow: 0 30px 60px -36px rgba(43,30,20,.6);
  font-family: var(--f-book); font-size: 1.06rem; line-height: 1.6;
  transform: rotate(-.6deg);
}
.report::before { /* the ledger margin rule */
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(2.7rem, 5.4vw, 3.9rem); width: 1px; background: rgba(122,46,42,.35);
}
.report-tag {
  position: absolute; top: -.85rem; right: 1.4rem;
  font-family: var(--f-label); font-weight: 700; font-size: .95rem; letter-spacing: .08em;
  background: var(--candle); color: var(--oak); padding: .2rem .8rem .25rem; border-radius: 2px;
}
.report header { display: flex; flex-direction: column; gap: .3rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(176,141,87,.6); margin-bottom: 1.2rem; }
.report .kicker { font-family: var(--f-label); font-weight: 500; letter-spacing: .08em; font-size: .98rem; color: var(--walnut); }
.report .title { font-family: var(--f-display); font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.1; }
.report h3 { color: var(--walnut); font-size: 1.05rem; margin: 1.3rem 0 .45rem; }
.report p { max-width: none; }
.moments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.moments li { position: relative; }
.moments .icon { position: absolute; left: calc(-1 * clamp(3rem, 6vw, 4.2rem)); top: .05rem; width: 1.7rem; height: 1.7rem; color: var(--walnut); }
.moments .icon + b { font-family: var(--f-label); font-weight: 500; letter-spacing: .05em; font-size: .98rem; color: var(--walnut); margin-right: .4rem; }
.ledger {
  list-style: none; padding: 0; margin: 0;
  background-image: repeating-linear-gradient(transparent 0 2.35rem, rgba(176,141,87,.55) 2.35rem calc(2.35rem + 1px));
}
.ledger li { font-family: var(--f-hand); font-weight: 500; font-size: 1.6rem; line-height: 2.35rem; color: var(--oak); }
.report footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.report footer p { font-size: .98rem; color: var(--walnut); max-width: 22em; }
.seal { width: clamp(5.5rem, 11vw, 7.5rem); height: auto; transform: rotate(-9deg); flex: none; margin: -1rem -.4rem -.6rem 0; }
.ink-in .seal { animation: stamp .7s .2s cubic-bezier(.3, 1.6, .5, 1) both; }

/* what nobody has to do: a four-panel game master's screen */
.screen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); perspective: 1600px; }
.screen article {
  background: var(--vellum); border: 1px solid var(--brass); padding: 1.6rem 1.4rem 1.8rem;
  display: flex; flex-direction: column; gap: .7rem; position: relative;
  box-shadow: 0 26px 40px -30px rgba(43,30,20,.55);
}
.screen article::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.screen article:nth-child(odd)  { transform: rotateY(5deg);  transform-origin: right center; background: linear-gradient(90deg, #F6EEDC, var(--vellum)); }
.screen article:nth-child(even) { transform: rotateY(-5deg); transform-origin: left center;  background: linear-gradient(90deg, var(--vellum), #F6EEDC); }
.screen article + article { border-left: none; }
.screen .icon { width: 2.4rem; height: 2.4rem; color: var(--oak); }
.screen h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; letter-spacing: 0; line-height: 1.1; text-wrap: balance; }
.screen p { font-size: 1.05rem; color: var(--walnut); }

/* price */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); max-width: 58rem; margin-inline: auto; }
.price {
  background: var(--vellum); border: 1px solid var(--brass); padding: clamp(1.5rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: .8rem; position: relative;
}
.price::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.price .amount { font-family: var(--f-book); font-weight: 500; font-size: clamp(3.2rem, 5.6vw, 4.2rem); line-height: 1; color: var(--oak); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; letter-spacing: -.01em; }
.price .amount small { font-family: var(--f-label); font-size: 1.05rem; letter-spacing: .06em; color: var(--walnut); margin-left: .35rem; }
.price.pilot .amount { color: var(--oxblood); }
.price p { color: var(--walnut); font-size: 1.05rem; }
.price .btn { align-self: flex-start; margin-top: auto; }
.price-notes { max-width: 58rem; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1.6rem; list-style: none; padding: 0; }
.price-notes li { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--brass); padding-top: .7rem; }
.price-notes b { font-family: var(--f-label); font-weight: 500; letter-spacing: .05em; font-size: 1rem; color: var(--walnut); }
.price-notes span { font-size: 1.02rem; line-height: 1.4; }

/* three ways in, each a link */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.way {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--oak);
  background: var(--vellum); border: 1px solid var(--brass); padding: .8rem 1.4rem 1.5rem; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.way::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.way:hover { transform: translateY(-3px); box-shadow: 0 26px 40px -30px rgba(43,30,20,.6); }
.way img { width: 62%; height: auto; align-self: center; }
.way .label { color: var(--oak); font-size: 1.1rem; }
.way span:last-child { color: var(--walnut); font-size: 1.03rem; }

/* who runs it */
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.who .bio::first-letter {
  font-family: var(--f-display); float: left; font-size: 4.6rem; line-height: .78; padding: .32rem .55rem 0 0; color: var(--oak);
}
blockquote { margin: 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--brass); }
blockquote p { font-family: var(--f-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.22; max-width: 20em; }
blockquote footer { margin-top: 1rem; font-family: var(--f-label); font-weight: 500; letter-spacing: .06em; color: var(--walnut); }

/* book */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.address {
  font-family: var(--f-body); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--oak);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}
.book .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.dragon { position: relative; }
.dragon img { width: 100%; height: auto; animation: breathe 6.5s ease-in-out infinite; transform-origin: 50% 80%; }
.dragon .candle-glow {
  position: absolute; left: var(--cx, 78%); top: var(--cy, 40%); width: 26%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255,200,120,.55), rgba(217,146,46,0) 65%); mix-blend-mode: screen; pointer-events: none;
  animation: flicker-soft 2.8s ease-in-out infinite;
}
.copied { font-family: var(--f-label); font-weight: 500; letter-spacing: .05em; color: var(--moss); }

.colophon { padding-block: 2.6rem 3rem; color: var(--walnut); font-size: 1rem; border-top: 1px solid rgba(176,141,87,.5); }
.colophon-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, auto); gap: 1.6rem 3rem; align-items: start; }
.colophon-brand { display: flex; gap: .9rem; align-items: flex-start; }
.colophon-brand img { width: 2.6rem; height: 2.6rem; flex: none; }
.colophon-brand p { max-width: 24em; line-height: 1.5; }
.colophon-brand b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; color: var(--oak); margin-bottom: .2rem; }
.colophon nav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .35rem 2rem; }
.colophon a { color: var(--walnut); text-decoration-color: var(--brass); text-underline-offset: .25em; }
.colophon a:hover { color: var(--oak); }
.price-more { text-align: center; max-width: none; margin-top: 1.8rem; color: var(--walnut); }

/* ---------- motion ---------- */
@keyframes drift { from { transform: scale(1.005) translate(0, 0); } to { transform: scale(1.045) translate(-.6%, -.4%); } }
@keyframes flicker {
  0% { opacity: .92; } 7% { opacity: .78; } 11% { opacity: 1; } 23% { opacity: .86; } 31% { opacity: .97; }
  44% { opacity: .8; } 52% { opacity: 1; } 63% { opacity: .9; } 71% { opacity: .76; } 78% { opacity: .95; } 90% { opacity: .85; }
}
@keyframes flicker-soft { 0%, 100% { opacity: .7; transform: scale(1); } 35% { opacity: 1; transform: scale(1.04); } 60% { opacity: .82; transform: scale(.98); } }
@keyframes frame-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217,146,46,.15), 0 0 90px -10px rgba(217,146,46,.30), 0 30px 60px -30px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(217,146,46,.2),  0 0 110px -6px rgba(217,146,46,.40), 0 30px 60px -30px rgba(0,0,0,.6); }
}
@keyframes ink { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stamp { from { transform: rotate(-9deg) scale(1.35); } to { transform: rotate(-9deg) scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.008, 1.016); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, h2, .label, .quiet, .plate-frame, .caption { transition: none; }
  .drift, .lantern-glow, .dragon img, .dragon .candle-glow, body[data-mood="dusk"] .plate-frame { animation: none !important; }
  .scene, .caption span { transition-duration: .01s; }
  .ink-in .icon, .ink-in .hand, .ink-in .seal { animation: none; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 1080px) {
  .screen { grid-template-columns: repeat(2, minmax(0, 1fr)); perspective: none; gap: 0; }
  .screen article, .screen article:nth-child(odd), .screen article:nth-child(even) { transform: none; }
  .screen article:nth-child(3) { border-left: 1px solid var(--brass); }
  .screen article:nth-child(n+3) { border-top: none; }
  .price-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .nav a:not(.btn) { display: none; }
  .menu { display: block; }
  .colophon-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colophon-mail { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body { font-size: 1.08rem; }
  .wordmark span { font-size: 1.2rem; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .plate-sticky {
    grid-column: 1; grid-row: 1; height: auto; z-index: 3;
    top: env(safe-area-inset-top, 0px);
    padding-block: 8px 4px; background: var(--bg); transition: background-color 1.4s var(--ease);
    margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
    padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  }
  .plate-sticky::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px;
    background: linear-gradient(var(--bg), rgba(0,0,0,0)); pointer-events: none;
  }
  .plate-frame { padding: 6px; }
  .plate-frame::after { inset: 3px; }
  .window { inset: 6px; }
  .caption { font-size: 1.3rem; margin-top: .45rem; min-height: 1.6rem; }
  .chapters { grid-row: 2; }
  .chapter { min-height: 78svh; padding-block: 9vh; }
  .chapter.hero { min-height: auto; padding-block: 2rem 5rem; }
  .writeup-grid, .who, .book { grid-template-columns: minmax(0, 1fr); }
  .ways { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .report { transform: none; }
  .book .dragon { max-width: 20rem; justify-self: center; order: -1; }
}
@media (max-width: 560px) {
  .screen { grid-template-columns: minmax(0, 1fr); }
  .screen article, .screen article:nth-child(3) { border-left: 1px solid var(--brass); }
  .screen article + article { border-top: none; }
  .prices { grid-template-columns: minmax(0, 1fr); }
  .price-notes { grid-template-columns: minmax(0, 1fr); }
  .wordmark small { display: none; }
  .strip .long { display: none; }
  .strip .short { display: inline; }
  .wordmark { gap: .55rem; }
  .wordmark img { width: 2.2rem; height: 2.2rem; }
  .wordmark span { font-size: 1.08rem; }
  .masthead .btn { font-size: .95rem; padding: .45rem .8rem .5rem; }
  .nav { display: none !important; }
  .colophon-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shared parts of the inner pages. The home page's own styles (tokens, type, masthead, buttons,
   panels, footer) come first in site.css; these build on them. */

main { display: block; }
.narrow { max-width: 54rem; }

/* page openings: words on the left, one picture on the right */
.page-hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-grid .lede { font-size: 1.25rem; line-height: 1.55; }
.vignette { margin: 0; justify-self: center; width: min(100%, 26rem); }
.vignette img { width: 100%; height: auto; display: block; }
.plate.static .plate-frame { box-shadow: 0 1px 0 rgba(59,42,30,.06), 0 30px 60px -30px rgba(43,30,20,.55); }
.plate.static .scene { opacity: 1; }
.plate.static .caption { display: block; }

/* the afternoon, in order */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--brass); display: flex; flex-direction: column; gap: 2.2rem; }
.timeline li { position: relative; display: flex; flex-direction: column; gap: .45rem; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1.6rem - 6px); top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--vellum); border: 1px solid var(--brass); box-shadow: 0 0 0 3px var(--parchment);
}
.timeline .when { font-family: var(--f-label); font-weight: 500; font-size: 1rem; letter-spacing: .07em; color: var(--walnut); }
.timeline h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.1rem); letter-spacing: 0; line-height: 1.12; text-wrap: balance; }
.timeline p { color: var(--oak); }
.timeline .quiet { color: var(--walnut); }

/* quests */
.quests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.quest {
  background: var(--vellum); border: 1px solid var(--brass); padding: 1rem 1.5rem 1.7rem; position: relative;
  display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 26px 40px -32px rgba(43,30,20,.55);
}
.quest::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.quest img { width: 78%; height: auto; align-self: center; margin-bottom: -.4rem; }
.quest h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0; line-height: 1.12; text-wrap: balance; }
.quest p { font-size: 1.05rem; color: var(--walnut); }
.brings { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(176,141,87,.5); }
.brings > span:first-child { font-family: var(--f-label); font-weight: 500; letter-spacing: .06em; font-size: .95rem; color: var(--walnut); width: 100%; }
.brings .tag { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; color: var(--oak); }
.brings .icon { width: 1.5rem; height: 1.5rem; }
.center-note { text-align: center; margin: 2rem auto 0; }

/* the five things the game master watches */
.watch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.watch li { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--brass); }
.watch .icon { width: 2.6rem; height: 2.6rem; color: var(--oak); }
.watch h3 { font-size: 1.15rem; }
.watch p { font-size: 1.03rem; color: var(--walnut); }

/* promises */
.promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.6rem; }
.promises li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .8rem; }
.promises li::before { content: "❦"; color: var(--oxblood); font-size: 1.3rem; line-height: 1.3; }
.promises h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.promises p { color: var(--walnut); font-size: 1.05rem; }

/* questions */
.faq { display: flex; flex-direction: column; gap: clamp(2.6rem, 6vw, 4rem); }
.faq-group { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1rem 3rem; }
.faq-group h2 { font-size: clamp(1.9rem, 2.8vw, 2.3rem); }
.faq-group dl { margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.faq-group dt { font-weight: 700; font-size: 1.15rem; color: var(--oak); }
.faq-group dd { margin: .3rem 0 0; color: var(--oak); max-width: 38em; }
.faq-group dd a { text-decoration-color: var(--brass); text-underline-offset: .25em; }

/* the case and the note */
.case { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.case li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .7rem; font-size: 1.15rem; }
.case li::before { content: "❦"; color: var(--brass); font-size: 1.2rem; line-height: 1.45; }
.letter {
  background: var(--vellum); border: 1px solid var(--brass); padding: clamp(1.4rem, 4vw, 2.4rem);
  font-family: var(--f-book); font-size: 1.08rem; line-height: 1.65; position: relative;
  box-shadow: 0 30px 60px -36px rgba(43,30,20,.6);
}
.letter::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.letter .text { display: flex; flex-direction: column; gap: .9rem; }
.letter .text p { max-width: none; }
.letter .fill { background: rgba(217,146,46,.22); padding: 0 .2em; border-radius: 2px; }
.letter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.4rem; position: relative; z-index: 1; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.aside-panel { background: var(--vellum); border: 1px solid var(--brass); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; }
.aside-panel p { color: var(--walnut); }

/* the game master */
.tension { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.tension article { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--brass); }
.tension h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; letter-spacing: 0; }
.tension p { color: var(--walnut); }
.pull { font-family: var(--f-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.18; text-align: center; max-width: 24em; margin: clamp(2.5rem, 6vw, 4rem) auto 0; text-wrap: balance; color: var(--oxblood); }
.hand-line { font-family: var(--f-hand); font-weight: 500; font-size: 1.75rem; line-height: 1.2; color: var(--oak); }
.record { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.record li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .6rem; align-items: start; }
.record .icon { width: 1.7rem; height: 1.7rem; color: var(--walnut); margin-top: .1rem; }

/* the booking band at the foot of each inner page */
.cta-band { border-top: 1px solid rgba(176,141,87,.5); }

/* the games: one row each, picture alternating sides */
.games { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); max-width: 64rem; margin-inline: auto; }
.game { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.game:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.game:nth-child(even) img { order: 2; }
.game img { width: 100%; height: auto; }
.game h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: 0; line-height: 1.08; }
.tags { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.tags li { font-family: var(--f-label); font-weight: 500; font-size: .95rem; letter-spacing: .05em; color: var(--walnut);
  border: 1px solid rgba(176,141,87,.7); border-radius: 2px; padding: .1rem .55rem .15rem; background: var(--vellum); }
.makers { font-size: .95rem; color: var(--walnut); margin-top: 2rem; max-width: 46em; }
.makers.center-note { margin-inline: auto; text-align: center; }

/* a two-column comparison, as a ledger */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--vellum); border: 1px solid var(--brass); font-size: 1.05rem; }
.compare th { font-family: var(--f-label); font-weight: 500; letter-spacing: .05em; font-size: 1rem; color: var(--walnut); text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--brass); }
.compare td { padding: .9rem 1.1rem; vertical-align: top; border-bottom: 1px solid rgba(176,141,87,.4); }
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--walnut); width: 45%; }

/* three side-by-side short pieces */
.tension.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.differences { margin-top: clamp(2rem, 5vw, 3rem); max-width: 54rem; }


/* further viewing: a shelf of links */
.further { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.further a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%; text-decoration: none; color: var(--oak);
  background: var(--vellum); border: 1px solid var(--brass); padding: 1.1rem 1.3rem 1.25rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.further a:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -28px rgba(43,30,20,.6); }
.further a:hover b { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .25em; }
.further .kind { font-family: var(--f-label); font-weight: 500; font-size: .9rem; letter-spacing: .07em; color: var(--walnut); }
.further b { font-family: var(--f-display); font-weight: 400; font-size: 1.55rem; line-height: 1.15; }
.further span:last-child { color: var(--walnut); font-size: 1.02rem; }

@media (max-width: 1080px) {
  .further { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero-grid, .two-col, .faq-group { grid-template-columns: minmax(0, 1fr); }
  .hero-grid .vignette { order: -1; width: min(70%, 18rem); }
  .quests { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .promises { grid-template-columns: minmax(0, 1fr); }
  .tension { grid-template-columns: minmax(0, 1fr); }
  .watch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game, .game:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .game img, .game:nth-child(even) img { order: -1; width: min(70%, 16rem); justify-self: center; }
  .tension.three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .further { grid-template-columns: minmax(0, 1fr); }
  .watch { grid-template-columns: minmax(0, 1fr); }
}