/* citradox.com — the whole stylesheet.
 *
 * CITRUS. The name is the theme: warm off-white pith, near-black rind, a blood-orange accent and a
 * leaf green for the second voice. Flat on purpose — no gradients, no textures, no drop shadows, no
 * scanlines. A bordered column on a plain field, and one accent stripe across the top of it.
 *
 * THIS FILE USED TO HAVE A TWIN and no longer does. The cribbage repo carries server/site/theme.css,
 * which its Worker inlines into the privacy policy at cribbage.citradox.com/privacy. The two were
 * kept in sync while this site was dressed as the game: green felt, torn paper, the gold from
 * scenes/screens/game.tscn. That is over. The policy page belongs to Cribbage! and still looks like
 * Cribbage!; this site belongs to the studio and looks like the studio.
 *
 * So: THE DIVERGENCE IS DELIBERATE. Do not "fix" it by copying this file over there — you would drop
 * a citrus stylesheet onto a page that is part of the game. If the policy page ever needs restyling,
 * that is a decision to make in the cribbage repo on its own terms.
 *
 * NO EXTERNAL REQUESTS, EVER. No web fonts, no CDN, no analytics, no embeds. That is a hard rule
 * rather than a preference: /privacy tells readers this studio contacts nobody, and the pages saying
 * so have to be true of themselves. Pulling a font from Google would ship every visitor's IP to
 * Google — a practice a German court has already held unlawful without consent. Type is therefore a
 * system stack, everywhere, forever.
 *
 * The site's one script is the light/dark toggle, inline in every page. It is same-origin and fetches
 * nothing, so the rule holds. Everything below works with JavaScript disabled: prefers-color-scheme
 * picks the scheme, and the toggle only overrides it.
 *
 * Legibility outranks theming wherever the two disagree. Both accents clear 4.5:1 against their own
 * background; check before changing one. The print block strips it all back to black on white.
 */

/* --- tokens -------------------------------------------------------------- */

/* Light is the default so a no-JS, no-preference browser gets the friendlier one. */
:root {
  --bg: #FBF7EF;
  --surface: #FFFFFF;
  --ink: #1F1B16;
  --body: #3A342C;
  --muted: #6E6558;
  /* Measured, not picked by eye: #D95A00 is the orange this palette wants, but it is only 3.88:1
     on white and links have to clear 4.5. #BF4E00 is the closest thing to it that passes — 4.88 on
     --surface, 4.57 on --bg. Do not lighten it back. */
  --accent: #BF4E00;
  --accent-hover: #943A00;
  --leaf: #3F7318;
  --rule: rgba(31,27,22,.18);
  /* Text laid ON the accent (the .btn fill). It has to flip with the scheme: the light accent is
     dark enough for white, the dark accent is not — white on #FF8A3D is 2.35:1. */
  --on-accent: #FFFFFF;
}
/* Dark, applied two ways: by preference when the reader has never chosen, and by the data-theme
   attribute when they have. Both directions are spelled out so the toggle can always win. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14120E;
    --surface: #1C1913;
    --ink: #F5EFE3;
    --body: #D6CFC2;
    --muted: #9A9081;
    --accent: #FF8A3D;
    --accent-hover: #FFA96B;
    --leaf: #8FD14F;
    --rule: rgba(245,239,227,.16);
    --on-accent: #14120E;
  }
}
:root[data-theme="dark"] {
  --bg: #14120E;
  --surface: #1C1913;
  --ink: #F5EFE3;
  --body: #D6CFC2;
  --muted: #9A9081;
  --accent: #FF8A3D;
  --accent-hover: #FFA96B;
  --leaf: #8FD14F;
  --rule: rgba(245,239,227,.16);
  --on-accent: #14120E;
}

/* --- base ---------------------------------------------------------------- */

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light dark; }
body {
  margin: 0; padding: 2.5rem 1rem 5rem; min-height: 100vh;
  background: var(--bg); color: var(--body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem; line-height: 1.7;
}

/* The column. One border, one accent stripe, nothing else — the stripe is the whole signature. */
.sheet {
  position: relative; max-width: 46rem; margin: 0 auto; padding: 2.75rem 2.25rem 3rem;
  background: var(--surface); border: 3px solid var(--ink);
}
.sheet::before {
  content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 8px;
  background: var(--accent);
}

h1 { margin: 0 0 .2rem; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.2; color: var(--ink); }
h2 {
  margin: 2.4rem 0 .6rem; font-size: 1.3rem; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem;
}
h3 { margin: 1.8rem 0 .4rem; font-size: 1.1rem; color: var(--ink); }
.meta { margin: 0 0 1.8rem; color: var(--muted); font-size: .92rem; }
a { color: var(--accent); font-weight: 600; text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
strong { color: var(--ink); }
ul { padding-left: 1.15rem; }
li { margin: .45rem 0; }
table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; font-size: .96rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); }
th { color: var(--ink); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* --- masthead and nav ---------------------------------------------------- */

.wordmark {
  margin: 0; text-align: center; color: var(--ink);
  font-size: clamp(2.4rem, 10vw, 4.2rem); line-height: 1; letter-spacing: .16em;
  font-weight: 800;
}
/* The O set in accent — a citrus round in the middle of the name, and the one flourish here. */
.wordmark em { font-style: normal; color: var(--accent); }
.wordmark--sm { font-size: clamp(1.4rem, 5vw, 1.8rem); letter-spacing: .22em; }
.wordmark a { color: inherit; font-weight: inherit; text-decoration: none; }
.wordmark a:hover { color: var(--accent); text-decoration: none; }
.tagline { margin: .9rem 0 0; text-align: center; color: var(--muted); }

.nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.5rem;
  margin: 1.4rem 0 0; padding: 0; list-style: none;
  font-size: .95rem; letter-spacing: .06em; text-transform: lowercase;
}
.nav a { padding-bottom: .2rem; border-bottom: 2px solid transparent; }
.nav a:hover { text-decoration: none; border-bottom-color: var(--accent); }
.nav [aria-current="page"] { color: var(--ink); border-bottom-color: var(--rule); }

.page-head { margin: 2.6rem 0 2rem; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .meta { margin: .4rem 0 0; }

/* --- home: interest categories ------------------------------------------- */

/* The front page is the categories. Each is a real block you land on, not a nav item. */
.cats { display: grid; gap: 1rem; margin: 2.6rem 0 0; padding: 0; list-style: none; }
.cats li { margin: 0; }
.cat {
  display: block; padding: 1.1rem 1.25rem; border: 2px solid var(--rule);
  color: var(--body); font-weight: 400;
}
.cat:hover { border-color: var(--accent); text-decoration: none; color: var(--body); }
.cat b { display: block; color: var(--ink); font-size: 1.15rem; letter-spacing: .02em; }
.cat span { color: var(--muted); font-size: .95rem; }
.cat:hover b { color: var(--accent); }

/* --- writing ------------------------------------------------------------- */

.post-list { margin: 0; padding: 0; list-style: none; }
.post-link {
  display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
  color: var(--body); font-weight: 400;
}
.post-list li:last-child .post-link { border-bottom: 0; }
.post-link .meta { margin: 0; display: block; font-size: .85rem; }
.post-link h2 { margin: .15rem 0 .3rem; border: 0; padding: 0; font-size: 1.15rem; }
.post-link p { margin: 0; color: var(--muted); }
.post-link:hover { text-decoration: none; }
.post-link:hover h2 { color: var(--accent); }

.back { display: inline-block; margin-top: 2.6rem; font-size: .95rem; }

.latest { margin: 2.8rem 0 0; }
.latest h2 { margin-top: 0; }

/* --- games --------------------------------------------------------------- */

.game { margin-top: 2.6rem; text-align: center; }
.game img { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto 1rem; }
.blurb { margin: 0 auto; max-width: 34rem; }
.platforms { margin: 1.1rem 0 1.6rem; color: var(--muted); font-size: .92rem; letter-spacing: .04em; }

.shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem; margin: 1.8rem 0;
}
.shots img { display: block; width: 100%; height: auto; border: 2px solid var(--rule); }

.btn {
  display: inline-block; padding: .75rem 2rem; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  border: 2px solid var(--ink); text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn--ghost { background: none; color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--on-accent); }

/* --- 404 ----------------------------------------------------------------- */

.lost { text-align: center; padding: 1.5rem 0 1rem; }
.lost .code {
  margin: 0 0 .5rem; color: var(--accent); font-weight: 800; line-height: 1;
  font-size: clamp(3.5rem, 18vw, 6.5rem); letter-spacing: .06em;
}

/* --- footer -------------------------------------------------------------- */

.footer {
  margin: 3.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  text-align: center; color: var(--muted); font-size: .92rem;
}
.footer p { margin: .35rem 0; }

/* --- theme toggle -------------------------------------------------------- */

/* Text glyph rather than an image, so there is no asset to maintain in two variants. */
#theme-toggle {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 10;
  width: 2.75rem; height: 2.75rem; padding: 0; line-height: 1;
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink);
  font-size: 1.15rem; cursor: pointer;
}
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 34rem) {
  body { padding: 1.5rem .75rem 5rem; font-size: 1.05rem; }
  .sheet { padding: 2rem 1.25rem 2.5rem; }
  .nav { gap: .3rem 1rem; font-size: .9rem; }
  .shots { grid-template-columns: 1fr; }
  table, tbody, tr, td, th { display: block; }
  th { border: 0; padding: .5rem .7rem .1rem; }
  td { border: 0; padding: .1rem .7rem; }
  td:first-of-type { color: var(--ink); }
  tr { border-bottom: 1px solid var(--rule); padding: .45rem 0; }
  tr:last-child { border-bottom: 0; }
}

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

@media print {
  html, body { background: #fff; color: #000; }
  .sheet { background: #fff; border: 0; padding: 0; max-width: none; }
  .sheet::before { display: none; }
  h1, h2, h3, th, a, .wordmark, .lost .code, .cat b { color: #000; }
  a { text-decoration: underline; }
  .nav, .shots, .latest, #theme-toggle { display: none; }
  .btn { background: none; color: #000; border-color: #000; }
}