/*
  ============================================================================
  Remembering-Austin.org — stylesheet / hoja de estilos
  ============================================================================

  STRUCTURE / STRUCTURE
    01  Palette and type      04  Header             07  Story cards (home)
    02  Reset and base        05  Home page          08  Story pages
    03  Language switching    06  The counter        09  Footer, motion

  The palette is taken from the memorial's own mark: the deep green ground and
  the red of "-Austin." Dark is the default; the light theme is the same rooms
  with the lamps on, never a different site.
  La paleta procede de la marca del sitio: el verde profundo y el rojo de
  «-Austin.». El tema oscuro es el predeterminado; el claro es el mismo lugar,
  iluminado.
  ============================================================================
*/

/* ---------------------------------------------------------------------------
   01  Palette and type / Palette et typographie
--------------------------------------------------------------------------- */
:root {
  /* Raw palette / Palette brute */
  --paper:   #F7F4EE;  /* warm off-white — the ground of the light theme      */
  --paper-2: #ECE7DC;  /* a shade deeper, for inset surfaces                  */
  --pine:    #0E1512;  /* near-black with green in it                         */
  --pine-2:  #141D19;  /* the raised surface on dark ground                   */
  --forest:  #0B5A2E;  /* the green of the mark — the light theme's accent    */
  --leaf:    #6FCF97;  /* the same green lifted to read on a dark ground      */
  --ember:   #E1564C;  /* the red of "-Austin." — reserved for the count      */
  --ember-d: #B3261E;  /* the same red, darkened to hold contrast on paper    */

  /* Typography / Typographie */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm / Rythme — one page gutter, one reading measure. */
  --edge: clamp(1.25rem, 5vw, 5rem);
  --measure: 64ch;
  --rule: 1px;

  /* Dark is the bare :root, so a page still reads correctly in the moment
     before scripting sets data-theme.
     El :root desnudo es el tema oscuro: la página se lee bien antes del script. */
  color-scheme: dark;
  --bg: var(--pine);
  --bg-2: var(--pine-2);
  --ink: #F2F0EA;
  --ink-dim: #CFCEC7;
  --muted: #8E948E;
  --accent: var(--leaf);
  --accent-bright: #93E0B4;
  --count: var(--ember);
  --line: rgba(242, 240, 234, 0.16);
  --line-soft: rgba(242, 240, 234, 0.08);
  --focus: var(--leaf);
}

:root[data-theme="light"] {
  /* Render the browser's own widgets light too: scrollbars, form interiors.
     Que los widgets del navegador se rendericen también en claro. */
  color-scheme: light;
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --ink: var(--pine);
  --ink-dim: #2E3A33;
  --muted: #5F6B62;
  --accent: var(--forest);
  --accent-bright: #084423;
  --count: var(--ember-d);
  --line: rgba(14, 21, 18, 0.16);
  --line-soft: rgba(14, 21, 18, 0.07);
  --focus: var(--forest);
}

/* ---------------------------------------------------------------------------
   02  Reset and base / Réinitialisation et base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 { color: var(--ink); font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.15; }

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-bright); }

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

/* Skip link, visible only once focused. / Enlace de salto, visible al enfocar. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--bg-2); color: var(--ink);
  padding: 0.7rem 1.1rem; border: var(--rule) solid var(--line);
  font-family: var(--font-mono); font-size: 0.75rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.shell { flex: 1 0 auto; width: 100%; }

/* ---------------------------------------------------------------------------
   03  Language switching / Cambio de idioma

   Both languages sit in the markup; CSS shows one and hides the other. With
   scripting off there is no data-lang attribute, so the `:not()` rule leaves
   English standing rather than stacking both languages on top of each other.
   Los dos idiomas están en el marcado; el CSS muestra uno. Sin JavaScript no
   hay atributo data-lang: la regla `:not()` deja el inglés solo.
--------------------------------------------------------------------------- */
:root[data-lang="en"] .l-es,
:root[data-lang="es"] .l-en,
:root:not([data-lang]) .l-es { display: none !important; }

/* ---------------------------------------------------------------------------
   04  Header / Encabezado

   The mark sits at the left; the language pair and the theme icon sit at the
   right of it. Nothing here carries a word it does not need.
   La marca a la izquierda; los idiomas y el icono de tema a su derecha.
--------------------------------------------------------------------------- */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
  flex-wrap: wrap;
  padding: 1.1rem var(--edge);
  border-bottom: var(--rule) solid var(--line-soft);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img {
  display: block;
  width: clamp(190px, 30vw, 290px);
  height: auto;
  border-radius: 3px;
}

.controls { display: flex; align-items: center; gap: 1rem; }

.lang { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; }
.lang-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font: inherit; letter-spacing: inherit;
  text-transform: uppercase; padding: 0.35rem 0.2rem;
  transition: color 0.25s ease;
}
.lang-btn[aria-pressed="true"] { color: var(--accent); }
.lang-btn:hover { color: var(--ink); }
.lang-div { color: var(--line); }

.theme-btn {
  background: none; border: var(--rule) solid var(--line); color: var(--ink);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(-18deg); }
.theme-btn svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: none; }
:root[data-theme="light"] .theme-btn .ic-moon { display: none; }
/* No data-theme means scripting has not run, and bare :root is dark — show the
   moon, as the dark theme does, or both icons would render at once.
   Sans data-theme, le fond est sombre : afficher la lune, sinon les deux
   icônes s'afficheraient ensemble. */
:root:not([data-theme]) .theme-btn .ic-sun { display: none; }

/* ---------------------------------------------------------------------------
   05  Home page / Portada — left aligned, one column
--------------------------------------------------------------------------- */
main { display: block; }

.page {
  max-width: 780px;
  margin: 0;
  padding: clamp(1.8rem, 5vh, 3rem) var(--edge) clamp(3rem, 8vh, 5rem);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

h1.headline {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 700;
  margin: 0 0 1.3rem;
  text-wrap: balance;
}

.intro p {
  font-size: 1.1rem;
  line-height: 1.78;
  margin: 0 0 1.2rem;
  max-width: var(--measure);
}
.intro p strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   06  The counter / El contador

   The number is not a display object. It is one highlighted word inside a
   sentence about missing him, and it reads as part of that sentence.
   El número no es un objeto de exhibición: es una palabra destacada dentro de
   una frase sobre su ausencia, y se lee como parte de ella.
--------------------------------------------------------------------------- */
.remembrance {
  max-width: var(--measure);
  margin: 2.2rem 0 2.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--count);
}
.remembrance p { font-size: 1.12rem; line-height: 1.75; margin: 0; color: var(--ink-dim); }
.days {
  color: var(--count);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Until the number is filled in, the sentence must not read as though a word
   were missing — so the whole clause is held back one moment.
   Tant que le nombre n'est pas calculé, la proposition reste masquée. */
.count-clause[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   07  Story cards on the home page / Tarjetas de relatos
--------------------------------------------------------------------------- */
.stories-head {
  margin: 3rem 0 1.4rem;
  padding-top: 1.6rem;
  border-top: var(--rule) solid var(--line);
}
.stories-head h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 0.5rem; }
.stories-head p { max-width: var(--measure); margin: 0; color: var(--muted); }

.story-list { list-style: none; margin: 0; padding: 0; }

.story-item { border-bottom: var(--rule) solid var(--line-soft); }
.story-item a {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.35rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.25s ease;
}
.story-item a:hover { opacity: 0.78; }
.story-item .thumb {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 4px;
  border: var(--rule) solid var(--line-soft);
}
.story-item h3 { font-size: 1.22rem; margin: 0 0 0.35rem; }
.story-item p { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--ink-dim); max-width: var(--measure); }
.story-item .go { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* ---- The closing block of text that carries the two links ----
   El bloque final de texto que lleva los dos enlaces. */
.elsewhere {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: var(--rule) solid var(--line);
}
.elsewhere p { max-width: var(--measure); margin: 0 0 1rem; }
.elsewhere a { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   08  Story pages / Páginas de relato
--------------------------------------------------------------------------- */
.article { max-width: 780px; margin: 0; padding: clamp(1.8rem, 5vh, 3rem) var(--edge) clamp(3rem, 8vh, 5rem); }

.back {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  margin-bottom: 1.4rem;
}
.back:hover { color: var(--accent); }

.article h1 { font-size: clamp(1.9rem, 5.2vw, 3rem); font-weight: 700; margin: 0 0 1rem; text-wrap: balance; }

.article .standfirst {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.62;
  font-style: italic;
  color: var(--ink-dim);
  max-width: var(--measure);
  padding-bottom: 1.5rem;
  margin: 0 0 1.9rem;
  border-bottom: var(--rule) solid var(--line);
}

.article p { font-size: 1.08rem; line-height: 1.78; margin: 0 0 1.15rem; max-width: var(--measure); }
.article p strong { color: var(--ink); font-weight: 600; }
.article em { font-style: italic; }

/* ---- Photographs inside the story / Photographies dans le récit ----
   A figure sits in the flow of the reading it belongs to, at full size, with a
   caption that says something the paragraph does not. Nothing is hidden behind
   a click. / Una figura se sitúa en el hilo del texto, a tamaño completo, con
   un pie que añade algo al párrafo. Nada se esconde tras un clic. */
.article figure { margin: 2.1rem 0; max-width: 100%; }
.article figure img { display: block; width: 100%; border-radius: 5px; border: var(--rule) solid var(--line-soft); }
.article figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

/* Two photographs that belong to one moment sit side by side, and stack on a
   narrow screen. / Dos fotos de un mismo momento, una al lado de la otra, y
   apiladas en pantalla estrecha. */
.figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 560px) { .figpair { grid-template-columns: 1fr; } }

/* A portrait-shaped image would otherwise tower over the column.
   Una imagen vertical dominaría la columna. */
.article figure.portrait img { max-width: 420px; }

.article .end {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--line);
}
.article .end p { color: var(--muted); }

/* ---------------------------------------------------------------------------
   09  Footer and motion / Pie de página y movimiento
--------------------------------------------------------------------------- */
footer.site {
  padding: 1.8rem var(--edge) 2.2rem;
  border-top: var(--rule) solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
footer.site .sep { color: var(--line); }
/* The footer sets everything in caps; a web address reads better as written.
   El pie va en mayúsculas; una dirección web se lee mejor tal cual. */
footer.site .url { text-transform: lowercase; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--accent); }

/* Elements arrive once, staggered, on first scroll into view. Only opacity and
   transform are animated, so nothing triggers layout.
   Los elementos aparecen una sola vez, escalonados, al primer desplazamiento. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* Scripting off: the reveal never fires, so the content must start visible.
   Sin JavaScript la aparición no se dispara: el contenido queda visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}