/* Type, colours and measure follow thelingwu.com, shared with blog.mark.tw so both read as one site */
:root {
  color-scheme: light;
  --bg: #EDEBE6;
  --line: #C8C3B8;
  --text: #22201D;
  --mute: rgba(34, 32, 29, .66);
  --accent: #3A8FB7; /* 千草 chigusa: avatar-sky hue, muted like ink on paper */
  --accent-ink: #006284; /* 縹 hanada: dark enough for small text and focus rings on light */
  --lh: 1.85;
  --ls: normal;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161413; --line: #2C2A28; --text: #D9D4CB; --mute: rgba(217, 212, 203, .62);
    --accent: #7DB9DE; --accent-ink: #7DB9DE; /* 勿忘草 wasurenagusa */ --lh: 1.9; --ls: .01em;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161413; --line: #2C2A28; --text: #D9D4CB; --mute: rgba(217, 212, 203, .62);
  --accent: #7DB9DE; --accent-ink: #7DB9DE; /* 勿忘草 wasurenagusa */ --lh: 1.9; --ls: .01em;
}

* { box-sizing: border-box; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/var(--lh) "Spectral", "ChangMing Serif TC", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  letter-spacing: var(--ls);
}
/* ChangMing has no kana, and Japanese kanji should take Japanese forms */
:lang(ja) { font-family: "Spectral", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "ChangMing Serif TC", serif; }
html:lang(en) body { font-size: 19px; line-height: 1.6; letter-spacing: normal; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  html:lang(en) body { font-size: 17px; }
}
button { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }

.wrap { width: min(100% - 48px, 45rem); margin-inline: auto; }

.site {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.site .wrap { display: flex; align-items: center; height: 56px; line-height: 1; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 15px; color: var(--text); text-decoration: none; }
.brand::before { content: ""; width: 4px; height: 14px; background: var(--accent); }
.lang { display: flex; }
.lang a, .theme {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 8px;
  font-size: 14px; color: var(--mute); text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color .15s;
}
.lang a:hover, .lang a[aria-current="true"], .theme:hover { color: var(--text); }
.theme { min-width: 36px; margin-left: 4px; }

main { padding-top: 4rem; }
main > * { max-width: 36rem; }
html:lang(en) main > * { max-width: 40rem; }
h1, h2 { font-weight: 700; line-height: 1.3; }
h1 { font-size: clamp(34px, 6vw, 42px); margin: 0 0 1.5rem; }
h2 { font-size: clamp(30px, 5vw, 36px); margin: 4rem 0 1rem; }
:lang(zh) em { font-style: normal; font-weight: 700; }

.profile img { display: block; width: 64px; height: 64px; margin-bottom: 1.25rem; border-radius: 50%; }
.profile p { margin: 0; }
.profile p:not(:lang(ja)) { color: var(--mute); } /* translations sit under the Japanese originals */
.profile p.gap { margin-top: 1.5rem; }

.rows { margin: 0; padding: 0; list-style: none; }
.rows a {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem;
  padding: .5rem 0; color: inherit; text-decoration: none;
}
.rows a::before {
  content: ""; position: absolute; left: -12px; top: .7em; bottom: .7em; width: 3px;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.rows span { font-size: .85em; color: var(--mute); transition: color .15s; }
.rows a:hover::before, .rows a:focus-visible::before { opacity: 1; }
.rows a:hover span, .rows a:focus-visible span { color: var(--text); }

.prose a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 3px; transition: text-decoration-color .15s;
}
.prose a:hover { text-decoration-color: var(--accent); }

footer { display: flex; margin-top: 4rem; padding: 1rem 0 2rem; border-top: 1px solid var(--line); }
footer a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--mute); transition: color .15s; }
footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}