/* ==========================================================
   Rithyreach & Nika — "Palm-leaf Manuscript" template
   Colours from the printed card: sage paper, cream, gold foil.
   ========================================================== */
:root {
  --sage-50: #f1f4ec;
  --sage-100: #e3eadb;
  --sage-200: #ccd9c0;
  --sage-400: #9fb38f;
  --sage-600: #6c7f5c;
  --sage-800: #3c4932;
  --sage-900: #29321f;
  --cream: #fbf7ec;
  --leaf: #f7f1df;
  --leaf-edge: #e6d9b5;
  --ink: #2f3324;
  --ink-2: #4b5040;
  --ink-3: #6b6f5b;
  --gold-900: #6e4f17;
  --gold-700: #94702a;
  --gold-500: #c19a4b;
  --gold-300: #e2c98d;
  --gold-100: #f8ecc9;
  --line: rgba(148, 112, 42, 0.38);
  --foil: linear-gradient(100deg, #8a6420 0%, #b8913f 22%, #e9cf8a 42%, #fff1c4 50%, #e2c27a 58%, #b8913f 78%, #8a6420 100%);

  --f-moul: "Moul", serif;
  --f-body: "Noto Serif Khmer", "Cormorant Garamond", serif;
  --f-serif: "Cormorant Garamond", "Noto Serif Khmer", serif;
  --f-script: "Pinyon Script", cursive;
  --t-body: clamp(15px, 0.6vw + 13px, 18px);
  --t-small: clamp(14px, 0.4vw + 12.5px, 16px);
  --t-h2: clamp(22px, 3.2vw + 12px, 44px);
  --gut: clamp(10px, 3.5vw, 40px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--sage-100);
}
body {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(90deg, rgba(108, 127, 92, 0.035) 0 2px, transparent 2px 7px),
    var(--sage-100);
  color: var(--ink);
  font: 400 var(--t-body) / 2 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body {
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: 1.6;
}
body.is-locked {
  overflow: hidden;
  height: 100svh;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}
.ph {
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* gold foil text — solid fallback colour so nothing is ever clipped on iPhone */
.foil {
  color: var(--gold-700);
}
@supports (-webkit-background-clip: text) {
  .foil {
    background: var(--foil);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0.32em 0.1em 0.3em;
    margin: -0.32em -0.1em -0.3em;
  }
}
/* decorative elements (traced gold art) */
.orn {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.kb-fill {
  fill: url(#g-foil);
}

/* ==========================================================
   OPENING
   ========================================================== */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--sage-800);
}
.gate__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(248, 236, 201, 0.22), rgba(248, 236, 201, 0) 70%),
    radial-gradient(130% 100% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(10, 14, 6, 0.55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
    var(--sage-800);
}
.lang {
  font: 600 13px/1 var(--f-serif);
  letter-spacing: 0.14em;
  min-width: 48px;
  height: 40px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(251, 247, 236, 0.85);
  color: var(--ink);
}
html[lang="en"] .lang {
  font: 400 14px/1 var(--f-body);
  letter-spacing: 0;
}
.lang--gate {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  background: rgba(41, 50, 31, 0.5);
  color: var(--gold-100);
  border-color: rgba(226, 201, 141, 0.45);
}
/* the manuscript */
.book {
  --bw: min(88vw, 560px, calc(62svh * 0.82));
  position: relative;
  width: var(--bw);
  aspect-ratio: 0.82;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.book > * {
  position: absolute;
  pointer-events: none;
}
/* the stack of leaves under the cover (seen at the edges) */
.book__leaves {
  inset: 2% -1.5% -2.2% 1.5%;
}
.book__leaves i {
  position: absolute;
  inset: 0;
  border-radius: 3.5cqw;
  background: linear-gradient(90deg, #efe2bd, #f7edd2 50%, #e9dab1);
  box-shadow: inset 0 0 0 1px rgba(148, 112, 42, 0.25);
}
.book__leaves i:nth-child(2) { transform: translate(1.2%, 1.2%); }
.book__leaves i:nth-child(3) { transform: translate(2.4%, 2.4%); }
.book__leaves i:nth-child(4) { transform: translate(3.4%, 3.4%); }
/* lacquered sage cover board */
.book__cover {
  inset: 0;
  border-radius: 3.5cqw;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 35%, rgba(255, 250, 225, 0.12), rgba(0, 0, 0, 0) 70%),
    linear-gradient(160deg, #7d9268, #5d7049 45%, #46563a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -30px 60px rgba(0, 0, 0, 0.25);
  transform-origin: 50% 0;
}
.book__grain {
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 6px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 9px);
}
.book__frame {
  inset: 4cqw;
  border: 1.5px solid rgba(226, 201, 141, 0.85);
  outline: 1px solid rgba(226, 201, 141, 0.4);
  outline-offset: -1.6cqw;
  border-radius: 1.6cqw;
}
.book__orn {
  width: 15cqw;
}
.book__orn--l { left: 2cqw; top: 2cqw; }
.book__orn--r { right: 2cqw; top: 2cqw; }
.book__orn--bl { left: 2cqw; bottom: 2cqw; }
.book__orn--br { right: 2cqw; bottom: 2cqw; }
.book__in {
  inset: 13% 11% 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4cqw;
  color: var(--gold-100);
}
.book__k {
  font: 400 max(15px, 4.6cqw) / 1.9 var(--f-moul);
  color: var(--gold-100);
}
.book__crest {
  width: 30cqw;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.book__names {
  display: flex;
  align-items: baseline;
  gap: 2.5cqw;
  font: 400 max(20px, 7.2cqw) / 1.8 var(--f-moul);
  color: #fff6dc;
  white-space: nowrap;
}
.book__names i {
  font: 400 1.3em/1 var(--f-script);
  color: var(--gold-300);
}
html[lang="en"] .book__names {
  font: 400 max(28px, 9cqw) / 1.2 var(--f-script);
}
.book__to {
  display: grid;
  justify-items: center;
  margin-top: 1cqw;
  padding: 1.2cqw 5cqw 1.6cqw;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(41, 50, 31, 0.5), rgba(41, 50, 31, 0.3));
  box-shadow: inset 0 0 0 1px rgba(226, 201, 141, 0.7);
  max-width: 100%;
}
.book__to[hidden] {
  display: none;
}
.book__to small {
  font: 600 max(12px, 3cqw) / 1.8 var(--f-body);
  color: var(--gold-300);
}
.book__to b {
  font: 400 max(16px, 5cqw) / 1.8 var(--f-moul);
  color: #fff6dc;
  text-wrap: balance;
}
.book__date {
  font: 600 max(12px, 3.1cqw) / 1.9 var(--f-body);
  color: var(--gold-100);
}
html[lang="en"] .book__date,
html[lang="en"] .book__to small {
  font-family: var(--f-serif);
}
/* binding holes + cord */
.book__holes,
.leaf__holes {
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
}
.book__holes i,
.leaf__holes i {
  position: absolute;
  width: 3.2cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1f2618, #3c4932 60%);
  box-shadow: 0 0 0 1px rgba(226, 201, 141, 0.7), 0 0 0 0.7cqw rgba(226, 201, 141, 0.18);
  transform: translate(-50%, -50%);
}
.book__holes i:first-child { left: 28%; }
.book__holes i:last-child { left: 72%; }
.book__cord {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.book__cord path {
  fill: none;
  stroke: url(#g-foil);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  stroke-width: 3px;
  stroke-linecap: round;
}
.gate__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 5svh, 48px));
  text-align: center;
  z-index: 3;
}
.gate__hint button {
  min-height: 44px;
  padding: 6px 20px;
  border: 0;
  border-top: 1px solid rgba(226, 201, 141, 0.45);
  border-bottom: 1px solid rgba(226, 201, 141, 0.45);
  background: rgba(41, 50, 31, 0.35);
  color: var(--gold-100);
  font: 500 var(--t-small) / 1.9 var(--f-body);
}
.gate__veil {
  position: absolute;
  inset: 0;
  background: var(--sage-100);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================
   PAGE — the leaves, bound by a gold cord
   ========================================================== */
.bar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 8px 18px;
  transform: translateY(-110%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s;
}
.bar.on {
  transform: none;
}
.bar.scr {
  background: rgba(227, 234, 219, 0.88);
  box-shadow: 0 1px 0 var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .bar.scr {
    background: rgba(227, 234, 219, 0.72);
    backdrop-filter: blur(10px);
  }
}
.bar__mark {
  font: 400 15px/1.9 var(--f-moul);
  color: var(--gold-700);
}
.bar__mark i {
  font: 400 18px/1 var(--f-script);
  padding: 0 2px;
}
main {
  position: relative;
  padding: calc(env(safe-area-inset-top, 0px) + 72px) var(--gut) 80px;
  display: grid;
  gap: clamp(20px, 4vh, 40px);
  justify-items: center;
}
/* the cord through every leaf's binding holes */
.spine {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: min(100% - 2 * var(--gut), 820px);
  transform: translateX(-50%);
  pointer-events: none;
}
.spine i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a37a2c, #e2c27a 30%, #fff2c8 50%, #e2c27a 70%, #a37a2c);
  box-shadow: 0 0 0 1px rgba(110, 79, 23, 0.25);
  transform-origin: top;
}
.spine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 9%;
  width: 3px;
  border-radius: 3px;
  background: inherit;
  background: linear-gradient(180deg, #a37a2c, #e2c27a 30%, #fff2c8 50%, #e2c27a 70%, #a37a2c);
}
.leaf {
  position: relative;
  width: min(100%, 820px);
  container-type: inline-size;
  border-radius: 28px / 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(110, 79, 23, 0.06)),
    repeating-linear-gradient(0deg, rgba(148, 112, 42, 0.045) 0 1px, transparent 1px 5px),
    var(--leaf);
  box-shadow:
    inset 0 0 0 1px rgba(148, 112, 42, 0.35),
    inset 0 0 0 6px var(--leaf),
    inset 0 0 0 7px rgba(193, 154, 75, 0.45),
    0 1px 1px rgba(41, 50, 31, 0.15),
    0 18px 34px -18px rgba(41, 50, 31, 0.45);
}
.leaf__holes {
  position: absolute;
  top: 26px;
}
.leaf__holes i {
  top: 0;
  width: 14px;
  background: radial-gradient(circle at 40% 35%, #b9c7a7, #9fb38f 60%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(193, 154, 75, 0.6);
}
.leaf__holes i:first-child { left: 9%; }
.leaf__holes i:last-child { left: 91%; }
.leaf__in {
  position: relative;
  padding: clamp(46px, 7vw, 70px) clamp(18px, 6vw, 64px) clamp(30px, 5vw, 56px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.leaf__orn {
  position: absolute;
  top: 12px;
  width: clamp(44px, 10vw, 80px);
}
.leaf__orn--tl { left: 12px; }
.leaf__orn--tr { right: 12px; }

/* type */
.h2 {
  display: inline-block;
  max-width: 100%;
  font: 400 var(--t-h2) / 1.9 var(--f-moul);
  text-wrap: balance;
}
.h2--2 {
  margin-top: clamp(22px, 4vh, 40px);
}
html[lang="en"] .h2 {
  font: italic 500 clamp(28px, 3.6vw + 16px, 52px) / 1.25 var(--f-serif);
}
.sub,
.eyebrow {
  font: 600 var(--t-small) / 1.9 var(--f-body);
  color: var(--ink-3);
}
.eyebrow {
  color: var(--gold-700);
}
.rule {
  width: min(70%, 300px);
  margin: 2px 0 10px;
}
html[lang="en"] .sub,
html[lang="en"] .eyebrow {
  font-family: var(--f-serif);
  font-weight: 600;
}

/* letter */
.t-bless {
  font: 400 clamp(22px, 3vw + 13px, 40px) / 1.9 var(--f-moul);
  margin-top: 4px;
}
html[lang="en"] .t-bless {
  font: italic 500 clamp(30px, 3vw + 18px, 50px) / 1.25 var(--f-serif);
}
.pars {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  font-size: min(1em, 3.6vw);
  margin: 4px 0 2px;
}
.pars__col {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0.35em;
  align-items: baseline;
  text-align: left;
}
.pars small {
  font: 400 0.84em/2 var(--f-body);
  color: var(--ink-2);
  white-space: nowrap;
  padding-right: 0.2em;
}
.pars b {
  font: 400 1.02em/2 var(--f-moul);
  color: var(--gold-700);
  white-space: nowrap;
}
.t-honour {
  font: 400 clamp(15px, 1.6vw + 10px, 24px) / 1.9 var(--f-moul);
  color: var(--gold-700);
  white-space: nowrap;
}
html[lang="en"] .t-honour {
  white-space: normal;
  font: italic 600 clamp(18px, 1.4vw + 13px, 26px) / 1.4 var(--f-serif);
  max-width: 34em;
}
.t-body,
.t-when,
.t-letter {
  font: 400 var(--t-body) / 2.05 var(--f-body);
  color: var(--ink-2);
  max-width: 42em;
  text-wrap: pretty;
}
.t-when {
  color: var(--ink);
  font-weight: 600;
}
.cp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6em;
  width: 100%;
  margin: 8px 0;
}
.cp small {
  display: block;
  font: 400 0.86em/2 var(--f-body);
  color: var(--ink-3);
}
.cp b {
  display: block;
  font: 400 min(1.4em, 5.2vw) / 1.9 var(--f-moul);
  color: var(--gold-700);
  white-space: nowrap;
}
html[lang="en"] .cp b {
  font: 400 min(1.9em, 6.4vw) / 1.3 var(--f-script);
}
.cp__crest {
  width: clamp(64px, 14vw, 110px);
}
.en-block {
  width: 100%;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-serif);
  color: var(--gold-700);
}
.en-par {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font: 600 clamp(12px, 0.6vw + 11px, 16px) / 1.6 var(--f-serif);
  color: var(--ink-2);
  text-align: left;
}
.en-par span {
  white-space: pre-line;
}
.en-par span:last-child {
  text-align: left;
}
.en-inv {
  font: italic 600 clamp(15px, 0.8vw + 13px, 20px) / 1.4 var(--f-serif);
  margin: 10px auto 4px;
  max-width: 30em;
}
.en-names {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.4em;
  font: 400 clamp(28px, 3vw + 18px, 46px) / 1.3 var(--f-script);
  white-space: nowrap;
}
.en-names i {
  font-size: 0.6em;
  font-style: normal;
}
.en-when {
  font: 600 clamp(14px, 0.6vw + 12px, 18px) / 1.6 var(--f-serif);
}
html[lang="en"] .en-block {
  display: none;
}

/* countdown */
.count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 520px);
  margin: 6px 0 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.count div {
  display: grid;
  justify-items: center;
  padding: 8px 0;
}
.count div + div {
  border-left: 1px solid var(--line);
}
.count b {
  font: 600 clamp(26px, 2vw + 20px, 42px) / 1.6 var(--f-body);
  color: var(--gold-700);
  font-variant-numeric: tabular-nums;
}
.count small {
  font: 400 13px/1.8 var(--f-body);
  color: var(--ink-3);
}

/* programme */
.prog {
  list-style: none;
  padding: 0;
  width: min(100%, 560px);
  display: grid;
  gap: 2px;
  text-align: left;
}
.prog li {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: 0.6em;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148, 112, 42, 0.28);
}
.prog li:last-child {
  border-bottom: 0;
}
.prog b {
  font: 600 clamp(14px, 0.5vw + 12.5px, 17px) / 1.9 var(--f-body);
  color: var(--gold-700);
  white-space: nowrap;
}
.prog span {
  font: 400 clamp(14px, 0.5vw + 12.5px, 17px) / 1.9 var(--f-body);
  color: var(--ink);
}
html[lang="en"] .prog b,
html[lang="en"] .prog span {
  font-family: var(--f-serif);
  font-size: clamp(16px, 0.5vw + 14px, 19px);
}
.prog__end {
  margin-top: 10px;
  font: 600 var(--t-small) / 2 var(--f-body);
  color: var(--ink-2);
}

/* photo placeholders (until the studio sends the photos) */
.ph-box {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px 999px 10px 10px;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(135deg, rgba(108, 127, 92, 0.08) 0 2px, transparent 2px 10px),
    var(--sage-100);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 6px var(--sage-50), inset 0 0 0 7px rgba(193, 154, 75, 0.4);
  overflow: hidden;
}
.ph-box span {
  display: grid;
  justify-items: center;
  gap: 4px;
  font: 500 13px/1.7 var(--f-body);
  color: var(--ink-3);
  padding: 0 10px;
  text-align: center;
}
.ph-box svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.4;
}
.ph-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  width: 100%;
}
.story figure {
  margin: 0;
  display: grid;
  gap: 8px;
}
.story .ph-box {
  aspect-ratio: 3 / 4;
}
.story figcaption {
  font: 500 var(--t-small) / 1.9 var(--f-body);
  color: var(--ink-2);
}
.gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 14px);
  width: 100%;
}
.gal .ph-box {
  aspect-ratio: 1;
  border-radius: 10px;
}
.gal .ph-box:nth-child(3n + 2) {
  aspect-ratio: 3 / 4;
  grid-row: span 1;
}
@media (max-width: 520px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 300px);
  }
  .gal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* venue */
.venue__name {
  font: 400 clamp(17px, 1.6vw + 12px, 26px) / 1.9 var(--f-moul);
  color: var(--gold-700);
}
html[lang="en"] .venue__name {
  font: italic 600 clamp(20px, 1.6vw + 15px, 30px) / 1.4 var(--f-serif);
}
.map {
  width: 100%;
  margin: 10px 0 6px;
  padding: 7px;
  border-radius: 14px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -18px rgba(41, 50, 31, 0.5);
}
.map iframe {
  display: block;
  width: 100%;
  height: clamp(240px, 40svh, 380px);
  border: 0;
  border-radius: 9px;
  filter: sepia(0.15) saturate(0.85);
  background: var(--sage-100);
}
.btns,
.share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 24px;
  border-radius: 99px;
  border: 1px solid var(--sage-800);
  background: var(--sage-800);
  color: var(--gold-100);
  font: 600 var(--t-small) / 1.6 var(--f-body);
  text-decoration: none;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
html[lang="en"] .btn {
  font-family: var(--f-serif);
  font-size: 17px;
}
.contacts {
  margin-top: 14px;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.contacts__t {
  font: 400 clamp(15px, 0.8vw + 13px, 19px) / 1.9 var(--f-moul);
  color: var(--gold-700);
}
html[lang="en"] .contacts__t {
  font: italic 600 20px/1.5 var(--f-serif);
}
#tels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
#tels a {
  font: 600 clamp(18px, 1vw + 15px, 24px) / 1.6 var(--f-serif);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--cream);
}

/* end */
.t-letter {
  white-space: pre-line;
}
.end-names {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-top: 18px;
  font: 400 clamp(22px, 2.4vw + 14px, 36px) / 1.9 var(--f-moul);
  color: var(--gold-700);
}
.end-names i {
  font: 400 1.3em/1 var(--f-script);
}
.note {
  min-height: 1.6em;
  font: 500 14px/1.6 var(--f-body);
  color: var(--gold-700);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* layout fixes: cover parts are positioned; the page and leaves never grow past the screen */
.book__cover > span {
  position: absolute;
}
main {
  grid-template-columns: minmax(0, 1fr);
}
.leaf__in > * {
  max-width: 100%;
  min-width: 0;
}
/* long letters wrap naturally (Khmer word-breaking), headings keep phrase-safe breaks */
.t-letter .ph,
.t-body .ph,
.t-when .ph {
  white-space: normal;
}
/* love story placeholders: three arches in a row on every screen */
@media (max-width: 520px) {
  .story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .ph-box span {
    font-size: 11px;
    line-height: 1.6;
  }
  .ph-box svg {
    width: 22px;
    height: 22px;
  }
}

main {
  overflow-x: clip;
}