/* The history page: a long read. The fireship print in the head, a contents row, the custom on stock, the two
   disguises on a night plate, then each piece of the game beside its print, what the game keeps and invents, and the
   numbered sources every superscript points to. */

/* ---------- head ---------- */
.history-head{min-height:min(88vh,860px);display:flex;align-items:center}
.history-head .wrap{width:min(var(--wrap), 100% - 2 * var(--gutter))}
.history-head h1{max-width:7.4em}
.history-head .lede{max-width:24em}
.head-note{font-family:var(--fell);font-style:italic;color:var(--ink-3);margin-top:1.4em}
.history-head .head-art{right:max(-3vw,-40px);bottom:auto;top:calc(var(--head-h) + 20px);width:min(52vw,760px);filter:drop-shadow(4px 10px 12px rgba(60,38,18,.18))}
@media (max-width:1100px){ .history-head .head-art{width:min(46vw,560px);opacity:.9} }
@media (max-width:860px){
  .history-head{display:block;min-height:0;padding-bottom:24px}
  .history-head .head-art{position:relative;top:auto;right:auto;width:min(100%,520px);margin:12px auto 0}
}

/* ---------- contents ---------- */
/* the contents row sticks under the site header as a second bar; one line, scrolling sideways when it must */
.history-toc{position:sticky;top:var(--head-h);z-index:150;border-block:1px solid var(--rule);background:color-mix(in srgb,var(--stock-2) 95%,transparent);backdrop-filter:blur(6px);box-shadow:0 10px 18px -16px rgba(40,24,10,.5)}
.history-toc .wrap{display:flex;flex-wrap:nowrap;gap:6px 22px;padding-block:11px;overflow-x:auto;scrollbar-width:none}
.history-toc .wrap::-webkit-scrollbar{display:none}
.history-toc a{flex:none;white-space:nowrap;font-size:.98rem;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;color:var(--ink-2)}
html:has(.history-toc){scroll-padding-top:calc(var(--head-h) + 66px)}
@media (max-width:1180px){ .history-toc .wrap{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)} }
.history-toc a:hover,.history-toc a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--scarlet)}

/* ---------- reading ---------- */
.read .wrap.narrow{width:min(39rem, 100% - 2 * var(--gutter))}
.read h2{font-size:var(--fs-4);margin-bottom:.45em}
.read p{max-width:none;font-size:clamp(1.12rem,1.06rem + .3vw,1.28rem);line-height:1.62}
.dropcap::first-letter{float:left;font:400 4.6em/.8 var(--display);color:var(--scarlet);margin:.08em .1em 0 0}
.cite{font-size:.62em;vertical-align:super;line-height:0;margin-left:.15em;text-decoration:none;font-weight:600;color:var(--scarlet);
  padding:0 .1em;border-radius:2px}
.cite:hover{text-decoration:underline}
.plate.night .cite{color:var(--gold)}
.pull{margin:2.2rem 0 2.4rem;padding:0 0 0 clamp(18px,3vw,32px);border-left:3px solid var(--scarlet)}
.pull p{font:400 clamp(1.7rem,1.3rem + 1.6vw,2.5rem)/1.12 var(--display);margin:0 0 .45em}
.pull footer{font-family:var(--fell);font-style:italic;font-size:var(--fs-s);color:var(--ink-3)}
.plate.night .pull{border-left-color:var(--gold)}
.plate.night .pull p{color:var(--stock-hi)}
.plate.night .pull footer{color:#b9c2c3}
.plate.night.read p{color:#dde2dc}

/* ---------- the pieces ---------- */
.pieces-intro{max-width:39rem;margin:0 auto clamp(48px,6vw,96px)}
.pieces-intro h2{font-size:var(--fs-4)}
.pieces-intro p{color:var(--ink-2);font-size:var(--fs-1);line-height:1.45}
.piece{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:start;
  padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.piece.flip .piece-art{order:2}
.piece-art{position:sticky;top:calc(var(--head-h) + 80px)}
.piece-art .print{width:100%;height:auto}
.piece:nth-of-type(odd) .print-wrap{transform:rotate(-.8deg)}
.piece:nth-of-type(even) .print-wrap{transform:rotate(.9deg)}
.piece-art.woodcut{display:grid;justify-items:center;gap:12px;padding:clamp(12px,3vw,40px)}
.piece-art.woodcut img{width:min(100%,360px);height:auto}
.piece-art.woodcut figcaption{text-align:center}
.piece-art.pull{position:sticky;margin:0;align-self:start;padding-top:8px}
.piece-text h3{font:400 var(--fs-3)/1.02 var(--display);margin-bottom:.4em}
.piece-text p{font-size:clamp(1.08rem,1.04rem + .2vw,1.2rem);line-height:1.6;max-width:34em}
.piece-game{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;margin-top:1.6em;padding:16px 18px;
  background:var(--stock-hi);border:2px solid var(--ink);box-shadow:var(--shadow-block);font-size:1.04rem!important;line-height:1.45!important}
.piece-game img{width:72px;height:auto}
@media (max-width:860px){
  .piece{grid-template-columns:1fr}
  .piece.flip .piece-art{order:0}
  .piece-art{position:static;max-width:520px}
  .piece-art.woodcut img{width:min(100%,220px)}
  .piece-art.pull{position:static}
}
@media (max-width:420px){ .piece-game{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px} .piece-game img{width:52px} }

/* ---------- keeps and invents ---------- */
.keeps-art{max-width:980px;margin:0 auto clamp(40px,5vw,72px)}
.keeps-art .print{width:100%;height:auto}
.keeps-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.keeps-cols h2{font-size:var(--fs-3)}
.keeps-cols p{color:var(--ink-2)}
@media (max-width:980px){ .keeps-cols{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .keeps-cols{grid-template-columns:1fr} }
.keeps-cols>div{border-top:2px solid var(--ink);padding-top:18px}
/* built to be played again: the closing band, the case for the game in one breath */
.replay{margin-top:clamp(56px,7vw,110px);padding:clamp(28px,4vw,56px);background:var(--night);color:var(--stock-hi);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.replay .h-replay{font-size:var(--fs-4);color:var(--stock-hi);margin-bottom:.5em}
.replay-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
.replay .lede{color:var(--stock-hi)}
.replay p{color:#d0d6d2}
.replay .toast{margin:clamp(24px,3vw,40px) 0 0;max-width:none;font:400 var(--fs-3)/1.05 var(--display);color:var(--gold)}
@media (max-width:860px){ .replay-cols{grid-template-columns:1fr} }

/* ---------- sources: fine print at the foot of the page, reached from the citation numbers ---------- */
.plate.tight.sources{padding-block:clamp(16px,2.5vw,28px)}
.sources .wrap.narrow{max-width:1100px}
.sources h2{font-size:.95rem;letter-spacing:.06em;margin:0;color:var(--ink-2)}
.source-list{padding-left:1.4em;margin:.6em 0 0;columns:2 18rem;column-gap:2.4rem}
.source-list li{margin:0 0 .45em;padding-left:.2em;font-size:.8rem;line-height:1.4;color:var(--ink-2);break-inside:avoid}
.source-list li::marker{font-family:var(--display);color:var(--ink-2)}
.source-list li:target{background:var(--stock-hi);outline:2px solid var(--scarlet);outline-offset:4px}
.source-list a{word-break:break-word}

/* ---------- close ---------- */
.history-end h2{font-size:var(--fs-3)}
.history-end p{color:#d0d6d2}

@media (prefers-reduced-motion:reduce){ .piece .print-wrap{transform:none!important} }

/* the First Rate: her print full-bleed and huge, fading into the stock top and bottom, the text on a card over the sea */
.piece.grand{display:block;border-top:0;padding-block:clamp(24px,3vw,48px) clamp(56px,7vw,110px)}
.piece.grand .piece-art{position:relative;top:auto;max-width:none;margin-inline:calc(50% - 50vw)}
.piece.grand .print-wrap{transform:none}
.piece.grand .print-wrap::after{content:none} /* full bleed: no hatched block, which would hang past the screen edge */
.piece.grand .print{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%)}
.piece.grand .piece-text{position:relative;z-index:1;width:min(580px,100%);margin:calc(-1 * clamp(110px,15vw,260px)) 0 0 auto;padding:clamp(24px,3vw,44px);background:var(--stock-hi);border:2px solid var(--ink);box-shadow:var(--shadow-block)}
.piece.grand .piece-game{background:var(--stock);box-shadow:none}
@media (max-width:860px){ .piece.grand .piece-text{margin-top:-40px} }

/* the maker's own line, closing the read */
.maker-note{margin:0 0 clamp(36px,5vw,56px);padding-left:22px;border-left:3px solid var(--scarlet)}
.maker-note blockquote{margin:0}
.maker-note p{font:italic 400 var(--fs-2)/1.3 var(--fell);color:var(--stock-hi);margin:0 0 .4em;max-width:none}
.maker-note figcaption{font-family:var(--text);font-style:normal;color:#b9c2c3}