/*
  ============================================================================
  RememberingAustin.ca — stylesheet / feuille de style
  ============================================================================

  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 palette vient de la marque du site : le vert profond et le rouge d'« -Austin ».
  Le thème sombre est le défaut ; le thème clair est le même lieu, éclairé.
  ============================================================================
*/

/* ---------------------------------------------------------------------------
   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.
     Le thème sombre est le :root nu : la page reste correcte avant le 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.
     Rendre aussi les widgets du navigateur en clair. */
  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. / Lien d'évitement, visible au focus. */
.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 / Changement de langue

   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.
   Les deux langues sont dans le balisage ; le CSS en affiche une. Sans script,
   aucun attribut data-lang : la règle `:not()` laisse l'anglais seul.
--------------------------------------------------------------------------- */
:root[data-lang="en"] .l-fr,
:root[data-lang="fr"] .l-en,
:root:not([data-lang]) .l-fr { display: none !important; }

/* ---------------------------------------------------------------------------
   04  Header / En-tête

   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 marque à gauche ; les langues et l'icône de thème à sa droite.
--------------------------------------------------------------------------- */
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 / Page d'accueil — 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 / Le compteur

   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.
   Le nombre n'est pas un objet d'affichage : c'est un mot mis en évidence dans
   une phrase sur son absence, et il se lit comme tel.
--------------------------------------------------------------------------- */
.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 / Cartes de récits
--------------------------------------------------------------------------- */
.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 ----
   Le bloc de texte final qui porte les deux liens. */
.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 / Pages de récit
--------------------------------------------------------------------------- */
.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. / Une figure prend place dans le fil du texte, en pleine taille,
   avec une légende qui ajoute au paragraphe. Rien n'est caché derrière 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. / Deux photos d'un même moment côte à côte, empilées sur
   écran étroit. */
.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.
   Une image en portrait dominerait la colonne. */
.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 / Pied de page et mouvement
--------------------------------------------------------------------------- */
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.
   Le pied de page est en majuscules ; une adresse web se lit mieux telle quelle. */
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.
   Les éléments arrivent une fois, en cascade, au premier défilement. */
.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.
   Sans script : la révélation ne se déclenche pas, le contenu reste 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; }
}