/* ==========================================================================
   MAHORAAN
   1. Settings
   2. Base
   3. Menu
   4. The wall
   5. Layers and hotspots
   6. Below the wall
   7. Footer
   8. Pages
   9. Narrow windows
   10. Phones
   ========================================================================== */

/* 1. Settings ------------------------------------------------------------ */

:root {
  /* wall-desktop.png is 4400 x 2400, so 4400 / 2400 = 1.833333.
     The reshoot kept the same proportions as the old 1408 x 768 file, so
     this number did not change. */
  --wall-ratio: 1.833333;

  /* Viewport height that ignores mobile browser chrome where supported. */
  --vh: 100vh;

  /* The menu's exact height. The wall is laid out below it, so the bar never
     comes down over the photograph. .menu is set to this height rather than
     growing with its contents, so the two cannot drift apart. */
  --menu-h: 120px;

  /* Sampled from the plain wall in the photograph: the mean of four patches
     of bare wall reads #d9c2a9, and the image's own top edge #d9bf9e. The
     letterbox is painted this so it reads as the room carrying on rather
     than as a bar. */
  --wall-warm: #dcc3a2;

  --ink:    #2b2019;
  --ink-60: #6b5b4c;
  --cream:  #f4efe6;
  --line:   #ded3c2;
  --gold:   #a8763e;
}

@supports (height: 100svh) {
  :root { --vh: 100svh; }
}

/* 2. Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  /* Georgia sets the Latin. Noto Serif Lao catches any Lao character inside
     it — the ະ in "Yum Sະlut", for one — so it does not fall back to
     whatever Lao font the machine happens to have. */
  font: 16px/1.6 Georgia, "Noto Serif Lao", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { display: block; max-width: 100%; }

/* Readable by screen readers and search engines, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hidden-field { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--cream);
}

/* 3. Menu ---------------------------------------------------------------- */

/* The menu keeps its own band above the photograph and is painted the same
   warm colour as the letterbox, so at rest there is no bar to see — and
   nothing translucent is ever laid over the Buddha. */
.menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--menu-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 1.75rem;
  background: var(--wall-warm);
}

/* Once the page moves, the band is sitting on top of something, so give it
   an edge. The background stays fully opaque either way. */
.menu--solid { border-bottom: 1px solid rgba(43, 32, 25, .18); }

/* The lockup: the three arrangements, then the name in Lao and in Latin.
   It sits on the flat warm band, not on the photograph, so it needs no
   halo behind it. */
.lockup {
  display: flex;
  align-items: center;
  gap: .9rem;
  /* Never let the menu squeeze the lockup narrower than its own text, or
     the name spills out of its box and lands on top of the nav. */
  flex: none;
  text-decoration: none;
  color: var(--ink);
}

/* Large enough that the three offerings read as three, not as a cluster. */
.lockup__mark {
  width: auto;
  height: 5.5rem;
}

.lockup__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lockup__lao {
  font-family: "Noto Serif Lao", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
}

/* Sized to stand with the Lao line rather than sit under it as a subtitle. */
.lockup__latin {
  font-size: 1.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.menu__nav { margin-left: auto; }

.menu__nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__nav a {
  white-space: nowrap;            /* "The Sala" stays on one line */
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.menu__nav a:hover,
.menu__nav a:focus-visible,
.menu__nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.menu__toggle { display: none; }

/* 4. The wall ------------------------------------------------------------ */

/* THE WHOLE PHOTOGRAPH, ALWAYS, EDGE TO EDGE.
   The picture spans the full width of the window — no gap on either side —
   and nothing is cropped on any side: not the Buddha at the top, not the
   shelf at the bottom, not the garland.

   All the leftover room is collected in one band above the picture, and
   that band is the menu's. The stage is exactly the band plus the picture,
   so the band is always just the menu's height: it never opens up into an
   awkward empty field on a tall screen, and the page simply carries on
   below the photograph. */
.wall-stage {
  position: relative;
  padding-top: var(--menu-h);
  overflow: hidden;
  background: var(--wall-warm);
}

/* Full width, and aspect-ratio sets the height, so the box is exactly the
   shape of the photograph and the percentages in layers.js stay true. */
.wall {
  position: relative;
  width: 100%;
  aspect-ratio: var(--wall-ratio);
  height: auto;
}

.wall__photo {
  width: 100%;
  height: 100%;
  /* contain, not cover: if the box and the file ever disagree by a fraction
     of a pixel, the picture letterboxes rather than loses an edge. */
  object-fit: contain;
}

/* 5. Layers and hotspots ------------------------------------------------- */

.layer {
  position: absolute;
  overflow: hidden;
  text-decoration: none;
}

.layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Standing in until the real images arrive. */
.layer--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer__tag {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* Nothing marks a hotspot. The cursor is the only signal. */
.hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
}

/* Keyboard users still get a focus ring; mouse users never see one. */
.hotspot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Debug mode — press D. Outlines every slot and hotspot and names it, so
   the numbers in layers.js can be checked against the photograph. */
body.debug .layer   { outline: 2px solid #00e5ff; }
body.debug .hotspot { outline: 2px dashed #ff2d95; }

body.debug .layer::after,
body.debug .hotspot::after {
  content: attr(data-id);
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 4px;
  font: 700 11px/1.5 ui-monospace, "Consolas", monospace;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
body.debug .layer::after   { background: #00e5ff; color: #04252b; }
body.debug .hotspot::after { background: #ff2d95; color: #2b0016; }

/* 6. Below the wall ------------------------------------------------------ */

.below {
  max-width: 34rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

.below label {
  display: block;
  margin-bottom: .6rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.search__row,
.signup__row { display: flex; }

.below input {
  flex: 1;
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: inherit;
}
.below input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

.below button {
  padding: .8rem 1.3rem;
  margin-left: .5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.below button:hover { background: #443327; border-color: #443327; }

.request {
  margin: 2.5rem 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.request__title {
  margin: 0 0 .8rem;
  font-size: 1.35rem;
  font-weight: normal;
}
.request p {
  margin: 0 0 1rem;
  color: var(--ink-60);
}
.request .button { margin-top: .4rem; }

.button {
  display: inline-block;
  padding: .8rem 1.3rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: .95rem;
}
.button:hover { background: var(--ink); color: var(--cream); }

.signup { margin-top: 2.5rem; }
/* The sign-up line is a sentence, so it is set as one. */
.signup label {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* 7. Footer -------------------------------------------------------------- */

.footer {
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .85rem;
  color: var(--ink-60);
}
.footer p { margin: 0; }
.footer a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer a:hover { border-bottom-color: var(--ink-60); }

/* 8. Pages --------------------------------------------------------------- */

/* Every page other than the wall. The menu is fixed at the top, so the
   content starts below its band. */
.page {
  padding: calc(var(--menu-h) + 3.5rem) 1.5rem 5rem;
}

/* Draft copy still marked PLACEHOLDER. It reads as normal text on the live
   site; press D to tint it and see what is still to be replaced. */
body.debug .placeholder {
  background: rgba(176, 132, 48, .16);
  outline: 1px dashed rgba(168, 118, 62, .7);
  outline-offset: 2px;
}

/* --- an entry ----------------------------------------------------------- */

.entry__head,
.entry__body,
.entry__corrections {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* The line above the title saying when the practice entered Lao culture:
   ORIGIN: OLD, LATER, BORROWED or ABROAD, with an optional qualifier after
   it in ordinary case. */
.entry__origin {
  margin: 0 0 1.4rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.entry__origin-note {
  text-transform: none;
  letter-spacing: .02em;
  font-size: .9rem;
}

.entry__title {
  margin: 0 0 2.5rem;
  font-weight: normal;
  line-height: 1.15;
}
.entry__title-lao {
  display: block;
  font-family: "Noto Serif Lao", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
}
.entry__title-en {
  display: block;
  margin-top: .35rem;
  font-size: 2rem;
}

/* An optional opening that frames the entry before the body begins. */
.entry__opening {
  max-width: 36rem;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  line-height: 1.75;
}
.entry__opening p { margin: 0 0 1em; }
.entry__opening p:last-child { margin-bottom: 0; }

.entry__lead {
  max-width: 56rem;
  margin: 0 auto 3rem;
}
.entry__lead img {
  width: 100%;
  height: auto;
}

/* Long reading: a measure of about 65 characters and open leading. */
.entry__body {
  font-size: 1.125rem;
  line-height: 1.8;
}
.entry__body p { margin: 0 0 1.5em; }
.entry__body h2 {
  margin: 2.6em 0 .8em;
  font-size: 1.35rem;
  font-weight: normal;
  line-height: 1.3;
}
.entry__body h2:first-child { margin-top: 0; }

/* --- cross-links between entries ---------------------------------------
   An entry covers a shared practice in its own context, then links to the
   entry that holds the general treatment. The link carries the name of the
   section the other entry lives in, so the reader knows they are crossing.

   Written entry:       <a class="xref" href="/entries/sukhwan/" data-section="Belief">sukhwan</a>
   Not written yet:     <span class="xref" data-section="Belief">sukhwan</span>
   (the same words, marked coming soon; change span to a, add the href, when
   the other entry exists) */

.xref {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a.xref:hover { text-decoration-thickness: 2px; }

.xref[data-section]::after {
  content: attr(data-section);
  display: inline-block;          /* keeps the label out of the underline */
  margin-left: .35em;
  font-size: .62em;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: .2em;
  color: var(--ink-60);
}

span.xref {
  text-decoration-style: dotted;
  text-decoration-color: var(--ink-60);
}
span.xref[data-section]::after { content: attr(data-section) " · coming soon"; }

/* Optional: a one-line pointer to the general treatment, for the end of a
   passage. It points; it does not summarise the other entry. */
.xref-note {
  margin: 0 0 1.5em;
  padding: .8rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: rgba(220, 195, 162, .35);
  font-size: 1rem;
  line-height: 1.7;
}

/* The invitation to put the entry right. */
.entry__corrections {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.entry__corrections h2 {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  font-weight: normal;
}
.entry__corrections p {
  margin: 0 0 1rem;
  color: var(--ink-60);
}
.entry__corrections .form { margin-top: 1.5rem; }
/* These labels are long questions, so they are set as sentences. */
.entry__corrections .form label {
  margin-top: 1.2rem;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.entry__corrections .form__sent {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--gold);
  background: rgba(220, 195, 162, .35);
  color: var(--ink);
  line-height: 1.7;
}

/* --- forms on inner pages: corrections, requests, search ---------------- */

.form label {
  display: block;
  margin: 1rem 0 .45rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.form textarea,
.form input {
  display: block;
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: inherit;
}
.form textarea { min-height: 9rem; resize: vertical; }
.form textarea:focus,
.form input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.form button {
  margin-top: 1.2rem;
  padding: .8rem 1.3rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.form button:hover { background: #443327; border-color: #443327; }

/* A field and its button side by side, as in the search box. */
.form__row { display: flex; gap: .5rem; }
.form__row input { flex: 1; min-width: 0; }
.form__row button { margin-top: 0; }

/* --- about -------------------------------------------------------------- */

.about__lede {
  margin: 0 0 3rem;
  font-size: 1.5rem;
  line-height: 1.4;
}
.about__close {
  max-width: 36rem;
  margin: 2.5rem auto 0;
}

/* --- a short page: request a topic, search ------------------------------ */

.narrow {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.page__title {
  margin: 0 0 1rem;
  font-size: 2.6rem;
  font-weight: normal;
  line-height: 1.15;
}
.page__lead {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-60);
}

/* --- a section: introduction, then its entries -------------------------- */

.section__head {
  max-width: 36rem;
  margin: 0 auto 3.5rem;
}
.section__title {
  margin: 0 0 1.5rem;
  font-size: 2.6rem;
  font-weight: normal;
  line-height: 1.15;
}
.section__intro {
  font-size: 1.125rem;
  line-height: 1.8;
}
.section__intro p { margin: 0 0 1.2em; }

.section__entries {
  max-width: 36rem;
  margin: 0 auto;
}
.section__entries-title {
  margin: 0 0 .9rem;
  font-size: .8rem;
  font-weight: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* A list of entries. Written ones are links; the rest are named, unlinked
   and marked coming soon. */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entry-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}
.entry-list li:last-child { border-bottom: 1px solid var(--line); }
.entry-list a {
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.entry-list a:hover { border-bottom-width: 2px; }
.entry-list__lao {
  font-family: "Noto Serif Lao", Georgia, serif;
  font-weight: 600;
}
.is-soon .entry-list__name { color: var(--ink-60); }
/* The dot between an English name and its Lao. */
.entry-list__sep { color: var(--ink-60); }
.soon {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Occasions: the twelve months of Heed Sip Song. Each month has three
   fields: the month, its festival (or a note that the text names none) with
   any other names below, and the heet itself in Lao with its translation.
   Two columns at most, since the heet runs to several lines. */
.months {
  list-style: none;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 3.2rem 3.5rem;
}

/* 1. the month */
.month__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  margin: 0 0 .8rem;
  font-weight: normal;
  line-height: 1.2;
}
.month__lao {
  font-family: "Noto Serif Lao", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
}
.month__sep { color: var(--ink-60); }
.month__number {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* 2. the festival: .entry-list above, or this when the text names none */
/* Other names, in English only. */
.month__also {
  margin: .5rem 0 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--ink-60);
}

/* 3. the heet, from the Siao Sawat text */
/* One block per source, each with its own gold rule, so a second source
   can sit under the first without restructuring. */
.heet { margin: 1.2rem 0 0; }
.heet__source {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
}
.heet__source + .heet__source { margin-top: 1rem; }
.heet__lao {
  margin: 0 0 .4rem;
  font-family: "Noto Serif Lao", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.75;
}
.heet__en {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}
/* The source's name. Used only once a month has more than one source; until
   then the introduction attributes the Siao Sawat text once. */
.heet__cite {
  margin: .5rem 0 0;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* The Luang Prabang variation under month nine. */
.month__xref {
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-60);
}

/* The section an entry lives in, shown beside it in lists and results. */
.entry-list__section {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --- search results ----------------------------------------------------- */

.results {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.result {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.result:last-child { border-bottom: 1px solid var(--line); }
.result__title {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  font-weight: normal;
}
.result__title a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.result__snippet {
  margin: .35rem 0 0;
  color: var(--ink-60);
  line-height: 1.6;
}
.result__snippet mark {
  background: rgba(176, 132, 48, .28);
  color: inherit;
  padding: 0 .1em;
}

/* Nothing found: an invitation, not an error. */
.search-empty {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem;
  background: rgba(220, 195, 162, .35);
  border-left: 3px solid var(--gold);
}
.search-empty p { margin: 0; line-height: 1.7; }
.search-empty p + p { margin-top: .6rem; }
.search-empty__title { font-size: 1.2rem; }

/* --- directory ---------------------------------------------------------- */

.listings {
  list-style: none;
  max-width: 36rem;
  margin: 0 auto;
  padding: 0;
}
.listing {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.listing:last-child { border-bottom: 1px solid var(--line); }
.listing__kind {
  margin: 0 0 .3rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.listing__name {
  margin: 0 0 .2rem;
  font-size: 1.3rem;
  font-weight: normal;
}
.listing__location { margin: 0 0 .7rem; color: var(--ink-60); }
.listing__what { margin: 0 0 .9rem; line-height: 1.7; }
.listing__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem 1rem;
  margin: 0 0 .9rem;
}
.listing__contact dt { color: var(--ink-60); }
.listing__contact dd { margin: 0; overflow-wrap: anywhere; }
.listing__verified {
  margin: 0;
  font-size: .8rem;
  color: var(--ink-60);
}
/* --- the sala: notes, newest first ------------------------------------- */

.notes {
  list-style: none;
  max-width: 36rem;
  margin: 0 auto;
  padding: 0;
}
.note {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.note:last-child { border-bottom: 1px solid var(--line); }
.note__title {
  margin: 0 0 .2rem;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.3;
}
.note__date {
  margin: 0 0 .9rem;
  font-size: .8rem;
  color: var(--ink-60);
}
.note p { line-height: 1.75; }
.note p:last-child { margin-bottom: 0; }

/* --- an entry that is not written yet ----------------------------------- */

/* A holding page: the section it belongs to, the title in Lao and English,
   and one line saying it is being written. */
.entry__section {
  margin: 0 0 1.4rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.entry__section a { text-decoration: none; border-bottom: 1px solid var(--line); }
.entry__section a:hover { border-bottom-color: var(--ink-60); }
.entry__holding {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1.125rem;
  color: var(--ink-60);
}

/* 9. Narrow windows ------------------------------------------------------ */

/* The lockup is large, so the seven menu words stop fitting alongside it well
   before phone width: together they need about 1,005px. Below this the menu
   collapses to a button. */
@media (max-width: 1040px) {

  :root { --menu-h: 88px; }

  .lockup { gap: .6rem; }
  .lockup__mark { height: 3.6rem; }
  .lockup__lao { font-size: 1.5rem; }
  .lockup__latin { font-size: 1.15rem; letter-spacing: .14em; }

  .menu {
    flex-wrap: wrap;
    padding: 0 1.1rem;
  }

  /* The open menu grows past the band it normally occupies. */
  .menu--open {
    height: auto;
    padding-bottom: .9rem;
  }

  .menu__toggle {
    display: block;
    margin-left: auto;
    padding: .45rem .8rem;
    border: 1px solid var(--ink);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu__nav {
    display: none;
    width: 100%;
    margin: .9rem 0 .3rem;
  }
  .menu--open .menu__nav { display: block; }

  .menu__nav ul {
    flex-direction: column;
    gap: .1rem;
  }
  .menu__nav a {
    display: block;
    padding: .55rem 0;
    font-size: 1.15rem;
  }
}

/* Short windows: the menu's band is a large share of a 400px-tall screen,
   so shrink it and hand the height back to the photograph. */
@media (max-height: 620px) {

  :root { --menu-h: 88px; }

  .lockup { gap: .6rem; }
  .lockup__mark { height: 3.6rem; }
  .lockup__lao { font-size: 1.5rem; }
  .lockup__latin { font-size: 1.15rem; letter-spacing: .14em; }
}

/* 10. Phones ------------------------------------------------------------- */

@media (max-width: 700px) {

  :root {
    /* SWAP: when a tall mobile wall image is in place, set this to that
       image's width / height (for example 0.75 for a 900 x 1200 picture). */
    --wall-ratio: 1.833333;
  }

  .below { padding-top: 3.5rem; }

  .page { padding-top: calc(var(--menu-h) + 2.2rem); }
  .entry__title-lao { font-size: 2rem; }
  .entry__title-en { font-size: 1.55rem; }
  .entry__body { font-size: 1.05rem; }
  .about__lede { font-size: 1.25rem; }
  .page__title { font-size: 2rem; }
  .section__title { font-size: 2rem; }
  .section__intro { font-size: 1.05rem; }
}

/* Touch screens of any size: the hidden links stay in the page for screen
   readers and crawlers, but they are not tappable. */
@media (hover: none) {
  .hotspot { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}