/* Tales from the Shoyukan: one stylesheet for the first page, the tales, the guides and the page that is not there.
   Ground: a warm near-black. Text: a warm white. One accent, the orange-red of a paper lantern, and a little gold for
   money. Type: Spectral SC for headings and labels, Spectral for text, Shippori Mincho for Japanese, and Press Start 2P
   for prices and the round's bars only. The page that keeps the music playing adds player.css. */
:root{
  --paper:#1a1816;
  --panel:#242120;
  --ink:#ece5d8;
  --ink2:#a89f92;
  --rule:rgba(236,229,216,.16);
  --lantern:#f05138;
  --lanternsoft:#f2745f;
  --codebg:#131110;
  --gold:#e2b25b;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --pixel:"Press Start 2P",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Spectral",serif; font-weight:400; font-size:17px; line-height:1.62;
}
::selection{background:rgba(240,81,56,.35);}
a{color:var(--lanternsoft); text-decoration:none; border-bottom:1px solid rgba(242,116,95,.35); overflow-wrap:anywhere;}
a:hover{border-bottom-color:var(--lanternsoft);}
.sheet{max-width:920px; margin:0 auto; padding:56px 34px 100px;}
p{margin:0 0 14px;}
p, li, figcaption{overflow-wrap:break-word;}
b{font-weight:600;}
[lang="ja"]{font-family:var(--mincho); font-style:normal; letter-spacing:.04em;}
.ja{color:var(--ink2); margin-left:.25em; white-space:nowrap;}
kbd{
  display:inline-block; min-width:24px; padding:1px 6px 0; margin:0 1px; text-align:center;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; font-size:.82em; line-height:1.5;
  color:var(--ink); background:var(--codebg); border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px;
}

/* ---------- headings ---------- */
.kicker{
  font-family:"Spectral SC"; font-weight:500; font-size:12.5px; letter-spacing:.3em;
  text-indent:.3em; color:var(--lantern); text-align:center; margin:0 0 16px;
}
.bird{display:block; margin:0 auto 12px; width:120px; height:56px;}
h1{
  font-family:"Spectral SC"; font-weight:500; font-size:52px; letter-spacing:.04em;
  text-align:center; margin:0 0 12px; line-height:1.1;
}
.mastrule{display:flex; align-items:center; gap:16px; max-width:440px; margin:0 auto 16px;}
.mastrule .ln{flex:1; height:1px; background:var(--rule);}
.mastrule .gl{color:var(--lantern); font-size:19px; font-weight:700; line-height:1; letter-spacing:.3em; margin-right:-.3em;}
.sub{font-style:italic; font-weight:300; color:var(--ink2); text-align:center; max-width:600px; margin:0 auto;}
h2{
  font-family:"Spectral SC"; font-weight:500; font-size:25px; letter-spacing:.04em;
  margin:52px 0 12px; line-height:1.25;
}
h3{font-family:"Spectral SC"; font-weight:500; font-size:20px; letter-spacing:.03em; margin:0 0 8px; line-height:1.3;}
.label{
  font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.24em;
  color:var(--lanternsoft); margin:20px 0 6px; display:block;
}
.dim{color:var(--ink2);}
/* the drop that stands where a printer would set an ornament */
.dropg{display:inline-block; width:9px; height:12px; vertical-align:-1px; fill:var(--lantern);}

/* ---------- the first page: at a glance, the stamps, how a night goes ---------- */
.glance{display:grid; grid-template-columns:1.3fr .7fr; gap:30px; margin-top:34px; align-items:start;}
.gtable{width:100%; border-collapse:collapse;}
.gtable td{padding:8px 0; border-bottom:1px solid var(--rule); vertical-align:top;}
.gtable tr:last-child td{border-bottom:none;}
.gtable .k{font-family:"Spectral SC"; font-weight:500; font-size:12px; letter-spacing:.2em; color:var(--ink2); width:150px; padding-right:14px;}
.gtable .v{font-weight:300;}
.counters{display:flex; flex-direction:column; gap:18px; align-items:stretch; max-width:290px; margin:0 auto; width:100%;}
.stamp{
  border:2.5px solid var(--lantern); outline:1px solid var(--lantern); outline-offset:3px;
  color:var(--lantern); padding:12px 22px; text-align:center; background:rgba(240,81,56,.05); margin:4px;
}
.stamp .k{font-family:"Spectral SC"; font-weight:500; font-size:11px; letter-spacing:.26em;}
.stamp .v{font-family:"Spectral SC"; font-weight:600; font-size:25px; letter-spacing:.08em; margin-top:2px; font-variant-numeric:tabular-nums;}
.stamp .n{font-family:"Spectral SC"; font-weight:500; font-size:10.5px; letter-spacing:.22em; color:var(--lanternsoft); margin-top:1px;}
.how{margin-top:30px; padding:0; counter-reset:how;}
.how li{list-style:none; counter-increment:how; position:relative; padding:0 0 10px 34px; font-weight:300;}
.how li::before{
  content:counter(how); position:absolute; left:0; top:1px; width:22px; height:22px; border:1px solid var(--lantern);
  color:var(--lantern); border-radius:50%; text-align:center; font-family:"Spectral SC"; font-size:13px; line-height:20px;
}

/* ---------- barrels, and the nights in them ---------- */
.part{margin-top:70px;}
.part-head{display:flex; align-items:center; gap:14px;}
.part-head .ln{flex:1; height:1px; background:var(--rule);}
.part-head .glyph{line-height:1;}
.part-head h2{margin:0; text-align:center; font-size:23px;}
.part-no{
  font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.3em; text-indent:.3em;
  color:var(--ink2); text-align:center; margin:0 0 4px;
}
.part-no [lang="ja"]{color:var(--lantern); letter-spacing:.3em; font-weight:700;}
.part-intro{max-width:640px; margin:10px auto 0; text-align:center; font-style:italic; font-weight:300; color:var(--ink2);}
.part-meta{max-width:640px; margin:14px auto 0; font-size:15px; font-weight:300;}
.part-meta p{margin:0 0 4px;}
.part-meta .label{display:inline; margin:0 6px 0 0;}
.days{margin-top:22px; border-top:1px solid var(--rule);}
.day{
  display:grid; grid-template-columns:118px 1fr auto; gap:18px; padding:16px 0;
  border-bottom:1px solid var(--rule); align-items:start;
}
/* a night's row, come back to from its tale (/#night-3) */
.day:target{margin:0 -14px; padding:16px 14px; background:rgba(240,81,56,.07); box-shadow:inset 2px 0 0 var(--lantern);}
.day .when{font-family:"Spectral SC"; font-weight:500; font-size:12.5px; letter-spacing:.14em; line-height:1.6;}
.day .when .date{color:var(--lanternsoft); display:block;}
.day .when .dn{color:var(--ink2); display:block;}
.day .what h3{font-size:18px; margin:0 0 3px;}
.day .what h3 a{color:var(--ink); border-bottom-color:transparent;}
.day .what h3 a:hover{border-bottom-color:var(--ink2);}
.day .what p{margin:0 0 3px; font-weight:300; font-size:15.5px; color:var(--ink2);}
.day .what .extra{font-size:14px; color:var(--lanternsoft); font-style:italic;}
.day .act{display:flex; flex-direction:column; gap:7px; align-items:flex-end; min-width:132px;}
.badge{
  font-family:"Spectral SC"; font-weight:500; font-size:10.5px; letter-spacing:.2em;
  border:1px solid var(--rule); color:var(--ink2); padding:2px 8px; white-space:nowrap;
}
.badge.tutorial{border-color:var(--lantern); color:var(--lantern);}
a.badge{padding:5px 12px; font-size:11.5px; letter-spacing:.18em; cursor:pointer; transition:background .12s, color .12s, border-color .12s;}
a.badge:hover{border-color:var(--ink2); color:var(--ink);}
a.badge.tutorial:hover{background:var(--lantern); border-color:var(--lantern); color:var(--paper);}
.badge.paid{display:none; border-color:rgba(226,178,91,.5); color:var(--gold); font-variant-numeric:tabular-nums;}
.day.is-read .badge.paid{display:inline-block;}
.day.is-read .what h3 a{color:var(--ink2);}

/* ---------- pictures ---------- */
figure.plate{margin:34px 0 8px;}
.plateframe{border:1.6px solid var(--ink); padding:7px; background:var(--panel);}
.plateframe .in{border:.6px solid rgba(236,229,216,.55); overflow:hidden;}
.plateframe svg{display:block; width:100%; height:auto;}
figcaption{font-family:"Spectral SC"; font-weight:500; font-size:13px; letter-spacing:.12em; text-align:center; margin-top:12px; color:var(--ink2);}
/* the alley: its lanterns breathe, and its rain falls */
.plate .lamp{animation:lamp 5.5s ease-in-out var(--d, 0s) infinite;}
@keyframes lamp{0%,100%{opacity:1} 46%{opacity:.72} 52%{opacity:.9} 58%{opacity:.68}}
.plate .rain{animation:rain .8s linear infinite;}
@keyframes rain{to{transform:translate(-7px, 30px)}}
.plate .neon{animation:neon 7s steps(1) var(--d, 0s) infinite;}
@keyframes neon{0%,100%{opacity:1} 91%{opacity:.35} 92%{opacity:1} 94%{opacity:.5} 95%{opacity:1}}
figure.plate.small{max-width:560px; margin:34px auto 8px;}

/* ---------- covers: the large moving picture of a tale the house recommends ---------- */
/* On the first page's list the cover lies across the tale's row, over the usual line, and leads to the tale. On the tale
   itself it stands under the title. It is 12 by 5; on a phone it is cut at the sides to 8 by 5, so that it keeps its height. */
.coverframe{display:block; border:1.6px solid var(--ink); padding:7px; background:var(--panel); transition:border-color .2s;}
.coverframe .in{display:block; border:.6px solid rgba(236,229,216,.55); overflow:hidden; aspect-ratio:12 / 5; background:var(--codebg);}
.day.feature{row-gap:16px; padding:24px 0 20px;}
.day.feature .cover{grid-column:1 / -1; display:block; position:relative; border-bottom:none;}
.day.feature .cover:hover .coverframe, .day.feature .cover:focus-visible .coverframe{border-color:var(--lanternsoft);}
.day.feature .what h3{font-size:21px;}
.pick{
  position:absolute; left:22px; top:22px; display:flex; align-items:center; gap:10px; padding:5px 13px 4px 6px;
  background:rgba(19,17,16,.86); border:1px solid rgba(240,81,56,.7); color:var(--ink);
  font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.2em;
}
.pick [lang="ja"]{background:var(--lantern); color:#fff4e6; font-weight:800; font-size:13px; letter-spacing:.12em; padding:2px 4px 2px 6px;}
.pick .narrow{display:none;}
figure.plate.covered{margin:34px 0 0;}
/* ---------- covers: how the parts of a cover move (art.py draws them and gives the parts these classes) ---------- */
.cv{display:block; width:100%; height:100%;}
.cv .glow{animation:cv-glow 5.5s ease-in-out var(--d, 0s) infinite;}
@keyframes cv-glow{0%,100%{opacity:1} 46%{opacity:.7} 52%{opacity:.86} 60%{opacity:.66}}
.cv .flick{animation:cv-flick 5s steps(1) var(--d, 0s) infinite;}
@keyframes cv-flick{0%,100%{opacity:1} 68%{opacity:.5} 70%{opacity:1} 74%{opacity:.65} 76%{opacity:1}}
.cv .steam{transform-box:fill-box; transform-origin:50% 100%; opacity:0; animation:cv-steam var(--t, 5s) ease-out var(--d, 0s) infinite;}
@keyframes cv-steam{0%{transform:translateY(6px) scale(.8); opacity:0} 18%{opacity:.6} 100%{transform:translateY(-38px) scale(1.5); opacity:0}}
.cv .mote{opacity:0; animation:cv-mote var(--t, 14s) linear var(--d, 0s) infinite;}
@keyframes cv-mote{0%{transform:translate(0, 0); opacity:0} 12%{opacity:.85} 85%{opacity:.6} 100%{transform:translate(var(--x, 20px), var(--y, -50px)); opacity:0}}
.cv .rise{opacity:0; animation:cv-rise var(--t, 6s) ease-out var(--d, 0s) infinite;}
@keyframes cv-rise{0%{transform:translateY(16px); opacity:0} 14%{opacity:1} 68%{opacity:1} 100%{transform:translateY(-30px); opacity:0}}
.cv .tick{opacity:.34; animation:cv-tick var(--t, 12s) steps(1) var(--d, 0s) infinite;}
@keyframes cv-tick{0%{opacity:1} 9%{opacity:.34}}
.cv .bob{animation:cv-bob 4.5s ease-in-out infinite;}
@keyframes cv-bob{0%,100%{transform:translateY(5px)} 50%{transform:translateY(-7px)}}
.cv .bead{animation:cv-bead 9s ease-in-out infinite;}
@keyframes cv-bead{0%,55%,100%{transform:translateY(0)} 64%,90%{transform:translateY(5px)}}
.cv .sway{transform-box:fill-box; transform-origin:50% 0; animation:cv-sway 7s ease-in-out infinite;}
@keyframes cv-sway{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
.cv .stir{transform-box:fill-box; transform-origin:50% 42%; animation:cv-stir 6.5s ease-in-out infinite;}
@keyframes cv-stir{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(6deg)}}
.cv .jump{transform-box:fill-box; transform-origin:0 100%; animation:cv-jump 6s cubic-bezier(.2, .9, .3, 1) infinite;}
@keyframes cv-jump{0%,16%{transform:rotate(0)} 24%,72%{transform:rotate(-13deg)} 100%{transform:rotate(0)}}
.cv .turn{transform-box:fill-box; transform-origin:50% 100%; animation:cv-turn 9s ease-in-out infinite;}
@keyframes cv-turn{0%,38%,100%{transform:rotate(0)} 52%,86%{transform:rotate(9deg)}}
.cv .drip{opacity:0; animation:cv-drip 3.6s cubic-bezier(.55, 0, 1, .7) var(--d, 0s) infinite;}
@keyframes cv-drip{0%{transform:translateY(0); opacity:0} 10%{opacity:1} 56%{transform:translateY(var(--fall, 90px)); opacity:1} 58%,100%{transform:translateY(var(--fall, 90px)); opacity:0}}
.cv .ring{transform-box:fill-box; transform-origin:center; opacity:0; animation:cv-ring 3.6s ease-out var(--d, 0s) infinite;}
@keyframes cv-ring{0%,56%{transform:scale(.3); opacity:0} 60%{opacity:.8} 100%{transform:scale(1.7); opacity:0}}
.cv .bubble{opacity:0; animation:cv-bubble var(--t, 4s) ease-in var(--d, 0s) infinite;}
@keyframes cv-bubble{0%{transform:translateY(4px); opacity:0} 20%{opacity:.8} 100%{transform:translateY(-10px); opacity:0}}
/* out of sight, a cover holds still (site.js sets this); and it holds still for a reader who asks for less motion */
.cv.still *{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .cv *{animation:none!important;}
  .cv .steam, .cv .mote, .cv .rise, .cv .drip, .cv .ring, .cv .bubble{opacity:.5;}
  .cv .tick{opacity:.8;}
}


/* ---------- a tale's page, and a guide's ---------- */
.crumbs{font-family:"Spectral SC"; font-weight:500; font-size:12px; letter-spacing:.18em; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.crumbs a{border-bottom:none; color:var(--ink2);}
.crumbs a:hover{color:var(--lanternsoft);}
.dayhead{margin:38px 0 0; text-align:center;}
.dayhead .kicker{margin-bottom:10px;}
.dayhead .kicker [lang="ja"]{margin-left:.6em; font-weight:700;}
.dayhead h1{font-size:40px;}
.dayhead .sub{max-width:640px;}

/* The bar that comes down from the top once the title has scrolled away (site.js shows it): the night as a small
   pill, the title, and on a tale the price as it stands where the reader is, over a line that shows how far through the
   tale they are. */
.daybar{
  position:fixed; top:0; left:0; right:0; z-index:4;
  background:rgba(26,24,22,.97); border-bottom:1px solid rgba(236,229,216,.12);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9);
  transform:translateY(-101%); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, visibility 0s linear .34s;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .daybar{background:rgba(24,22,20,.88); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);}
}
.daybar.show{
  transform:none; opacity:1; pointer-events:auto; visibility:visible;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, visibility 0s;
}
.daybar-in{
  display:flex; align-items:center; gap:8px; min-width:0; height:48px;
  max-width:920px; margin:0 auto; padding:0 34px;
}
.db-top{display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; height:100%; border-bottom:none; color:var(--ink);}
.db-top:hover{color:var(--ink);}
.db-top:hover .db-title{color:var(--lanternsoft);}
.db-icon{
  flex:none; display:grid; place-items:center; width:32px; height:32px; border:none; border-radius:6px; color:var(--ink2);
  transition:color .15s ease, background .15s ease;
}
.crumbs a.db-icon{color:var(--ink2);}
.db-icon:hover, .crumbs a.db-icon:hover, .db-icon:focus-visible{color:var(--lanternsoft); background:rgba(236,229,216,.08);}
.daybar-in > .db-icon:first-child{margin-left:-6px;}
.crumb-right{display:inline-flex; align-items:center; gap:8px; min-width:0;}
.crumb-right .db-icon{margin:-8px -6px -8px 0;}
.db-day{
  font-family:"Spectral SC"; font-weight:600; font-size:11px; letter-spacing:.2em; text-indent:.2em; line-height:1;
  color:var(--lantern); white-space:nowrap; flex:none;
  padding:5px 10px 4px; border:1px solid rgba(240,81,56,.55); border-radius:999px;
}
.db-title{
  font-family:"Spectral",serif; font-weight:500; font-size:16.5px; letter-spacing:0; line-height:1.3;
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s ease;
}
.db-lesson{
  flex:none; max-width:44%; font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.14em;
  color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.db-bid{flex:none; font-family:var(--pixel); font-size:11px; line-height:1; color:var(--gold); white-space:nowrap; padding-top:2px;}
.db-bid.hit{animation:hit .35s steps(2);}
@keyframes hit{50%{color:#fff; transform:translateY(-1px)}}
/* How far through the tale the reader is, along the bottom of the bar, from the first line of the story to the fall of
   the mallet: gold at first, and the lantern's orange by the end. site.js sets --p, from 0 to 1, as the page scrolls. The
   line stops short of the shamisen, which sits over the bar's right end (--r). */
.db-gauge{--p:0; --l:34px; --r:34px; position:relative; height:4px; max-width:920px; margin:0 auto; top:-1px;}
.db-gauge::before, .db-gauge i{content:""; position:absolute; left:var(--l); right:var(--r); top:0; bottom:0;}
.db-gauge::before{background:rgba(236,229,216,.1);}
.db-gauge i{
  background:linear-gradient(90deg, var(--gold) 0, var(--gold) 38%, var(--lanternsoft) 72%, var(--lantern) 100%);
  clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0);
}
.db-gauge b{
  position:absolute; top:50%; left:calc(var(--l) + (100% - var(--l) - var(--r)) * var(--p)); width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  transform:rotate(45deg); background:var(--ink); box-shadow:0 0 8px rgba(240,81,56,.9);
}
.framed .daybar-in{padding-right:96px;}
.framed .db-gauge{--r:96px;}
@media(max-width:620px){
  .daybar-in{gap:4px; height:42px; padding:0 12px;}
  .db-top{gap:10px;}
  .daybar-in > .db-icon:first-child{margin-left:0;}
  .db-day{font-size:10px; padding:4px 8px 3px;}
  .db-title{font-size:15px;}
  .db-lesson{display:none;}
  .db-bid{font-size:9px;}
  .db-gauge{--l:12px; --r:12px;}
  .framed .daybar-in{padding-right:50px;}
  .framed .db-gauge{--r:50px;}
}
.intro{border:1px solid var(--rule); background:var(--panel); padding:20px 24px; margin:34px 0 0;}
.intro p{margin:0 0 8px; font-weight:300;}
.intro p:last-child{margin-bottom:0;}
.intro .label{display:inline; margin:0 8px 0 0;}
ul.built{margin:22px 0 14px; padding-left:22px; font-weight:300;}
ul.built li{margin-bottom:6px;}

/* a guide's sections */
.step{margin-top:54px;}
.step > .sno{font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.28em; color:var(--lantern); margin:0 0 2px;}
.step > h2{margin:0 0 14px;}
.step p{font-weight:300;}
.step ul{margin:0 0 14px; padding-left:22px; font-weight:300;}
.step li{margin-bottom:6px;}
.note{border:1px solid var(--rule); background:var(--panel); padding:16px 20px; margin:18px 0;}
.note .label{margin-top:0;}
.note p{margin:0;}
.note p + p{margin-top:10px;}
table.map{width:100%; border-collapse:collapse; margin:0 0 16px; font-weight:300; table-layout:fixed;}
table.map td, table.map th{padding:7px 10px 7px 0; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; overflow-wrap:break-word;}
table.map th{font-family:"Spectral SC"; font-weight:500; font-size:12px; letter-spacing:.2em; color:var(--ink2);}
table.map td.num, table.map th.num{text-align:right; padding-right:0; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.map .gold{color:var(--gold);}
table.moves th:nth-child(1), table.moves td:nth-child(1){width:24%;}
table.moves th:nth-child(2), table.moves td:nth-child(2){width:30%;}

/* ---------- a tale ---------- */
/* The lot, as the house's list gives it: a card beside the picture of the bottle. */
.lot{display:grid; grid-template-columns:1.25fr 1fr; gap:0; margin:34px 0 0; border:1.6px solid var(--ink); background:var(--panel); padding:7px;}
.lot .pic{border:.6px solid rgba(236,229,216,.55); border-right:none; overflow:hidden; display:flex; align-items:center; background:var(--codebg);}
.lot .pic svg{display:block; width:100%; height:100%; object-fit:cover;}
.lot .card{border:.6px solid rgba(236,229,216,.55); padding:18px 20px 16px; display:flex; flex-direction:column; gap:3px; background:var(--codebg);}
.lot .lno{font-family:"Spectral SC"; font-weight:600; font-size:12px; letter-spacing:.3em; color:var(--lantern);}
.lot .kind{font-family:"Spectral SC"; font-weight:500; font-size:22px; letter-spacing:.04em; line-height:1.2; margin:2px 0 0;}
.lot .kind [lang="ja"]{font-size:17px; color:var(--ink2); margin-left:.4em;}
.lot .from{font-style:italic; font-weight:300; color:var(--ink2); margin:0 0 8px;}
.lot dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:14.5px; font-weight:300;}
.lot dt{font-family:"Spectral SC"; font-weight:500; font-size:10.5px; letter-spacing:.2em; color:var(--ink2); padding-top:3px; white-space:nowrap;}
.lot dd{margin:0;}
.lot .est{margin-top:auto; padding-top:12px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.lot .est span{font-family:"Spectral SC"; font-weight:500; font-size:10.5px; letter-spacing:.22em; color:var(--ink2);}
.lot .est b{font-family:"Spectral SC"; font-weight:600; font-size:16px; letter-spacing:.06em; color:var(--ink); font-variant-numeric:tabular-nums;}

/* The round, before it starts: the bidder on the left, the Shoyuken on the right, the opening price between them. */
.versus{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:38px auto 0; max-width:680px; font-family:var(--pixel);}
.versus .side{min-width:0;}
.versus .bar{height:12px; border:2px solid var(--ink); background:var(--codebg); padding:1px; display:flex;}
.versus .bar i{display:block; width:100%; height:100%; background:var(--gold);}
.versus .l .bar{justify-content:flex-end;}
.versus .name{margin-top:8px; font-size:9.5px; letter-spacing:.06em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.versus .r .name{text-align:right; color:var(--lanternsoft);}
.versus .mid{text-align:center; line-height:1;}
.versus .mid span{display:block; font-size:8px; letter-spacing:.1em; color:var(--ink2); margin-bottom:7px; text-transform:uppercase;}
.versus .mid b{display:block; font-weight:400; font-size:15px; color:var(--lantern);}
.versus.done .l .bar i{width:0;}
.versus.done .mid b{color:var(--gold);}

.tale{max-width:660px; margin:40px auto 0; font-size:19px; line-height:1.72;}
.tale p{margin:0 0 18px;}
.tale > p:first-of-type::first-letter{
  float:left; font-family:"Spectral SC"; font-weight:500; font-size:66px; line-height:.86; padding:6px 10px 0 0; color:var(--lantern);
}
.tale .rounds{font-family:var(--pixel); font-size:10px; letter-spacing:.08em; color:var(--ink2); text-align:center; margin:34px 0 22px; text-transform:uppercase;}
.tale .rounds b{color:var(--lantern); font-weight:400;}
/* a bid, as the room hears it: the price, and who raised a paddle */
.bid{
  display:flex; align-items:baseline; gap:16px; margin:16px 0; padding:8px 0 7px 16px;
  border-left:2px solid rgba(226,178,91,.45); transition:border-color .3s, background .3s;
}
.bid b{font-family:var(--pixel); font-weight:400; font-size:14px; line-height:1.5; color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums;}
.bid span{font-family:"Spectral SC"; font-weight:500; font-size:13px; letter-spacing:.16em; color:var(--ink2);}
.bid.house{border-left-color:rgba(240,81,56,.5);}
.bid.house b{color:var(--lanternsoft);}
.bid.now{border-left-color:var(--gold); background:linear-gradient(90deg, rgba(226,178,91,.09), transparent 70%);}
.bid.house.now{border-left-color:var(--lantern); background:linear-gradient(90deg, rgba(240,81,56,.1), transparent 70%);}
.bid.last{margin:26px 0; padding:14px 0 12px 18px; border-left:3px solid var(--lantern); background:linear-gradient(90deg, rgba(240,81,56,.1), transparent 80%);}
.bid.last b{font-size:17px; color:var(--lantern);}
.bid.last span{color:var(--ink);}
.tale .breaker{display:flex; align-items:center; justify-content:center; gap:14px; margin:34px 0; color:var(--lantern);}
.tale .breaker::before, .tale .breaker::after{content:""; width:70px; height:1px; background:var(--rule);}

/* how the round ended: the house's stamp, the price the mallet fell on, and the verdict */
.result{max-width:660px; margin:54px auto 0; padding:30px 20px 26px; text-align:center; border:1.6px solid var(--ink); background:var(--panel); position:relative;}
.result::before{content:""; position:absolute; inset:6px; border:.6px solid rgba(236,229,216,.55); pointer-events:none;}
.result .sold{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:10px 18px 8px; transform:rotate(-4deg);
  border:3px solid var(--lantern); outline:1px solid var(--lantern); outline-offset:3px; color:var(--lantern); background:rgba(240,81,56,.06);
}
.result .sold [lang="ja"]{font-size:34px; font-weight:800; line-height:1; letter-spacing:.14em; margin-right:-.14em;}
.result .sold b{font-family:"Spectral SC"; font-weight:600; font-size:12px; letter-spacing:.4em; margin-right:-.4em;}
.result .hammer{font-family:var(--pixel); font-size:25px; line-height:1.3; color:var(--gold); margin:26px 0 10px; font-variant-numeric:tabular-nums;}
.result .facts{font-family:"Spectral SC"; font-weight:500; font-size:12px; letter-spacing:.2em; color:var(--ink2); margin:0;}
.result .ko{margin-top:22px; font-family:var(--pixel); line-height:1.6; text-transform:uppercase;}
.result .ko span{display:block; font-size:10px; letter-spacing:.08em; color:var(--ink);}
.result .ko b{display:block; font-weight:400; font-size:16px; color:var(--lantern); margin-top:6px; letter-spacing:.12em;}
.result.struck .sold{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both;}
.result.struck .ko b{animation:blink 1s steps(2) 3;}
@keyframes stamp{from{transform:rotate(-4deg) scale(2.2); opacity:0} to{transform:rotate(-4deg) scale(1); opacity:1}}
@keyframes blink{50%{opacity:.25}}

/* ---------- the foot of a page ---------- */
.daynav{display:flex; justify-content:space-between; gap:14px; margin-top:70px; padding-top:20px; border-top:1px solid var(--rule); flex-wrap:wrap;}
.daynav a{border-bottom:none; max-width:46%;}
.daynav .dir{display:block; font-family:"Spectral SC"; font-weight:500; font-size:11px; letter-spacing:.24em; color:var(--ink2);}
.daynav .next{text-align:right; margin-left:auto;}
.colophon{margin-top:80px; text-align:center; font-style:italic; font-weight:300; color:var(--ink2); font-size:14.5px;}
.colophon .forget{display:inline-block; margin-top:10px; font-style:normal; font-family:"Spectral SC"; font-size:11px; letter-spacing:.2em; color:var(--ink2); background:none; border:none; border-bottom:1px solid var(--rule); padding:0 0 1px; cursor:pointer;}
.colophon .forget:hover{color:var(--lanternsoft);}
.colophon .forget[hidden]{display:none;}

/* ---------- the guides: the row of cards on the first page, and the page that lists them ---------- */
.guides{margin-top:48px;}
.gcar{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:18px 2px 14px; margin:0 -2px;
 scrollbar-width:thin; scrollbar-color:rgba(236,229,216,.25) transparent;}
.gcard{flex:0 0 272px; scroll-snap-align:start; display:flex; flex-direction:column; background:var(--panel);
 border:1px solid var(--rule); border-top:3px solid var(--lantern); color:var(--ink); transition:border-color .12s, background .12s;}
.gcard:hover{border-color:var(--ink2); border-top-color:var(--lanternsoft); background:#2a2725;}
.gcard.all{border-top-color:var(--ink2);}
.gart{display:block; width:100%; height:auto;}
.gcard .gart{border-bottom:1px solid var(--rule);}
.gcard .gbody{display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; flex:1;}
.gpk{font-family:"Spectral SC"; font-weight:500; font-size:10.5px; letter-spacing:.22em; color:var(--lantern);}
.gcard b{font-family:"Spectral SC"; font-weight:500; font-size:18px; letter-spacing:.03em; line-height:1.2;}
.gcard em{font-weight:300; font-style:italic; font-size:14px; line-height:1.4; color:var(--ink2); flex:1;}
.gpa{font-family:"Spectral SC"; font-weight:500; font-size:11px; letter-spacing:.18em; color:var(--lanternsoft); white-space:nowrap;}
.gcard .gpa{margin-top:6px;}
.guidelist{margin-top:34px;}
.guiderow{display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:start; padding:24px 0; border-top:1px solid var(--rule);}
.guiderow:last-child{border-bottom:1px solid var(--rule);}
.guiderow .gart{border:1px solid var(--rule); border-radius:4px;}
.guiderow h2{margin:4px 0 8px; font-size:24px; text-align:left;}
.guiderow h2 a{color:var(--ink); border-bottom-color:transparent;}
.guiderow h2 a:hover{border-bottom-color:var(--ink2);}
.guiderow .sub{text-align:left; margin:0 0 8px; max-width:none;}
.guiderow .sections{margin:10px 0 14px; padding:0; list-style:none; columns:2; column-gap:26px; font-size:14.5px;}
.guiderow .sections li{break-inside:avoid; margin:0 0 5px; color:var(--ink2);}
.guiderow .sections li a{color:var(--ink);}
@media (max-width:640px){.guiderow{grid-template-columns:1fr;} .guiderow .sections{columns:1;}}

/* ---------- the page that is not there ---------- */
.lost{text-align:center; padding-top:8vh;}
.lost .big{font-family:var(--pixel); font-size:54px; color:var(--lantern); line-height:1.2; margin:26px 0 18px;}
.lost .sub{margin-bottom:26px;}

/* ---------- a phone ---------- */
@media(max-width:700px){
  body{font-size:16px;}
  .sheet{padding:40px 18px 70px;}
  h1{font-size:36px;}
  .dayhead h1{font-size:29px;}
  h2{font-size:21px;}
  .part-head h2{font-size:18px;}
  .mastrule .gl{font-size:16px;}
  .glance{grid-template-columns:1fr;}
  .counters{flex-direction:row; flex-wrap:wrap; justify-content:flex-start; max-width:none;}
  .stamp{flex:1 1 150px; padding:10px 12px;}
  .stamp .v{font-size:21px;}
  .gtable .k{width:104px;}
  .day{grid-template-columns:1fr; gap:6px;}
  .day.feature{row-gap:8px; padding:18px 0 16px;}
  .day.feature .cover{margin-bottom:6px;}
  .coverframe{padding:5px;}
  .coverframe .in{aspect-ratio:8 / 5;}
  .pick{left:13px; top:13px; font-size:10px; padding:4px 9px 3px 5px; gap:7px;}
  .pick [lang="ja"]{font-size:11.5px;}
  .pick .wide{display:none;} .pick .narrow{display:inline;}
  .day .when .date, .day .when .dn{display:inline;}
  .day .when .dn::before{content:" · ";}
  .day .act{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; min-width:0; margin-top:4px;}
  .intro{padding:16px;}
  .daynav a{max-width:100%;}
  .lot{grid-template-columns:1fr;}
  .lot .pic{border-right:.6px solid rgba(236,229,216,.55); border-bottom:none;}
  .tale{font-size:17.5px; line-height:1.68; margin-top:30px;}
  .tale > p:first-of-type::first-letter{font-size:56px;}
  .bid{gap:12px; padding-left:12px;}
  .bid b{font-size:12px;}
  .bid span{font-size:12px; letter-spacing:.12em;}
  .bid.last b{font-size:13.5px;}
  .versus{gap:10px;}
  .versus .name{font-size:8px;}
  .versus .mid b{font-size:12px;}
  .result .hammer{font-size:19px;}
  .result .sold [lang="ja"]{font-size:28px;}
  table.map{font-size:15px;}
  table.moves th:nth-child(1), table.moves td:nth-child(1){width:26%;}
  .lost .big{font-size:38px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .plate .lamp, .plate .rain, .plate .neon, .result.struck .sold, .result.struck .ko b, .db-bid.hit{animation:none!important;}
}