/* Generated by scripts/build-css.py from base, layout, guide-full, wayback, redesign. Do not edit. */

/* ---- base.css ---- */
/* ===================================================================
   BASE — Design tokens, typography, resets
   Community page for Archive of Our Learning
   =================================================================== */

/* --- Custom Properties ------------------------------------------- */
:root {
  /* Palette — warm maroon from logo + cream */
  --accent: #8b1a2b;
  --accent-light: #a82640;
  --accent-pale: rgba(139, 26, 43, 0.07);
  --accent-pale2: rgba(139, 26, 43, 0.12);

  /* Surfaces — warm parchment */
  --bg: #faf7f2;
  --bg-alt: #f3ede4;
  --bg-card: #ffffff;

  /* Text hierarchy — warm browns */
  --text: #2a2118;
  --text-mid: #4d4339;
  --text-muted: #887b6e;
  --text-faint: #b3a898;

  /* Borders */
  --border: #e6dfd4;
  --border-light: #eee9e0;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  /* Layout */
  --container-max: 760px;
  /* Wide row for the nav band and the footer. It has to hold the Russian and
     Ukrainian nav labels plus the actions; at 960px they ran off the screen. */
  --container-wide: 1120px;
  --container-pad: clamp(1.25rem, 5vw, 2rem);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* Typography */
  --font-display: 'Fraunces', 'Lora', Georgia, serif;
  --font-body: 'Figtree', 'Inter', system-ui, sans-serif;
}

/* --- Font Faces -------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

/* --- Reset ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* So native controls, scrollbars and the canvas follow the theme */
  color-scheme: light dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-light);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* --- Typography -------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

h4 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
}

p {
  max-width: 65ch;
  color: var(--text-mid);
}

/* --- Utility ----------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Focus ------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Selection --------------------------------------------------- */

::selection {
  background: var(--accent-pale2);
}

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

@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;
  }
}

/* ---- layout.css ---- */
/* ===================================================================
   LAYOUT — Container, navigation, sections, footer, responsive
   =================================================================== */

/* --- Skip Link --------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--container-pad);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* --- Container --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Navigation -------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  height: 3.5rem;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.nav-logo {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.nav-logo img {
  height: 28px;
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--text);
}

/* Right-hand actions: language switcher + hamburger */
.nav-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* Language switcher */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 2px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 4px;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Inner pages have no i18n runtime, so their switcher is a pair of links to
   the sibling page. Same chip, different element. */
a.lang-btn {
  text-decoration: none;
}

.lang-btn:hover {
  color: var(--text);
}

.lang-btn[aria-checked="true"],
.lang-btn[aria-current="page"] {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
}

/* On touch the nav controls have to be thumb-sized. On a mouse they don't,
   and blowing them up there turns the switcher into the loudest thing in the
   band — so the 44px floor is scoped to coarse pointers. */
@media (pointer: coarse) {
  .lang-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }
}

.nav-toggle .stroke {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* --- Sections ---------------------------------------------------- */

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

.section-alt {
  background: var(--bg-alt);
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  margin-bottom: var(--space-xs);
}

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

/* --- Welcome / Intro --------------------------------------------- */

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

.welcome-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.welcome-logo {
  flex-shrink: 0;
}

.welcome-logo img {
  width: 80px;
  height: 80px;
}

.welcome-text h1 {
  margin-bottom: var(--space-sm);
}

.welcome-text p {
  font-size: 1.05rem;
  line-height: 1.75;
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-lg);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
}

.store-btn svg {
  flex-shrink: 0;
  color: var(--accent);
  transition: color var(--transition-fast);
}

.store-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.store-btn:hover svg {
  color: #fff;
}

.store-btn--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  position: relative;
}

.soon-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

.action-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

/* --- Social band (above How-to-Use) ----------------------------- */

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

/* --- Disclaimer (above How-to-Use) ------------------------------ */

.section-disclaimer {
  padding-block: var(--space-md) var(--space-lg);
}

.disclaimer-text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-style: italic;
  max-width: 65ch;
  margin: 0 auto;
  text-align: center;
  padding-inline: var(--space-md);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

.social-band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.social-band-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
}

.social-band-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-mid);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background var(--transition-fast);
}

.social-chip svg {
  color: var(--accent);
  transition: color var(--transition-fast);
}

.social-chip:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.social-chip:hover svg {
  color: #fff;
}

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

.footer {
  background: var(--text);
  color: rgba(255, 255, 255, 0.65);
  padding-block: var(--space-xl);
}

/* The footer sits under the article column, so it shares its width. At the
   wide nav measure the brand and the link columns were separated by a third
   of a screen of empty red. */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.footer-brand {
  max-width: 320px;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 100%;
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-col h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding-block: 0.15rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: #fff;
}

/* Social links — accent-coloured icons on dark footer */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-col .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  padding-block: 0.2rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-col .social-link svg {
  flex-shrink: 0;
  color: var(--accent-light);
  transition: color var(--transition-fast);
}

.footer-col .social-link:hover {
  color: #fff;
}

.footer-col .social-link:hover svg {
  color: #fff;
}

.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Inner pages put "Back to home" here. Without this it inherits the global
   accent colour and lands maroon-on-maroon: invisible. */
.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom .lang-switcher {
  background: rgba(255, 255, 255, 0.12);
}

.footer-bottom .lang-btn {
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom .lang-btn:hover {
  color: #fff;
}

.footer-bottom .lang-btn[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

/* --- Responsive: Nav ---------------------------------------------- */

/* The drawer takes over at 1100px, not 768px: in Russian and Ukrainian the six
   nav labels plus the actions need ~1043px, more than the 960px container, and
   the overflow pushed the theme toggle and the language switcher off-screen. */
@media (max-width: 1119px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 3.5rem 0 0 0;
    height: calc(100dvh - 3.5rem);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: #ffffff;
    padding: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
    overflow-y: auto;
  }

  .nav-links[data-open="true"] {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 1.1rem;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    white-space: normal;
    justify-content: flex-start;
  }
}

/* --- Responsive: Mobile ------------------------------------------ */

@media (max-width: 768px) {
  .welcome {
    padding-block: var(--space-lg) var(--space-md);
  }

  .welcome-inner {
    flex-direction: column;
    text-align: center;
  }

  .welcome-logo img {
    width: 64px;
    height: 64px;
  }

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

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Scroll Reveal Animation ------------------------------------- */

/* Reveal only activates after JS adds .reveal-ready to <html> */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- guide-full.css ---- */
/* ===================================================================
   GUIDE-FULL — Styles for the full guide page (guide.html)
   Community page for Archive of Our Learning
   =================================================================== */

/* --- Guide Hero --------------------------------------------------- */

/* Left-aligned like the home page: the site has one outdent, not two. */
.guide-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
}

.guide-hero h1 {
  margin-bottom: var(--space-sm);
}

.guide-tagline {
  font-size: 1.1rem;
  color: var(--text-mid);
  max-width: 55ch;
  margin: 0 0 var(--space-xs);
}

.guide-credit {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Nav back link ----------------------------------------------- */

.nav-back {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-mid);
  text-decoration: none;
  margin-left: auto;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-back:hover {
  color: var(--accent);
  background: var(--accent-pale);
}

/* --- Table of Contents ------------------------------------------- */

.toc-title {
  margin-bottom: var(--space-md);
}

.toc {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
}

.toc > li {
  counter-increment: toc-counter;
  margin-bottom: 0.4rem;
}

.toc > li::before {
  content: counter(toc-counter) ". ";
  font-weight: 600;
  color: var(--accent);
}

.toc > li > a {
  font-weight: 500;
  font-size: 1rem;
}

/* Nested TOC */
.toc ol {
  list-style: none;
  counter-reset: toc-sub;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}

.toc ol > li {
  counter-increment: toc-sub;
  margin-bottom: 0.2rem;
}

.toc ol > li > a {
  font-size: 0.92rem;
  color: var(--text-mid);
}

.toc ol > li > a:hover {
  color: var(--accent);
}

/* --- Guide Content Sections -------------------------------------- */

.guide-content .section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.guide-content h2 {
  margin-bottom: var(--space-md);
  padding-top: var(--space-sm);
}

.guide-content h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-sm);
}

.guide-content p {
  margin-bottom: var(--space-md);
  max-width: 72ch;
}

.guide-content p:last-child {
  margin-bottom: 0;
}

/* Prose sections outside .guide-content (the intro on the support page) got
   no paragraph spacing at all and ran together as one block. */
.section > .container > p + p {
  margin-top: var(--space-md);
}

/* --- Language List ------------------------------------------------ */

.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0;
  list-style: none;
  margin-bottom: var(--space-md);
}

.lang-list li {
  font-size: 0.95rem;
  color: var(--text-mid);
  padding: 0.3rem 0.75rem;
  background: var(--accent-pale);
  border-radius: 4px;
}

/* Collapsible source/target language lists */
.lang-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--space-sm);
  background: var(--bg-card);
  overflow: hidden;
}

.lang-details > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-fast);
}

.lang-details > summary::-webkit-details-marker {
  display: none;
}

.lang-details > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9rem;
  transition: transform var(--transition-fast);
}

.lang-details[open] > summary::after {
  transform: rotate(180deg);
}

.lang-details > summary:hover {
  background: var(--accent-pale);
}

.lang-count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}

.lang-details[open] .lang-count {
  background: var(--bg-alt);
}

.lang-details .lang-list {
  padding: 0 var(--space-md) var(--space-md);
  margin-bottom: 0;
}

/* --- Screenshots ------------------------------------------------- */

.screenshots-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 100%;
}

.screenshots-row img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-fast);
}

.screenshots-row img:hover {
  border-color: var(--accent);
}

/* Single screenshot — don't stretch full width */
.screenshots-row:has(img:only-child) {
  grid-template-columns: minmax(140px, 280px);
}

/* Two screenshots — nice half-and-half */
.screenshots-row:has(img:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
}

/* Three screenshots */
.screenshots-row:has(img:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* Four or more — auto grid handles it */

/* --- Responsive -------------------------------------------------- */

@media (max-width: 640px) {
  .guide-hero {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }

  .screenshots-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem;
  }

  /* Force 2 columns for 3+ images on small screens */
  .screenshots-row:has(img:nth-child(3)) {
    grid-template-columns: repeat(2, 1fr);
  }

  .screenshots-row:has(img:only-child) {
    grid-template-columns: 1fr;
    max-width: 280px;
  }

  .toc ol {
    padding-left: 1rem;
  }
}

@media (max-width: 400px) {
  .screenshots-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
  }

  .screenshots-row:has(img:only-child) {
    grid-template-columns: 1fr;
  }
}

/* --- Scroll to section offset ------------------------------------ */

.guide-content section[id] {
  scroll-margin-top: 4rem;
}

.guide-content h3[id] {
  scroll-margin-top: 4rem;
}

/* --- Footer (reuse from main, simplified) ------------------------ */

.guide-content + .footer {
  margin-top: 0;
}

.guide-updated {
  font-size: 0.85rem;
  color: var(--text-mid);
  margin: 0;
}

/* ---- wayback.css ---- */
/* ===================================================================
   WAYBACK — search page for reading AO3 through the Wayback Machine
   =================================================================== */

.wb-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.wb-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.wb-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.wb-submit {
  flex-shrink: 0;
  padding: 0.75rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.wb-submit:hover {
  background: var(--accent-light);
}

[data-theme="dark"] .wb-submit {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-submit {
    color: #211d19;
  }
}

.wb-hint {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wb-result {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.wb-result h2 {
  font-size: 1.25rem;
  margin: 0 0 var(--space-xs);
  outline: none;
}

.wb-note {
  margin: 0 0 var(--space-xs);
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wb-link {
  display: block;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.wb-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.wb-link strong {
  display: block;
  color: var(--accent);
  font-weight: 600;
}

.wb-link span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.5;
}

.wb-link-primary {
  background: var(--accent-pale);
  border-color: var(--accent-pale2);
}

@media (max-width: 640px) {
  .wb-form {
    flex-direction: column;
  }
}

/* First chapter vs whole work: a colored edge and a badge tell them apart */

.wb-link-first,
.wb-link-full {
  border-left-width: 4px;
}

.wb-link-first {
  border-left-color: var(--text-faint);
}

.wb-link-full {
  border-left-color: var(--accent);
  background: var(--accent-pale);
}

.wb-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
}

.wb-link-first .wb-badge {
  background: var(--bg-alt);
  color: var(--text-mid);
  border: 1px solid var(--border);
}

.wb-link-full .wb-badge {
  background: var(--accent);
  color: #fff;
}

[data-theme="dark"] .wb-link-full .wb-badge {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-link-full .wb-badge {
    color: #211d19;
  }
}

/* Room between a section heading and its first paragraph */
main .section .container > h2 {
  margin-bottom: var(--space-md);
}

/* Language menu: a dropdown instead of a row of buttons, there are 12 */
.lang-menu {
  position: relative;
}

.nav .lang-menu summary {
  list-style: none;
  cursor: pointer;
  background: #fffdf8;
  color: var(--band);
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary::after {
  content: "";
  display: inline-block;
  margin-left: 0.4rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: 0.15em;
}

.lang-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.lang-menu-list a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}

.lang-menu-list a:hover {
  color: var(--accent);
  background: var(--accent-pale);
}

.lang-menu-list a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* Pointer to the Chrome extension at the bottom of the search block */
.guide-hero .wb-extension {
  margin-top: var(--space-lg);
  max-width: 62ch;
  color: var(--text-mid);
}

.wb-extension a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* display: grid above would otherwise override the hidden attribute */
.wb-result[hidden] {
  display: none;
}

/* Title found on archive.today, under the "Work 12345" heading */
.wb-found {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

.wb-sites {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  color: var(--text-mid);
}

.wb-sites a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* Results grouped by where to look, in the order worth trying.
   The step and source sit in a left column; on a phone they stack. */
.wb-step {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-lg);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.wb-step-head {
  padding-top: 0.15rem;
}

.wb-step-label {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.wb-step-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.wb-step-links {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

@media (max-width: 640px) {
  .wb-step {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* One subheading per place in "How does it work?" */
.wb-sub {
  margin: var(--space-lg) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

/* Source names in "How does it work?" link to the sites themselves */
.wb-sub a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wb-sub a:hover {
  color: var(--accent);
}

/* The hint under the field links down to "Where can I find the link?" */
.wb-hint a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wb-hint a:hover {
  color: var(--accent);
}

/* Keep the heading clear of the sticky nav after the jump */
#where {
  scroll-margin-top: 5.5rem;
}

/* Short how-to list in "Where can I find the link?" */
.wb-howto {
  margin: var(--space-sm) 0 0;
  padding-left: 1.25rem;
  max-width: 66ch;
}

.wb-howto li + li {
  margin-top: 0.35rem;
}

.wb-howto {
  list-style: disc;
}

.section > .container > .wb-howto + p {
  margin-top: var(--space-md);
}

/* The AO3 / Archive Learning hug above the title: black ink on white.
   On light paper "multiply" drops the white. On dark paper the drawing sits
   on its own light card, the way the home page puts the logo on a light disc.
   The card is white like the drawing, then both are toned to the same cream. */
.wb-hug {
  display: block;
  width: min(260px, 70%);
  height: auto;
  margin: 0 0 var(--space-md);
  mix-blend-mode: multiply;
}

[data-theme="dark"] .wb-hug {
  mix-blend-mode: normal;
  background: #fff;
  filter: sepia(0.12) brightness(0.965);
  padding: 10px 12px;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-hug {
    mix-blend-mode: normal;
    background: #fff;
    filter: sepia(0.12) brightness(0.965);
    padding: 10px 12px;
    border-radius: 10px;
  }
}

/* "Know another place? Tell us": set in the display face so it stands out */
.section > .container > p.wb-tellus {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.wb-tellus a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* "No link? Here's where to find it": jumps down to the how-to */
.guide-hero p.wb-nolink {
  margin-top: var(--space-sm);
  font-size: 1rem;
  font-weight: 600;
}

.wb-nolink a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.wb-nolink a:hover {
  color: var(--accent-light);
}

/* ---- redesign.css ---- */
/* ===================================================================
   REDESIGN — fandom-native restyle, loaded after the original CSS.

   Concept: the site dressed as an AO3 work page. Red site band,
   work-blurb hero with freeform tags and work stats, chapters instead
   of steps, an author's note, kudos at the end. Light + dark themes.
   =================================================================== */

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

:root {
  /* The archive red */
  --accent: #990000;
  --accent-light: #b32d2d;
  --accent-pale: rgba(153, 0, 0, 0.07);
  --accent-pale2: rgba(153, 0, 0, 0.13);

  /* Word-highlight motif from the app */
  --learning: #b3261e;
  --learned: #2e7d4f;
  --learned-pale: rgba(46, 125, 79, 0.14);

  /* Paper */
  --bg: #faf6ee;
  --bg-alt: #f2ebdd;
  --bg-card: #fffdf8;

  --text: #2a2118;
  --text-mid: #4d4339;
  /* Both quiet greys carry real text (section subtitles, the stats note, the
     "last updated" line), so both clear 4.5:1 on --bg, --bg-alt and --bg-card. */
  --text-muted: #6b5f50;
  --text-faint: #75685a;

  --border: #e2d8c6;
  --border-light: #ece4d4;

  /* Tag pills */
  --tag-bg: #f0e9db;
  --tag-border: #ddd2bd;

  /* The band */
  --band: #990000;
  --band-text: #fff;

  --shadow-card: 0 1px 3px rgba(42, 33, 24, 0.08);
}

[data-theme="dark"] {
  --accent: #e06a5a;
  --accent-light: #eb8a7c;
  --accent-pale: rgba(224, 106, 90, 0.12);
  --accent-pale2: rgba(224, 106, 90, 0.2);

  --learning: #e57373;
  --learned: #81c995;
  --learned-pale: rgba(129, 201, 149, 0.16);

  --bg: #211d19;
  --bg-alt: #2a2520;
  --bg-card: #2e2823;

  --text: #f1e9dd;
  --text-mid: #cfc4b4;
  --text-muted: #a89a86;
  --text-faint: #9e9180;

  --border: #453d33;
  --border-light: #3a332b;

  --tag-bg: #38312a;
  --tag-border: #4a4136;

  --band: #5c1015;
  --band-text: #f6ede4;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #e06a5a;
    --accent-light: #eb8a7c;
    --accent-pale: rgba(224, 106, 90, 0.12);
    --accent-pale2: rgba(224, 106, 90, 0.2);

    --learning: #e57373;
    --learned: #81c995;
    --learned-pale: rgba(129, 201, 149, 0.16);

    --bg: #211d19;
    --bg-alt: #2a2520;
    --bg-card: #2e2823;

    --text: #f1e9dd;
    --text-mid: #cfc4b4;
    --text-muted: #a89a86;
    --text-faint: #9e9180;

    --border: #453d33;
    --border-light: #3a332b;

    --tag-bg: #38312a;
    --tag-border: #4a4136;

    --band: #5c1015;
    --band-text: #f6ede4;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

/* Smooth theme change */
body,
.nav,
.footer,
.work-card,
.team-group,
.lang-details,
.tag,
.tester-chip {
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

/* --- Typography ----------------------------------------------------- */

h1, h2, h3 {
  font-weight: 600;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* --- Nav: the red site band ---------------------------------------- */

.nav {
  background: var(--band);
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(42, 15, 15, 0.25);
}

.nav-inner {
  height: 3.75rem;
}

.nav-logo-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: #fffdf8;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.nav-logo-disc img {
  width: 1.5rem;
  height: 1.5rem;
}

/* Inner pages have the bare logo img — give it the same light disc */
.nav-logo > img {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.3rem;
  background: #fffdf8;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Inner pages: the back link sits on the band */
.nav-back {
  color: rgba(255, 255, 255, 0.85);
}

.nav-back:hover {
  color: #fff;
}

.nav-logo-text {
  color: var(--band-text);
  font-size: 1.05rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.9);
}

.nav-links a:hover {
  color: #fff;
}

.nav .lang-switcher {
  background: rgba(255, 255, 255, 0.14);
}

.nav .lang-btn {
  color: rgba(255, 255, 255, 0.92);
}

.nav .lang-btn:hover {
  color: #fff;
}

.nav .lang-btn[aria-checked="true"],
.nav .lang-btn[aria-current="page"] {
  background: #fffdf8;
  color: var(--band);
  box-shadow: none;
}

/* Inner pages: the back link sits with the other actions, so it gets the same
   quiet weight as a nav link rather than reading as the page's main control. */
.nav-actions .nav-back {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-actions .nav-back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle .stroke {
  background: var(--band-text);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition-fast);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Thumb-sized on touch only — see the same block in layout.css */
@media (pointer: coarse) {
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
}

.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-icon-sun { display: none; }
}

/* Tight screens: the disc logo is enough */
@media (max-width: 520px) {
  .nav-logo-text {
    display: none;
  }
  .nav-inner {
    gap: 0.5rem;
  }
}

/* Mobile menu panel: paper, not band. Same breakpoint as the drawer itself. */
@media (max-width: 1119px) {
  .nav-links {
    background: var(--bg-card);
  }
  .nav-links a {
    color: var(--text-mid);
    border-bottom-color: var(--border-light);
  }
  .nav-links a:hover {
    color: var(--accent);
  }
}

/* --- Welcome: the work blurb --------------------------------------- */

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

/* The blurb sits open on the paper — no box around it */
.work-card {
  max-width: 760px;
}

.work-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.work-head .welcome-logo img {
  width: 60px;
  height: 60px;
}

/* On dark paper the maroon logo needs its own light disc */
[data-theme="dark"] .work-head .welcome-logo {
  background: #f6ede4;
  border-radius: 50%;
  padding: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .work-head .welcome-logo {
    background: #f6ede4;
    border-radius: 50%;
    padding: 12px;
  }
}

.work-title h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent);
}

.work-formerly {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}

.work-byline {
  margin-top: 0.15rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-display);
}

/* Work meta — the archive's label column with underlined tag text */
.work-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 2rem;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.work-meta dt {
  font-weight: 600;
  color: var(--text-mid);
}

.work-meta dd {
  margin: 0;
  color: var(--text-mid);
}

.tag {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--text-mid);
}

/* Links in the meta rows read like tags, not like buttons */
.work-meta dd a {
  color: var(--text-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.work-meta dd a:hover {
  color: var(--accent);
}

.meta-stats .msp {
  white-space: nowrap;
  margin-right: 1.1rem;
}

.meta-stats .msp > span {
  color: var(--text-muted);
}

.meta-stats .cstat-num {
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

@media (max-width: 560px) {
  .work-meta {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .work-meta dt:not(:first-child) {
    margin-top: 0.6rem;
  }
}

.cstat-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

.cstat-updated-line {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: var(--text-faint);
}

/* Summary paragraph — no label, it speaks for itself */
.work-summary-p {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 62ch;
  color: var(--text-mid);
  margin-bottom: var(--space-lg);
}

/* --- The demo word -------------------------------------------------- */

/* Lives in the guide, right under the tap-to-translate step */
.work-demo {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-xl);
  max-width: 560px;
}

.demo-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--text);
}

.demo-word {
  font: inherit;
  color: inherit;
  padding: 0 0.1em;
  border-radius: 4px;
  background: rgba(179, 38, 30, 0.12);
  box-shadow: inset 0 -2px 0 var(--learning);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.demo-word:hover {
  background: rgba(179, 38, 30, 0.22);
}

.demo-word.is-learned {
  background: var(--learned-pale);
  box-shadow: inset 0 -2px 0 var(--learned);
}

.demo-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.demo-pop {
  position: absolute;
  z-index: 5;
  left: var(--space-lg);
  top: calc(100% - 1.4rem);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 3rem));
  background: #2b2320;
  color: #f3ece2;
  border-radius: 8px;
  padding: 0.9rem 1rem 0.8rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .demo-pop {
  background: #17130f;
}

.demo-pop-word {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.demo-pop-trans {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0b9ae;
  margin-bottom: 0.35rem;
}

.demo-pop-trans::before {
  content: "\2192\00A0";
  font-weight: 400;
  color: rgba(243, 236, 226, 0.5);
}

/* All meanings — collapsible, like in the app */
.demo-pop-meanings {
  margin-bottom: 0.55rem;
}

.demo-pop-meanings summary {
  font-size: 0.78rem;
  color: rgba(243, 236, 226, 0.55);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.demo-pop-meanings summary::-webkit-details-marker {
  display: none;
}

.demo-pop-meanings summary::before {
  content: "\25BE\00A0";
  display: inline-block;
  transition: transform var(--transition-fast);
}

.demo-pop-meanings[open] summary::before {
  transform: rotate(180deg);
}

.demo-pop-meanings p {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: rgba(243, 236, 226, 0.85);
  max-width: none;
}

/* Sentence translation with the word highlighted */
.demo-pop-sentence {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(243, 236, 226, 0.9);
  border-top: 1px solid rgba(243, 236, 226, 0.12);
  padding-top: 0.55rem;
  margin-bottom: 0.3rem;
  max-width: none;
}

.demo-pop-sentence mark {
  background: transparent;
  color: #f0b9ae;
  font-weight: 700;
}

.demo-pop-original {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(243, 236, 226, 0.45);
  margin-bottom: 0.7rem;
  max-width: none;
}

.demo-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-close {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(243, 236, 226, 0.8);
  background: rgba(243, 236, 226, 0.1);
  padding: 0.32rem 1.1rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.demo-close:hover {
  background: rgba(243, 236, 226, 0.2);
}

.demo-add {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #990000;
  padding: 0.32rem 1.1rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.demo-add:hover {
  background: #b32d2d;
}

/* --- Store badges (official brand lockups) --------------------------- */

.download-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: opacity var(--transition-fast);
}

.store-badge:hover {
  opacity: 0.85;
}

.store-badge img {
  display: block;
  width: auto;
}

/* All three artworks are trimmed to their button, so one height lines them up.
   Chrome's is a hair taller because its PNG keeps a thin white plate. */
.store-badge--apple img { height: 42px; }
.store-badge--google img { height: 42px; }
.store-badge--chrome img { height: 44px; }

/* Direct-APK line — bigger than the small links so people actually see it */
.apk-line {
  margin: var(--space-lg) 0 0.5rem;
  font-size: 1rem;
  color: var(--text-mid);
}

.apk-line .apk-download {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.apk-line .apk-download:hover {
  color: var(--accent-light);
}

.store-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.store-btn--primary svg {
  color: #fff;
}

.store-btn--primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

[data-theme="dark"] .store-btn--primary {
  color: #211d19;
}

[data-theme="dark"] .store-btn--primary svg {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-btn--primary,
  :root:not([data-theme="light"]) .store-btn--primary svg {
    color: #211d19;
  }
}

/* --- Author's note (disclaimer) -------------------------------------- */

.authors-note {
  max-width: var(--container-max);
  margin-inline: auto;
  border-left: 2px solid var(--border);
  padding-left: var(--space-lg);
}

.authors-note-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.section-disclaimer .disclaimer-text {
  border: none;
  text-align: left;
  padding-inline: 0;
  margin: 0;
  font-size: 0.92rem;
  font-style: normal;
  color: var(--text-mid);
}

/* --- Guide: chapters -------------------------------------------------- */

.guide-step-number {
  display: inline-flex;
  align-items: baseline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.guide-step-number::after {
  content: ".";
}

.guide-step-header h3 {
  font-size: 1.2rem;
}

/* Landing guide: compact two-column steps — text left, small shot right.
   grid-areas keep the header content-sized so tall phone shots don't push
   an empty gap between the title and the paragraph. */
#guide .guide-step {
  display: grid;
  grid-template-columns: 1fr minmax(0, 150px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head shot"
    "body shot";
  align-items: start;
  column-gap: 2rem;
  margin-bottom: var(--space-lg);
}

#guide .guide-step-header {
  grid-area: head;
  margin-bottom: 0.5rem;
}

#guide .guide-step p {
  grid-area: body;
  padding-left: 0;
  max-width: 52ch;
  margin-bottom: 0;
  font-size: 0.92rem;
}

/* Stack on narrow screens */
@media (max-width: 640px) {
  #guide .guide-step {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "shot";
  }
}

/* --- Tips: numbered cards --------------------------------------------- */

.tips-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  counter-reset: tip;
  margin-top: var(--space-lg);
}

.tips-teaser li {
  counter-increment: tip;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-lg);
  position: relative;
}

.tips-teaser li::before {
  content: counter(tip);
  position: static;
  display: block;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.tips-teaser li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.tips-teaser li span {
  font-size: 0.92rem;
  color: var(--text-mid);
}

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

.about-content p {
  font-size: 1.02rem;
}

/* --- Comments (store reviews) ------------------------------------------ */

/* A literal AO3 comment thread: a bordered box per comment, a shaded
   heading bar with name, where it was left and the date in AO3's own
   format, the default user icon on the left, text beside it. Creator
   replies nest one level in, like AO3 threads. */
.comment-list,
.comment-thread {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list {
  max-width: 46rem;
}

.comment {
  display: grid;
  /* icon column includes the icon's own left inset */
  grid-template-columns: calc(56px + 0.75rem) 1fr;
  column-gap: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.comment > :last-child {
  margin-bottom: 0.75rem;
}

.comment-head {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--tag-bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.comment-name {
  font-weight: 700;
  color: var(--accent);
}

.comment-head time {
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
}

.comment-icon {
  grid-column: 1;
  grid-row: 2 / span 2;
  width: 56px;
  height: 56px;
  margin: 0.75rem 0 0 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.comment-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--text-faint);
}

.comment-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-text {
  grid-column: 2;
  margin: 0.75rem 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
}

.comment-note {
  grid-column: 2;
  margin: var(--space-xs) 0.75rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-faint);
}

.comment-note:empty {
  display: none;
}

.comment-thread {
  grid-column: 1 / -1;
  margin: 0.75rem 0.75rem 0 2.5rem;
}

.comment-thread .comment {
  margin-bottom: 0;
}

/* The logo is drawn for a light plate, same as the header mark */
.comment--creator .comment-icon {
  background: #faf6ee;
}

.comment-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: 0.92rem;
  color: var(--text-mid);
}

/* AO3's small action buttons (Reply, Thread, Kudos row) */
.comment-btn {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--tag-border);
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

@media (max-width: 560px) {
  .comment {
    grid-template-columns: calc(40px + 0.75rem) 1fr;
    column-gap: 0.75rem;
  }

  .comment-icon {
    width: 40px;
    height: 40px;
  }

  .comment-thread {
    margin-left: 1rem;
  }
}

/* --- Team --------------------------------------------------------------- */

.team-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.team-group-label {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

.team-list li {
  border-color: var(--border-light);
}

/* --- Testers: a wall of tags ------------------------------------------- */

/* Testers read as an archive tag list, the same idiom as the tags in the
   blurb above: underlined names separated by commas, not boxed chips. */
.testers-cloud {
  display: block;
  text-align: left;
  font-size: 0.95rem;
  line-height: 2;
}

.tester-chip {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
  color: var(--text-mid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

/* Plain inline comma plus a space: as its own inline box (inline-block with a
   margin) it used to wrap alone onto the next line. */
.tester-chip:not(:last-child)::after {
  content: ", ";
  text-decoration: none;
}

.tester-chip:hover {
  color: var(--accent);
}

/* --- Kudos -------------------------------------------------------------- */

/* Even padding: the 5rem bottom plus the box padding plus the footer's own
   margin left about 160px of empty paper under the button. */
.section-kudos {
  padding-block: var(--space-xl);
}

.kudos-box {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-md) 0 0;
}

.kudos-lead {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 auto var(--space-md);
}

.kudos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

[data-theme="dark"] .kudos-btn {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kudos-btn {
    color: #211d19;
  }
}

.kudos-btn:hover {
  background: var(--accent-light);
}

.kudos-btn.is-kudosed svg {
  animation: kudos-pop 500ms ease;
}

@keyframes kudos-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

.kudos-note {
  margin: var(--space-md) auto 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.kudos-review {
  margin: var(--space-sm) auto 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 40ch;
}

.kudos-review a {
  font-weight: 600;
  white-space: nowrap;
}

/* --- Language accordions ------------------------------------------------ */

/* The list is prose, not controls — see components.css. Only the reader's own
   language is marked, and it is marked with weight and colour, not a box. */
.lang-details .lang-list li.lang-highlight {
  color: var(--accent);
}

/* "new" badge on freshly-added reading languages */
.lang-new {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  vertical-align: 0.1em;
  line-height: 1.4;
}

[data-theme="dark"] .lang-new {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-new {
    color: #211d19;
  }
}

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

.footer {
  background: var(--band);
  color: rgba(255, 255, 255, 0.75);
}

.footer-brand p,
.footer-col a,
.footer-bottom {
  color: rgba(255, 255, 255, 0.8);
}

.footer-col h4 {
  color: rgba(255, 255, 255, 0.9);
}

.footer-col .social-link svg {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Quieter hovers (override the originals) ------------------------------ */

.social-chip:hover,
.footer-col .social-link:hover svg {
  transform: none;
}

/* --- Dark theme fine-tuning ---------------------------------------------- */

[data-theme="dark"] .nav {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text-mid);
}

/* base.css sets body colors from vars, this is just belt and suspenders */

/* --- AO3 maintenance notice (index) -------------------------------- */

.outage-banner {
  background: var(--accent-pale2);
  border-bottom: 1px solid var(--border);
}

.outage-banner a {
  display: block;
  padding: 0.85rem 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.5;
}

.outage-banner a span {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outage-banner a span[aria-hidden] {
  text-decoration: none;
}

.outage-banner a:hover span {
  color: var(--accent-light);
}