/* Wat Kiew Nor — the site's one stylesheet.
   The look is the design pass's BC (docs/design-reading.md §6, chosen by Miro
   2026-09-17): the sim's own red carries the masthead and the footer, a band of
   the naga's scales sits under the language row, and every page carries its
   one mark — small in the title, large and pale as the page's ground, the naga
   at the foot. The red and the gold are measured from the wat's photographs
   (reading §2); the cream, sand and ink are the mockup's of 2026-08
   (docs/visual-research.md §4). No build step, no framework, no dependency (D-03). */

:root {
  --ground:  #faf6f0;   /* cream ground, between Wat Nong Pah Pong and Luang Prabang */
  --paper:   #fffdfa;
  --sand:    #caba9f;   /* Wat Nong Pah Pong — rules, borders, quiet fills */
  --sand-lt: #e8e0d2;
  --ink:     #2e2a24;   /* warm near-black, never #000 */
  --muted:   #6b6156;
  /* The wat's own, measured (design-reading §2): the sim's red for the two
     planes, the links and the marks; its gold for the hairline, the band and
     the one note; the cream is the red's own light, for what sits on it. */
  --red:      #7d3a31;
  --gold:     #d4aa4b;
  --cream:    #e6d3b4;
  --cream-lt: #f3e9d6;

  --lat: "Gentium Book Plus", Georgia, serif;
  --lao: "Phetsarath", "Phetsarath OT", "Noto Sans Lao", sans-serif;
  /* Noto Serif Thai, self-hosted since 2026-08-30 (O-22, D-04). The rest of
     the stack is only for a browser that cannot load web fonts at all. */
  --thai: "Noto Serif Thai", "Noto Sans Thai", "Sarabun", "Leelawadee UI",
          "Thonburi", Tahoma, sans-serif;
  --measure: 34rem;

  /* Optical size correction for the chrome. Measured, not guessed: Phetsarath
     draws its base consonants at 557/1000 em where Gentium's x-height is
     469/1000, so Lao sets about 19% larger than Latin at the same font-size.
     Matching the two exactly (0.84) leaves Lao looking undersized, because a
     Lao consonant carries more of the word than a Latin x-height does; 0.88
     splits it, and is one number to change if it still reads wrong.

     This applies to the chrome only. The menu and the language buttons put two
     and sometimes three scripts on one line, and there the difference reads as
     a mistake. Running text is never mixed and is left at full size, where Lao
     needs every pixel it has for its stacked marks.

     Thai, measured the same way once the face was ours: Noto Serif Thai draws
     ก บ ว at 558/1000 em — Phetsarath's 557 to the unit — so the two scripts
     share one correction, and a line that mixes them sets even. */
  --lao-chrome: .88;
  --thai-chrome: .88;
}

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

html { font-size: 17px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--lat), var(--lao);
  line-height: 1.75;          /* D-04: Lao stacked diacritics need >= 1.7 */
  font-kerning: normal;
}

:lang(lo) { font-family: var(--lao); line-height: 1.95; }
/* Thai stacks diacritics above and below like Lao, and writes without spaces
   between words, so the browser needs lang="th" to break lines at all. */
:lang(th) { font-family: var(--thai); line-height: 1.95; }
/* And the way back: on a Lao or Thai page everything inherits that stack,
   whose faces carry no Latin letters — the browser then improvises a system
   Latin, a different one per stack. Whatever is marked as a Latin-script
   language is pinned to Gentium instead, so English fallback text, menu
   labels and the language row look the same on every page (D-17). */
:lang(en), :lang(fr), :lang(de) { font-family: var(--lat); }

/* ---- language switching -------------------------------------------------
   The mockup carries all four languages in one file and shows one.
   The real site serves one language per URL; this is scaffolding. */
.t  { display: none; }
.ti { display: none; }
html[data-lang="en"] .t[lang="en"]:not(.fallback), html[data-lang="fr"] .t[lang="fr"],
html[data-lang="de"] .t[lang="de"], html[data-lang="lo"] .t[lang="lo"],
html[data-lang="th"] .t[lang="th"] { display: block; }
html[data-lang="en"] .ti[lang="en"]:not(.fallback), html[data-lang="fr"] .ti[lang="fr"],
html[data-lang="de"] .ti[lang="de"], html[data-lang="lo"] .ti[lang="lo"],
html[data-lang="th"] .ti[lang="th"] { display: inline; }
/* Lao and Thai fall back to English wherever no person has written them yet
   (D-17, D-20). The fallback is a second copy of the English, marked .fallback
   and carrying lang="en" so it is still typeset and read as English; .fb-lo and
   .fb-th say which language it is standing in for, since a block may have one
   of the two and not the other. It belongs to those two modes alone —
   :not(.fallback) above is what keeps English mode from showing both copies. */
html[data-lang="lo"] .t.fb-lo, html[data-lang="th"] .t.fb-th { display: block; }
html[data-lang="lo"] .ti.fb-lo, html[data-lang="th"] .ti.fb-th { display: inline; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.4rem; }
.prose { max-width: var(--measure); }

/* ---- masthead ---------------------------------------------------------- */
/* One plane of the sim's red, a gold hairline under it. */
header.site {
  border-bottom: 2px solid var(--gold);
  background: var(--red);
}
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0 1.1rem;
}
.wordmark { text-decoration: none; color: inherit; display: block; }
/* The Latin name and place are the same proper name in every language, so
   they get their face directly, not via the page's language. */
.wordmark .name { font-family: var(--lat); font-size: 1.45rem; color: var(--cream-lt);
                  letter-spacing: .01em; display: block; }
.wordmark .lao  { font-family: var(--lao); color: var(--cream);
                  font-size: calc(1.15rem * var(--lao-chrome));
                  display: block; line-height: 1.5; }
/* The masthead shows the wat's name in the reader's own script: Thai to a Thai
   reader, Lao to everyone else, since Lao is where the wat actually stands. */
.wordmark .thai { display: none; font-family: var(--thai); color: var(--cream);
                  font-size: calc(1.15rem * var(--thai-chrome)); line-height: 1.5; }
html[data-lang="th"] .wordmark .thai { display: block; }
html[data-lang="th"] .wordmark .lao  { display: none; }

address { font-style: normal; margin: 0 0 1.6rem; line-height: 1.9; }

.wordmark .place { font-family: var(--lat); font-size: .82rem; color: var(--cream);
                   letter-spacing: .09em;
                   text-transform: uppercase; display: block; margin-top: .2rem; }

.langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; font-size: .82rem; }
/* The site's one band of pattern (design-reading §3 connection 6, §6.2 rule 1):
   the naga's scales in gold under the language row — two rows of arcs lapping
   by half a unit, one 16×14 tile repeated. A data: image, so no file and no
   request. Once per page, and nowhere else. */
.langs::after {
  content: ""; flex-basis: 100%; height: 14px; margin-top: .5rem; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cpath d='M0 6.5A9 9 0 0 1 16 6.5M-8 13.5A9 9 0 0 1 8 13.5M8 13.5A9 9 0 0 1 24 13.5' fill='none' stroke='%23d4aa4b' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x right bottom;
}
@media (max-width: 34rem) {
  .langs { justify-content: flex-start; }
  .langs::after { background-position: left bottom; }
}
.langs button {
  font: inherit; font-size: .82rem; background: none; border: 0;
  padding: .25rem .5rem; color: var(--muted); cursor: pointer; border-radius: 2px;
}
/* All five sit side by side in three scripts, always, in every language. This
   row is where the difference was most visible. */
.langs button[lang="lo"] { font-size: calc(.82rem * var(--lao-chrome)); }
.langs button[lang="th"] { font-size: calc(.82rem * var(--thai-chrome)); }
.langs button:hover { color: var(--red); }
.langs button[aria-current="true"] { color: var(--ink); background: var(--sand-lt); }
/* On the real site the switcher is links, one URL per language — no JS. */
.langs a {
  font-size: .82rem; text-decoration: none; padding: .25rem .5rem;
  color: var(--cream); border-radius: 2px;
}
.langs a:hover { color: #fff; }
.langs a[aria-current="true"] { color: var(--red); background: var(--cream); }
.langs a[lang="lo"] { font-size: calc(.82rem * var(--lao-chrome)); }
.langs a[lang="th"] { font-size: calc(.82rem * var(--thai-chrome)); }

nav.site { border-top: 1px solid rgba(230, 211, 180, .28); }   /* the cream, faint */
nav.site ul {
  list-style: none; margin: 0; padding: .7rem 0; display: flex;
  flex-wrap: wrap; gap: .2rem 1.5rem; font-size: .92rem;
}
nav.site a { color: var(--cream); text-decoration: none; padding: .15rem 0;
             border-bottom: 1px solid transparent; }
/* One row height in every language. Without this the whole header moves down
   when the menu is Lao, because running Lao text is set at 1.95 and a menu is
   not running text. The menu is also mixed in Lao and Thai, since a label
   nobody has translated yet falls back to English beside the ones that have. */
nav.site ul, .langs { line-height: 1.5; }
nav.site [lang], .langs button[lang] { line-height: 1.5; }
nav.site [lang="lo"] { font-size: calc(1em * var(--lao-chrome)); }
nav.site [lang="th"] { font-size: calc(1em * var(--thai-chrome)); }
nav.site a:hover { color: #fff; border-bottom-color: var(--gold); }
nav.site a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }

/* ---- under construction ------------------------------------------------
   Shown while content/site/<page>/draft exists; deleting that file is how a
   page is declared finished. Quiet on purpose: a note, not an alarm. */
.construction {
  border-left: 3px solid var(--gold);
  background: #f6f2ea;
  color: #6b6257;
  padding: .55rem .9rem;
  margin: 0 0 1.5rem;
  font-size: .85rem;
}

/* ---- text -------------------------------------------------------------- */
main { padding: 3rem 0 4rem; }
/* The page's mark (design-reading §6; layout.php places it): small inside the
   title, and the same drawing large and pale as the page's ground behind the
   top of the text — the marks are the rules, so the title carries no dash.
   Home has no title; its naga sits low, behind the two doorways, clear of the
   hero. The ground is under the text (z-index) and never catches a tap. */
main .wrap { position: relative; z-index: 0; }
.ground {
  display: block; position: absolute; right: -1.6rem; top: -2rem; z-index: -1;
  color: var(--sand-lt); pointer-events: none;
}
.ground svg { width: 17rem; height: 17rem; }
main.pg-home .ground { top: auto; bottom: -1.5rem; right: -2.5rem; }
main.pg-home .ground svg { width: 22rem; height: 22rem; }
@media (max-width: 34rem) {
  .ground { right: -1rem; top: -1.2rem; }
  .ground svg { width: 12rem; height: 12rem; }
  main.pg-home .ground svg { width: 15rem; height: 15rem; }
}
h1 { font-size: 1.9rem; font-weight: 400; line-height: 1.35; margin: 0 0 1.2rem; }
h1 .mark { display: inline-flex; vertical-align: -.12em; margin-right: .5rem; color: var(--red); }
h1 .mark svg { width: 1.3em; height: 1.3em; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 2.6rem 0 .7rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 1.8rem 0 .4rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--red); text-underline-offset: .18em; }
.lede { font-size: 1.12rem; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--sand-lt); margin: 2.6rem 0; }
.note {
  font-size: .86rem; color: var(--muted); border-left: 2px solid var(--sand);
  padding: .1rem 0 .1rem .9rem; margin: 0 0 1.6rem;
}

/* ---- home -------------------------------------------------------------- */
/* Photographs. One rule for all of them: fill the box, keep the ratio, never
   push the page around while they load. The ratio is set in CSS rather than
   left to the file, so a replacement photograph of any shape still fits. */
img { max-width: 100%; }
.hero, .band, .thumb, .gallery img {
  display: block; width: 100%; object-fit: cover;
  background: var(--sand-lt); border: 1px solid var(--sand);
}
.hero { aspect-ratio: 16 / 7; margin-bottom: 2.6rem; }
.band { aspect-ratio: 16 / 9; margin: 2rem 0; }
/* A square portrait beside body text (the abbot's photo on the About page):
   stacked and full-width on a phone, floated beside the prose from 34rem up.
   The clearfix keeps the float inside .prose so it never spills past the text. */
.portrait {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  margin: .4rem 0 1.4rem; background: var(--sand-lt); border: 1px solid var(--sand);
}
@media (min-width: 34rem) {
  .portrait { float: right; width: 13rem; margin: .2rem 0 1rem 1.6rem; }
}
.prose::after { content: ""; display: block; clear: both; }
.cols { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cols { grid-template-columns: 1fr 1fr; } }

/* ---- news -------------------------------------------------------------- */
.newslist { list-style: none; margin: 0; padding: 0; }
.newslist li { border-top: 1px solid var(--sand-lt); padding: 1.5rem 0; }
.newslist li:first-child { border-top: 0; padding-top: 0; }
/* The whole card is the link: the title carries the real anchor (kept, for
   screen readers and search), and its ::after stretches over the card so a tap
   anywhere on the row opens the item. No JS, no nested links. */
.newsitem { display: grid; gap: 1.1rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 34rem) { .newsitem { grid-template-columns: 9rem 1fr; } }
.newsitem h2 a::after { content: ""; position: absolute; inset: 0; }
.thumb { aspect-ratio: 4/3; }
.date { font-size: .8rem; color: var(--muted); letter-spacing: .06em; }
.newsitem h2 { margin: .25rem 0 .4rem; font-size: 1.1rem; font-weight: 400; }
.newsitem h2 a { text-decoration: none; color: var(--ink); }
.newslist li:hover .newsitem h2 a { color: var(--red); }
.newsitem p { margin: 0; color: var(--muted); font-size: .95rem; }

.gallery { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); margin: 2rem 0; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { aspect-ratio: 4/3; }

/* ---- photographs: the galleries index --------------------------------- */
.galgrid {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; gap: 1.2rem 1rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .galgrid { grid-template-columns: repeat(3, 1fr); } }
.galcard { display: block; text-decoration: none; color: inherit; }
.galcard img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: var(--sand-lt); border: 1px solid var(--sand);
}
.galcard .cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-top: .5rem; line-height: 1.4;
}
.galcard .gt { color: var(--ink); }
.galcard:hover .gt { color: var(--red); }
.galcard .n { font-size: .78rem; color: var(--muted); flex-shrink: 0; }

/* ---- photographs: one gallery, and the pure-CSS lightbox --------------
   Each thumbnail links to a #lb-N overlay shown by :target; the shade behind
   and the ✕ link to #photos, which dismisses it. No JavaScript (D-03). */
.gallery a.shot { display: block; line-height: 0; }

.lightbox { display: none; }
.lightbox:target {
  display: flex; position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  background: rgba(26, 23, 19, .93); padding: 3vmin;
}
.lightbox .shade { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox img {
  position: relative; z-index: 1;
  max-width: 94vw; max-height: 90vh; width: auto; object-fit: contain;
  background: none; border: 0;
}
.lightbox .prev, .lightbox .next, .lightbox .x {
  position: absolute; z-index: 2; color: #f4efe6; text-decoration: none;
  background: rgba(0, 0, 0, .3); line-height: 1; border-radius: 3px;
}
.lightbox .prev, .lightbox .next {
  top: 50%; transform: translateY(-50%); font-size: 2.4rem; padding: .3rem .75rem;
}
.lightbox .prev { left: 2vmin; }
.lightbox .next { right: 2vmin; }
.lightbox .x { top: 2vmin; right: 2vmin; font-size: 1.7rem; padding: .05rem .6rem; }
.lightbox .prev:hover, .lightbox .next:hover, .lightbox .x:hover {
  color: #fff; background: rgba(0, 0, 0, .6);
}

.videolink {
  display: inline-block; border: 1px solid var(--sand); background: var(--paper);
  padding: .55rem 1rem; text-decoration: none; font-size: .92rem; margin: .5rem 0 1.5rem;
}
.videolink::before { content: "▶  "; color: var(--red); }

/* ---- footer ------------------------------------------------------------ */
/* The second plane of red; the naga at the foot, in cream, centred. */
footer.site {
  background: var(--red); color: var(--cream); text-align: center;
  padding: 2.2rem 0; font-size: .86rem;
}
footer.site p { margin: 0 0 .4rem; }
footer.site a { color: var(--cream-lt); }
.foot { display: block; color: var(--cream); opacity: .75; margin: -.3rem 0 .7rem; }
.foot svg { width: 3.2rem; height: 3.2rem; }
.back { margin-top: 2.4rem; font-size: .92rem; }

/* The news front's month index, and a month page's way to its neighbours (D-34). */
.months { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--sand-lt); }
.months .label { margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); letter-spacing: .06em; }
.months ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.months .count { color: var(--muted); font-size: .85rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem;
         padding-top: 1.2rem; border-top: 1px solid var(--sand-lt); font-size: .92rem; }
.crumb { margin: 0 0 .3rem; font-size: .8rem; color: var(--muted); letter-spacing: .06em; }
.crumb a { color: inherit; }