/* Sword & Seal website. Ink and Vermilion. Light paper theme primary, dark ink variant via prefers-color-scheme. */

@font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/ma-shan-zheng-latin-400-normal.fed9224aed.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/noto-serif-latin-400-normal.4c0cbe3eec.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/noto-serif-latin-400-italic.a7386f772d.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/noto-serif-latin-600-normal.abf0abc765.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/noto-serif-latin-700-normal.0d0b440760.woff2") format("woff2"); }

:root {
  --ink: #1a1a1f; --ink-soft: #3a3a44; --paper: #f2ead8; --paper-dark: #d9cdb0;
  --vermilion: #c8372d; --jade: #4fa58b; --gold: #c9a227; --mist: #8fa3ad; --mist-light: #cfd9dc;

  --bg: #f2ead8; --bg-alt: #ebe2cb; --card: #f8f2e3; --text: #1a1a1f; --muted: #51515c;
  --line: #d9cdb0; --line-strong: #b9aa86;
  --accent: #a82a21;           /* vermilion for text on paper, AA */
  --seal: #b92f26;             /* button / seal fill, 5:1 against paper text */
  --seal-ink: #f2ead8;
  --jade-deep: #2c6f5b; --gold-deep: #7a620d;
  --shadow: 0 1px 0 rgba(26,26,31,.06), 0 10px 30px -12px rgba(58,45,20,.35);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* hero */
  --sky-top: #cfd9dc; --sky-mid: #e4e3d6; --sky-low: #efe6d0;
  --haze: #efe6d0;
  --m1: #b0c0c6; --m2: #8a9fab; --m3: #637c8a; --m4: #405462; --m5: #26323c;
  --sun: #c8372d; --sun-glow: rgba(200,55,45,.28);
  --lantern-glow: rgba(201,162,39,.5);

  --font-display: "Ma Shan Zheng", "Brush Script MT", "Segoe Script", cursive;
  --font-body: "Noto Serif", Georgia, "Times New Roman", serif;
  --wrap: 1120px;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a1f; --bg-alt: #202027; --card: #25252d; --text: #f2ead8; --muted: #b9b6ad;
    --line: #3a3a44; --line-strong: #55554f;
    --accent: #ef8277; --jade-deep: #6cc4a7; --gold-deep: #dcbb4a;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 34px -12px rgba(0,0,0,.7);
    --sky-top: #12151b; --sky-mid: #1d2630; --sky-low: #2d3b45; --haze: #2d3b45;
    --m1: #3d505c; --m2: #32434e; --m3: #283742; --m4: #1f2b34; --m5: #151a20;
    --sun: #e6dcae; --sun-glow: rgba(230,220,174,.18);
    --lantern-glow: rgba(224,170,60,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1a1f; --bg-alt: #202027; --card: #25252d; --text: #f2ead8; --muted: #b9b6ad;
  --line: #3a3a44; --line-strong: #55554f;
  --accent: #ef8277; --jade-deep: #6cc4a7; --gold-deep: #dcbb4a;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 34px -12px rgba(0,0,0,.7);
  --sky-top: #12151b; --sky-mid: #1d2630; --sky-low: #2d3b45; --haze: #2d3b45;
  --m1: #3d505c; --m2: #32434e; --m3: #283742; --m4: #1f2b34; --m5: #151a20;
  --sun: #e6dcae; --sun-glow: rgba(230,220,174,.18);
  --lantern-glow: rgba(224,170,60,.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--text);
  background-color: var(--bg); background-image: var(--grain); overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
main:focus { outline: none; }
::selection { background: var(--vermilion); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(3rem, 11vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 6vw, 3.1rem); }
h3 { font-size: 1.7rem; }
h4 { font-size: 1rem; margin: 0 0 .3em; }
p { margin: 0 0 1em; }
.eyebrow { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 .7rem; display: flex; align-items: center; gap: .7rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .7; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .7; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 40em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.todo { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; background: color-mix(in srgb, var(--gold) 28%, transparent); color: var(--text); border: 1px dashed var(--gold); border-radius: 3px; padding: 1px 7px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand .seal-mark { width: 36px; height: 36px; color: var(--seal); transform: rotate(-4deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.brand-name { font-family: var(--font-display); font-size: 1.85rem; line-height: 1; }
.amp { color: var(--accent); }
.nav-toggle { background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); width: 44px; height: 44px; display: none; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .2s, opacity .2s; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.nav-link { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: var(--radius); font-size: .98rem; position: relative; }
.nav-link:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--vermilion); }
.nav-cta { background: var(--seal); color: var(--seal-ink); font-weight: 600; margin: 0 4px; }
.nav-cta:hover { background: #cf3a30; }
.nav-cta[aria-current="page"]::after { display: none; }
.js .nav-toggle { display: inline-flex; }
@media (min-width: 860px) { .js .nav-toggle { display: none; } }
@media (max-width: 859px) {
  .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--line-strong); padding: 10px 16px 18px; box-shadow: var(--shadow); }
  .js .site-nav.open { display: flex; }
  .js .site-nav .nav-link { padding: 13px 10px; font-size: 1.1rem; }
  .nav-cta { margin: 6px 0; text-align: center; }
  .site-nav .status { margin-top: 8px; align-self: flex-start; }
  .no-js-fallback { display: none; }
  html:not(.js) .bar { flex-wrap: wrap; padding: 8px 16px; }
}
@media (min-width: 860px) { .site-nav { flex-wrap: nowrap; } }

/* status badge */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px 4px 10px; background: color-mix(in srgb, var(--card) 80%, transparent); white-space: nowrap; }
.status:hover { text-decoration: none; border-color: var(--text); }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mist) 30%, transparent); }
.status[data-state="online"] .dot { background: var(--jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 35%, transparent); }
.status[data-state="offline"] .dot { background: var(--vermilion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermilion) 30%, transparent); }
.status[data-state="unknown"] .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; padding: .85em 1.5em; min-height: 48px; border-radius: 4px; border: 2px solid var(--ink); text-decoration: none; cursor: pointer; background: var(--seal); color: var(--seal-ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); text-decoration: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--text); box-shadow: 3px 3px 0 color-mix(in srgb, var(--text) 35%, transparent); }
.btn.big { font-size: 1.15rem; padding: 1em 1.9em; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn[aria-disabled="true"] { background: var(--line); color: var(--muted); border-color: var(--line-strong); box-shadow: none; cursor: not-allowed; transform: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { border-color: var(--paper); box-shadow: 3px 3px 0 rgba(242,234,216,.45); } :root:not([data-theme="light"]) .btn:hover { box-shadow: 5px 5px 0 rgba(242,234,216,.45); } :root:not([data-theme="light"]) .btn.ghost { border-color: var(--paper); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 1rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%); padding: 56px 0 0; min-height: 640px; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .7; z-index: 0; pointer-events: none; }
.sun { position: absolute; z-index: 0; width: clamp(130px, 26vw, 300px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); right: -34px; top: 96px; box-shadow: 0 0 90px 30px var(--sun-glow); opacity: .92; }
.sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 55%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sun { opacity: .85; } }
.stars { position: absolute; inset: 0 0 45% 0; z-index: 0; opacity: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 8%, #fff, transparent), radial-gradient(1px 1px at 41% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 63% 14%, #fff, transparent), radial-gradient(1px 1px at 77% 6%, #fff, transparent), radial-gradient(1px 1px at 90% 28%, #fff, transparent), radial-gradient(1px 1px at 5% 40%, #fff, transparent), radial-gradient(1px 1px at 55% 38%, #fff, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stars { opacity: .7; } }

.mtn { position: absolute; left: 0; right: 0; bottom: 0; height: min(78%, 560px); z-index: 1; pointer-events: none; }
.mtn-layer { position: absolute; left: -2%; width: 104%; max-width: none; bottom: 0; height: 100%; will-change: transform; }
.mtn-layer.l1 { height: 88%; transform: translate3d(calc(var(--px, 0) * -4px), calc(var(--py, 0) * .02px), 0); }
.mtn-layer.l2 { height: 84%; transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * .05px), 0); }
.mtn-layer.l3 { height: 76%; transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * .09px), 0); }
.mtn-layer.l4 { height: 66%; transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * .14px), 0); }
.mtn-layer.l5 { height: 52%; transform: translate3d(calc(var(--px, 0) * -34px), calc(var(--py, 0) * .2px), 0); }
.stop-a1 { stop-color: var(--m1); } .stop-a2 { stop-color: var(--m2); } .stop-a3 { stop-color: var(--m3); } .stop-a4 { stop-color: var(--m4); }
.stop-b { stop-color: var(--haze); stop-opacity: .45; }
.mtn-layer .front { fill: var(--m5); }
.deco2 { color: var(--m3); } .deco3 { color: var(--m4); } .deco4 { color: var(--m5); } .deco5 { color: var(--m5); }
.mist { position: absolute; left: 0; width: 200%; height: 150px; z-index: 2; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 18% 50% at 12% 50%, var(--mist-band), transparent 70%), radial-gradient(ellipse 22% 45% at 40% 55%, var(--mist-band), transparent 70%), radial-gradient(ellipse 16% 50% at 68% 45%, var(--mist-band), transparent 70%), radial-gradient(ellipse 20% 50% at 92% 55%, var(--mist-band), transparent 70%); animation: drift 70s linear infinite; }
.hero { --mist-band: rgba(244,240,228,.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --mist-band: rgba(120,145,160,.38); } }
.mist.m-a { bottom: 34%; animation-duration: 90s; }
.mist.m-b { bottom: 14%; animation-duration: 60s; animation-direction: reverse; opacity: .6; height: 120px; }
.mist.m-c { bottom: -20px; animation-duration: 75s; height: 130px; opacity: .9; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }

.lantern { position: absolute; z-index: 4; top: 0; width: 56px; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: sway 6s ease-in-out infinite; pointer-events: none; }
.lantern::before { content: ""; width: 2px; height: 46px; background: var(--ink-soft); }
.lantern .body { width: 38px; height: 46px; border-radius: 45% 45% 40% 40% / 30% 30% 50% 50%; background: radial-gradient(circle at 50% 55%, #ffd56b 0%, #e2552b 45%, #a52a20 100%); border: 2px solid #4a1c16; box-shadow: 0 0 36px 14px var(--lantern-glow), 0 0 90px 30px rgba(201,162,39,.18); animation: flicker 4s ease-in-out infinite; position: relative; }
.lantern .body::before, .lantern .body::after { content: ""; position: absolute; left: 6px; right: 6px; height: 4px; background: #2a1412; top: -2px; border-radius: 1px; }
.lantern .body::after { top: auto; bottom: -2px; }
.lantern::after { content: ""; width: 2px; height: 14px; background: var(--vermilion); margin-top: 2px; }
.lantern.l-left { display: none; } .lantern.l-right { right: 7%; animation-delay: -2.5s; }
@media (min-width: 900px) { .lantern.l-left { display: flex; left: 47%; } .lantern.l-right { right: 3%; } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes flicker { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.12); } 70% { filter: brightness(.94); } }
.petals span { position: absolute; z-index: 4; top: -20px; width: 10px; height: 8px; border-radius: 100% 0 100% 0; background: #e9b9ae; opacity: .8; animation: fall linear infinite; pointer-events: none; }
.petals span:nth-child(1) { left: 12%; animation-duration: 17s; animation-delay: -3s; }
.petals span:nth-child(2) { left: 27%; animation-duration: 22s; animation-delay: -11s; }
.petals span:nth-child(3) { left: 44%; animation-duration: 19s; animation-delay: -7s; }
.petals span:nth-child(4) { left: 61%; animation-duration: 25s; animation-delay: -15s; }
.petals span:nth-child(5) { left: 78%; animation-duration: 18s; animation-delay: -1s; }
.petals span:nth-child(6) { left: 90%; animation-duration: 23s; animation-delay: -9s; }
@keyframes fall { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(40px, 320px, 0) rotate(180deg); } 100% { transform: translate3d(-20px, 680px, 0) rotate(360deg); opacity: 0; } }

.hero-inner { position: relative; z-index: 5; display: grid; gap: 28px; align-items: center; padding-bottom: 120px; }
.hero-copy { max-width: 36rem; }
.hero h1 { margin-bottom: .1em; text-shadow: 0 2px 0 rgba(242,234,216,.5); line-height: .95; }
.hero h1 .amp { font-size: .8em; }
.hero .realm { font-size: .8rem; letter-spacing: .5em; text-transform: uppercase; font-weight: 600; margin: 0 0 1.1rem .3rem; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.hero .realm::before { content: ""; width: 14px; height: 14px; background: var(--seal); transform: rotate(45deg); }
.hero .tagline { font-size: 1.3rem; line-height: 1.5; color: var(--text); max-width: 28em; }
.hero-note { font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.hero-note span::before { content: "\25C6"; color: var(--accent); font-size: .6em; margin-right: .6em; vertical-align: .2em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 { text-shadow: 0 2px 0 rgba(0,0,0,.4); } :root:not([data-theme="light"]) .hero .realm { color: var(--muted); } }
.hero-shot { position: relative; transform: rotate(1.5deg); max-width: 560px; justify-self: center; width: 100%; }
@media (min-width: 900px) {
  .hero { padding-top: 72px; min-height: 720px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 48px; padding-bottom: 150px; }
  .hero-shot { transform: rotate(2.2deg); justify-self: end; }
  .sun { right: 30%; top: 60px; }
}
@media (max-width: 899px) { .hero-inner { padding-bottom: 80px; } .hero { min-height: 0; } .mtn { height: 60%; } .hero-shot { max-width: 440px; } }

/* ---------- scroll frames (paper-scroll cards) ---------- */
.scroll { position: relative; margin: 0; background: var(--card); border: 1px solid var(--line-strong); border-radius: 3px; padding: 14px; box-shadow: var(--shadow); }
.scroll::before, .scroll::after { content: ""; position: absolute; left: -7px; right: -7px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #6a4a2c, #3d2a18 55%, #5a3e24); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.scroll::before { top: -6px; } .scroll::after { bottom: -6px; }
.scroll > .frame { position: relative; border: 2px solid var(--ink); background: var(--ink); overflow: hidden; }
.scroll > .frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--card), inset 0 0 40px rgba(26,26,31,.25); pointer-events: none; }
.scroll img { width: 100%; }
.scroll figcaption { font-size: .88rem; color: var(--muted); padding: 12px 4px 2px; line-height: 1.5; }
.scroll figcaption strong { color: var(--text); font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; display: block; line-height: 1.2; }
.stamp { position: absolute; right: -8px; bottom: -8px; z-index: 3; width: 52px; height: 52px; color: var(--seal); transform: rotate(8deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.stamp .seal-mark { width: 100%; height: 100%; }

/* ---------- sections ---------- */
.section { padding: 72px 0; position: relative; }
.section.alt { background-color: var(--bg-alt); background-image: var(--grain); border-block: 1px solid var(--line); }
.section-head { max-width: 44rem; margin-bottom: 36px; }
.section-head.center { margin-inline: auto; text-align: center; }
.brush { color: var(--ink-soft); height: 20px; width: min(520px, 90%); margin: 0 auto 28px; opacity: .55; }
.brush svg { width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brush { color: var(--paper-dark); opacity: .4; } }

/* class cards */
.cards { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.class-card { display: flex; flex-direction: column; }
.class-card .frame { aspect-ratio: 4 / 4.2; }
.class-card .frame img { width: 100%; height: 100%; object-fit: cover; }
.class-card .meta { padding: 14px 4px 4px; }
.class-card h3 { margin: 0; font-size: 2rem; }
.role-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--seal-ink); background: var(--seal); padding: 2px 10px; border-radius: 2px; margin: 4px 0 10px; }
.role-tag.jade { background: var(--jade-deep); color: #0f1a16; } .role-tag.gold { background: var(--gold); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .role-tag.jade { color: #0f1a16; } }
.class-card p { font-size: .98rem; color: var(--muted); margin-bottom: .8rem; }
.more-link { font-weight: 600; text-decoration: none; }
.more-link::after { content: " \2192"; }

/* features */
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: f; }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; gap: 22px 36px; } }
@media (min-width: 1000px) { .features { grid-template-columns: 1fr 1fr 1fr; } }
.features li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 20px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--seal); border-radius: 3px; }
.features .ico { width: 56px; height: 56px; color: var(--seal-ink); background: var(--seal); border-radius: 4px; display: grid; place-items: center; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--ink); }
.features .ico svg { width: 34px; height: 34px; }
.features li:nth-child(3n+2) .ico { background: var(--jade-deep); color: #0f1a16; }
.features li:nth-child(3n) .ico { background: var(--gold); color: var(--ink); }
.features h3 { font-size: 1.55rem; margin: 0 0 .15em; }
.features p { margin: 0; font-size: .97rem; color: var(--muted); }

/* world teaser grid */
.tiles { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; } .tiles .wide { grid-column: span 2; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, 1fr); } .tiles .t3 { grid-column: span 3; } .tiles .t2 { grid-column: span 2; } .tiles .wide { grid-column: span 4; } }
.tile .frame { aspect-ratio: 16 / 9; } .tile .frame img { width: 100%; height: 100%; object-fit: cover; }
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split.rev > :first-child { order: 2; } }

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper); text-align: center; padding: 72px 0 80px; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0, rgba(201,162,39,.22), transparent 60%), var(--grain); }
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: #cfc9b8; max-width: 34em; margin-inline: auto; }
.cta-band .eyebrow { color: #f0877c; }
.cta-band .btn { border-color: var(--paper); box-shadow: 3px 3px 0 rgba(242,234,216,.5); }
.cta-band .btn.ghost { color: var(--paper); }
.cta-band .seal-mark { width: 70px; height: 70px; color: var(--seal); margin: 0 auto 18px; transform: rotate(-5deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.cta-band .btn-row { justify-content: center; }

/* ---------- inner pages ---------- */
.page-head { position: relative; padding: 64px 0 40px; background: linear-gradient(180deg, var(--sky-top), var(--bg)); overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); z-index: -1; }
.page-head::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%; right: -60px; top: -90px; background: radial-gradient(circle, var(--sun-glow) 0, var(--sun-glow) 38%, transparent 70%); }
@media (min-width: 900px) { .page-head::after { right: 8%; top: -110px; width: 420px; height: 420px; } }
.page-head h1 { font-size: clamp(2.8rem, 9vw, 4.6rem); margin-bottom: .15em; }
.page-head .lede { margin-bottom: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-head { background: linear-gradient(180deg, #12151b, var(--bg)); } }
.prose { max-width: 46rem; }
.prose h2 { font-size: 2.3rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.6rem; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.callout { border: 1px solid var(--line-strong); border-left: 5px solid var(--gold); background: var(--card); padding: 16px 20px; border-radius: 3px; margin: 1.4rem 0; }
.callout.warn { border-left-color: var(--seal); }
.callout.jade { border-left-color: var(--jade-deep); }
.callout h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: .2em; }
.callout p:last-child { margin-bottom: 0; }
.draft-banner { position: sticky; top: 64px; z-index: 40; background: var(--gold); color: var(--ink); border-bottom: 2px solid var(--ink); padding: 10px 0; font-weight: 700; font-size: .95rem; text-align: center; }
.draft-banner .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.draft-tag { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 1px 6px; border-radius: 2px; margin-left: 4px; vertical-align: .1em; }

code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
code { background: color-mix(in srgb, var(--text) 9%, transparent); padding: .1em .4em; border-radius: 3px; overflow-wrap: anywhere; }
pre { background: var(--ink); color: var(--paper); padding: 14px 16px; border-radius: 4px; overflow-x: auto; font-size: .85rem; line-height: 1.55; border: 1px solid var(--ink-soft); }
pre code { background: none; padding: 0; color: inherit; }
kbd { background: var(--card); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; padding: 0 .4em; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; background: var(--bg-alt); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* download */
.dl-grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 860px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
.dl-card { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: 4px; padding: 22px 20px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.dl-card h3 { margin: 0; font-size: 1.9rem; }
.dl-card .os-ico { width: 40px; height: 40px; color: var(--text); }
.dl-card.is-match { border-color: var(--seal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 35%, transparent), var(--shadow); }
.dl-card .recommended { display: none; position: absolute; top: -13px; left: 16px; background: var(--seal); color: var(--seal-ink); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 12px; border-radius: 2px; box-shadow: 2px 2px 0 var(--ink); }
.dl-card.is-match .recommended { display: block; }
.dl-card .btn { width: 100%; margin-top: 6px; }
.dl-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.dl-meta li { display: flex; gap: 8px; justify-content: space-between; padding: 3px 0; border-top: 1px dotted var(--line-strong); }
.dl-meta li span:last-child { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dl-meta .hash { font-size: .8rem; word-break: break-all; }
.dl-meta .hash.is-hex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; }
.release-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--card); border-radius: 4px; margin-top: 18px; font-size: .95rem; }
.release-bar strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.soon { display: none; }
[data-release-state="soon"] .release-bar { display: none; }
#os-detected { margin-top: 1rem; }
[data-release-state="soon"] .soon { display: block; }
[data-release-state="soon"] .has-release { display: none; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; position: relative; padding: 26px 20px 20px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.steps li::before { content: counter(step); position: absolute; top: -18px; left: 16px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--seal); color: var(--seal-ink); font-family: var(--font-display); font-size: 1.7rem; border-radius: 3px; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); }
.steps h3 { font-size: 1.6rem; margin: .1em 0 .3em; }
.steps p { margin: 0; font-size: .97rem; color: var(--muted); }
.two-col { display: grid; gap: 24px; } @media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; gap: 36px; } }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tabs [role="tab"] { font: inherit; font-weight: 600; background: none; border: 1px solid var(--line-strong); color: var(--text); padding: 8px 14px; border-radius: 3px; cursor: pointer; min-height: 44px; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); } }

/* classes page */
.class-hero { display: grid; gap: 28px; align-items: start; padding-block: 48px; }
@media (min-width: 900px) { .class-hero { grid-template-columns: 340px 1fr; gap: 56px; } .class-hero.rev { grid-template-columns: 1fr 340px; } .class-hero.rev > :first-child { order: 2; } }
.class-hero + .class-hero { border-top: 1px solid var(--line); }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0 0 1.2rem; list-style: none; font-size: .92rem; }
.stat-row li strong { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.skill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.skill-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; }
.skill-list .key { width: 38px; height: 38px; display: grid; place-items: center; background: var(--seal); color: var(--seal-ink); font-family: var(--font-display); font-size: 1.5rem; border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
.skill-list h4 { margin: 0; font-size: 1.05rem; }
.skill-list p { margin: .1em 0 .3em; font-size: .94rem; color: var(--muted); }
.skill-list .tags { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.skill-list .tags span::before { content: "\25C6"; font-size: .6em; margin-right: .4em; color: var(--accent); vertical-align: .15em; }

/* world page */
.map-wrap { display: grid; gap: 26px; }
@media (min-width: 960px) { .map-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.map-card { padding: 14px; }
.map-svg { width: 100%; height: auto; display: block; border: 2px solid var(--ink); background: #e3d7b6; }
.map-svg .m-paper { fill: #eadfc2; } .map-svg .m-edge { fill: none; stroke: #3a3a44; stroke-width: 2.5; }
.map-svg .m-water { fill: #a9c3c4; stroke: #5d7f84; stroke-width: 2; }
.map-svg .m-wave { fill: none; stroke: #6f9094; stroke-width: 1.6; stroke-linecap: round; }
.map-svg .m-path { fill: none; stroke: #c4b389; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 0; }
.map-svg .m-path2 { fill: none; stroke: #eadfc2; stroke-width: 5; stroke-dasharray: 8 8; stroke-linecap: round; }
.map-svg .m-bridge { fill: #d9ccaa; stroke: #3a3a44; stroke-width: 2; }
.map-svg .m-grove { fill: #b9d0b2; stroke: #5b7f5d; stroke-width: 2; }
.map-svg .m-hills { fill: #e3caa4; stroke: #a1764a; stroke-width: 2; }
.map-svg .m-tier { fill: rgba(79,165,139,.1); stroke: #4a8f78; stroke-width: 1.6; stroke-dasharray: 6 5; }
.map-svg .m-ring { fill: rgba(200,55,45,.12); stroke: #b92f26; stroke-width: 2; stroke-dasharray: 5 4; }
.map-svg .m-ink { fill: #3a3a44; } .map-svg .m-red { fill: #b92f26; } .map-svg .m-gold { fill: #c9a227; stroke: #3a3a44; stroke-width: 1.5; }
.map-svg .m-line { fill: none; stroke: #3a3a44; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-svg .m-bamboo { fill: none; stroke: #4c7a52; stroke-width: 3; stroke-linecap: round; }
.map-svg .m-label { font-family: "Noto Serif", Georgia, serif; font-size: 12px; font-weight: 700; fill: #1a1a1f; paint-order: stroke; stroke: #eadfc2; stroke-width: 3px; stroke-linejoin: round; }
.map-svg .m-num { font-family: "Noto Serif", Georgia, serif; font-size: 14px; font-weight: 700; fill: #f2ead8; text-anchor: middle; dominant-baseline: central; }
.map-svg .m-letter { font-family: "Noto Serif", Georgia, serif; font-size: 12px; font-weight: 700; fill: #10241d; text-anchor: middle; dominant-baseline: central; }
.map-svg .m-small { font-family: "Noto Serif", Georgia, serif; font-size: 9px; fill: #3a3a44; }
.map-svg .m-n { font-family: var(--font-display); font-size: 22px; fill: #1a1a1f; text-anchor: middle; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.legend .pin { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3px; background: var(--seal); color: var(--seal-ink); font-weight: 700; font-size: .9rem; transform: rotate(-3deg); }
.legend .pin.tier { background: var(--jade-deep); color: #0f1a16; border-radius: 50%; }
.legend h4 { margin: 0; font-size: 1rem; } .legend p { margin: 0; font-size: .92rem; color: var(--muted); }
.lv { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 6px; white-space: nowrap; color: var(--text); }
.npc-list { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 700px) { .npc-list { grid-template-columns: 1fr 1fr; } }
.npc { padding: 14px 16px; border: 1px solid var(--line); background: var(--card); border-radius: 3px; }
.npc h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0; } .npc p { margin: 0; font-size: .93rem; color: var(--muted); }

/* FAQ */
details.faq { border: 1px solid var(--line-strong); background: var(--card); border-radius: 3px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; font-weight: 600; padding: 14px 44px 14px 18px; list-style: none; position: relative; min-height: 48px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent); line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }
details.faq[open] summary { border-bottom: 1px solid var(--line); }
details.faq .answer { padding: 14px 18px 4px; }
.faq-group { margin-bottom: 40px; }

/* news */
.post { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--seal); border-radius: 3px; padding: 22px 24px; margin-bottom: 22px; }
.post h2 { font-size: 2.1rem; margin: 0 0 .3em; }
.post ul { padding-left: 1.2em; margin: .4em 0 0; } .post li { margin-bottom: .35em; }
.post-body p { margin: 0 0 .8em; }
.news-state { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }

/* footer */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 44px 0 36px; margin-top: 0; font-size: .95rem; }
.site-footer .brush { margin-bottom: 30px; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; } }
.foot-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; margin-bottom: .6em; }
.foot-title .seal-mark { width: 34px; height: 34px; color: var(--seal); transform: rotate(-4deg); }
.foot-brand p { color: var(--muted); max-width: 28em; }
.foot-h { font-family: var(--font-body); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0 0 .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .45em; }
.todo-note { font-size: .78rem; color: var(--muted); }
.fine { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mist, .lantern, .lantern .body, .petals span, .status .dot { animation: none !important; }
  .petals { display: none; }
  .mtn-layer { transform: none !important; will-change: auto; }
  .btn, .btn:hover { transition: none; }
}
@media (print) { .site-header, .hero, .cta-band, .site-footer .brush { display: none; } body { background: #fff; color: #000; } }

.mt-lg { margin-top: 1.4em; } .mt-xl { margin-top: 2rem; }
.mx-auto { margin-inline: auto; } .small-note { font-size: .82rem; margin: 8px 0 0; } .small-note a { display: inline-block; margin-right: 10px; }
[hidden] { display: none !important; }
.center-row { justify-content: center; }
.hero h1 { font-size: clamp(3.6rem, 15vw, 6.4rem); }