/* Self-hosted fonts (Latin subset), from @fontsource Cinzel and Source Sans 3 Variable. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/cinzel-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/cinzel-latin-700-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format('woff2-variations');
}

/*
 * rathinosk.com design system.
 * Dark-first arcane palette; a light "parchment" theme overrides the colour
 * tokens only. Components must use the --color-* tokens, never raw colour values
 * or the raw dark/light palette.
 */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Raw palette: dark (default) and light "parchment" values */
  --dark-bg: #0e0d16;
  --light-bg: #f3ead6;
  --dark-bg-deep: #08070e;
  --light-bg-deep: #e9dcbf;
  --dark-surface: #17152a;
  --light-surface: #fbf5e7;
  --dark-surface-2: #211e3a;
  --light-surface-2: #efe3c8;
  --dark-border: #2f2a4d;
  --light-border: #d6c49d;
  --dark-text: #ece4d0;
  --light-text: #2a2118;
  --dark-text-muted: #a59f8f;
  --light-text-muted: #5f5444;
  --dark-heading: #f4ecd8;
  --light-heading: #1e170f;
  --dark-accent: #d4a63a;
  --light-accent: #7a560f;
  --dark-accent-strong: #f1cf6b;
  --light-accent-strong: #8a6211;
  --dark-secondary: #d9772b;
  --light-secondary: #a14e10;
  --dark-on-accent: #1a1405;
  --light-on-accent: #fffaf0;
  --dark-focus: #f1cf6b;
  --light-focus: #a14e10;
  --dark-glow: rgb(212 166 58 / 0.35);
  --light-glow: rgb(154 109 20 / 0.28);
  --dark-shadow: rgb(0 0 0 / 0.5);
  --light-shadow: rgb(74 52 20 / 0.18);
  --dark-star: rgb(236 228 208 / 0.55);
  --light-star: rgb(122 86 15 / 0.18);
  --dark-nebula: rgb(88 64 160 / 0.22);
  --light-nebula: rgb(217 119 43 / 0.1);
  --dark-header-bg: rgb(14 13 22 / 0.72);
  --light-header-bg: rgb(243 234 214 / 0.8);
  --dark-skyline: #1b1833;
  --light-skyline: #e3d3b0;
  --dark-logo-shadow: transparent;
  --light-logo-shadow: rgb(42 33 24 / 0.55);
  --dark-twitch: #9146ff;
  --light-twitch: #772ce8;

  /* Colour tokens: dark by default */
  --color-bg: var(--dark-bg);
  --color-bg-deep: var(--dark-bg-deep);
  --color-surface: var(--dark-surface);
  --color-surface-2: var(--dark-surface-2);
  --color-border: var(--dark-border);
  --color-text: var(--dark-text);
  --color-text-muted: var(--dark-text-muted);
  --color-heading: var(--dark-heading);
  --color-accent: var(--dark-accent);          /* gold, from the runic logo */
  --color-accent-strong: var(--dark-accent-strong);
  --color-secondary: var(--dark-secondary);       /* tiger orange */
  --color-on-accent: var(--dark-on-accent);
  --color-focus: var(--dark-focus);
  --color-glow: var(--dark-glow);
  --color-shadow: var(--dark-shadow);
  --color-star: var(--dark-star);
  --color-nebula: var(--dark-nebula);
  --color-header-bg: var(--dark-header-bg);
  --color-skyline: var(--dark-skyline);
  --color-logo-shadow: var(--dark-logo-shadow);    /* lifts the gold wordmark off parchment */
  --color-twitch: var(--dark-twitch);
  --color-link: var(--color-accent-strong);
  --color-link-hover: var(--color-secondary);
  --color-on-twitch: #ffffff;

  --gradient-gold: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 50%, var(--color-accent) 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--color-accent-strong) 50%, var(--color-accent) 80%, transparent);

  /* Type */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3 Variable', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;

  /* Fluid type scale (~1.2 at 320px → ~1.25 at 1280px) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.76rem);
  --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.2rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.6vw, 2.75rem);
  --step-5: clamp(2.49rem, 1.98rem + 2.5vw, 3.43rem);

  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-display: 0.04em;

  /* Fluid spacing */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.6rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);
  --space-s: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 1.8rem);
  --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.4rem);
  --space-xl: clamp(3rem, 2.8rem + 1vw, 3.6rem);
  --space-2xl: clamp(4rem, 3.7rem + 1.5vw, 4.8rem);

  /* Layout */
  /* Pixels, not rem: the root size drops to 80% on large screens, and the column must not shrink with it. */
  --width-content: 1200px;
  --width-prose: 42rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-height: 4rem;

  /* Shape and depth */
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-round: 999px;
  --border-hairline: 1px solid var(--color-border);
  --shadow-card: 0 1px 2px var(--color-shadow), 0 8px 24px -12px var(--color-shadow);
  --shadow-logo: drop-shadow(0 1px 0 var(--color-logo-shadow)) drop-shadow(0 1px 3px var(--color-logo-shadow));
  --shadow-glow: 0 0 0 1px var(--color-accent), 0 0 24px -4px var(--color-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/*
 * Light "parchment" theme, following the system preference. This is also the
 * fallback for browsers without light-dark(), which get no manual toggle.
 */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: var(--light-bg);
    --color-bg-deep: var(--light-bg-deep);
    --color-surface: var(--light-surface);
    --color-surface-2: var(--light-surface-2);
    --color-border: var(--light-border);
    --color-text: var(--light-text);
    --color-text-muted: var(--light-text-muted);
    --color-heading: var(--light-heading);
    --color-accent: var(--light-accent);
    --color-accent-strong: var(--light-accent-strong);
    --color-secondary: var(--light-secondary);
    --color-on-accent: var(--light-on-accent);
    --color-focus: var(--light-focus);
    --color-glow: var(--light-glow);
    --color-shadow: var(--light-shadow);
    --color-star: var(--light-star);
    --color-nebula: var(--light-nebula);
    --color-header-bg: var(--light-header-bg);
    --color-skyline: var(--light-skyline);
    --color-logo-shadow: var(--light-logo-shadow);
    --color-twitch: var(--light-twitch);
    --color-link: var(--color-accent);
  }
}

/*
 * Manual override: theme.js sets <meta name="color-scheme"> to "light" or
 * "dark", and light-dark() follows the resulting color-scheme.
 */
:root:has(> head > meta[name='color-scheme'][content='dark']) {
  color-scheme: dark;
}

:root:has(> head > meta[name='color-scheme'][content='light']) {
  color-scheme: light;
}

@supports (color: light-dark(white, black)) {
  :root {
    --color-bg: light-dark(var(--light-bg), var(--dark-bg));
    --color-bg-deep: light-dark(var(--light-bg-deep), var(--dark-bg-deep));
    --color-surface: light-dark(var(--light-surface), var(--dark-surface));
    --color-surface-2: light-dark(var(--light-surface-2), var(--dark-surface-2));
    --color-border: light-dark(var(--light-border), var(--dark-border));
    --color-text: light-dark(var(--light-text), var(--dark-text));
    --color-text-muted: light-dark(var(--light-text-muted), var(--dark-text-muted));
    --color-heading: light-dark(var(--light-heading), var(--dark-heading));
    --color-accent: light-dark(var(--light-accent), var(--dark-accent));
    --color-accent-strong: light-dark(var(--light-accent-strong), var(--dark-accent-strong));
    --color-secondary: light-dark(var(--light-secondary), var(--dark-secondary));
    --color-on-accent: light-dark(var(--light-on-accent), var(--dark-on-accent));
    --color-focus: light-dark(var(--light-focus), var(--dark-focus));
    --color-glow: light-dark(var(--light-glow), var(--dark-glow));
    --color-shadow: light-dark(var(--light-shadow), var(--dark-shadow));
    --color-star: light-dark(var(--light-star), var(--dark-star));
    --color-nebula: light-dark(var(--light-nebula), var(--dark-nebula));
    --color-header-bg: light-dark(var(--light-header-bg), var(--dark-header-bg));
    --color-skyline: light-dark(var(--light-skyline), var(--dark-skyline));
    --color-logo-shadow: light-dark(var(--light-logo-shadow), var(--dark-logo-shadow));
    --color-twitch: light-dark(var(--light-twitch), var(--dark-twitch));
    --color-link: light-dark(var(--color-accent), var(--color-accent-strong));
  }
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
  accent-color: var(--color-accent);
  scrollbar-color: var(--color-border) var(--color-bg);
  /* Opaque root: a page-change snapshot with a transparent background shows the white canvas through mid-fade. */
  background-color: var(--color-bg);
}

/* Desktop monitors render everything too big at 1rem = 16px, so the root size is 12px on desktop and 14px on phones. Sizes in the theme are rem, so one root size scales the text and spacing. It grows linearly on small screens: 12px (0.75rem) at 64rem (1024px) and wider, 14px (0.875rem) at 40rem (640px) and narrower; 0.005208 = 0.125rem / 24rem. Windowed and full screen look the same, since both are the same pixel density. rem on html is the browser default, so a user's font size setting is still honored. Pixel values, such as --width-content, stay fixed. */
html {
  font-size: clamp(0.75rem, 0.875rem - (100vw - 40rem) * 0.005208, 0.875rem);
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Faint star field and nebula glow */
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--color-star), transparent 60%),
    radial-gradient(1px 1px at 68% 8%, var(--color-star), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 52%, var(--color-star), transparent 60%),
    radial-gradient(1px 1px at 86% 41%, var(--color-star), transparent 60%),
    radial-gradient(1px 1px at 24% 79%, var(--color-star), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 88%, var(--color-star), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--color-nebula), transparent 70%);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

img,
picture,
svg,
video,
iframe {
  display: block;
  max-inline-size: 100%;
}

img {
  block-size: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

hr {
  border: 0;
  block-size: 1px;
  background: var(--gradient-hairline);
  margin-block: var(--space-l);
}

/* ---------- Layout utilities ---------- */

.container {
  inline-size: min(100% - 2 * var(--gutter), var(--width-content));
  margin-inline: auto;
}

.prose {
  max-inline-size: var(--width-prose);
}

.prose > * + * {
  margin-block-start: var(--space-s);
}

.prose > :is(h2, h3) {
  margin-block-start: var(--space-l);
}

.prose :is(ul, ol) {
  padding-inline-start: 1.4em;
}

.prose li + li {
  margin-block-start: var(--space-3xs);
}

.prose li::marker {
  color: var(--color-accent);
}

.prose code {
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  background: var(--color-surface-2);
  border: var(--border-hairline);
  border-radius: var(--radius-s);
}

/* Page heading block: optional eyebrow, h1, lede */
.page-head {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-xl) var(--space-m);
}

.page-head h1 {
  font-size: var(--step-4);
}

.page-head__lede {
  max-inline-size: 52ch;
  font-size: var(--step-1);
  color: var(--color-text-muted);
}

/* Inline row of related links, e.g. GitHub · Chrome Web Store */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-s);
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-s));
}

.section {
  padding-block: var(--space-xl);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-block-end: var(--space-m);
}

/* Gold hairline trailing the heading */
.section-title::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--gradient-hairline);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 20rem)), 1fr));
  gap: var(--space-m);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-xs));
}

.muted {
  color: var(--color-text-muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: var(--radius-s);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--space-s);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.6em 1.3em;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-round);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-link);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-base) ease;
}

.button:hover {
  color: var(--color-link);
  box-shadow: var(--shadow-glow);
}

.button--primary {
  background: var(--gradient-gold);
  color: var(--color-on-accent);
}

.button--primary:hover {
  color: var(--color-on-accent);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* The old page stays opaque underneath; fading it out too would let the canvas flash through. */
  ::view-transition-old(root) {
    animation: none;
  }

  ::view-transition-new(root) {
    animation: 400ms var(--ease-out) both vt-rise-in;
  }
}

@keyframes vt-rise-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

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

/* Windows High Contrast / forced colours: keep focus and borders visible */
@media (forced-colors: active) {
  .button,
  .card {
    border: 1px solid CanvasText;
  }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  block-size: var(--header-height);
  background: var(--color-header-bg);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-block-end: 1px solid transparent;
  border-image: var(--gradient-hairline) 1;
  view-transition-name: site-header;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  block-size: 100%;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-inline-size: 0;
  text-decoration: none;
  border-radius: var(--radius-round);
}

.brand__avatar {
  inline-size: 44px;
  block-size: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 12px var(--color-glow);
}

.brand__wordmark img {
  block-size: 28px;
  inline-size: auto;
  filter: var(--shadow-logo);
}

@media (max-width: 22rem) {
  .brand__wordmark img {
    block-size: 22px;
  }
}

/* Slow gold shimmer sweeping across the wordmark. */
.shimmer {
  position: relative;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, var(--color-accent-strong) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    mix-blend-mode: plus-lighter;
    opacity: 0.7;
    -webkit-mask: var(--mask) center / contain no-repeat;
    mask: var(--mask) center / contain no-repeat;
    animation: shimmer 9s ease-in-out infinite;
  }
}

@keyframes shimmer {
  0%, 70% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* ---------- Nav ---------- */

.nav__list {
  list-style: none;
  padding: 0;
}

.nav a {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-s);
}

.nav a:hover {
  color: var(--color-accent-strong);
}

.nav a[aria-current='page'] {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* Desktop row */
.nav__list--desktop {
  display: none;
}

/* Mobile disclosure */
.nav__menu {
  position: relative;
}

.nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  min-block-size: 44px;
  padding-inline: var(--space-xs);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  user-select: none;
}

.nav__toggle::-webkit-details-marker {
  display: none;
}

.nav__toggle:hover {
  border-color: var(--color-accent);
}

.nav__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav__icon-close,
.nav__menu[open] .nav__icon-open {
  display: none;
}

.nav__menu[open] .nav__icon-close {
  display: inline;
}

.nav__list--mobile {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2xs));
  min-inline-size: 13rem;
  padding: var(--space-2xs);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.nav__list--mobile a {
  padding: var(--space-xs) var(--space-s);
}

.nav__list--mobile a:hover {
  background: var(--color-surface-2);
}

@media (prefers-reduced-motion: no-preference) {
  .nav__menu[open] .nav__list--mobile {
    animation: menu-in var(--duration-base) var(--ease-out);
  }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
}

@media (min-width: 52rem) {
  .nav__list--desktop {
    display: flex;
    gap: var(--space-3xs);
  }

  .nav__menu {
    display: none;
  }
}

/* ---------- ThemeToggle ---------- */

.theme-toggle {
  display: none;
  place-items: center;
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
}

.has-theme-toggle .theme-toggle {
  display: grid;
}

.theme-toggle:hover {
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
  box-shadow: 0 0 12px -2px var(--color-glow);
}

.theme-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__star {
  stroke-width: 1.5;
}

/* Dark is rendered by default: offer the sun. */
.theme-toggle__action--to-dark {
  display: none;
}

/* Light rendered by system preference (unless pinned dark), or pinned light: offer the moon. */
@media (prefers-color-scheme: light) {
  :root:not(:has(> head > meta[name='color-scheme'][content='dark'])) .theme-toggle__action--to-light {
    display: none;
  }

  :root:not(:has(> head > meta[name='color-scheme'][content='dark'])) .theme-toggle__action--to-dark {
    display: block;
  }
}

:root:has(> head > meta[name='color-scheme'][content='light']) .theme-toggle__action--to-light {
  display: none;
}

:root:has(> head > meta[name='color-scheme'][content='light']) .theme-toggle__action--to-dark {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle__action {
    animation: theme-icon-in var(--duration-base) var(--ease-out);
  }
}

@keyframes theme-icon-in {
  from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
}

/* ---------- SocialLinks ---------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}

.socials a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  text-decoration: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-m);
}

.socials img {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) ease;
}

.socials a:hover img,
.socials a:focus-visible img {
  box-shadow: var(--shadow-glow);
}

@media (prefers-reduced-motion: no-preference) {
  .socials a:hover img {
    transform: translateY(-3px);
  }
}

.socials a:hover {
  color: var(--color-accent-strong);
}

.socials__label {
  font-size: var(--step--1);
  font-weight: 600;
}

.socials--labelled {
  gap: var(--space-m);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-block-start: var(--space-2xl);
}

.site-footer__skyline {
  block-size: clamp(3rem, 9vw, 7rem);
  background: var(--color-skyline);
  -webkit-mask: var(--skyline) bottom center / auto 100% repeat-x;
  mask: var(--skyline) bottom center / auto 100% repeat-x;
}

.site-footer__body {
  background: var(--color-skyline);
  padding-block: var(--space-m) var(--space-l);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
}

.site-footer__copy {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--color-text-muted);
  max-inline-size: 48ch;
}


/* ---------- Home ---------- */

.hero {
  padding-block: var(--space-xl) var(--space-l);
}

.hero__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  justify-items: center;
  text-align: center;
}

.hero__art {
  position: relative;
  inline-size: min(70vw, 18rem);
}

.hero__art::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-glow), transparent 65%);
  z-index: -1;
}

.hero__art img {
  inline-size: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-accent), 0 0 0 9px var(--color-bg), 0 0 0 10px var(--color-border);
}

.hero__text {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
}

.hero__wordmark {
  inline-size: min(100%, 30rem);
  filter: var(--shadow-logo);
}

.hero__text h1 {
  font-size: var(--step-4);
}

.hero__lede {
  max-inline-size: 38ch;
  font-size: var(--step-1);
  color: var(--color-text-muted);
}

.hero__actions {
  justify-content: center;
  margin-block-start: var(--space-2xs);
}

.more {
  margin-block-start: var(--space-m);
  text-align: end;
  font-weight: 600;
}

@media (min-width: 52rem) {
  .hero__inner {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: start;
    gap: var(--space-xl);
  }

  .hero__text {
    justify-items: start;
  }

  .hero__actions {
    justify-content: start;
  }
}

/* ---------- ProjectCard ---------- */

.card-wrap {
  container-type: inline-size;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  block-size: 100%;
  padding: var(--space-m);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 60%);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-3px);
  }
}

.card__icon {
  inline-size: 72px;
  block-size: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px var(--color-border);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-inline-size: 0;
}

.card__title {
  font-size: var(--step-1);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--color-accent-strong);
}

.card__text {
  color: var(--color-text-muted);
}

.card__text > * + * {
  margin-block-start: var(--space-2xs);
}

.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  margin-block-start: auto;
  padding: var(--space-2xs) 0 0;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
}

/* Wide cards: icon beside the text. */
@container (min-width: 30rem) {
  .card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .card__icon {
    inline-size: 96px;
    block-size: 96px;
  }
}

/* ---------- About ---------- */

.about-intro {
  font-size: var(--step-1);
  line-height: 1.55;
}

.about-intro strong {
  color: var(--color-heading);
}

.game-groups {
  display: grid;
  gap: var(--space-l);
}

.game-group h3 {
  margin-block-end: var(--space-s);
  font-size: var(--step-1);
  color: var(--color-accent-strong);
}

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-2xs);
  padding: 0;
  list-style: none;
}

.game {
  display: grid;
  align-content: center;
  gap: 0.1em;
  min-block-size: 3.25rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  line-height: 1.3;
}

.game--major {
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 70%);
  border-color: var(--color-accent);
  border-inline-start-width: 3px;
}

.game--major .game__name {
  font-weight: 700;
  color: var(--color-heading);
}

.game__group {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--color-text-muted);
}

.legend {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
  font-size: var(--step--1);
}

.legend__swatch {
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid var(--color-accent);
  border-inline-start-width: 3px;
  border-radius: 0.25rem;
}

/* ---------- Lore ---------- */

.lore-hero {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-xl) var(--space-l);
}

.lore-hero__text {
  display: grid;
  gap: var(--space-xs);
}

.lore-hero__text h1 {
  font-size: var(--step-4);
}

.facts {
  display: grid;
  gap: var(--space-s);
  margin-block-start: var(--space-s);
  padding: var(--space-m);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 60%);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.facts dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.facts dd {
  margin: 0;
}

.facts strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-heading);
}

.honorifics {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xs);
  padding: 0;
  list-style: none;
  font-style: italic;
}

.honorifics li:not(:last-child)::after {
  content: '·';
  margin-inline-start: var(--space-xs);
  color: var(--color-accent);
  font-style: normal;
}

.respell {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.lore figure {
  display: grid;
  gap: var(--space-2xs);
}

.lore figure img {
  inline-size: 100%;
  border-radius: var(--radius-l);
  border: var(--border-hairline);
  box-shadow: var(--shadow-card);
}

.lore figcaption {
  font-size: var(--step--1);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.lore-hero__art img {
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.lore-body {
  margin-inline: auto;
  font-size: var(--step-0);
}

.lore-body > h2 {
  font-size: var(--step-2);
  color: var(--color-accent-strong);
}

.lore-body > h2::before {
  content: '✦';
  margin-inline-end: 0.5em;
  font-size: 0.7em;
  vertical-align: 0.15em;
  color: var(--color-secondary);
}

/* Drop cap on the opening paragraph */
.lore-body > h2:first-child + p::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.85;
  color: var(--color-accent-strong);
}

.lore-figure {
  margin-block: var(--space-l);
}

@media (min-width: 60rem) {
  .lore-hero {
    grid-template-columns: 1fr 26rem;
    gap: var(--space-xl);
  }
}
/* Hardware: spec cards */
.rig {
  padding-block-start: var(--space-m);
}

.rig__title h2 {
  font-size: inherit;
}

.rig__title {
  font-size: var(--step-3);
  flex-wrap: wrap;
}

.rig__note {
  order: 3;
  flex-basis: 100%;
  font-size: var(--step-0);
  font-style: italic;
  color: var(--color-text-muted);
}

.spec {
  padding: var(--space-m);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 60%);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.spec h3 {
  margin-block-end: var(--space-xs);
  font-size: var(--step-1);
  color: var(--color-accent-strong);
}

.spec__list {
  display: grid;
  gap: var(--space-2xs);
  padding: 0;
  list-style: none;
}

.spec__list li {
  position: relative;
  padding-inline-start: 1.2em;
  line-height: 1.4;
}

.spec__list li::before {
  content: '◆';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.35em;
  font-size: 0.6em;
  color: var(--color-secondary);
}

/* Find Me: link cards */
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  padding: 0;
  list-style: none;
  margin-block-start: var(--space-s);
}

.links > li {
  flex: 0 1 17rem;
}

.link-card {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  block-size: 100%;
  padding: var(--space-s) var(--space-m);
  text-decoration: none;
  color: var(--color-text);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface) 60%);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}

.link-card:hover,
.link-card:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

@media (prefers-reduced-motion: no-preference) {
  .link-card:hover {
    transform: translateY(-3px);
  }
}

.link-card img {
  inline-size: 64px;
  block-size: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-m);
}

.link-card__text {
  display: grid;
}

.link-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-heading);
}

.link-card:hover .link-card__name {
  color: var(--color-accent-strong);
}

.link-card__blurb {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* 404 */
.not-found {
  display: grid;
  justify-items: center;
  gap: var(--space-l);
  padding-block: var(--space-2xl) var(--space-l);
  text-align: center;
}

.digits {
  display: flex;
  align-items: end;
  gap: var(--space-2xs);
  filter: drop-shadow(0 0 18px var(--color-glow));
}

.digits img {
  block-size: clamp(72px, 18vw, 110px);
  inline-size: auto;
}

.haiku {
  display: grid;
  gap: var(--space-3xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
}

.not-found .home {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

/* Twitch click-to-load facade */
.twitch {
  container-type: inline-size;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  background: var(--color-bg-deep);
}

/* aspect-ratio keeps min-block-size: auto, so the facade can grow taller
   than 16:9 on narrow screens instead of clipping its text. */
.twitch iframe,
.twitch__facade {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
}

.twitch iframe {
  border: 0;
}

.twitch__facade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  padding: var(--space-m);
  text-decoration: none;
  color: var(--color-text);
  background:
    radial-gradient(circle at 50% 55%, var(--color-glow), transparent 55%),
    radial-gradient(circle at 80% 20%, var(--color-nebula), transparent 60%),
    linear-gradient(135deg, var(--color-surface-2), var(--color-bg-deep));
}

.twitch__text {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2xs);
}

.twitch__play {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: var(--color-twitch);
  color: var(--color-on-twitch);
  box-shadow: 0 0 0 0 var(--color-twitch);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) ease;
}

.twitch__play svg {
  fill: currentColor;
  margin-inline-start: 3px;
}

.twitch__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--color-heading);
}

.twitch__note {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.twitch__facade:hover .twitch__play,
.twitch__facade:focus-visible .twitch__play {
  box-shadow: 0 0 0 6px var(--color-glow);
}

@media (prefers-reduced-motion: no-preference) {
  .twitch__facade:hover .twitch__play {
    transform: scale(1.08);
  }
}

@container (max-width: 26rem) {
  .twitch__facade {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .twitch__label {
    font-size: var(--step-1);
  }
}

/* Project overview and sub pages (project, subpage templates; ported from the Astro project pages) */
.project-head--icon {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-m);
}

.project-head__icon {
  inline-size: clamp(64px, 12vw, 96px);
  block-size: auto;
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-glow);
}

.project-head__text {
  display: grid;
  gap: var(--space-xs);
}

.project-body {
  display: grid;
  gap: var(--space-xl);
  padding-block-start: var(--space-m);
}

.project-body > .prose,
.project-section {
  /* Grid items default to min-content width; let the code blocks scroll instead. */
  min-inline-size: 0;
  max-inline-size: none;
}

.project-body > .prose > *,
.project-section > :not(.section-title, .tiles, .code, .shots) {
  max-inline-size: var(--width-prose);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-s);
}

.tiles div {
  padding: var(--space-s);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
}

.tiles dt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-strong);
}

.tiles dd {
  margin: var(--space-3xs) 0 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.code {
  max-inline-size: 60rem;
  overflow-x: auto;
  padding: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.prose .code code {
  padding: 0;
  font-size: inherit;
  background: none;
  border: 0;
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

.shot img {
  inline-size: 100%;
  block-size: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.shot figcaption {
  margin-block-start: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.tiles--planned div {
  border-style: dashed;
}

.release-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  padding: var(--space-s) var(--space-m);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: var(--border-hairline);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-m);
}

.release-note strong {
  color: var(--color-accent-strong);
}

.release-note p {
  margin: 0;
}

.project-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin: 0;
}

/* Screenshot lightbox (Phase 6a), ported from the Astro Context Menu Search page. */
.shot__link {
  display: block;
  cursor: zoom-in;
}

.shot__link:hover img,
.shot__link:focus-visible img {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

/* One image, such as a cover, stays at a readable width. */
.shots li:only-child {
  max-inline-size: 50rem;
}

/* Images the author places inside prose steps. */
.project-section li img {
  display: block;
  margin-block: var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
}

.lightbox {
  /* The global margin reset removes the UA centring. */
  margin: auto;
  overflow: hidden;
  max-inline-size: min(100vw - 2 * var(--gutter), 80rem);
  max-block-size: calc(100dvh - 2 * var(--gutter));
  padding: var(--space-s);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.lightbox[open] {
  display: grid;
  gap: var(--space-2xs);
}

.lightbox::backdrop {
  background: color-mix(in srgb, var(--color-bg-deep) 85%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.lightbox form {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
}

.lightbox__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: var(--color-text);
  background: var(--color-header-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

.lightbox__close svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.lightbox__img {
  max-block-size: calc(100dvh - 2 * var(--gutter) - 5rem);
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
}

.lightbox__caption {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in var(--duration-base) var(--ease-out);
  }
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
}

/* Manual layout (Phase 6b), ported from the Astro manual pages: a contents list and term/definition lists. */
.manual-toc {
  padding: var(--space-m);
  background: var(--color-surface-2);
  border: var(--border-hairline);
  border-radius: var(--radius-l);
}

.manual-toc h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-1);
}

.manual-toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
  padding-inline-start: 1.3em;
}

.project-section {
  scroll-margin-block-start: var(--space-l);
}

.terms {
  display: grid;
  gap: var(--space-s);
  max-inline-size: var(--width-prose);
}

.terms dt {
  font-weight: 700;
  color: var(--color-accent-strong);
}

.terms dd {
  margin-inline-start: 0;
  color: var(--color-text-muted);
}