/* ==========================================================================
   Fiche « récit » : un monument qu'on apprend à lire (Wat Chedi Luang).
   Chargée par cette fiche seulement, après place.css, dont elle reprend la
   photo annotée, le plan et les marques de statut des dates.

   Deux teintes locales, tirées du sujet et réservées à leur bloc :
   - la brique du chedi, pour l'élévation, la chronique et les filets
     (6,7:1 sur blanc, 6,1:1 sur la brume : elle porte du texte) ;
   - l'heure bleue, pour le seul reportage du 22 octobre 2026.
   Le reste est la palette du site.
   ========================================================================== */
:root {
  --c-brick: #8A4B2E;
  --c-brick-soft: #F1E6DE;
  --c-blue-hour: #17213A;
  --c-blue-hour-text: #D6DCEA;
}

/* --- Ouverture ---------------------------------------------------------------
   La photo est prise après le coucher du soleil : le chedi est à droite, le
   ciel à gauche. Le voile ne couvre que le bas et la gauche, là où est le
   texte, et laisse la lune et le sommet cassé dans leur lumière. */
@media (min-width: 768px) {
  .hero--story.hero--shot::after {
    background:
      linear-gradient(180deg, rgba(23,33,58,0) 0%, rgba(23,33,58,0) 50%, rgba(23,33,58,.7) 100%),
      linear-gradient(90deg, rgba(23,33,58,.78) 0%, rgba(23,33,58,.5) 38%, rgba(23,33,58,0) 60%);
  }
}
@media (max-width: 767px) {
  .hero--story.hero--shot::after {
    background: linear-gradient(180deg, rgba(23,33,58,0) 0%, rgba(23,33,58,.12) 34%,
                rgba(23,33,58,.62) 50%, rgba(23,33,58,.86) 68%, rgba(23,33,58,.95) 100%);
  }
}
.hero--story .place-title__name,
.hero--story .place-title__tag,
.hero--story .eyebrow { text-shadow: 0 1px 2px rgba(23,33,58,.7), 0 0 22px rgba(23,33,58,.5); }

/* --- Chapô et repères -------------------------------------------------------
   Le chapô en Fraunces, plus grand que le texte courant : c'est la seule
   prose de la page à ce corps. Les repères à droite, en registre : quatre
   lignes et un lien vers le chapitre pratique, rien d'autre. */
.story-open { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding-block: var(--sp-8); }
.story-open__inner { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) {
  .story-open__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-8); align-items: start; }
}
.story-open__intro { max-width: 38rem; }
.story-open__intro p {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.2rem, 1.9vw, 1.42rem);
  line-height: 1.55;
  color: var(--c-text);
}
.story-open__intro p:last-child { margin-bottom: 0; }
.brief { border-top: 2px solid var(--c-brick); padding-top: var(--sp-4); }
.brief__h { margin: 0 0 var(--sp-3); font-size: 15px; font-weight: 700; color: var(--c-brick); }
.brief__list { margin: 0; }
.brief__row {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-3);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--c-border);
}
.brief__row dt { font-size: 14px; font-weight: 700; color: var(--c-primary); padding-top: 1px; }
.brief__row dd { margin: 0; font-size: 15px; line-height: 1.5; }
/* L'avis, sous le chapô : le texte courant du site, pas le corps du chapô. */
.story-take { margin: var(--sp-5) 0 var(--sp-4); font-size: 18px; line-height: 1.6; max-width: 46ch; }
.story-take strong { color: var(--c-primary); }
.story-fit { display: grid; gap: var(--sp-3); margin: 0; font-size: 16px; max-width: 34rem; }
.story-fit div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-3); }
.story-fit dt { font-weight: 700; color: var(--c-primary); }
.story-fit div + div dt { color: var(--c-muted); }
.story-fit dd { margin: 0; }
@media (max-width: 559px) { .story-fit div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.brief__more { margin: var(--sp-4) 0 0; }
/* Sur place, le bouton qui mène droit au tour de l'enclos, comme sur la fiche
   Wat Phra Singh : vert Doi plein, pas safran, ce n'est pas une réservation. */
.brief__more--walk { margin-top: var(--sp-2); }
.brief__more.brief__more--walk a {
  min-height: 44px; padding: 10px var(--sp-5); border-radius: var(--r-btn);
  background: var(--c-primary); color: #fff; font-size: 15px; text-decoration: none;
}
.brief__more.brief__more--walk a:hover { background: var(--c-primary-deep); }
.brief__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--c-primary); }
@media (max-width: 479px) {
  .brief__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --- Chapitres --------------------------------------------------------------
   Un chapitre ouvre sur un grand titre et une phrase. Les chapitres se
   suivent sur la brume ; le pratique passe sur blanc, le reportage sur l'heure
   bleue. */
.chapter { padding-block: var(--sp-9) var(--sp-8); scroll-margin-top: 120px; }
.chapter + .chapter { border-top: 1px solid var(--c-border); }
.chapter--white { background: var(--c-surface); }
.chapter__head { max-width: 44rem; margin-bottom: var(--sp-7); }
.chapter__head h2 {
  margin: 0 0 var(--sp-4);
  color: var(--c-primary);
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.05;
  font-variation-settings: "opsz" 144;
  max-width: 18ch;
  text-wrap: balance;
}
.chapter__lede { margin: 0; font-size: 19px; line-height: 1.6; max-width: 36rem; }
.chapter > .container > * + * { margin-top: var(--sp-7); }
.chapter > .container > .chapter__head + * { margin-top: 0; }
@media (max-width: 639px) {
  .chapter { padding-block: var(--sp-8) var(--sp-7); }
  .chapter__lede { font-size: 17px; }
  .chapter > .container > * + * { margin-top: var(--sp-6); }
}
/* .prose est une grille à 16 px d'écart : les paragraphes n'ajoutent rien. */
.story-prose h3 { margin: var(--sp-3) 0 0; color: var(--c-primary); font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.story-prose h3:first-child { margin-top: 0; }
.story-prose p { margin: 0; }

/* L'appel de note : un petit numéro en brique, collé au mot, qui ne casse pas
   l'interligne. Il reste en ligne (pas de inline-block) : sans espace avant
   lui, il ne peut pas passer seul à la ligne suivante. */
.src-call { font-size: max(11px, .7em); line-height: 0; margin-left: 2px; white-space: nowrap; color: var(--c-muted); }
.src-call a {
  padding: .45em .3em; margin: -.45em 0; color: var(--c-brick); font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.src-call a:hover { text-decoration: underline; }
.chapter--blue .src-call a { color: var(--c-secondary-light); }

/* --- Photos -------------------------------------------------------------------- */
.story-fig { margin-inline: 0; }
.story-fig--col { max-width: 720px; }
.story-fig--tall { max-width: 440px; }
.story-fig__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--c-border); }
.story-fig figcaption, .story-pair figcaption { margin-top: var(--sp-3); max-width: 36rem; font-size: 15px; line-height: 1.55; color: var(--c-muted); }
.story-fig figcaption strong, .story-pair figcaption strong { color: var(--c-text); }
.story-pair { display: grid; gap: var(--sp-6); max-width: 900px; }
.story-pair__h { margin: 0; font-weight: 700; color: var(--c-primary); grid-column: 1 / -1; }
@media (min-width: 640px) { .story-pair { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.story-pair__fig { margin: 0; }
.story-pair__shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-card); }
.story-anno .anno { max-width: 820px; }
.story-anno .anno__cap { max-width: 40rem; }

/* --- La chronique -----------------------------------------------------------
   Une date par ligne, à gauche en Fraunces noire, couleur brique ; un filet
   vertical relie les lignes comme un joint de maçonnerie. Les marques de
   statut sont celles de la fiche Wat Phra Singh, en brique sur fond clair. */
.chron { max-width: 52rem; }
.chron__h { margin: 0 0 var(--sp-4); font-size: 15px; font-weight: 700; color: var(--c-brick); }
.chron__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-brick); }
.chron__row {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--sp-5);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5); position: relative;
}
.chron__row + .chron__row { border-top: 1px solid var(--c-border); }
.chron__row::before {
  content: ""; position: absolute; left: -7px; top: calc(var(--sp-4) + .55em);
  width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-brick);
}
.chron__row--dated::before { background: var(--c-brick); }
.chron__row--disputed::before { border-radius: 2px; background: repeating-linear-gradient(45deg, var(--c-brick) 0 2px, var(--c-bg) 2px 4px); }
/* Fraunces en 900 à opsz 144 aplatit le haut du 3, et « 1391 » se lisait
   « 1591 » à basse densité : un cran plus bas, les chiffres restent nets. */
.chron__when {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 48;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.1; color: var(--c-brick);
  font-variant-numeric: lining-nums;
}
.chron__t { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--c-primary); }
.chron__p { margin: 0 0 var(--sp-2); font-size: 16px; line-height: 1.6; }
.chron__status { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--c-muted); }
.chron__row--dated .age__mark { background: var(--c-brick); }
.chron__row--chronicle .age__mark { border: 2px dashed var(--c-brick); }
.chron__row--disputed .age__mark {
  border-radius: 3px; outline: 1px solid var(--c-brick);
  background: repeating-linear-gradient(45deg, var(--c-brick) 0 2px, transparent 2px 5px);
}
@media (max-width: 559px) {
  .chron__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding-left: var(--sp-4); }
}

/* --- La moitié manquante ----------------------------------------------------
   Le bloc fort de la page. Le schéma à gauche, les deux cotes à droite, en
   Fraunces noire à grand corps : la hauteur qui reste, en plein ; celle qu'on
   prête au chedi achevé, en contour, comme le vide du schéma. */
.elev {
  margin-inline: 0; padding: var(--sp-6); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 900px) {
  .elev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: var(--sp-7); gap: var(--sp-7); }
  .elev__cap { grid-column: 1 / -1; }
}
.elev__draw svg { display: block; width: 100%; height: auto; max-height: 620px; }
.elev__figs { display: grid; gap: var(--sp-6); }
.elev__num {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 72;
  font-size: clamp(3rem, 7vw, 5.4rem); line-height: .95; color: var(--c-brick);
  font-variant-numeric: lining-nums; letter-spacing: -.01em;
}
.elev__fig--lost .elev__num { color: transparent; -webkit-text-stroke: 2px var(--c-brick); }
@supports not (-webkit-text-stroke: 2px red) { .elev__fig--lost .elev__num { color: var(--c-brick); } }
.elev__k { margin: var(--sp-2) 0 var(--sp-1); font-weight: 700; color: var(--c-primary); }
.elev__n { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-muted); max-width: 26rem; }
.elev__cap { font-size: 14px; line-height: 1.55; color: var(--c-muted); max-width: 44rem; border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
@media (max-width: 559px) { .elev { padding: var(--sp-4); } }
/* Le dessin : la silhouette en brique pleine, le vide en pointillé hachuré. */
.el-ground { stroke: var(--c-muted); stroke-width: 2; }
.el-now { fill: var(--c-brick); }
.el-niche { fill: var(--c-brick-soft); }
.el-hatch-line { stroke: var(--c-brick); stroke-width: 1.2; opacity: .35; }
.el-dim { stroke: var(--c-text); stroke-width: 2; fill: none; }
.el-dim--lost { stroke-dasharray: 8 6; }
.el-dim-faint { stroke: var(--c-brick); stroke-width: 2; stroke-dasharray: 8 6; fill: none; }
/* Le schéma est réduit de moitié sur un téléphone : ses textes sont écrits
   grands dans ses propres unités pour rester lisibles à 13–14 px. */
.el-t { fill: var(--c-text); font-family: var(--font-body); font-size: 28px; font-weight: 700; }
.el-t--band { fill: var(--c-brick); font-size: 30px; }
.el-t--muted { fill: var(--c-muted); font-weight: 400; font-size: 26px; }

/* --- Le reportage de l'heure bleue ------------------------------------------
   La seule bande sombre de la page. L'heure de chaque photo en colonne, en
   Fraunces or clair : la suite se lit comme un carnet minuté. */
.chapter--blue { background: var(--c-blue-hour); color: var(--c-blue-hour-text); border-top: 0; }
.chapter--blue + .chapter { border-top: 0; }
.chapter--blue .chapter__head h2 { color: #fff; }
.seq { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.seq__item, .seq__mark { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.seq__time {
  margin: 0; padding-top: .1em; font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 48;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1; color: var(--c-secondary-light);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.seq__fig { margin: 0; max-width: 760px; }
.seq__item--tall .seq__fig { max-width: 460px; }
.seq__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: #24304D; }
.seq__cap { margin-top: var(--sp-3); font-size: 16px; line-height: 1.6; max-width: 36rem; }
.seq__cap strong { color: #fff; }
.seq__mark { padding-block: var(--sp-2); }
.seq__marktext {
  margin: 0; max-width: 36rem; font-size: 16px; line-height: 1.6; color: #fff;
  padding-left: var(--sp-4); border-left: 2px solid var(--c-secondary-light);
}
@media (max-width: 639px) {
  .seq { gap: var(--sp-7); }
  .seq__item, .seq__mark { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* --- L'enclos ------------------------------------------------------------------ */
.walk { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) {
  .walk { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .walk__plan { position: sticky; top: 140px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .walk__plan { max-width: 480px; } }
.plan .pl-tree { fill: var(--c-primary-soft); stroke: var(--c-primary); stroke-width: 1.5; }
.plan .pl-spot { fill: var(--c-primary); }
.plan .pl-faint { fill: var(--c-muted); font-family: var(--font-body); font-size: 13px; }
.plan .pl-scale path { stroke: var(--c-muted); stroke-width: 1.5; fill: none; }
.plan .pl-scale text { fill: var(--c-muted); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.walk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); max-width: 720px; }
.walk__stop {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 160px; gap: var(--sp-4); align-items: start;
  scroll-margin-top: 140px;
}
.walk__stop:not(:has(.walk__media)) { grid-template-columns: 44px minmax(0, 1fr); }
.walk__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-secondary-light);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
}
.walk__stop--opt .walk__n {
  background: var(--c-surface); color: var(--c-text); border: 1.5px dashed var(--c-muted);
  font-family: var(--font-body); font-size: 1.05rem;
}
.walk__body h3 { margin: 6px 0 var(--sp-1); color: var(--c-primary); font-size: clamp(1.2rem, 2vw, 1.4rem); }
.walk__where { margin: 0 0 var(--sp-2); font-size: 15px; color: var(--c-muted); }
.walk__body p:last-child { margin: 0; font-size: 16px; line-height: 1.65; }
.walk__shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
@media (max-width: 639px) {
  .walk__stop { grid-template-columns: 44px minmax(0, 1fr); }
  .walk__media { grid-column: 2; max-width: 220px; }
}

/* --- Les panneaux ------------------------------------------------------------- */
.signs { max-width: 52rem; }
.signs__h { margin: 0 0 var(--sp-4); font-weight: 700; color: var(--c-primary); }
.signs__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-primary); }
.sign {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-5);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--c-border); align-items: start;
}
.sign--text { grid-template-columns: minmax(0, 1fr); }
.sign__shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-btn); }
.sign__k { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--c-primary); }
.sign__v { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.5; }
.sign__n { margin: var(--sp-1) 0 0; font-size: 15px; line-height: 1.55; color: var(--c-muted); max-width: 34rem; }
@media (max-width: 479px) { .sign:not(.sign--text) { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-4); } }

/* --- Encadré, inconnues, liens ------------------------------------------------- */
/* Ce que dit le temple : un aplat de brique pâle, sans barre latérale ; c'est
   l'intitulé, en brique, qui dit que la voix change. */
.story-note { max-width: 44rem; padding: var(--sp-5) var(--sp-6); background: var(--c-brick-soft); border-radius: var(--r-card); }
.story-note__k { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--c-brick); }
.story-note p:last-child { margin-bottom: 0; }
.unk { list-style: none; margin: 0; padding: 0; max-width: 44rem; display: grid; gap: var(--sp-5); }
.unk li { padding-left: var(--sp-5); border-left: 2px dashed var(--c-brick); }
.unk p { margin: 0; }
.unk__q { font-weight: 700; color: var(--c-primary); margin-bottom: var(--sp-1) !important; }
.story-links { max-width: 44rem; }
.chapter--end { padding-block: var(--sp-7); }
.story-src__list { padding-left: 0; list-style: none; }
.story-src__list li { scroll-margin-top: 140px; }
.story-src__list li:target { background: var(--c-brick-soft); border-radius: 6px; }
.src-note__n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-brick); }