/* ============================================================
   LES MOLIAIRES : STYLESHEET
   The identity comes from the objects themselves: colourised
   postcards printed on warm stock, black frames with a wide mat,
   holographic numbering, and the caption line printed above every
   image, "Les MoliAires" then the proverb in italic. The page reuses
   that caption as its main structural device.
   Palette jobs: paper carries the reading, ink carries the frames
   and the postmark, gold marks every action, sealing red is kept
   for what is closed or acquired.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --paper:      #F5F0E8;
  --paper-2:    #EDE5D5;
  --paper-3:    #E4D9C4;
  --ink:        #1A1810;
  --ink-soft:   #6B6557;
  --ink-faint:  #C8C2B6;
  --gold:       #B8952A;
  --gold-deep:  #90701A;
  --gold-soft:  #F0E6C4;
  --seal:       #8B2020;

  --rule:       1px solid rgba(26, 24, 16, .18);
  --lift:       0 24px 48px -30px rgba(26, 24, 16, .65);

  /* Same face as the rest of the site: Libre Baskerville, with the local
     Baskerville fallbacks so the page holds even without Google Fonts. */
  --serif: "Libre Baskerville", Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad:   clamp(1.25rem, 5vw, 5rem);
  --stack: clamp(4rem, 9vw, 8rem);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
body {
  margin: 0;
  /* Transparent on purpose: the shared WebGL canvas sits behind the
     page and is revealed through the nine frame windows. */
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(.92rem, .88rem + .25vw, 1.04rem);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.14; margin: 0; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; font-family: var(--mono);
}
.skip:focus { left: .5rem; top: .5rem; }

/* Hidden until the first cleared frame: a canvas that owns a context but has
   not been painted yet can flash opaque on some machines, which would put a
   dark rectangle behind the text. */
.gl {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  background: transparent; opacity: 0; transition: opacity .5s ease;
}
.gl.is-ready { opacity: 1; }

.eyebrow {
  font-family: var(--mono); font-weight: 400;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.4rem;
}

/* ---------- 3. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 400;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .95rem 1.6rem;
  border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); color: var(--paper); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #35301f; }
.btn--outline { border-color: rgba(26, 24, 16, .5); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--line { border-color: rgba(26, 24, 16, .3); color: var(--ink-soft); }
.btn--line:hover { border-color: var(--ink); color: var(--ink); }
.btn--sm { padding: .68rem 1.1rem; font-size: .7rem; }
.btn--full { width: 100%; }
.btn.is-locked {
  background: none; color: var(--ink-faint);
  border: 1px dashed var(--ink-faint); cursor: not-allowed;
}
.tier--dark .btn--outline { border-color: rgba(245, 240, 232, .5); color: var(--paper); }

/* ---------- 4. HERO ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 92vh, 900px);
  display: grid; align-content: end;
  padding: var(--pad) var(--pad) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 55% 40%;
  /* Held back so the lead paragraph reads on any crop of the picture. */
  opacity: .78;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--paper) 2%, rgba(245, 240, 232, .95) 30%, rgba(245, 240, 232, .52) 64%, rgba(245, 240, 232, .2) 100%);
}
.hero__inner { position: relative; max-width: 44rem; }
.hero__title {
  font-size: clamp(2.3rem, 7.4vw, 5rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  margin-bottom: 1.3rem;
}
.hero__lede {
  font-size: clamp(1rem, .93rem + .45vw, 1.22rem);
  line-height: 1.62; max-width: 32ch; color: #322d20;
}
.hero__lede strong { font-weight: 500; box-shadow: inset 0 -.35em 0 var(--gold-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 1.3rem; }
.hero__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-soft); margin: 0; }

/* Postmark. Signature element, drawn as ink pressed on the plate. */
.stamp-wrap {
  position: relative;
  text-align: center;
  margin: 2.5rem 0 0;
  justify-self: start;
}
.stamp {
  position: relative;
  width: min(58vw, 210px); aspect-ratio: 1;
  transform: rotate(-7deg);
  opacity: .92;
}
.stamp__ring { width: 100%; height: 100%; overflow: visible; }
.stamp__edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.stamp__edge--in { stroke-width: 1; opacity: .5; }
.stamp__ringtext {
  fill: var(--ink);
  font-family: var(--mono); font-weight: 400;
  font-size: 10px; letter-spacing: .22em;
}
.stamp__core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.stamp__num {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.7rem); line-height: .95;
  font-variant-numeric: tabular-nums;
}
.stamp__unit { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.stamp__clock {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .05em;
  font-variant-numeric: tabular-nums; margin: 1rem 0 .2rem;
}
.stamp__note {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--ink-soft); margin: 0; max-width: 22ch;
}
body.is-open .stamp__clock { display: none; }

@media (min-width: 900px) {
  .hero { align-content: center; }
  .hero__inner { max-width: 40rem; }
  .stamp-wrap {
    position: absolute; right: clamp(2rem, 6vw, 6rem); bottom: clamp(3rem, 8vw, 6rem);
    margin: 0; text-align: right;
  }
  .stamp { width: 250px; margin-left: auto; }
  .stamp__note, .stamp__clock { text-align: right; margin-left: auto; }
}

/* ---------- 5. STICKY BAR ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--pad);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  transform: translateY(-102%); transition: transform .3s ease;
}
.bar.is-on { transform: none; }
.bar__t { font-variant-numeric: tabular-nums; }
.bar__l { opacity: .7; flex: 1; }
.bar .btn { padding: .45rem .9rem; font-size: .66rem; }
@media (max-width: 640px) { .bar__l { display: none; } }

/* ---------- 6. PROSE, PLATES, FACTS ---------- */
.prose {
  background: var(--paper);
  max-width: 1240px; margin: 0 auto;
  padding: var(--stack) var(--pad) 0;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.prose__lead p { max-width: 40ch; font-size: clamp(.98rem, .92rem + .4vw, 1.14rem); line-height: 1.7; }
.prose__lead p:first-child::first-letter {
  float: left; font-size: 3em; line-height: .84;
  padding: .04em .08em 0 0; color: var(--gold-deep); font-weight: 700;
}

.plate { margin: 0; }
.plate img, .plate video { width: 100%; height: auto; border-radius: 2px; box-shadow: var(--lift); }
.plate figcaption {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink-soft); margin-top: .7rem; line-height: 1.5;
}

.facts { margin: 0; border-top: var(--rule); }
.facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: var(--rule); }
.facts dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .3rem; }
.facts dd { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.facts--tight > div { padding: .6rem 0; }

/* ---------- 7. THE NINE WORKS ---------- */
.works { max-width: 1240px; margin: 0 auto; padding: var(--stack) var(--pad) 0; }
.works__head {
  text-align: center;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.works__head h2 { font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.5rem); }

.grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
.work { display: flex; flex-direction: column; gap: .7rem; }

/* Window on the shared WebGL canvas. Kept transparent so the live
   frame shows through; the flat photograph covers it until the
   texture is ready, and stays for good without WebGL. */
/* The real frame measures 45 by 30.5 cm, with a square print of 17.5 cm
   centred in the mat. The window uses those exact proportions, so the nine
   frames are identical and line up across the grid. */
.frame { position: relative; aspect-ratio: 45 / 30.5; }
.frame__flat {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #0B0B0B;
  box-shadow: inset 0 0 0 clamp(7px, 1.7vw, 15px) #201E1A, var(--lift);
  transition: opacity .6s ease;
}
/* 17.5 of 45 is 38.9 per cent of the frame width, squared. */
.frame__flat img {
  width: 38.9%; aspect-ratio: 1; height: auto;
  object-fit: cover; max-width: none;
}
.frame.is-live .frame__flat { opacity: 0; }
.seal {
  position: absolute; right: -.4rem; top: -.6rem; z-index: 2;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--seal); border: 1px solid var(--seal); background: var(--paper);
  padding: .3rem .6rem; transform: rotate(-6deg);
}

/* The proverb, set like the italic line printed on the postcards. Three
   lines are reserved so a short title and a long one leave the following
   elements at the same height. */
.cap {
  margin: .2rem 0 0; line-height: 1.35;
  font-size: 1.02rem;
  min-height: 4.05em;
}
.cap__title { font-style: italic; font-weight: 400; }
.work__meta {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--ink-soft); margin: 0;
}
.work__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .3rem; }

/* ---------- 8. AUGMENTED EXHIBITION ---------- */
.augment {
  background: var(--paper-2);
  margin-top: var(--stack);
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.augment__text { max-width: 42ch; }
.augment h2 { font-size: clamp(1.4rem, 1.05rem + 1.9vw, 2.2rem); margin-bottom: 1.2rem; }
.augment__text p { color: #3B362A; }
.augment__cta { margin-top: 1.6rem; }
.plate--phone img { max-width: 300px; }

/* ---------- 9. EDITION ---------- */
.edition {
  background: var(--ink); color: var(--paper);
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.edition h2 { font-size: clamp(1.4rem, 1.05rem + 1.9vw, 2.2rem); margin-bottom: 1.2rem; }
.edition__text p { color: rgba(245, 240, 232, .82); max-width: 46ch; }
.edition__media { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start; }
.edition__video {
  width: 100%; border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.edition .facts { border-color: rgba(245, 240, 232, .22); }
.edition .facts > div { border-color: rgba(245, 240, 232, .22); }
.edition .facts dd { color: rgba(245, 240, 232, .7); }
.edition .plate img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* ---------- 10. FULL WIDTH BAND ---------- */
.band { margin: 0; position: relative; }
.band video {
  width: 100%; height: clamp(240px, 46vh, 460px); object-fit: cover;
}
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(245, 240, 232, 0) 22%, rgba(245, 240, 232, 0) 78%, var(--paper) 100%);
}

/* ---------- 11. OFFER ---------- */
.offer { background: var(--paper); max-width: 1240px; margin: 0 auto; padding: var(--stack) var(--pad) 0; }
.offer h2 { font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.5rem); margin-bottom: .9rem; }
.offer__hook {
  max-width: 52ch; color: var(--ink-soft);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.offer__cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.tier {
  border: var(--rule); background: rgba(255, 255, 255, .4);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.tier--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tier__status {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0;
}
.tier--dark .tier__status { color: var(--gold); }
.tier h3 { font-size: clamp(1.1rem, .95rem + .9vw, 1.5rem); }
.tier__price { font-family: var(--serif); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.9rem); margin: 0; }
.tier__lead { margin: 0; font-size: 1rem; }
.tier__list { margin: 0 0 auto; }
.tier__list li { padding: .6rem 0; border-bottom: var(--rule); font-size: .98rem; }
.tier--dark .tier__list li { border-color: rgba(245, 240, 232, .2); }
.tier__fine { font-family: var(--mono); font-size: .68rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.tier--dark .tier__fine { color: rgba(245, 240, 232, .62); }
.tier--dark .tier__fine a, .offer__support a { color: var(--gold); }
.offer__support { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; max-width: 52ch; }
.offer__support a { text-underline-offset: 4px; }

/* ---------- 12. WAITING LIST ---------- */
.alert {
  max-width: 1240px; margin: var(--stack) auto 0;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad);
  background: var(--paper-2);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr;
}
.alert h2 { font-size: clamp(1.35rem, 1rem + 1.8vw, 2.1rem); margin-bottom: 1rem; }
.alert__text p { max-width: 42ch; color: var(--ink-soft); }
.alert .plate { margin: 1.5rem 0; max-width: 320px; }
.alert__direct { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; }
.alert__form { display: grid; gap: .85rem; align-content: start; }
.field { display: grid; gap: .3rem; }
.field label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea {
  font-family: var(--serif); font-size: .95rem; color: var(--ink);
  padding: .75rem .85rem; border: 1px solid rgba(26, 24, 16, .35);
  background: var(--paper); border-radius: 3px; width: 100%;
}
.field textarea { resize: vertical; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-family: var(--mono); font-size: .72rem; margin: 0; min-height: 1.4em; }
.form__status.is-ok { color: var(--gold-deep); }
.form__status.is-ko { color: var(--seal); }

/* ---------- 13. FOOTER ---------- */
.foot { background: var(--paper); max-width: 1240px; margin: 0 auto; padding: var(--stack) var(--pad) 3rem; display: grid; gap: 1.5rem; }
.foot__title { font-size: 1.15rem; margin: 0 0 .3rem; }
.foot__brand p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.foot__nav a { text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.foot__legal { font-family: var(--mono); font-size: .66rem; line-height: 1.7; color: var(--ink-soft); margin: 0; padding-top: 1.2rem; border-top: var(--rule); }

/* ---------- 14. DIALOGS ---------- */
.modal {
  border: none; padding: 0; width: min(1060px, 94vw); max-height: 92vh; overflow: auto;
  background: var(--paper); color: var(--ink); border-radius: 3px;
  box-shadow: 0 50px 90px -30px rgba(26, 24, 16, .8);
}
.modal::backdrop { background: rgba(26, 24, 16, .82); }
.modal__close {
  position: sticky; top: 0; z-index: 3; margin-left: auto; display: block;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: none; padding: .7rem 1.1rem; cursor: pointer;
}
.modal__body { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); padding: 0 clamp(1.2rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.6rem); }
.modal__media { display: grid; gap: .8rem; align-content: start; }
.modal__media img, .modal__media video { width: 100%; border-radius: 2px; background: var(--paper-2); }
.switch { display: flex; flex-wrap: wrap; gap: .4rem; }
.switch__b {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .75rem; border: 1px solid rgba(26, 24, 16, .28);
  background: none; color: var(--ink-soft); cursor: pointer; border-radius: 3px;
}
.switch__b.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.modal__info { display: grid; gap: .9rem; align-content: start; }
.modal__n { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.modal__info h3 { font-size: clamp(1.1rem, .95rem + 1.1vw, 1.6rem); }
.modal__note { color: var(--ink-soft); margin: 0; }
.modal__specs { margin: 0; border-top: var(--rule); }
.modal__specs > div { display: grid; grid-template-columns: 7.5rem 1fr; padding: .55rem 0; border-bottom: var(--rule); font-size: .92rem; }
.modal__specs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .25rem; }
.modal__specs dd { margin: 0; color: var(--ink-soft); }
.buy { display: grid; gap: .6rem; margin-top: .4rem; }
.buy__row { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; border: var(--rule); padding: .7rem .85rem; }
.buy__label { font-size: .96rem; }
.buy__price { font-family: var(--mono); font-size: .82rem; }
.buy__row.is-locked { opacity: .6; }

.modal--video { width: min(900px, 94vw); }
.modal--video video { width: 100%; background: #000; }
.modal--video .modal__n { padding: 0 clamp(1.2rem, 4vw, 2rem) .8rem; }

/* ---------- 15. RESPONSIVE ---------- */
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .offer__cols { grid-template-columns: repeat(2, 1fr); }
  .alert { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .prose { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .prose .facts { grid-column: 1 / -1; }
  .augment { grid-template-columns: 1fr 1fr; align-items: center; }
  .plate--phone { grid-column: 1 / -1; justify-self: center; }
  .edition { grid-template-columns: .9fr 1.1fr; align-items: center; }
  .edition__media { grid-template-columns: 1fr 1fr; align-items: start; }
  .modal__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (min-width: 1040px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .augment { grid-template-columns: 1fr 1.15fr .55fr; }
  .augment__text { grid-column: 1; }
  .plate--phone { grid-column: auto; justify-self: end; }
}

/* ---------- 16. MOTION ---------- */
@keyframes press {
  from { opacity: 0; transform: rotate(-24deg) scale(1.5); }
  60%  { opacity: .92; transform: rotate(-5deg) scale(.97); }
  to   { opacity: .92; transform: rotate(-7deg) scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.stamp { animation: press 1s cubic-bezier(.2, .8, .25, 1) both .35s; }
.hero__title, .hero__lede, .hero__actions { animation: rise .8s ease both; }
.hero__lede { animation-delay: .12s; }
.hero__actions { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .stamp { opacity: .92; transform: rotate(-7deg); }
}

/* ---------- 17. PRINT ---------- */
@media print {
  .gl, .bar, .alert__form, .work__actions, .modal { display: none; }
  .hero { min-height: auto; }
}

/* ---------- 18. STRIPE BUY BUTTONS ---------- */
/* The component is only inserted when a Buy Button id is configured,
   otherwise the container stays empty and takes no room. */
.buy__stripe { grid-column: 1 / -1; }
.buy__stripe:empty { display: none; }

/* ---------- 19. PAYMENT ---------- */
/* Confirmation strip shown on return from the checkout. */
.ticket {
  position: relative; z-index: 2;
  padding: 1rem var(--pad);
  font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  border-bottom: 1px solid rgba(26, 24, 16, .2);
}
.ticket p { margin: 0; max-width: 70ch; }
.ticket--ok { background: var(--gold-soft); color: var(--ink); }
.ticket--ko { background: #F3E0DE; color: var(--seal); }
.ticket strong { font-weight: 500; }

/* The Stripe form is mounted inside this dialog. */
.modal--pay { width: min(560px, 94vw); }
.modal--pay .modal__n { padding: 0 clamp(1.2rem, 4vw, 2rem) .4rem; }
.pay__status {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-soft);
  padding: 0 clamp(1.2rem, 4vw, 2rem); margin: 0 0 .8rem; line-height: 1.6;
}
#stripeCheckout { padding: 0 clamp(.8rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem); min-height: 60px; }


/* ---------- 20. COLOUR SCHEME ---------- */
/* Declared so a browser in dark mode never repaints a backdrop behind the
   page: the paper colour is the only background this design has. */
html { color-scheme: light; }

/* ---------- 21. LEGAL PAGE ---------- */
.legal {
  background: var(--paper);
  max-width: 74ch; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad) 0;
}
.legal h1 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); margin-bottom: .6rem; }
.legal h2 {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 .9rem;
  padding-top: 1.2rem; border-top: var(--rule);
}
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }
.legal p { max-width: 68ch; }
.legal a { color: var(--gold-deep); text-underline-offset: 3px; }
.legal .eyebrow a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--gold); }
.legal__date { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }
.legal__list { margin: 0 0 1rem; }
.legal__list li { padding: .5rem 0; border-bottom: var(--rule); font-size: .96rem; }
.legal__list strong { font-weight: 700; }
.legal .facts { margin-bottom: 1.5rem; }
.legal__back { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }


/* ---------- 22. PRESS LINE ---------- */
.plate figcaption .favicon {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  vertical-align: -.16em;
  margin: 0 .25em 0 .15em;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: none;
}
.plate figcaption a { color: var(--ink); text-underline-offset: 3px; }
.plate figcaption .readmore {
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--gold); padding-bottom: 1px;
}
.plate figcaption .readmore:hover { border-bottom-color: var(--ink); }