/* © 2026 Mojing 墨景 (SimaTian). Licensed CC BY-NC 4.0, see LICENSE.
   The reading pages (/bonsai-simulator/, /penjing/, /penjing-vs-bonsai/): the game's paper, ink and seal, its painted
   brush font for headings and the hanzi, a book serif for the running text (the brush face is for a few words, not
   paragraphs). Same-origin only, as the site's CSP asks; no script. */
@font-face{font-family:"Bonsai Brush";src:url(/ui/BonsaiBrush-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bonsai Brush";src:url(/ui/BonsaiBrush-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bonsai Brush";src:url(/ui/BonsaiBrush-Zh.woff2) format("woff2");font-weight:400;unicode-range:U+3000-303F,U+3400-9FFF,U+FF00-FFEF;font-display:swap}
@font-face{font-family:"Bonsai Brush";src:url(/ui/BonsaiBrush-Zh.woff2) format("woff2");font-weight:700;unicode-range:U+3000-303F,U+3400-9FFF,U+FF00-FFEF;font-display:swap}
@font-face{font-family:"Bonsai Han";src:url(/ui/BonsaiBrush-Zh.woff2) format("woff2");font-display:swap}
:root{
  --paper:#e7d0a8; --paper-2:#e0c89f; --paper-3:#d6bd92; --ink:#272f31; --ink-soft:#42443f; --ink-faint:#6f6859;   /* the game's Slate palette (src/render/palette.ts, key B): its paper, the ink leaning to its dark */
  --seal:#b3261e; --seal-dark:#8f1d17; --focus:#8a5a1f;
  --brush:"Bonsai Brush",serif;
  --text:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif;
  --han:"Bonsai Han","Songti SC","Noto Serif SC","SimSun",serif;
  --measure:40rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper-2) url(/read/paper.jpg) center/cover fixed}   /* /ui/paper.jpg through Slate's colour map */
body{margin:0;color:var(--ink);font:1.1875rem/1.65 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--seal-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--seal)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.han,[lang^="zh"]{font-family:var(--han);font-style:normal}

/* top bar */
.bar{display:flex;align-items:center;gap:1.5rem;max-width:72rem;margin:0 auto;padding:1rem 1rem .5rem}
.bar .logo img{height:2.6rem;width:auto}
.bar nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-left:auto;font:400 1.15rem/1.2 var(--brush)}
.bar nav a{color:var(--ink);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a[aria-current]{border-bottom-color:var(--seal)}

/* buttons: the seal (play) and the ink (Steam) */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1.2rem .6rem;border-radius:4px;font:700 1.2rem/1 var(--brush);text-decoration:none;letter-spacing:.01em}
.btn.seal{background:var(--seal);color:#f6efe0;box-shadow:0 2px 0 var(--seal-dark)}
.btn.seal:hover{background:var(--seal-dark);color:#fff}
.btn.ink{background:var(--ink);color:var(--paper);box-shadow:0 2px 0 #000}
.btn.ink:hover{background:#000;color:#fff}
.btn img{width:1.3rem;height:1.3rem}

/* page */
main{max-width:72rem;margin:0 auto;padding:0 1rem 4rem}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.5rem;align-items:center;padding:2rem 0 2.5rem}
.hero h1{font:700 clamp(2.2rem,5vw,3.4rem)/1.08 var(--brush);margin:0 0 .75rem;letter-spacing:-.005em}
.hero h1 .han{display:block;font-size:.62em;color:var(--seal);margin-bottom:.35rem;letter-spacing:.08em}
.lede{font-size:1.28rem;line-height:1.55;color:var(--ink-soft);margin:0}
.hero figure{margin:0}
.shot{border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 12px 30px -12px rgba(40,30,15,.45)}
figcaption{font:400 1rem/1.4 var(--brush);color:var(--ink-faint);margin-top:.55rem}

.swash{display:block;width:min(29rem,80%);height:18px;margin:1rem auto 2.5rem;background:url(/ui/swash1.png) center/contain no-repeat;opacity:.85;border:0}

article{max-width:var(--measure);margin:0 auto}
article h2{font:700 clamp(1.7rem,3.4vw,2.2rem)/1.15 var(--brush);margin:3rem 0 .75rem}
article h3{font:700 1.4rem/1.2 var(--brush);margin:2rem 0 .4rem}
article p,article ul,article ol{margin:0 0 1.1rem}
article li{margin:.3rem 0}
article figure{margin:2rem -4rem}
article .wide{margin:2rem 0}
.note{border-left:3px solid var(--seal);padding:.2rem 0 .2rem 1rem;color:var(--ink-soft);font-size:1.05rem}
.term{font:700 1.05em var(--text)}
.pin{font-style:italic;color:var(--ink-soft)}

/* tables read as a ledger on paper */
.tablewrap{overflow-x:auto;margin:1.5rem 0 2rem;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.45;min-width:34rem}
th,td{text-align:left;vertical-align:top;padding:.6rem .75rem;border-bottom:1px solid rgba(29,27,24,.18)}
thead th{font:700 1.1rem/1.2 var(--brush);border-bottom:2px solid var(--ink)}
tbody th{font-weight:700;white-space:nowrap}
tbody tr:nth-child(odd){background:rgba(255,250,235,.35)}

/* the three kinds, side by side */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.25rem;margin:1.5rem 0 2rem}
.card{background:rgba(250,244,230,.55);border:1px solid rgba(29,27,24,.14);border-radius:4px;padding:1.1rem 1.2rem}
.card .han{display:block;font-size:2rem;line-height:1.1;color:var(--seal)}
.card h3{margin:.35rem 0 .3rem;font-size:1.3rem}
.card p{font-size:1rem;margin:0}

/* the call at the end */
.cta{max-width:var(--measure);margin:3.5rem auto 0;padding:1.6rem 1.6rem 1.8rem;background:rgba(250,244,230,.6);border:1px solid rgba(29,27,24,.16);border-radius:4px;display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;align-items:center}
.cta img.enso{width:5.5rem;height:auto;opacity:.9}
.cta h2{font:700 1.6rem/1.15 var(--brush);margin:0 0 .35rem}
.cta p{margin:0;font-size:1.05rem;color:var(--ink-soft)}
.cta .btns{margin-top:1rem}

.sources{font-size:.95rem;color:var(--ink-soft)}
.sources li{margin:.35rem 0;overflow-wrap:anywhere}
.updated{font:400 1rem var(--brush);color:var(--ink-faint);margin:0 0 1rem}

footer{max-width:72rem;margin:0 auto;padding:2rem 1rem 3rem;border-top:1px solid rgba(29,27,24,.18);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:400 1.05rem var(--brush);color:var(--ink-faint)}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--seal)}
footer .fine{flex-basis:100%;font:400 .9rem/1.5 var(--text)}

@media (max-width:52rem){
  .hero{grid-template-columns:1fr;gap:1.5rem;padding-top:1rem}
  .hero figure{order:-1}
  article figure{margin:2rem 0}
  .bar{flex-wrap:wrap;gap:.5rem 1rem}
  .bar nav{margin-left:0;width:100%}
}
@media (max-width:30rem){
  body{font-size:1.0625rem}
  .cta{grid-template-columns:1fr}
  .cta img.enso{width:4rem}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .15s,color .15s}}

/* the Japanese and Chinese pages' hero (public/read/ja.css, zh-hant.css): a hanging scroll, the title set top to bottom
   in the brush with its seal beside it, the lede and buttons at its foot; on a phone the title lies down again */
.hero.scroll h1{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1rem;font:700 clamp(2.2rem,4.4vw,3.2rem)/1.15 var(--text);letter-spacing:.06em}
.hero.scroll h1.b{font-family:var(--brush)}
.hero.scroll .htext.v{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.75rem;align-items:end}
.hero.scroll .htext.v h1{grid-row:1/span 2;writing-mode:vertical-rl;flex-wrap:nowrap;align-items:flex-start;gap:1rem;margin:0;font-size:clamp(2.6rem,5vw,4rem);line-height:1.1;letter-spacing:.12em}
.hero.scroll h1 .seal{white-space:nowrap;font-size:1.3rem;line-height:1;color:#f6efe0;background:var(--seal);padding:.6rem .35rem;border-radius:3px;letter-spacing:.2em}
.hero.scroll .lede{margin:0}
.hero.scroll .htext.v .btns{grid-column:2}
footer a.lang,.bar nav a.lang{color:var(--ink-faint);font:400 1rem/1.2 var(--text)}
@media (max-width:52rem){
  .hero.scroll .htext.v{display:block}
  .hero.scroll .htext.v h1,.hero.scroll h1{writing-mode:horizontal-tb;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin:0 0 .75rem;font-size:clamp(1.7rem,7.4vw,2.4rem);letter-spacing:.04em}
  .hero.scroll h1 .seal{font-size:.95rem;padding:.4rem .5rem}
}