/* Temple site.
   The idea: a temple on a mountain, seen through morning mist. Every page opens
   in the pale mist colour and its picture rises out of it. Lacquer red and gold
   leaf are the temple's own colours and are used sparingly; spruce black is
   the forest around it. */

@font-face { font-family: 'Crimson Pro'; src: url(../fonts/CrimsonPro-Regular.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(../fonts/CrimsonPro-Italic.woff) format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(../fonts/WorkSans-Regular.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(../fonts/WorkSans-Bold.woff) format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arsenal SC'; src: url(../fonts/ArsenalSC-Regular.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --mist: #ebefe8;
  --mist-0: rgba(235, 239, 232, 0);
  --paper: #f8f9f5;
  --ink: #1b2520;
  --ink-soft: #4b5751;
  --lacquer: #8c2a1e;
  --lacquer-deep: #6f1f15;
  --gold: #7d5b20;
  --leaf: #c9a55b;
  --night: #16201b;
  --night-text: #e6eae2;
  --night-soft: #b9c2b9;
  --line: #cdd5cb;
  --display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --body: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --label: 'Arsenal SC', 'Work Sans', sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--mist); color: var(--ink);
  font-family: var(--body); font-size: 1.125rem; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lacquer); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--lacquer-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lacquer); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0 0 0.75rem; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; }
h3 { font-size: 1.6rem; line-height: 1.15; }
/* Vietnamese stacks tone marks above the letters, so its headings need more room between lines. */
:lang(vi) h1 { line-height: 1.16; }
:lang(vi) h2 { line-height: 1.2; }
:lang(vi) h3 { line-height: 1.25; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--label); font-size: 1.05rem; letter-spacing: 0.08em;
  color: var(--gold); margin: 0 0 0.6rem;
}
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 38rem; }
/* A Vietnamese name set beside its English one, e.g. "The main hall / chánh điện". */
.vn { display: block; font-family: var(--display); font-style: italic; font-size: 0.72em; color: var(--gold); margin-top: 0.2rem; letter-spacing: 0; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }

/* Placeholders such as "(Temple name)" look like ordinary text on purpose (Karl, 27 Oct 2026:
   the yellow highlight looked unnatural). build.py --check still counts them before launch. */

/* ---------- Header ---------- */
.site-head { position: relative; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.brand { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand-name { font-family: var(--display); font-size: 1.45rem; line-height: 1.1; }
.brand-place { font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.site-nav a { display: block; padding: 0.55rem 0.8rem; color: var(--ink); text-decoration: none; font-size: 1.0625rem; border-radius: 3px; }
.site-nav a:hover { color: var(--lacquer); }
.site-nav a[aria-current="page"] { color: var(--lacquer); box-shadow: inset 0 -2px 0 var(--lacquer); border-radius: 0; }
.site-nav .nav-cta a { background: var(--lacquer); color: #fff8ec; margin-left: 0.4rem; box-shadow: none; border-radius: 3px; }
.site-nav .nav-cta a:hover, .site-nav .nav-cta a[aria-current="page"] { background: var(--lacquer-deep); color: #fff8ec; }
.lang-switch {
  order: 3; font-size: 1rem; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 1rem; white-space: nowrap;
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
.lang-switch:hover { border-color: var(--lacquer); color: var(--lacquer); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-head .wrap { flex-wrap: wrap; gap: 0.6rem; }
  .lang-switch { order: 0; }
  .nav-toggle {
    display: block; font: inherit; font-size: 1rem; background: var(--ink); color: var(--mist);
    border: 0; border-radius: 3px; padding: 0.6rem 1rem; min-height: 2.75rem; cursor: pointer;
  }
  .site-nav { display: none; width: 100%; order: 4; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-top: 0.4rem; }
  .site-nav a { padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--lacquer); padding-left: 0.8rem; }
  .site-nav .nav-cta a { margin: 0.8rem 0 0.4rem; text-align: center; border-bottom: 0; padding: 0.8rem; }
}
/* Small phones: the name, the language button and Menu stay on one line. The
   place line under the name goes; the page says Belleisle just below it. */
@media (max-width: 480px) {
  .brand-place { display: none; }
  .site-head .wrap { gap: 0.5rem; }
  .lang-switch { padding: 0 0.75rem; }
  .nav-toggle { padding: 0.6rem 0.8rem; }
}
@media (max-width: 400px) { .brand-name { font-size: 1.25rem; } }
@media (max-width: 350px) {
  .brand-name { font-size: 1.1rem; }
  .lang-switch { padding: 0 0.6rem; }
  .nav-toggle { padding: 0.6rem 0.65rem; }
}

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn {
  display: inline-block; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 0.85rem 1.35rem; border-radius: 3px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
}
.btn-primary { background: var(--lacquer); color: #fff8ec; }
.btn-primary:hover { background: var(--lacquer-deep); color: #fff8ec; }
.btn-quiet { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-quiet:hover { background: var(--ink); color: var(--mist); }

/* ---------- Pictures and their tags ---------- */
.photo { position: relative; display: block; }
.photo img { width: 100%; border-radius: 3px; }
.photo-tag {
  position: absolute; right: 8px; bottom: 8px; font-family: var(--body); font-size: 0.75rem; line-height: 1.3;
  background: rgba(22, 32, 27, 0.74); color: #f3efe4; padding: 0.15rem 0.5rem; border-radius: 2px; pointer-events: none;
}

/* ---------- Home: the name, with the summit beside it ---------- */
/* Karl, 30 Oct 2026: the centred title over a picture dissolving into mist
   looked "heavily AI". Plain instead, like a printed brochure: the temple's
   name on the left, the picture on the right with a clean edge and a caption
   under it. No fade and no motion. */
.hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-text h1 { margin-bottom: 0.15rem; }
.hero-meaning { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--gold); margin: 0 0 1.25rem; }
.hero-text .lede { color: var(--ink); }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; border-radius: 3px; }
.hero-figure figcaption { font-size: 1rem; color: var(--ink-soft); margin-top: 0.6rem; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Inner pages: title in the mist, picture below ---------- */
.page-head { position: relative; }
.page-head .head-text { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 18ch; }
.head-img { position: relative; height: clamp(220px, 40vw, 520px); overflow: hidden; }
.head-img .bleed { width: 100%; height: 100%; object-fit: cover; }
.head-img::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 38%; z-index: 1;
  background: linear-gradient(to bottom, var(--mist), var(--mist-0));
}
.head-img .photo-tag { z-index: 2; right: 12px; bottom: 12px; }
/* Quan Âm: her head is near the top of the picture, so this one is taller,
   held to its top edge, with only a thin mist so her face stays clear. */
.head-img-statue { height: clamp(260px, 52vw, 760px); }
.head-img-statue .bleed { object-position: 50% 0%; }
.head-img-statue::before { height: 7%; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-paper { background: var(--paper); }
.section-night { background: var(--night); color: var(--night-text); }
.section-night h2, .section-night h3 { color: #fff; }
.section-night .eyebrow { color: var(--leaf); }
.section-night a:not(.btn) { color: #f0d9a2; }
.section-night :focus-visible { outline-color: var(--leaf); }
.section-intro { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-intro p:last-child { margin-bottom: 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.flip > :first-child { order: 2; }
.split p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}

/* Reading width for each block, while the column itself stays on the page's left edge. */
.prose > * { max-width: 42rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }

/* ---------- The walk up to the temple ---------- */
/* An ordered list, because a visit really does go in this order: the road,
   the gate, the courtyard, the main hall, then Quan Âm at the cliff edge.
   The dotted line is the path; each red lozenge is a place you stop. */
.path { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.path::before {
  content: ''; position: absolute; top: 0.6rem; bottom: 0.6rem; left: 11px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--leaf) 0 10px, transparent 10px 20px);
}
.stop { position: relative; padding-left: 46px; display: grid; gap: 1.1rem; }
.stop::before {
  content: ''; position: absolute; left: 4px; top: 0.45rem; width: 16px; height: 16px;
  background: var(--lacquer); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--mist), 0 0 0 5.5px var(--leaf);
}
.stop h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.6rem; }
.stop p { color: var(--ink-soft); max-width: 30rem; }
.stop-text { align-self: center; }
@media (min-width: 900px) {
  .path::before { left: calc(50% - 1px); }
  .stop { padding-left: 0; grid-template-columns: 1fr 1fr; column-gap: 112px; align-items: center; }
  .stop::before { left: calc(50% - 8px); top: calc(50% - 8px); }
  .stop:nth-child(even) .photo { order: 2; }
  .stop:nth-child(even) .stop-text { text-align: right; }
  .stop:nth-child(even) .stop-text p { margin-left: auto; }
}

/* ---------- Festivals ---------- */
.fest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.fest h3 { margin: 1rem 0 0.15rem; font-size: 1.55rem; }
.fest .sub { font-family: var(--label); letter-spacing: 0.06em; color: var(--gold); font-size: 1rem; margin-bottom: 0.5rem; }
.fest p { font-size: 1.0625rem; color: var(--ink-soft); }
.section-night .fest .sub { color: var(--leaf); }
.section-night .fest p { color: var(--night-soft); }
@media (max-width: 1000px) { .fest-grid { grid-template-columns: 1fr 1fr; } }
/* Phones: picture beside the words, so four festivals don't fill four screens. */
@media (max-width: 560px) {
  .fest-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .fest { display: grid; grid-template-columns: 38% 1fr; gap: 0.9rem; align-items: start; }
  .fest .photo img { aspect-ratio: 1 / 1; object-fit: cover; }
  .fest .photo-tag { right: 4px; bottom: 4px; padding: 0.05rem 0.35rem; }
  .fest h3 { margin-top: 0; font-size: 1.35rem; }
  .fest p { margin-bottom: 0; }
}

/* Festival detail rows on the festivals page. */
.fest-rows { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.fest-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.fest-row:nth-child(even) .photo { order: 2; }
.fest-row h2 { margin-bottom: 0.2rem; }
.fest-row .sub { font-family: var(--label); letter-spacing: 0.06em; color: var(--gold); font-size: 1.05rem; margin-bottom: 1rem; }
.when { font-size: 1rem; color: var(--ink-soft); border-left: 2px solid var(--leaf); padding-left: 0.8rem; }
@media (max-width: 800px) {
  .fest-row { grid-template-columns: 1fr; }
  .fest-row:nth-child(even) .photo { order: 0; }
}

/* ---------- Named parts of the temple ---------- */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; list-style: none; margin: 0; padding: 0; }
.terms li { border-top: 2px solid var(--lacquer); padding-top: 1rem; }
.terms h3 { margin-bottom: 0.5rem; }
.terms p { color: var(--ink-soft); margin: 0; }
@media (max-width: 640px) { .terms { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Notices ---------- */
.notice { border-left: 3px solid var(--leaf); background: var(--paper); padding: 1.25rem 1.5rem; max-width: 46rem; }
.notice h2, .notice h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.notice p:last-child { margin-bottom: 0; }
.notice.center { text-align: left; }
.warn { border-left-color: var(--lacquer); }

/* ---------- Three ways to take part ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.way { border-top: 1px solid var(--leaf); padding-top: 1.25rem; display: flex; flex-direction: column; }
.way h3 { font-size: 1.6rem; }
.way p { color: var(--ink-soft); }
.way .go { margin-top: auto; font-weight: 700; padding: 0.6rem 0; }
.section-night .way p { color: var(--night-soft); }
@media (max-width: 800px) { .ways { grid-template-columns: 1fr; } }

/* ---------- Form ---------- */
.form { max-width: 40rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }
.field label, legend { font-weight: 700; font-size: 1.0625rem; }
.opt { font-weight: 400; color: var(--ink-soft); }
input[type="text"], input[type="email"], textarea {
  font: inherit; font-size: 1.0625rem; color: var(--ink); background: #fff; border: 1.5px solid #aeb8ad; border-radius: 3px;
  padding: 0.7rem 0.8rem; width: 100%;
}
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--lacquer); outline-offset: 1px; border-color: var(--lacquer); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: 0.5rem; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; min-height: 2.75rem; font-size: 1.0625rem; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; flex: none; accent-color: var(--lacquer); }
.consent { font-size: 1rem; color: var(--ink-soft); margin-top: 0.4rem; }
.form .btn { margin-top: 1.25rem; }
.form-status { margin-top: 1rem; font-weight: 700; color: var(--lacquer-deep); min-height: 1.6em; }
.form-note { font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Privacy and other plain pages ---------- */
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.updated { font-size: 1rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-foot { background: var(--night); color: var(--night-soft); padding: 3.5rem 0 2rem; font-size: 1.0625rem; }
.site-foot a { color: #f0d9a2; }
.site-foot a:hover { color: #fff; }
.site-foot :focus-visible { outline-color: var(--leaf); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem 3rem; }
.foot-name { font-family: var(--display); font-size: 1.6rem; color: #fff; line-height: 1.15; }
.site-foot h2 { font-family: var(--label); font-size: 1rem; letter-spacing: 0.08em; color: var(--leaf); margin-bottom: 0.6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-block; padding: 0.55rem 0; }
.foot-legal { border-top: 1px solid rgba(201, 165, 91, 0.35); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 1rem; }
.foot-legal p { margin-bottom: 0.5rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
.notice-gap { margin-top: 2.5rem; }
.notice-lead { margin-bottom: clamp(3rem, 6vw, 4.5rem); background: var(--mist); }