/* ============ COVER PAGE (its own light "paper" theme, separate from the site) ============ */
html.locked,html.locked body{overflow:hidden;height:100%}
#cover{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  background-color:#ece5d6;
  background-image:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color:#1c1814;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  overflow:auto;
}
#cover.leaving{transform:translateY(-101%)}
#cover .card{
  position:relative;width:min(560px,100%);background:#fbf8f0;border:1.5px solid #1c1814;
  box-shadow:9px 9px 0 #1c1814;padding:clamp(24px,5vw,44px);
  animation:cardIn .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
#cover .top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font:500 .68rem 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#6b6257}
#cover .top b{font-weight:500;color:#c8371d}
#cover h2{font:900 clamp(3.4rem,15vw,6.2rem)/.9 'Noto Serif JP',serif;letter-spacing:-.02em;margin:26px 0 6px}
#cover .sub{font:500 .8rem 'IBM Plex Mono',monospace;letter-spacing:.28em;text-transform:uppercase;color:#6b6257}
#cover .stamp{
  position:absolute;right:clamp(18px,4vw,34px);top:clamp(64px,10vw,92px);width:74px;height:74px;border-radius:50%;
  border:2.5px solid #c8371d;color:#c8371d;display:grid;place-items:center;transform:rotate(-12deg);
  font:900 1.05rem 'Noto Serif JP',serif;letter-spacing:.05em;opacity:.88;
  box-shadow:inset 0 0 0 3px #fbf8f0,inset 0 0 0 4.5px #c8371d;
}
#cover hr{border:0;border-top:1.5px solid #1c1814;margin:28px 0 6px}
#cover dl{display:grid;grid-template-columns:auto 1fr;column-gap:0}
#cover dt,#cover dd{padding:14px 0;border-bottom:1px dashed rgba(28,24,20,.28)}
#cover dt{font:500 .66rem 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#8a7f70;padding-top:17px;padding-right:26px}
#cover dd{font:500 1rem/1.5 'Noto Serif JP',serif}
#cover dl>*:nth-last-child(-n+2){border-bottom:0}
#cover .go{
  display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:22px;cursor:pointer;
  background:#c8371d;color:#fff;border:1.5px solid #1c1814;padding:18px 22px;
  font:500 .8rem 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:5px 5px 0 #1c1814;transition:transform .15s,box-shadow .15s,background .2s;
}
#cover .go:hover,#cover .go:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #1c1814;background:#d9402a;outline:none}
#cover .go:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #1c1814}
#cover .go i{font-style:normal;font-size:1.2rem;transition:transform .2s}
#cover .go:hover i{transform:translateX(5px)}
#cover .note{margin-top:14px;text-align:center;font:400 .62rem 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a7f70}
@media (max-width:480px){#cover dl{grid-template-columns:1fr}#cover dt{border-bottom:0;padding-bottom:0}#cover dd{padding-top:4px}#cover .stamp{width:60px;height:60px;font-size:.9rem;top:74px}}
@media (prefers-reduced-motion:reduce){#cover{transition:opacity .4s}#cover.leaving{transform:none;opacity:0}#cover .card{animation:none}}