@font-face{font-family:KingsBlackletter;src:url('fonts/UnifrakturCook-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Shojumaru;src:url('fonts/Shojumaru-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{
  color-scheme:dark;
  --paper:#f2e8cd;--ink:#35271d;--muted:#6f583e;--gilt:#89622b;--lightgold:#cdad6d;--rubric:#6e2b22;
  --kb-leather:#2e1f1b;--kb-ribbon:#5b2721;--kb-green:#2d5a38;--kb-green-deep:#1f4a2c;
  --sb-slate:#283440;--sb-ribbon:#3f5566;--sb-red:#8f1d1c;
  --serif:Constantia,'Palatino Linotype','Book Antiqua',Georgia,serif;
  --binding:url('book/kingsblade-binding.png');--ornament:url('book/kingsblade-page-ornament.png');
  --boards:url('book/kingsblade-boards.png');--fold-ornament:url('book/kingsblade-fold-ornament.png');--fold-fade:url('book/kingsblade-fold-fade.png');
  --spread-top:.853cqw;--spread-side:1.06cqw;--spread-bottom:1.18cqw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100svh;background:#0f0b09;color:#cdb98a;font-family:var(--serif);font-size:16px;line-height:1.5;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#0f0b09f4 0%,#0f0b09d8 38%,#0f0b0978 100%),url('book/french-castle-siege.jpg') center/cover no-repeat}
body[data-book=shogunsblade]::before{background-image:linear-gradient(90deg,#0b0d10f4 0%,#0b0d10d8 38%,#0b0d1078 100%),url('book/samurai-river-bridge.jpg')}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid #e3c98a;outline-offset:4px}
button:focus:not(:focus-visible){outline:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:20px;z-index:60;background:var(--paper);color:var(--ink);padding:10px 20px}.skip-link:focus{top:10px}

/* ── masthead, as the app's window top ─────────────────────────────── */
.masthead{display:flex;align-items:center;gap:28px;padding:16px 30px 12px;max-width:1700px;margin:0 auto}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand-mark{width:36px;height:40px;display:none;color:var(--lightgold)}
.brand-mark svg{width:100%;height:100%}
.brand-words{display:flex;flex-direction:column;gap:3px}
.brand-name{display:none;color:#ecdcae;line-height:1.05}
.brand-name--kingsblade{font-size:27px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.brand-name--shogunsblade{font-family:Shojumaru,var(--serif);font-size:25px;color:#f3ead6;letter-spacing:.02em}
.brand-line{font-size:11px;letter-spacing:.06em;color:#b3a07a}
body:not([data-book=shogunsblade]) .brand-mark--kingsblade,body:not([data-book=shogunsblade]) .brand-name--kingsblade{display:block}
body[data-book=shogunsblade] .brand-mark--shogunsblade,body[data-book=shogunsblade] .brand-name--shogunsblade{display:block}
body[data-book=shogunsblade] .brand-mark{color:#b5231f}
.books-link{font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#d7c69b;border:1px solid #8b7b5e;padding:7px 18px;background:#0000002e;transition:background .2s,color .2s}
.books-link:hover{background:#ffffff12;color:#f1e3bd}

/* ── the shelf: two books standing on the desk ─────────────────────── */
.shelf{min-height:calc(100svh - 80px);display:flex;align-items:center;justify-content:center;gap:5vw;padding:10px 24px 60px;position:relative;flex-wrap:wrap}
.cover{display:flex;flex-direction:column;align-items:center;gap:22px;padding:0;color:#b9a67e;transition:transform .35s}
.cover--kingsblade{height:min(66svh,720px)}
.cover--shogunsblade{height:min(53svh,576px);align-self:center}
.cover:hover,.cover:focus-visible{transform:translateY(-6px)}
.cover-face{position:relative;display:block;height:calc(100% - 40px);aspect-ratio:7/10;container-type:size;background:center/100% 100% no-repeat;filter:drop-shadow(14px 22px 18px #000c)}
.cover--kingsblade .cover-face{background-image:url('book/kingsblade-binding.png')}
.cover--shogunsblade .cover-face{background-image:url('book/shogunsblade-binding.png')}
/* the covers' lettering where the app puts it on its 700 x 1000 cover (PaintKingsCover, PaintShogunsCover): KingsBlade's
   name 96 high centred on x 360 and y 350, its flourish on 355/455, its swords on 355/641; ShōgunsBlade's name as
   large as fits 360 wide, centred on 365/355, and its torii 136 wide on 365/633. A tenth of a cqh is one pixel there. */
.cover-title{position:absolute;left:0;right:0;text-align:center;line-height:1;white-space:nowrap}
.cover-title--kingsblade{top:30.25cqh;left:11.43%;right:8.57%;font:700 9.6cqh/1 KingsBlackletter,var(--serif);background:linear-gradient(#e2cd94,#ad8545 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .4cqh 0 #00000066)}
.cover-title--shogunsblade{top:33.62cqh;left:22.29%;right:18%;font:400 3.834cqh/1 Shojumaru,var(--serif);color:#9c1f1d;text-shadow:0 .2cqh 0 #00000022}
.cover-flourish{position:absolute;left:32.71%;right:31.29%;top:45.5cqh;height:1px;background:linear-gradient(90deg,transparent,#c9a862 25%,#c9a862 75%,transparent)}
.cover-flourish::after{content:'';position:absolute;left:calc(50% - .55cqh);top:-.5cqh;width:1.1cqh;height:1.1cqh;background:#c9a862;transform:rotate(45deg)}
.cover-mark{position:absolute;left:0;right:0;display:flex;justify-content:center}
.cover-mark svg{height:100%}
.cover-mark--swords{top:59.9cqh;left:1.43%;height:7.8cqh;color:#c9a862}
.cover-mark--torii{top:57.54cqh;left:4.29%;height:11.45cqh;color:#a7201d}
.cover-name{font-size:13px;letter-spacing:.14em;padding-bottom:5px;border-bottom:1px solid transparent;transition:border-color .2s}
.cover--kingsblade .cover-name,.cover:hover .cover-name,.cover:focus-visible .cover-name{border-color:#a89474}
.shelf:has(.cover--shogunsblade:hover) .cover--kingsblade .cover-name,.shelf:has(.cover--shogunsblade:focus-visible) .cover--kingsblade .cover-name{border-color:transparent}
.shelf-hint{position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;font-size:12px;font-style:italic;color:#9c8a66;letter-spacing:.04em}

/* ── the open book ─────────────────────────────────────────────────── */
.reader{width:min(100% - 48px,1640px);margin:0 auto;padding-bottom:28px}
.book{container-type:inline-size;position:relative}
.tabs{display:flex;gap:.28cqw;align-items:stretch;padding:0 .5cqw;position:relative;z-index:3}
.tabs a{flex:1 1 0;min-width:0;padding:0 .3cqw;display:flex;align-items:center;justify-content:center;gap:.6em;height:2.75cqw;min-height:34px;background:#2a1e1a;border:1px solid #6c5a45;border-bottom:0;border-radius:3px 3px 0 0;box-shadow:inset 0 1px 0 #ffffff12;color:#cdb98a;text-decoration:none;font-size:clamp(9px,.72cqw,12px);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:background .25s,color .25s}
.tabs a .roman{color:#a98f67;letter-spacing:.06em}
.tabs a:hover{background:#3b2a24;color:#e7d5a8}
.tabs a[aria-current=page]{background:var(--kb-ribbon);color:#f3dfb0;border-color:#8f6a52}
.tabs a[aria-current=page] .roman{color:#e6cc98}
.tabs .fold-tab{flex:0 0 .9cqw;padding:0;gap:0;background:#2a1e1a}
.tabs .fold-tab[aria-current=page]{background:#7a5a2a;border-color:#c9a862}
.book[data-book=shogunsblade] .tabs a{background:var(--sb-slate);border-color:#5f6f7e;color:#c9d2da;box-shadow:inset 0 1px 0 #ffffff14}
.book[data-book=shogunsblade] .tabs a .roman{color:#97a6b3}
.book[data-book=shogunsblade] .tabs a:hover{background:#334452;color:#eef2f5}
.book[data-book=shogunsblade] .tabs a[aria-current=page]{background:var(--sb-ribbon);color:#f1f4f7;border-color:#8ea0ae}
.book[data-book=shogunsblade] .tabs .fold-tab[aria-current=page]{background:#6d7f8c;border-color:#c5d0d8}

/* the open boards as the app makes them from the cover (#765): its right half for both, without the raised
   top tooling that read as more pages above the leaves; its own cut-out corners, nothing square behind them.
   Over them the uneven fore edges of the leaves beneath, each sheet on the leaf's outline (#972). */
.board{position:relative;container-type:inline-size;aspect-ratio:2.08;isolation:isolate;perspective:2600px}
.board::before{content:'';position:absolute;inset:0;z-index:0;background:var(--boards) center/100% 100% no-repeat;filter:drop-shadow(0 1.3cqw 1.5cqw #000b)}
.board::after{content:'';position:absolute;inset:0;z-index:0;background:url('book/fore-edges.svg') center/100% 100% no-repeat}
.book[data-book=shogunsblade]{--binding:url('book/shogunsblade-binding.png');--ornament:url('book/shogunsblade-page-ornament.png');
  --boards:url('book/shogunsblade-boards.png');--fold-ornament:url('book/shogunsblade-fold-ornament.png');--fold-fade:url('book/shogunsblade-fold-fade.png')}
.spread{position:absolute;inset:var(--spread-top) var(--spread-side) var(--spread-bottom);display:grid;grid-template-columns:1fr 1fr;z-index:1;color:var(--ink);color-scheme:light}
.leaf{position:relative;overflow:hidden;background:var(--paper);isolation:isolate}
/* the paper's own outline: heads and feet settling into the sewn gutter, as the app's leaves do */
.leaf.left{clip-path:url(#leaf-left)}
.leaf.right{clip-path:url(#leaf-right)}
.leaf::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,#744a1d4b,#744a1d00 10%,#744a1d00 88%,#744a1d37),
  radial-gradient(ellipse at 50% 45%,#fff5d82a,transparent 70%),
  repeating-linear-gradient(174deg,transparent 0 19px,#84603306 20px 21px)}
.leaf::after{content:'';position:absolute;inset:-1cqw -.6cqw;z-index:3;pointer-events:none;background:var(--ornament) center/100% 100% no-repeat}
.crease{position:absolute;top:0;bottom:0;left:50%;width:4.2cqw;transform:translateX(-50%);z-index:4;pointer-events:none;background:linear-gradient(90deg,#2c1a0d00,#2c1a0d0e 24%,#2c1a0d36 43%,#23140c70 50%,#2c1a0d35 58%,#2c1a0d0c 78%,#2c1a0d00)}
.spread:not(.fold)>.leaf.left::before{box-shadow:inset -2.2cqw 0 2.4cqw -2cqw #3e2b1066}
.spread:not(.fold)>.leaf.right::before{box-shadow:inset 2.4cqw 0 2.6cqw -2cqw #31210d70}

.leaf-body{position:absolute;inset:3.3cqw 4.2cqw 4.2cqw;z-index:2;overflow:auto;scrollbar-width:thin;scrollbar-color:#a78b56 transparent;padding-right:.3cqw}
/* words with more beyond the page's foot fade into the vellum, as the app's do */
.leaf-body.is-long{-webkit-mask:linear-gradient(#000 calc(100% - 2.2cqw),transparent);mask:linear-gradient(#000 calc(100% - 2.2cqw),transparent);padding-bottom:2.2cqw}
.chapter-no{margin:0 0 .55cqw;text-align:center;font-size:clamp(9px,.82cqw,14px);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.title{margin:0 0 1.1cqw;font:700 clamp(26px,3.15cqw,54px)/1 KingsBlackletter,var(--serif);color:var(--kb-green);letter-spacing:.012em}
.initial{display:inline-block;font:400 1.02em/1 var(--serif);color:#dcbd72;background:var(--kb-green-deep);padding:.06em .13em .02em;margin-right:.06em;vertical-align:-.03em;box-shadow:inset 0 0 0 1px #dcbd7240,0 1px 0 #00000022}
.book[data-book=shogunsblade] .leaf-body{inset:3.3cqw 5.6cqw 4.2cqw}
.book[data-book=shogunsblade] .chapter-no{text-align:left;margin-left:3.4cqw;padding-left:.1em}
.book[data-book=shogunsblade] .title{font:400 clamp(24px,2.9cqw,48px)/1.08 Shojumaru,var(--serif);color:var(--sb-red);text-transform:uppercase;letter-spacing:.02em;margin:0 0 1.2cqw 3.4cqw}
.leaf-body p{margin:0 0 .75em;font-size:clamp(12px,1cqw,16.5px);line-height:1.48}
.leaf-body .lead{font-size:clamp(14px,1.22cqw,20px);line-height:1.36;color:#4a3426;margin-bottom:.7em}
.leaf-body i{font-style:italic}
.leaf-body a{color:#6e2b22;text-underline-offset:3px;text-decoration-color:#6e2b2266}
.label{font-size:clamp(9px,.74cqw,12px)!important;letter-spacing:.24em;text-transform:uppercase;color:var(--gilt);border-bottom:1px solid #89622b4d;padding-bottom:.4em;margin:1.3em 0 .65em!important;line-height:1.3!important}
.contents{list-style:none;padding:0;margin:0}
.contents li{border-bottom:1px solid #89622b26}
.contents a{display:flex;align-items:baseline;gap:1em;text-decoration:none;color:var(--ink);font-size:clamp(12px,1cqw,16px);padding:.3em 0}
.contents .roman{color:var(--gilt);min-width:2.3em;font-size:.82em;letter-spacing:.14em}
.contents a:hover{color:var(--rubric)}
.requirements,.thanks{margin:0}
.requirements>div,.thanks>div{display:grid;grid-template-columns:1.05fr 1fr;gap:1em;padding:.4em 0;border-bottom:1px solid #89622b26;font-size:clamp(11.5px,.95cqw,15px);line-height:1.4}
.requirements dt,.thanks dt{color:#5e3a26}
.requirements dd,.thanks dd{margin:0;color:var(--muted)}
.leaf-body .small{font-size:clamp(10px,.82cqw,13px);color:var(--muted);line-height:1.5;margin-top:1.1em}
/* the maker's mark at the foot of the epilogue's page, as the app sets its logo on ABOUT's (#920): its own
   picture in black at 0.8, small (0.16 of the page's width), centred on the bottom of the page's middle */
.maker{position:absolute;left:0;right:0;bottom:4.2cqw;z-index:2;display:block;width:7.83cqw;aspect-ratio:1000/263;margin:0 auto;background:#000;opacity:.8;
  -webkit-mask:url('okano-softworks.png') center/contain no-repeat;mask:url('okano-softworks.png') center/contain no-repeat;transition:opacity .2s}
.maker:hover{opacity:1}
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;margin:.5cqw 0 .6cqw}
.downloads:has(> :only-child){grid-template-columns:1fr}
.ink-button{display:flex;flex-direction:column;gap:.25em;padding:.75cqw .95cqw;background:var(--rubric);color:#f5e5c1!important;text-decoration:none!important;border:1px solid #52221d;box-shadow:inset 0 0 0 1px #cbb47e33;transition:background .2s}
.ink-button:hover{background:#83392b}
.ink-button span:first-child{font-size:clamp(12px,1.02cqw,16px)}
.ink-button span:last-child{font-size:clamp(8.5px,.72cqw,11.5px);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ink-button.is-pending{background:#8d7c62;border-color:#6b5c45;cursor:default}
.ink-button.is-pending:hover{background:#8d7c62}
.book[data-book=shogunsblade] .ink-button{background:var(--sb-ribbon);border-color:#2b3a47}
.book[data-book=shogunsblade] .ink-button:hover{background:#4b667a}
.foot{position:absolute;left:4.2cqw;right:4.2cqw;bottom:2.5cqw;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.book[data-book=shogunsblade] .foot{left:5.6cqw;right:5.6cqw}
.book[data-book=shogunsblade] .running{padding-left:4.2cqw}
.running{padding-left:.82cqw;font-size:clamp(8.5px,.8cqw,13px);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.folio{font-size:clamp(11px,.98cqw,16px);letter-spacing:.1em;color:var(--muted)}
.turns{text-align:right;padding-right:.4cqw}
.turns button{color:var(--muted);font-size:clamp(15px,1.45cqw,24px);line-height:1;padding:0 .35em;transition:color .2s}
.turns button:hover{color:var(--rubric)}
.turns button:disabled{opacity:.3;cursor:default}

/* the right-hand page: the picture printed into the vellum */
.plate{display:flex;flex-direction:column;justify-content:center;gap:1cqw;overflow:hidden;inset:3.3cqw 4.2cqw 4.2cqw}
.book[data-book=shogunsblade] .plate{inset:3.3cqw 5.6cqw 4.2cqw}
.picture{margin:0;min-width:0}
.enlarge{display:block;width:100%;padding:0;cursor:zoom-in}
.picture img{width:100%;height:auto;border-radius:2.1cqw 2.1cqw .35cqw .35cqw;mix-blend-mode:multiply;filter:saturate(.94);
  -webkit-mask:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 3.5%,#000 96.5%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 3.5%,#000 96.5%,transparent);mask-composite:intersect}
.picture figcaption{font-size:clamp(10.5px,.9cqw,14.5px);font-style:italic;color:var(--muted);text-align:center;margin:.75cqw .5cqw 0;line-height:1.4}
.thumbs{display:flex;gap:.55cqw;justify-content:center;padding:0 .2cqw}
.thumb{flex:1 1 0;min-width:0;max-width:7.4cqw;padding:.22cqw;color:var(--muted);border-radius:2px}
.thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.7;border:1px solid #89622b66;mix-blend-mode:multiply;transition:opacity .2s}
.thumb span{display:block;margin-top:.38cqw;font-size:clamp(7.5px,.66cqw,11px);letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
.thumb:hover img,.thumb[aria-pressed=true] img{opacity:1}
.thumb[aria-pressed=true] img{border-color:var(--rubric);outline:1px solid var(--rubric)}
.thumb[aria-pressed=true] span{color:var(--rubric)}
.painting{display:flex;align-items:center;justify-content:center;inset:3.4cqw 4.6cqw 4.2cqw}
.book[data-book=shogunsblade] .painting{inset:3.6cqw 6.2cqw 4.6cqw}
.painting img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(ellipse at center,#000 60%,transparent 100%);mask:radial-gradient(ellipse at center,#000 60%,transparent 100%)}

/* the roll of arms: the app's own painted banners, clipped to heater shields */
.roll-plate{justify-content:center;gap:1.2cqw}
.arms-roll{list-style:none;margin:0;padding:0 .6cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1.3cqw 1cqw}
.arms-roll li{display:flex;flex-direction:column;align-items:center;gap:.5cqw;min-width:0}
.arms-roll img{width:6.9cqw;height:7.6cqw;object-fit:cover;clip-path:url(#heater);mix-blend-mode:multiply;filter:saturate(.95) contrast(.98)}
.arms-roll span{font-size:clamp(7.5px,.7cqw,11.5px);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.25}
.leaf-body .roll-caption{font-size:clamp(10.5px,.9cqw,14.5px);font-style:italic;color:var(--muted);text-align:center;margin:0 .5cqw;line-height:1.4}

/* the centre fold, as the app's (#737, #943): its two leaves bare, one ornament across both of them, the
   painting printed into the vellum over a brushed edge with the crease across it, and its name under one
   leaf and its date under the other. The painting's box: 50/56 units in (KingsBlade), 68/72/90 (ShōgunsBlade). */
.fold>.leaf::after{content:none}
.fold-art{position:absolute;inset:3.294cqw 2.941cqw;width:auto;padding:0;cursor:zoom-in;z-index:1}
.book[data-book=shogunsblade] .fold-art{inset:4.235cqw 4cqw 5.294cqw}
.fold-art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;
  -webkit-mask:var(--fold-fade) center/100% 100% no-repeat;mask:var(--fold-fade) center/100% 100% no-repeat}
/* the Sekigahara scan's patterned mounting strip, 32 of its 1860 x 846 pixels all round, left off as the app
   leaves it: the scan inside it fitted to the box's width, the fade still on the box */
.book[data-book=shogunsblade] .fold-art img{position:absolute;left:50%;top:50%;width:103.564%;max-width:none;height:auto;transform:translate(-50%,-50%);
  -webkit-mask-size:96.559% 86.253%;mask-size:96.559% 86.253%}
.fold .crease{z-index:2}
.fold-border{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:url(#spread-outline)}
.fold-border>span{position:absolute;inset:-1cqw -.6cqw;background:var(--fold-ornament) center/100% 100% no-repeat}
.fold-credit{position:absolute;left:2.941cqw;right:2.941cqw;bottom:calc(3.03cqw - .5em);margin:0;display:grid;grid-template-columns:1fr 1fr;text-align:center;line-height:1;z-index:4;font-size:clamp(8.5px,.78cqw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.book[data-book=shogunsblade] .fold-credit{left:4cqw;right:4cqw;bottom:calc(5.03cqw - .5em)}

/* ── motion: the cover opening off the right-hand page, and the leaves turning ── */
.stage{position:fixed;inset:0;z-index:40;perspective:2400px;perspective-origin:50% 50%;pointer-events:none}
.opening-table{position:absolute;transform-style:preserve-3d}
.opening-surface{position:absolute;top:0;height:100%;overflow:hidden;transform-origin:0 0;will-change:transform}
.half-clip{position:absolute;inset:0;overflow:hidden}
.board-clone{position:absolute;top:0;height:100%;width:200%;aspect-ratio:auto;box-shadow:none;perspective:none}
.flap{position:absolute;top:0;height:100%;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
.flap-shade{position:absolute;inset:0;background:#2f1d0f;opacity:0;pointer-events:none}
.flap-front,.flap-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flap-front{transform:translateZ(.3px);box-shadow:10px 12px 22px #0008;border-radius:1cqw}
.flap-front .cover-face{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;filter:none}
.flap-back{transform:rotateY(180deg);box-shadow:-6px 8px 18px #0006}
.turn-stage{position:absolute;inset:var(--spread-top) var(--spread-side) var(--spread-bottom);z-index:5;pointer-events:none;transform-style:preserve-3d;color:var(--ink);color-scheme:light}
.turn-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:8;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.turn-leaf.forward{right:0;transform-origin:left center}
.turn-leaf.backward{left:0;transform-origin:right center}
.turn-face{position:absolute!important;inset:0!important;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.turn-face.back{transform:rotateY(180deg)}
.turn-shadow{position:absolute;inset:0;background:linear-gradient(90deg,#2a180d33,transparent 30%,#2a180d11);pointer-events:none;backface-visibility:hidden}
.turn-under{position:absolute;top:0;bottom:0;width:50%;z-index:6;pointer-events:none;overflow:hidden}
.turn-under.forward{left:0}.turn-under.backward{right:0}
.turn-under>.leaf{width:100%;height:100%}
.fold-half{position:absolute;inset:0;overflow:hidden}
.fold-half::before,.fold-half::after{content:none}
.fold-half>.spread{position:absolute;inset:auto;top:0;height:100%;width:200%}
/* a turning leaf lifts past the board's head: it passes in front of the bookmarks, which hang behind it */
.board.animating{pointer-events:none;z-index:4}

/* ── viewer, footer ────────────────────────────────────────────────── */
.viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;border:0;margin:0;background:#14110ff5;color:#d8bf8c;padding:64px 4vw 28px}
.viewer::backdrop{background:#000d}
.viewer figure{height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.viewer img{max-width:100%;max-height:calc(100% - 50px);width:auto;height:auto;object-fit:contain}
.viewer figcaption{font-size:13px;text-align:center;max-width:900px}
.viewer-close{position:absolute;top:18px;right:4vw;letter-spacing:.08em;font-size:13px}.viewer-close span{font-size:24px;margin-left:10px}
.site-footer{max-width:1640px;width:min(100% - 48px,1640px);margin:0 auto;padding:16px 0 24px;border-top:1px solid #8a6b3f3d;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#8f7a59}
.site-footer a{text-decoration:none}.site-footer a:hover{color:#d2b77d}
.footer-help{opacity:.6;letter-spacing:.08em}

/* ── small screens: the leaves stack ───────────────────────────────── */
@media(max-width:900px){
  .masthead{padding:14px 18px 10px;gap:16px}
  .brand-name--kingsblade{font-size:22px}.brand-name--shogunsblade{font-size:21px}.brand-mark{width:28px;height:32px}
  .reader{width:min(100% - 20px,1640px)}
  .shelf{gap:6vw;padding-bottom:50px}
  .cover--kingsblade{height:min(52svh,520px)}.cover--shogunsblade{height:min(42svh,416px)}
  .tabs{flex-wrap:wrap;gap:3px;padding:0 4px}
  .tabs a{flex:1 1 30%;height:40px;font-size:10.5px;letter-spacing:.08em;white-space:normal;line-height:1.1;text-align:center;padding:0 4px}
  .tabs .fold-tab{flex:0 0 100%;height:8px;min-height:0;order:10}
  .board{aspect-ratio:auto;border-radius:8px;overflow:clip;background:var(--kb-leather);perspective:none}
  .book[data-book=shogunsblade] .board{background:#d8cdb6}
  .board::before,.board::after{inset:0 auto;width:50%;background:var(--binding) right center/auto 100% no-repeat;filter:none}
  .board::before{left:0;transform:scaleX(-1)}
  .board::after{right:0}
  .spread{position:relative;inset:auto;display:block;margin:10px 12px 14px}
  .leaf{border-radius:3px;clip-path:none}
  .leaf+.leaf{margin-top:8px}
  .leaf::after{inset:-4px -8px}
  .crease{display:none}
  .leaf-body{position:static;inset:auto;padding:38px 30px 30px;overflow:visible}
  .book[data-book=shogunsblade] .leaf-body{inset:auto;padding:38px 30px 30px}
  .book[data-book=shogunsblade] .chapter-no,.book[data-book=shogunsblade] .title{margin-left:0}
  .foot{position:static;padding:0 30px 44px;grid-template-columns:1fr auto 1fr}
  .maker{position:static;width:96px;margin:0 auto 18px}
  .book[data-book=shogunsblade] .foot{padding:0 30px 44px}.book[data-book=shogunsblade] .running{padding-left:0}
  .leaf-body p{font-size:15px}.leaf-body .lead{font-size:18px}
  .title{font-size:32px}.book[data-book=shogunsblade] .title{font-size:28px}
  .chapter-no{font-size:10px}
  .label{font-size:10px!important}
  .contents a,.requirements>div,.thanks>div{font-size:14px}
  .downloads{grid-template-columns:1fr;gap:8px}
  .ink-button{padding:10px 14px}.ink-button span:first-child{font-size:15px}.ink-button span:last-child{font-size:10px}
  .plate,.book[data-book=shogunsblade] .plate{gap:12px;padding:30px 24px 44px;inset:auto}
  .picture img{border-radius:18px 18px 3px 3px}
  .picture figcaption{font-size:13px}
  .thumbs{flex-wrap:wrap;gap:6px}.thumb{flex:0 1 31%;max-width:none;padding:3px}.thumb span{font-size:9px;margin-top:4px}
  .painting,.book[data-book=shogunsblade] .painting{padding:30px 24px 44px;inset:auto}
  .roll-plate{padding:30px 20px 44px}.arms-roll{grid-template-columns:repeat(3,1fr);gap:16px 10px}.arms-roll img{width:76px;height:84px}.arms-roll span{font-size:9px}.leaf-body .roll-caption{font-size:12px}
  .spread.fold{margin:10px 12px 14px;padding:26px 14px 44px;background:var(--paper);border-radius:3px}
  .fold>.leaf,.fold-border{display:none}
  .spread.fold::after{content:'';position:absolute;inset:-4px -8px;z-index:3;pointer-events:none;background:var(--ornament) center/100% 100% no-repeat}
  .fold-art,.book[data-book=shogunsblade] .fold-art{position:static;inset:auto;display:block;width:100%}
  .book[data-book=shogunsblade] .fold-art img{position:static;width:100%;transform:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
  .fold-art img{height:auto;aspect-ratio:1.5;object-fit:cover}
  .fold-credit{position:static;margin:14px 0 0;display:block;text-align:center;line-height:1.8;font-size:9px}
  .fold-credit span{display:block}
  .turn-stage,.turn-leaf,.turn-under{display:none}
  .site-footer{width:min(100% - 36px,1640px);font-size:8px}
  .footer-help{display:none}
  .shelf-hint{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{body::before,.masthead,.shelf,.tabs,.site-footer,.viewer{display:none!important}.reader,.book{display:block!important}.board{aspect-ratio:auto;box-shadow:none;border-radius:0}.spread{position:static;display:grid;break-after:page}.leaf-body{position:static;overflow:visible}}