/* Lantern River site: the game's night palette, fonts served from this folder (no third-party requests) */
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url(fonts/fraunces-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 800; font-display: swap; src: url(fonts/fraunces-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --night: #070d18; --panel: #0d1729; --ink: #e9e3d4; --dim: #9aaabb; --lantern: #ffb347; --line: rgba(255, 179, 71, .28);
  --display: "Fraunces", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; color: var(--ink); font: 16px/1.7 Georgia, "Times New Roman", serif;
  background: radial-gradient(ellipse 120% 60% at 70% 0%, #14274a 0%, var(--night) 60%) no-repeat, var(--night);
  min-height: 100vh;
}
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
header img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 30px rgba(255, 170, 70, .3); }
header a { color: inherit; text-decoration: none; }
.brand { font: 800 28px/1 var(--display); color: var(--lantern); }
.by { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 36px; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
nav a { color: var(--dim); }
nav a[aria-current="page"] { color: var(--lantern); }
nav .langs { margin-left: auto; display: flex; gap: 10px; }
nav button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--dim);
  text-decoration: underline; text-underline-offset: 4px;
}
nav button[aria-pressed="true"] { color: var(--lantern); text-decoration: none; }
h1 { font: 800 clamp(30px, 7vw, 42px)/1.1 var(--display); margin: 0 0 8px; text-wrap: balance; }
h2 { font: 600 22px/1.3 var(--display); color: var(--lantern); margin: 36px 0 8px; }
.meta { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 28px; }
.lead { font-size: 18px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
p, li { color: #d6d0c2; }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }
a { color: var(--lantern); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
strong { color: var(--ink); }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 12px var(--mono); color: var(--dim); }

/* one language at a time; both stay in the page for search engines and no-script readers */
html[data-lang="en"] [lang="pt"], html[data-lang="pt"] [lang="en"] { display: none; }