/* ==========================================================================
   Fiche Wat Phra That Doi Kham : la colline des vœux tenus.
   Chargée par cette fiche seulement, après place.css et story.css, dont elle
   reprend l'ouverture, les chapitres, la chronique et les panneaux.

   Une teinte locale, tirée du sujet, à la place de la brique de story.css :
   - la laque, le rouge des piliers du sanctuaire de Luang Pho Than Jai et
     des lettres de la banderole : 9,3:1 sur blanc, 8,5:1 sur la brume, elle
     porte du texte (filets, dates, appels de note, thaï).
   Deux valeurs de dessin, réservées au chapitre du jasmin, sur le vert profond :
   - le blanc du jasmin et le vert de la feuille qui ferme chaque guirlande.
   Le ciel de l'ouverture donne la teinte de son voile (bleu de 161908).
   ========================================================================== */
:root {
  --c-brick: #7A2E2C;
  --c-brick-soft: #F4E9E7;
  --c-jasmine: #F4F6EE;
  --c-leaf: #8FB27C;
  /* Karla d'abord : chiffres, espaces et guillemets des lignes thaïes restent
     en Karla, et seul le sous-ensemble thaï de Noto se télécharge. */
  --font-thai: "Karla", "Noto Sans Thai", system-ui, sans-serif;
}
:lang(th) { font-family: var(--font-thai); }

/* --- Ouverture ---------------------------------------------------------------
   Le visage du grand Bouddha, en gros plan, sur le ciel. Sur grand écran, la
   photo est cadrée pour que le visage reste à droite du titre, qui se replie
   sur deux lignes ; le voile, teinté du bleu du ciel, ne couvre que la gauche
   et le bas. Au téléphone, la statue entière, le visage en haut. */
@media (min-width: 768px) {
  .hero--wat-phra-that-doi-kham .hero__media img { object-position: 50% 0% !important; }
  .hero--wat-phra-that-doi-kham.hero--shot::after {
    background:
      linear-gradient(180deg, rgba(14,36,56,0) 0%, rgba(14,36,56,0) 42%, rgba(14,36,56,.72) 100%),
      linear-gradient(90deg, rgba(14,36,56,.82) 0%, rgba(14,36,56,.55) 30%, rgba(14,36,56,0) 50%);
  }
  .hero--wat-phra-that-doi-kham .place-title__name { max-width: 6.4em; }
  .hero--wat-phra-that-doi-kham .container > :not(.place-title),
  .hero--wat-phra-that-doi-kham .place-title__tag { max-width: min(460px, 34vw); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--wat-phra-that-doi-kham .container > :not(.place-title),
  .hero--wat-phra-that-doi-kham .place-title__tag { max-width: min(460px, 52vw); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--wat-phra-that-doi-kham .place-title__name { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
}
@media (max-width: 767px) {
  .hero--wat-phra-that-doi-kham.hero--shot::after {
    background: linear-gradient(180deg, rgba(14,36,56,0) 0%, rgba(14,36,56,.1) 34%,
                rgba(14,36,56,.62) 52%, rgba(14,36,56,.88) 70%, rgba(14,36,56,.96) 100%);
  }
}
.hero--wat-phra-that-doi-kham .place-title__name,
.hero--wat-phra-that-doi-kham .place-title__tag,
.hero--wat-phra-that-doi-kham .eyebrow { text-shadow: 0 1px 2px rgba(14,36,56,.7), 0 0 22px rgba(14,36,56,.5); }

/* --- Deux Bouddhas : le duo ---------------------------------------------------
   Sur grand écran, les deux photos partagent une ligne de sol laque : le grand
   Bouddha monte, la scène de prière reste au ras du sol, et le texte se place
   au-dessus de la seconde. Au téléphone, tout s'empile, chaque photo en
   pleine largeur : le grand Bouddha, le texte qui relie les deux, le fidèle. */
.story-duo { display: grid; gap: var(--sp-6); }
.story-duo__fig { margin: 0; }
.story-duo__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--c-border); }
.story-duo__fig figcaption { margin-top: var(--sp-3); font-size: 15px; line-height: 1.5; color: var(--c-muted); max-width: 36rem; }
.story-duo__text { max-width: 40rem; }
@media (max-width: 1023px) {
  .story-duo__fig--tall .story-duo__shot img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
}
@media (min-width: 1024px) {
  .story-duo {
    --cap: 4.4rem;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "tall text" "tall low";
    column-gap: var(--sp-7); row-gap: var(--sp-6);
  }
  .story-duo__fig--tall { grid-area: tall; align-self: end; }
  .story-duo__fig--low { grid-area: low; align-self: end; }
  .story-duo__text { grid-area: text; align-self: start; }
  .story-duo__fig figcaption { min-height: var(--cap); }
  .story-duo::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: calc(var(--cap) + var(--sp-3)); height: 3px; background: var(--c-brick);
  }
  .story-duo__shot img { border-radius: 0; }
}

/* --- Ce que dit la banderole -----------------------------------------------------
   La banderole est rouge sur blanc, bordée d'un double filet rouge. On en
   reprend la matière (blanc, double filet laque, thaï en laque) et on la
   déplie ligne à ligne. Avant elle, le vœu en trois temps, pour qui lit vite. */
.story-vow { display: grid; gap: var(--sp-6); }
.story-vow__doc { margin: 0; max-width: 720px; }
.story-vow__shot img { display: block; width: 100%; height: auto; border: 1px solid var(--c-border); }
.story-vow__doc figcaption { margin-top: var(--sp-2); font-size: 14px; color: var(--c-muted); line-height: 1.45; }
.story-vow__summary {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  counter-reset: none;
}
.story-vow__summary li { font-size: 17px; line-height: 1.5; max-width: 60ch; }
.story-vow__k {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-variation-settings: "opsz" 72; color: var(--c-brick); margin-right: .2em;
}
@media (min-width: 768px) {
  .story-vow__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .story-vow__summary li { border-top: 2px solid var(--c-brick); padding-top: var(--sp-3); }
  .story-vow__k { display: block; font-size: 1.35rem; margin-bottom: var(--sp-1); }
}
.story-vow__method {
  margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.55; color: var(--c-muted);
}
.story-vow__band {
  background: var(--c-surface);
  border-block: 1px solid var(--c-brick);
  box-shadow: inset 0 4px 0 #fff, inset 0 5px 0 var(--c-brick), inset 0 -4px 0 #fff, inset 0 -5px 0 var(--c-brick);
  padding: var(--sp-5) var(--sp-5);
}
@media (max-width: 767px) {
  .story-vow__band { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
.story-vow__steps { list-style: none; margin: 0; padding: 0; }
.story-vow__step { display: grid; gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-5); }
.story-vow__step + .story-vow__step { border-top: 1px solid var(--c-border); }
.story-vow__name {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--c-brick);
}
.story-vow__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.story-vow__line { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: var(--sp-3); }
.story-vow__n {
  /* Karla, pas Fraunces : le 3 de Fraunces, à sommet plat, se lit comme un 5. */
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.5rem; line-height: 1.45; color: var(--c-brick); font-variant-numeric: tabular-nums;
}
.story-vow__body > * { margin: 0; }
.story-vow__th {
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.75;
  color: var(--c-brick); overflow-wrap: anywhere;
}
.story-vow__tr { margin-top: var(--sp-1) !important; font-size: 17px; line-height: 1.6; max-width: 62ch; }
.story-vow__note { margin-top: var(--sp-2) !important; font-size: 14px; line-height: 1.55; color: var(--c-muted); max-width: 62ch; }
.story-vow__note [lang="th"] { color: var(--c-brick); }
/* La coupe : une hachure de la couleur des lettres, à la place de ce qui n'est
   pas transcrit. Elle se lit comme « ici, la transcription s'arrête ». */
.story-vow__cut {
  display: inline-block; width: 2.4em; height: .7em; margin-left: .25em;
  vertical-align: baseline;
  background: repeating-linear-gradient(-55deg, var(--c-brick) 0 1.5px, transparent 1.5px 5px);
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
          mask-image: linear-gradient(90deg, #000 30%, transparent);
}
@media (min-width: 1024px) {
  .story-vow__band { padding-inline: var(--sp-6); }
  .story-vow__step { grid-template-columns: 11rem minmax(0, 1fr); }
  .story-vow__name { padding-top: .35rem; }
  .story-vow__line { grid-template-columns: 3rem minmax(0, 1fr); }
  .story-vow__n { font-size: 1.75rem; line-height: 1.4; }
}

/* --- La pause : l'encens ------------------------------------------------------
   Une seule photo, presque sans texte : la fumée, et le temps qu'il faut. */
.chapter--bare { padding: 0; border-top: 0; }
.chapter--bare + .chapter { border-top: 0; }
.story-pause { position: relative; margin: 0; background: #1C1A17; color: #fff; }
.story-pause__shot img { display: block; width: 100%; height: clamp(360px, 70vh, 720px); object-fit: cover; object-position: 50% 48%; }
.story-pause__text {
  position: absolute; inset: 0 0 auto; padding-top: clamp(var(--sp-6), 10vh, var(--sp-9));
  pointer-events: none;
}
.story-pause__text p {
  margin: 0; max-width: 21ch;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 24px rgba(0,0,0,.55);
}
.story-pause figcaption {
  position: absolute; right: var(--gutter); bottom: var(--sp-3);
  font-size: 13px; color: #fff; background: rgba(20,18,15,.6); padding: 2px 8px; border-radius: var(--r-pill);
}
@media (max-width: 767px) {
  .story-pause__shot img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 30%; }
}

/* --- Le jasmin, sur le vert profond -----------------------------------------------
   Le blanc du jasmin y garde son éclat. Cinquante guirlandes dessinées, le
   minimum écrit sur la banderole, puis une rangée qui s'efface pour « ou
   plus ». Ordre de lecture (et du document) : la frise et sa légende, le gros
   plan, puis le texte ; sur grand écran, le texte et le gros plan côte à côte. */
.chapter--deep { background: var(--c-primary-deep); color: #E3ECE6; border-top: 0; }
.chapter--deep + .chapter { border-top: 0; }
.chapter--deep .chapter__head h2 { color: #fff; }
.chapter--deep .story-prose p { font-size: 17px; line-height: 1.7; }
.chapter--deep .src-call a { color: var(--c-secondary-light); }
.chapter--deep .story-fig figcaption { color: #B9CCC3; }
.chapter--deep .story-fig__shot img { background: transparent; }
@media (min-width: 1024px) {
  .chapter--deep > .container {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: "head head" "fifty fifty" "text photo";
    column-gap: var(--sp-8); align-items: start;
  }
  .chapter--deep .chapter__head { grid-area: head; }
  .chapter--deep .story-fifty { grid-area: fifty; }
  .chapter--deep .story-prose { grid-area: text; }
  .chapter--deep .story-fig { grid-area: photo; max-width: none; }
  .chapter--deep > .container > .story-prose { margin-top: var(--sp-7); }
}
.story-fifty { margin: 0; color: var(--c-jasmine); display: grid; gap: var(--sp-4); }
.story-fifty svg { display: block; width: 100%; height: auto; }
.story-fifty .story-fifty__wide { display: none; }
.story-fifty__narrow { max-width: 24rem; }
.story-fifty__n {
  margin: 0;
  font-family: var(--font-display); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 6vw, 5.2rem); line-height: .9; color: #fff;
}
.story-fifty__n small {
  display: block; margin-top: var(--sp-2); font-size: 1.35rem; font-weight: 500; font-style: italic;
  color: var(--c-secondary-light);
}
.story-fifty figcaption { margin-top: var(--sp-1); font-size: 15px; line-height: 1.55; color: #B9CCC3; max-width: 60ch; }
@media (min-width: 1024px) {
  .story-fifty { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--sp-6); align-items: end; }
  .story-fifty .story-fifty__wide { display: block; }
  .story-fifty .story-fifty__narrow { display: none; }
  .story-fifty__n { grid-row: 1; align-self: start; padding-top: var(--sp-1); }
  .story-fifty figcaption { grid-column: 2; }
}