/* SPDX-License-Identifier: GPL-2.0-or-later
 * horo theme, 2026: "the wise wolf's travel journal". Original styling.
 * Tokens: sky haze, plum ink, apple red (interaction), wheat gold (ornament).
 * Sites may override any --h-* token, --horo-font or --horo-font-size.
 */
:root {
  color-scheme: light;
  --h-bg: #eef3f8;
  --h-paper: #fff;
  --h-paper-2: #f7f9fc;
  --h-ink: #3b2a30;
  --h-ink-2: #6f5d63;
  --h-ink-3: #94858a;
  --h-apple: #d6304a;
  --h-apple-ink: #b0233a;
  --h-apple-soft: #fde6ea;
  --h-on-apple: #fff;
  --h-wheat: #e8a93b;
  --h-wheat-deep: #b57a17;
  --h-wheat-soft: #fbefd3;
  --h-fur: #a0623a;
  --h-night: #1d2140;
  --h-line: rgb(59 42 48 / .12);
  --h-line-strong: rgb(59 42 48 / .22);
  --h-glass: rgb(255 255 255 / .78);
  --h-lift: 0 1px 2px rgb(59 42 48 / .06), 0 12px 32px -14px rgb(59 42 48 / .28);
  --h-float: 0 2px 6px rgb(29 33 64 / .08), 0 24px 48px -18px rgb(29 33 64 / .35);
  --h-dim: 1;
  --h-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --h-mono: "Cascadia Code", "JetBrains Mono", Consolas, "Noto Sans Mono", monospace;
  --h-radius: 18px;
  --h-radius-sm: 10px;
  --h-ease: cubic-bezier(.2, .8, .2, 1);
  --horo-font: Georgia, "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", serif;
  --horo-font-size: 18px;
  --horo-font-weight: 400;
}
html[data-appearance=dark] {
  color-scheme: dark;
  --h-bg: #141829;
  --h-paper: #1d2238;
  --h-paper-2: #232943;
  --h-ink: #efe7dd;
  --h-ink-2: #b9afb6;
  --h-ink-3: #8a8396;
  --h-apple: #ff7385;
  --h-apple-ink: #ff95a3;
  --h-apple-soft: rgb(255 115 133 / .14);
  --h-on-apple: #2a0d16;
  --h-wheat: #f4c463;
  --h-wheat-deep: #f4c463;
  --h-wheat-soft: rgb(244 196 99 / .13);
  --h-fur: #e3a676;
  --h-night: #0f1222;
  --h-line: rgb(239 231 221 / .1);
  --h-line-strong: rgb(239 231 221 / .2);
  --h-glass: rgb(29 34 56 / .8);
  --h-lift: 0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -16px rgb(0 0 0 / .7);
  --h-float: 0 2px 6px rgb(0 0 0 / .3), 0 24px 48px -18px rgb(0 0 0 / .8);
  --h-dim: .8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  color: var(--h-ink); background: var(--h-bg);
  font: var(--horo-font-weight) var(--horo-font-size)/1.85 var(--horo-font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--page-background, none) 0 0 / auto repeat; opacity: .2; pointer-events: none; }
html[data-appearance=dark] body::before { opacity: .06; }
::selection { background: var(--h-wheat); color: #2a1a10; }

a { color: inherit; text-decoration: none; text-underline-offset: .22em; }
a:hover { color: var(--h-apple); }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; padding: 0; }
button, summary { cursor: pointer; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
img { max-width: 100%; }
:is(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2.5px solid var(--h-apple); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 8px 16px; border-radius: 999px; background: var(--h-ink); color: var(--h-paper); font: 600 14px/1.5 var(--h-sans); transform: translateY(-200%); }
.skip-link:focus { transform: none; color: var(--h-paper); }

.icon { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; vertical-align: -.125em; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; color: inherit; transition: background .2s, color .2s; }
.icon-button:hover { background: var(--h-apple-soft); color: var(--h-apple); }

.content { overflow-wrap: anywhere; }
.content img, .content video { max-width: 100%; height: auto; }
code, kbd, samp { font-family: var(--h-mono); }
pre { overflow-x: auto; }

/* Price tag: a merchant's paper label with a punched hole. */
.price-tag { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px 0 20px; font: 500 13px/1 var(--h-sans); color: var(--h-wheat-deep); background: var(--h-wheat-soft); clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); border-radius: 0 5px 5px 0; white-space: nowrap; transition: background .2s, color .2s; }
.price-tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--h-paper); }
a.price-tag:hover { background: var(--h-apple); color: var(--h-on-apple); }
.price-tag small { font-size: 11px; opacity: .75; }

/* Coin pagination: silver pieces on a counter. */
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 56px 0 24px; font: 500 15px/1 var(--h-sans); }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 18px; border-radius: 999px; }
.pagination a { background: var(--h-paper); color: var(--h-ink); box-shadow: inset 0 0 0 1.5px var(--h-line-strong); transition: background .2s, color .2s, box-shadow .2s; }
.pagination a:hover { background: var(--h-apple); color: var(--h-on-apple); box-shadow: none; }
.pagination [aria-current=page] { background: var(--h-ink); color: var(--h-paper); padding: 0 14px; font-variant-numeric: tabular-nums; }
.pagination span:not([aria-current]) { color: var(--h-ink-2); }

/* Section title marked with a wheat sprig. */
.section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: .02em; }
.section-title .icon { width: 30px; height: 30px; color: var(--h-wheat); }
.section-title::after { content: ""; flex: 1; height: 0; border-top: 2px dotted var(--h-line-strong); margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}