/* Park Row Magazine — du papier froissé, lettré comme un panneau de rue.
   Noir sur papier ; pas d'ombre portée, pas d'effet : des filets et des caractères.
   Le papier est une photo (img/paper.jpg) fixée derrière la page :
   « Crumpled paper texture background » de Beyzanur K., pexels.com/photo/28380286,
   licence Pexels (usage libre, sans mention obligatoire). */

:root {
  --paper: #c1c0bd;
  --ink: #171310;
  --ink-soft: #5c5752;
  --paper-filter: none;

  /* Overpass : la version libre de la Highway Gothic des panneaux américains */
  --sign: 'Overpass', 'Highway Gothic', 'Helvetica Neue', Arial, sans-serif;
}

/* La nuit : la même feuille, en papier noir, et l'encre devient blanche.
   La photo est simplement inversée (les plis restent exactement les mêmes). */
:root[data-theme="dark"] {
  --paper: #333336;
  --ink: #efe6d3;
  --ink-soft: #aaa196;
  --paper-filter: invert(1) hue-rotate(180deg) brightness(.8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #333336;
    --ink: #efe6d3;
    --ink-soft: #aaa196;
    --paper-filter: invert(1) hue-rotate(180deg) brightness(.8);
  }
}

/* La police du titre : GreekHouse Symbolized (fonts/greekhouse-symbolized.ttf, © NS Marketing 2006) */
@font-face {
  font-family: 'GreekHouse Symbolized';
  src: url("../fonts/greekhouse-symbolized.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* La police du texte des articles : Old Newspaper Types (fonts/old-newspaper-types.ttf, © M. Klein).
   Pas d'italique dessiné : le navigateur penche les lettres lui-même. */
@font-face {
  font-family: 'Old Newspaper Types';
  src: url("../fonts/old-newspaper-types.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

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

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font: 400 17.5px/1.6 var(--sign);
  -webkit-font-smoothing: antialiased;
}

/* La photo de papier, fixée derrière tout le reste (la page défile par-dessus) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper) url("../img/paper.jpg") center / cover no-repeat;
  filter: var(--paper-filter);
}

@media (prefers-reduced-motion: no-preference) {
  body { transition: color .25s; }
  body::before { transition: filter .35s; }
}

a { color: inherit; }

/* ---------- La page ---------- */

.page {
  max-width: 920px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 56px 40px;
}

.rule--double {
  height: 5px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- La manchette ---------- */

.masthead { margin-bottom: 44px; }

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  margin-top: 12px;
}

.masthead-right {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
}

.brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  text-decoration: none;
  white-space: nowrap;
}

/* Le bouton jour / nuit : un mot, comme un lien de la nav */
.mode {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: 700 11px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .22em;
  white-space: nowrap;
}
.mode:hover,
.mode:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.mode-night { display: none; }
:root[data-theme="dark"] .mode-day { display: none; }
:root[data-theme="dark"] .mode-night { display: inline; }

/* Dans cette police, les lettres latines sont sur les minuscules (les majuscules
   donnent l'alphabet grec) : le titre est donc écrit en minuscules dans le HTML */
.brand-name {
  font: 400 76px/1 'GreekHouse Symbolized', var(--sign);
  text-transform: none;
  letter-spacing: .04em;
}

.brand-sub {
  font: 700 12px/1 var(--sign);
  text-transform: uppercase;
  letter-spacing: .32em;
}

.nav {
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 13px 0 11px;
  text-align: center;
  font: 700 13px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .24em;
}

.nav a { padding: 0 2px; text-decoration: none; }

.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.star { margin: 0 24px; font-size: 15px; }

/* Pages intérieures : manchette réduite sur une ligne */
.masthead--compact { margin-bottom: 30px; }
.masthead--compact .masthead-row { margin-top: 10px; }
.masthead--compact .brand-name { font-size: 32px; }

.nav--inline {
  border: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: .2em;
}

.nav--inline .star { margin: 0 12px; font-size: 12px; }

/* ---------- Accueil ---------- */

/* La manchette : le titre remplit la largeur, « MAGAZINE » dessous,
   le bouton jour / nuit posé dans le coin */
.masthead--center .masthead-row {
  position: relative;
  display: block;
  margin-top: 18px;
  text-align: center;
}
.masthead--center .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.masthead--center .brand-name {
  font-size: clamp(48px, 11.6vw, 124px);
  letter-spacing: .06em;
  white-space: nowrap;
}
.masthead--center .brand-sub { letter-spacing: .5em; margin-left: .5em; }

}

/* La citation du numéro */
/* La citation du numéro : en italique, centrée, son auteur dessous */
.quote {
  max-width: 30em;
  margin: 36px auto 0;
  text-align: center;
  text-wrap: balance;
}

.quote p {
  margin: 0;
  font: italic 400 21px/1.5 'Old Newspaper Types', 'Times New Roman', Times, serif;
}

.quote-credit {
  margin-top: 10px;
  text-align: center;
  font: 700 11px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft);
}

/* Les articles en bandeau : une image large, le titre dessous, le crédit en face */
.stories {
  display: grid;
  gap: 44px;
  margin-top: 44px;
}

.story-image {
  display: block;
  aspect-ratio: 21 / 8;
  overflow: hidden;
}

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

.frame--story { aspect-ratio: 21 / 8; }

/* La source de l'image, en petit sous le bandeau */
.story-source {
  margin: 6px 0 0;
  text-align: right;
  font: 400 11px/1.4 var(--sign);
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.story-source + .story-head { margin-top: 6px; }

.story-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: 14px;
}

.story-title {
  margin: 0;
  font: 700 22px/1.25 var(--sign);
}

.story-title a { text-decoration: none; }
.story-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.story-credit {
  margin: 0;
  font: 400 12px/1.4 var(--sign);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.story-lede {
  max-width: 46em;
  margin: 8px 0 0;
  font-size: 16px;
}

.more {
  font: 800 18px/1 var(--sign);
  letter-spacing: .12em;
  text-decoration: none;
}

.more:hover,
.more:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- Un article ---------- */

.article {
  max-width: 680px;
  margin: 0 auto;
}

.article-head {
  margin: 34px 0 30px;
  text-align: center;
}

.article-kicker {
  margin: 0 0 14px;
  font: 700 11px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--ink-soft);
}

.article-title {
  margin: 0;
  font: 800 clamp(32px, 6vw, 54px)/1.05 var(--sign);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.article-byline {
  margin: 16px 0 0;
  font: 700 12px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .24em;
}

/* Le texte courant des articles, en caractères de vieux journal */
.article p {
  margin: 0 0 1.25em;
  font-family: 'Old Newspaper Types', 'Times New Roman', Times, serif;
  font-size: 18px;
  line-height: 1.6;
}

.article .epigraph p { font-family: 'Old Newspaper Types', 'Times New Roman', Times, serif; }

.article h2 {
  margin: 48px 0 18px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  font: 800 24px/1.2 var(--sign);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.article blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--ink);
}

.article blockquote p { margin: 0; }

.article blockquote footer {
  margin-top: 10px;
  font: 700 11px/1.6 var(--sign);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft);
}

/* L'épigraphe : le poème cité en tête d'article, puis sa source */
.article .epigraph { margin: 0 0 36px; }
.article .epigraph p { font-style: italic; font-size: 16px; line-height: 1.55; }
.article .epigraph p + p { margin-top: 14px; }
.article .epigraph footer {
  margin-top: 14px;
  font: 400 13px/1.5 var(--sign);
  text-transform: none;
  letter-spacing: .02em;
}

.noteref { font-size: .7em; line-height: 0; }
.noteref a { text-decoration: none; }
.noteref a:hover { text-decoration: underline; }

.fig { margin: 32px 0; }
.fig--lead { margin-top: 0; }
.fig--narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.fig--portrait { max-width: 250px; margin-left: auto; margin-right: auto; }

.fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* Plusieurs images : des cases de même taille, bord à bord, comme dans le PDF */
.fig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fig-grid img {
  aspect-ratio: var(--cell, 4 / 3);
  object-fit: cover;
}

.fig figcaption {
  margin-top: 8px;
  font: 400 12px/1.5 var(--sign);
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-align: center;
}

.notes {
  margin-top: 48px;
  font-size: 13px;
  color: var(--ink-soft);
}

.notes ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.notes li { margin: 0 0 6px; }
.notes a { text-decoration: none; }
.notes a:hover { text-decoration: underline; }

.frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0 0 18px;
  border: 1px solid var(--ink);
  font: 400 13px/1 var(--sign);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.button {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 36px;
  border: 2px solid var(--ink);
  font: 700 15px/1 var(--sign);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
}

.button:hover { background: var(--ink); color: var(--paper); }

.foot {
  margin-top: 56px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  text-align: right;
  font: 800 20px/1 var(--sign);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ---------- Pages intérieures ---------- */

.giant {
  margin: 0;
  padding: 18px 0 8px;
  text-align: center;
  font: 800 clamp(64px, 17vw, 156px)/1 var(--sign);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* La page Issues : le numéro et ses articles en caractères de vieux journal */
.issue-head {
  margin: 36px 0 12px;
  text-align: center;
  font: 400 30px/1.2 'Old Newspaper Types', 'Times New Roman', Times, serif;
}

.issue-head .pdf {
  margin-left: 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}

.issue-head .pdf:hover { text-decoration: underline; }

.articles {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font: 400 23px/2.3 'Old Newspaper Types', 'Times New Roman', Times, serif;
}

.articles a { text-decoration: none; }
.articles a:hover { text-decoration: underline; }

.minor {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 40px 0 0;
}

.minor h2 { margin: 0 0 6px; font: 700 25px/1.2 var(--sign); }

.minor ul {
  margin: 0;
  padding: 0 0 0 56px;
  list-style: none;
  font: 700 16px/1.5 var(--sign);
}

.minor .arrow { display: block; width: 72px; height: 54px; }
.minor .arrow svg { display: block; width: 100%; height: 100%; }

.statement {
  margin: 28px 0 0;
  text-align: center;
  font: 400 20px/1.4 var(--sign);
}

.roles {
  margin: 150px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font: 700 28px/1.4 var(--sign);
}

/* La galerie : toutes les images des articles, en cases égales */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 20px;
  margin-top: 40px;
}

.tile { margin: 0; }

.tile a { display: block; }

.tile img {
  display: block;
  width: 100%;
  height: auto; /* sinon l'attribut height de l'image l'emporte sur le rapport */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tile figcaption {
  margin-top: 8px;
  font: 400 12px/1.5 var(--sign);
  letter-spacing: .04em;
}

.tile-from {
  display: block;
  color: var(--ink-soft);
}

.tile-from a { text-decoration: none; }
.tile-from a:hover { text-decoration: underline; }

.plain {
  margin: 36px 0 0;
  text-align: center;
  font: 400 20px/1.5 var(--sign);
}

/* ---------- Petits écrans ---------- */

@media (max-width: 700px) {
  .page { padding: 16px 18px 32px; }
  .brand-name { font-size: 42px; }
  .nav { font-size: 11px; letter-spacing: .16em; }
  .star { margin: 0 10px; }
  .masthead--compact .brand-name { font-size: 28px; }
  .nav--inline .star { margin: 0 8px; }
  .masthead--center .mode { position: static; display: block; margin: 10px auto 0; }
  .story-image, .frame--story { aspect-ratio: 16 / 9; }
  .article h2 { font-size: 21px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .roles { margin-top: 90px; font-size: 23px; }
  .minor { gap: 20px; }
  .minor ul { padding-left: 24px; }
}