@font-face { font-family: Friz; src: url('/fonts/friz-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Morpheus; src: url('/fonts/morpheus-latin.woff2') format('woff2'); font-display: swap; }
:root {
  --ink: oklch(91% 0.02 85); --dim: oklch(75% 0.02 85); --gold: oklch(82% 0.13 85); --gold-bright: oklch(90% 0.15 90);
  --edge: oklch(55% 0.063 83); --panel: oklch(17% 0.014 250 / 0.92); --bg: oklch(12% 0.01 250);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg) url('/images/stone.webp'); font: 17px/1.6 Friz, Georgia, serif; }
a { color: var(--gold); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--gold-bright); text-shadow: 0 0 8px oklch(80% 0.14 85 / 0.6); } }
a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
h1, h2 { font-family: Morpheus, Friz, serif; color: var(--gold-bright); font-weight: 400; line-height: 1.2; margin-block: 1.4em 0.5em; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-block-start: 0.3em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }
main { max-inline-size: 1080px; margin-inline: auto; padding: 24px 16px 48px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 16px; border-block-end: 1px solid var(--edge); background: oklch(10% 0.01 250 / 0.9); }
.brand { font: 1.5rem Morpheus, serif; color: var(--gold-bright); margin-inline-end: auto; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.top nav a[aria-current=page] { color: var(--gold-bright); }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; border: 1px solid var(--edge); border-radius: 4px; background: var(--panel); }
.hero img, .card img, .tool img { inline-size: 100%; block-size: auto; display: block; border: 1px solid var(--edge); border-radius: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-block; padding: 10px 18px; border: 1px solid oklch(60% 0.12 30); border-radius: 4px; color: var(--ink); background: linear-gradient(oklch(42% 0.15 28), oklch(30% 0.12 28)); box-shadow: inset 0 1px 0 oklch(70% 0.1 40 / 0.4); }
.button.quiet { border-color: var(--edge); background: linear-gradient(oklch(30% 0.01 250), oklch(20% 0.01 250)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.card { display: grid; align-content: start; gap: 8px; padding: 10px; border: 1px solid oklch(32% 0.011 145); border-radius: 4px; background: var(--panel); color: var(--dim); font-size: 15px; }
.card strong { display: block; color: var(--gold); font-weight: 400; font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--edge); text-shadow: none; } .card:hover strong { color: var(--gold-bright); } }
.tool { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; margin-block: 14px; border: 1px solid oklch(32% 0.011 145); border-radius: 4px; background: var(--panel); }
.tool h2 { margin-block: 0 0.3em; }
ul { padding-inline-start: 1.2em; }
code { font-size: 15px; color: var(--gold-bright); }
footer { padding: 18px 16px; border-block-start: 1px solid var(--edge); color: var(--dim); font-size: 14px; text-align: center; }
@media (width <= 720px) { .hero, .tool { grid-template-columns: 1fr; } body { font-size: 16px; } }