/* ============================================================
   eceyouri.love — pastel palette with gold as the single
   highlight: soft cream ground, washed pastel fills, gold
   hairlines and gold text accents, italic serif + geometric sans.

   Pastels are fills only — they are too light to carry text.
   Anything that has to be read uses --ink, --ink-soft or
   --gold-deep; --gold is reserved for rules, borders and marks.
   ============================================================ */

:root {
  --parchment: #f7efdf;
  --parchment-deep: #f0e5d2;
  --card: #fffcf8;
  --ink: #3a332c;
  --ink-soft: #746a60;

  /* pastel fills */
  --mint: #a9d5cd;
  --mint-soft: #cfe8e3;
  --blush: #f0c3c8;
  --blush-light: #fbe2e4;
  --blush-deep: #d79aa1;
  --blush-shadow: #b07f86;
  --peach: #f6d2b0;
  --lilac: #cfc2e6;
  --sage: #b7c9ac;
  --sky: #bfd6e8;

  /* gold — the only highlight */
  --gold: #c9a24e;
  --gold-deep: #856728;
  --gold-pale: rgba(201, 162, 78, 0.55);

  --dusk: #4a4038;
  --dusk-deep: #332c26;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* The [hidden] attribute hides via the UA's low-specificity [hidden]{display:none},
   which any element+id or class rule setting `display` will beat — leaving the
   element on screen with its `hidden` attribute set. Make hiding win outright. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--parchment);
}

body {
  background:
    radial-gradient(ellipse 700px 420px at 85% -5%, rgba(169,213,205,0.10), transparent 60%),
    radial-gradient(ellipse 600px 500px at 8% 12%, rgba(201,162,78,0.12), transparent 55%),
    var(--parchment);
  overflow-x: hidden;
}

/* ---------- language switch ---------- */

.lang-switch {
  position: fixed;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-deep);
  background: rgba(247, 239, 223, 0.92);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 7px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switch:hover {
  background: var(--gold-deep);
  color: var(--parchment);
}

/* ---------- shared small marks ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
}

.jewel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 10px;
  vertical-align: 2px;
}

.amp {
  font-style: normal;
  color: var(--gold-deep);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

a:hover { color: var(--gold-deep); }

.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ============================================================
   COVER
   ============================================================ */

#cover {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* flat ground only — the pastel washes live in #cover::before, above the
     artwork rather than beneath it (see the note there) */
  background: var(--parchment);
  /* bottom padding clears the frame's inner gold line (inset 16+6=22px) with
     room to spare, so the artwork never crowds it */
  padding: 112px 0 52px;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}

/* The cover art is an opaque PNG whose paper is exactly --parchment. Painted
   under the artwork, these washes tint the surrounding ground but not the
   image, and the difference reads as a rectangle — which is what the old edge
   mask was there to hide. Laying them over the artwork instead tints image and
   ground identically, so the rectangle disappears with no edge treatment. */
#cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 640px 400px at 50% 0%, rgba(169,213,205,0.12), transparent 65%),
    radial-gradient(ellipse 520px 380px at 12% 90%, rgba(240,195,200,0.08), transparent 60%);
}

body.open #cover { transform: translateY(-102%); }

.cover-frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(201,162,78,0.75);
  pointer-events: none;
}

.cover-frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201,162,78,0.48);
}

.cover-content {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 0;
  animation: settle 1.2s ease backwards;
}

.names {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(52px, 11vw, 108px);
  line-height: 1.02;
  margin: 0 0 6px;
  color: var(--ink);
}

.cover-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 3vw, 26px);
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.cover-date {
  font-size: 14px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0 0 40px;
}

/* wax seal button */

#seal {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-family: var(--sans);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Poured wax: a scalloped, slightly irregular rim (clip-path), a raised
   outer bead of wax, a recessed stamped field, and an embossed monogram.
   The drop-shadow filter is used rather than box-shadow so the shadow
   follows the scalloped silhouette instead of a rectangle. */

.seal-face {
  position: relative;
  width: 124px;
  height: 124px;
  clip-path: polygon(98.52% 50.00%, 98.30% 51.08%, 97.97% 52.15%, 97.55% 53.21%, 97.06% 54.24%, 96.55% 55.24%, 96.02% 56.23%, 95.50% 57.21%, 95.00% 58.17%, 94.53% 59.12%, 94.12% 60.07%, 93.77% 61.03%, 93.48% 62.00%, 93.28% 63.00%, 93.14% 64.02%, 93.07% 65.07%, 93.05% 66.16%, 93.06% 67.27%, 93.07% 68.41%, 93.04% 69.55%, 92.93% 70.67%, 92.71% 71.76%, 92.35% 72.79%, 91.84% 73.74%, 91.18% 74.60%, 90.37% 75.37%, 89.46% 76.05%, 88.48% 76.66%, 87.48% 77.23%, 86.50% 77.79%, 85.58% 78.37%, 84.76% 79.02%, 84.05% 79.75%, 83.46% 80.58%, 82.96% 81.52%, 82.54% 82.54%, 82.16% 83.64%, 81.78% 84.77%, 81.36% 85.89%, 80.86% 86.96%, 80.26% 87.95%, 79.55% 88.81%, 78.72% 89.54%, 77.79% 90.12%, 76.78% 90.56%, 75.69% 90.89%, 74.57% 91.12%, 73.42% 91.28%, 72.28% 91.40%, 71.15% 91.50%, 70.04% 91.62%, 68.97% 91.77%, 67.93% 91.96%, 66.92% 92.19%, 65.94% 92.48%, 64.99% 92.83%, 64.05% 93.23%, 63.12% 93.69%, 62.20% 94.19%, 61.27% 94.73%, 60.34% 95.30%, 59.39% 95.86%, 58.42% 96.40%, 57.43% 96.88%, 56.40% 97.27%, 55.36% 97.54%, 54.29% 97.67%, 53.21% 97.65%, 52.13% 97.47%, 51.06% 97.15%, 50.00% 96.73%, 48.96% 96.25%, 47.95% 95.76%, 46.95% 95.31%, 45.95% 94.95%, 44.96% 94.73%, 43.95% 94.66%, 42.91% 94.73%, 41.84% 94.95%, 40.73% 95.26%, 39.59% 95.62%, 38.42% 95.97%, 37.24% 96.25%, 36.06% 96.41%, 34.92% 96.41%, 33.82% 96.23%, 32.79% 95.86%, 31.82% 95.31%, 30.93% 94.62%, 30.10% 93.82%, 29.32% 92.94%, 28.58% 92.04%, 27.86% 91.14%, 27.14% 90.28%, 26.41% 89.48%, 25.66% 88.74%, 24.87% 88.07%, 24.04% 87.47%, 23.18% 86.91%, 22.29% 86.40%, 21.37% 85.91%, 20.42% 85.43%, 19.46% 84.95%, 18.50% 84.46%, 17.54% 83.95%, 16.60% 83.40%, 15.70% 82.80%, 14.85% 82.13%, 14.07% 81.39%, 13.38% 80.58%, 12.79% 79.68%, 12.31% 78.70%, 11.93% 77.66%, 11.65% 76.57%, 11.43% 75.46%, 11.25% 74.35%, 11.06% 73.27%, 10.81% 72.23%, 10.48% 71.27%, 10.03% 70.37%, 9.44% 69.53%, 8.72% 68.75%, 7.87% 68.01%, 6.94% 67.27%, 5.98% 66.52%, 5.03% 65.74%, 4.16% 64.89%, 3.42% 63.99%, 2.86% 63.01%, 2.48% 61.97%, 2.31% 60.89%, 2.32% 59.76%, 2.48% 58.62%, 2.76% 57.48%, 3.10% 56.35%, 3.46% 55.24%, 3.79% 54.16%, 4.05% 53.10%, 4.22% 52.06%, 4.31% 51.03%, 4.30% 50.00%, 4.21% 48.97%, 4.07% 47.94%, 3.89% 46.89%, 3.71% 45.83%, 3.54% 44.77%, 3.40% 43.69%, 3.31% 42.61%, 3.29% 41.52%, 3.34% 40.45%, 3.48% 39.38%, 3.71% 38.34%, 4.04% 37.32%, 4.47% 36.33%, 5.01% 35.38%, 5.65% 34.48%, 6.36% 33.62%, 7.12% 32.80%, 7.91% 32.01%, 8.68% 31.23%, 9.41% 30.45%, 10.05% 29.64%, 10.59% 28.79%, 11.00% 27.87%, 11.30% 26.88%, 11.49% 25.80%, 11.60% 24.66%, 11.69% 23.46%, 11.79% 22.24%, 11.95% 21.03%, 12.23% 19.88%, 12.64% 18.81%, 13.20% 17.85%, 13.93% 17.03%, 14.81% 16.35%, 15.81% 15.81%, 16.89% 15.37%, 18.01% 15.00%, 19.14% 14.68%, 20.24% 14.35%, 21.28% 13.98%, 22.25% 13.55%, 23.14% 13.03%, 23.97% 12.42%, 24.74% 11.73%, 25.48% 10.97%, 26.20% 10.17%, 26.94% 9.36%, 27.70% 8.56%, 28.50% 7.79%, 29.34% 7.09%, 30.23% 6.47%, 31.16% 5.93%, 32.15% 5.49%, 33.16% 5.14%, 34.22% 4.89%, 35.29% 4.74%, 36.39% 4.67%, 37.50% 4.69%, 38.61% 4.78%, 39.71% 4.92%, 40.81% 5.10%, 41.88% 5.27%, 42.94% 5.42%, 43.97% 5.51%, 44.99% 5.50%, 45.98% 5.38%, 46.98% 5.14%, 47.97% 4.77%, 48.97% 4.30%, 50.00% 3.75%, 51.05% 3.18%, 52.13% 2.64%, 53.22% 2.18%, 54.33% 1.86%, 55.44% 1.72%, 56.53% 1.77%, 57.60% 2.02%, 58.63% 2.46%, 59.61% 3.06%, 60.56% 3.75%, 61.46% 4.50%, 62.35% 5.24%, 63.24% 5.92%, 64.13% 6.50%, 65.06% 6.96%, 66.03% 7.29%, 67.04% 7.52%, 68.10% 7.65%, 69.20% 7.73%, 70.32% 7.80%, 71.45% 7.90%, 72.57% 8.06%, 73.66% 8.30%, 74.70% 8.66%, 75.68% 9.12%, 76.60% 9.70%, 77.45% 10.38%, 78.22% 11.15%, 78.93% 12.00%, 79.58% 12.90%, 80.18% 13.85%, 80.73% 14.82%, 81.25% 15.81%, 81.74% 16.80%, 82.23% 17.77%, 82.73% 18.71%, 83.25% 19.60%, 83.83% 20.45%, 84.47% 21.22%, 85.19% 21.94%, 85.99% 22.60%, 86.88% 23.21%, 87.83% 23.79%, 88.83% 24.37%, 89.84% 24.97%, 90.82% 25.61%, 91.71% 26.33%, 92.49% 27.13%, 93.12% 28.03%, 93.57% 29.02%, 93.86% 30.08%, 93.98% 31.20%, 93.98% 32.36%, 93.90% 33.52%, 93.79% 34.68%, 93.71% 35.80%, 93.70% 36.88%, 93.81% 37.91%, 94.06% 38.90%, 94.44% 39.86%, 94.95% 40.80%, 95.55% 41.73%, 96.20% 42.68%, 96.84% 43.65%, 97.44% 44.65%, 97.94% 45.69%, 98.31% 46.74%, 98.54% 47.82%, 98.60% 48.91%);
  background:
    /* light raking in from the upper left, as in the reference photo */
    radial-gradient(ellipse 78% 70% at 30% 24%, rgba(255,255,255,0.55), transparent 58%),
    /* shadow pooling on the lower-right side of the bead */
    radial-gradient(ellipse 90% 90% at 76% 82%, rgba(176,127,134,0.55), transparent 62%),
    /* the wax itself, deepening towards the rim */
    radial-gradient(circle at 50% 46%, var(--blush-light) 0%, var(--blush) 46%, var(--blush-deep) 82%, #cf929a 100%);
  filter:
    drop-shadow(0 2px 1px rgba(176,127,134,0.35))
    drop-shadow(0 10px 16px rgba(176,127,134,0.32));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

/* the pressed field: a shallow, softly-lit depression the stamp left behind */
.seal-face::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 80% 80% at 34% 30%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(215,154,161,0.32), rgba(215,154,161,0.05) 70%);
  box-shadow:
    inset 0 3px 5px rgba(176,127,134,0.45),
    inset 0 -2px 4px rgba(255,255,255,0.42);
}

/* specular sheen across the top-left of the wax */
.seal-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 34%, transparent 52%);
  pointer-events: none;
}

/* engraved double hairline, as struck by the matrix — a thick-thin pair
   is the classic border on an intaglio seal */
.seal-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1.5px solid rgba(176,127,134,0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.40),
    inset 0 1px 1px rgba(176,127,134,0.30),
    /* the inner hairline, set in from the first */
    inset 0 0 0 3px transparent,
    inset 0 0 0 4px rgba(176,127,134,0.22),
    inset 0 0 0 5px rgba(255,255,255,0.28);
  z-index: 1;
}

/* interlocked monogram in an engraver's script */
.seal-mono {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-size: 46px;
  line-height: 1;
  /* Pinyon's capitals ride high in the em box, and the Y's swash reaches
     further right than the layout box — nudge the whole cypher back to
     the optical centre of the stamped field */
  transform: translate(-0.08em, 0.045em);
  color: var(--blush-light);
  /* struck into the wax: highlight on the upper edge, shadow below */
  text-shadow:
    0 -1px 0 rgba(255,255,255,0.60),
    0 1px 1px rgba(176,127,134,0.70),
    0 2px 3px rgba(176,127,134,0.40);
}

/* the two letters lean into each other so their strokes cross,
   the way a real cypher is cut */
.seal-mono .mono-e {
  margin-right: -0.10em;
  /* translate rather than margin: the layout box is unchanged, so the
     ampersand stays on the centre line of the seal */
  transform: translate(-0.09em, 0.02em);
}

.seal-mono .mono-y {
  margin-left: -0.10em;
  transform: translateY(-0.02em);
}

.seal-mono em {
  font-style: normal;
  font-size: 0.52em;
  align-self: center;
  opacity: 0.8;
  /* E and Y are unequal widths, so the ampersand does not land on the
     centre line by itself — nudge it onto the seal's axis */
  transform: translate(0.14em, -0.16em);
  padding: 0 0.02em;
}

#seal:hover .seal-face,
#seal:focus-visible .seal-face {
  transform: scale(1.06) rotate(-4deg);
}

#seal:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 8px; }

.seal-hint {
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

body.opening .seal-face {
  animation: crack 0.5s ease forwards;
}

@keyframes crack {
  40% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(0.92) rotate(-2deg); opacity: 0.85; }
}

.cover-shelf {
  /* in normal flow, so the illustration stacks under the seal with a
     controlled gap instead of floating over it */
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* #cover centres its column, and a centred column that overflows bleeds
     past BOTH paddings — so on a short viewport the bottom padding stops
     existing and the artwork runs over the gold frame. min-height:0 lets
     this item shrink instead, which the artwork's max-height then follows. */
  min-height: 0;
  flex-shrink: 1;
}

/* The page ground is the PNG's own cream, so the artwork sits on it natively
   and needs no edge treatment. An earlier feather mask was removed: near the
   gold cover frame it faded the artwork out against the border instead of
   blending into flat ground. */

.cover-art {
  width: min(430px, calc(100vw - 80px));
  height: auto;
  display: block;
  /* scale down rather than overflow when the shelf is squeezed; object-fit
     keeps the aspect ratio while max-height does the shrinking */
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
  /* the artwork has generous whitespace baked in, so the optical gap is
     larger than the box gap; a small negative margin tightens it to the
     seal without crowding the hint text */
  margin-top: -6px;
  animation: settle 0.9s ease backwards;
  animation-delay: 0.25s;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MAIN
   ============================================================ */

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

main section, main .masthead { animation: settle 0.9s ease backwards; }

.masthead {
  text-align: center;
  padding: clamp(72px, 12vh, 128px) 0 0;
}

.masthead-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.08;
  margin: 0 0 18px;
}

.masthead-title em {
  font-style: italic;
  color: var(--gold-deep);
}

.masthead-note {
  max-width: 520px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* floral divider: gold hairline + three jewel dots */

.divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 420px;
  margin: 44px auto 0;
}

.divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,78,0.9));
}

.divider .line:last-child {
  background: linear-gradient(90deg, rgba(201,162,78,0.9), transparent);
}

.divider .dots { display: flex; gap: 8px; }

.divider .dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

.d-pink { background: var(--blush); }
.d-marigold { background: var(--peach); }
.d-iris { background: var(--lilac); }

/* ---------- countdown: coloured glass chips ---------- */

.count-section {
  text-align: center;
  padding: clamp(48px, 8vh, 80px) 0 0;
}

.count-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 20px);
  flex-wrap: wrap;
}

.chip {
  width: clamp(74px, 18vw, 104px);
  padding: 18px 0 14px;
  border-radius: 14px 14px 26px 26px / 14px 14px 34px 34px;
  color: var(--ink);
  border: 1px solid var(--gold-pale);
  box-shadow:
    inset -6px -8px 16px rgba(58,51,44,0.10),
    inset 5px 6px 14px rgba(255,255,255,0.65),
    0 14px 24px -16px rgba(58,51,44,0.30);
  position: relative;
  overflow: hidden;
}

.chip::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 12%;
  width: 20%;
  height: 55%;
  background: radial-gradient(circle, rgba(255,255,255,0.65), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.chip-teal { background: var(--mint-soft); }
.chip-marigold { background: var(--peach); }
.chip-iris { background: var(--lilac); }
.chip-pink { background: var(--blush); }

.chip span {
  display: block;
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.chip label {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- section heads ---------- */

.section-head {
  text-align: center;
  margin-bottom: 40px;
}

.section-head h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 42px);
  margin: 0 0 10px;
}

.section-head .muted { margin: 0; }

/* ---------- details: place cards with scalloped edge ---------- */

.details { padding-top: clamp(72px, 12vh, 120px); }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.place-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--gold-pale);
  border-radius: 4px 4px 14px 14px;
  padding: 38px 30px 32px;
  text-align: center;
  box-shadow: 0 18px 34px -24px rgba(58,51,44,0.28);
}

.scallop {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 10px;
  /* gold scallop over a pastel wash — the pastel alone disappears
     against the cream card */
  background:
    radial-gradient(circle 10px at 10px 0, var(--gold) 98%, transparent) 0 0 / 20px 10px repeat-x;
  opacity: 0.9;
}

.place-card h4 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}

.place-card .big {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 8px;
}

.place-card p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }

.map-link { font-size: 14px; letter-spacing: 0.04em; }

/* ---------- programme timeline ---------- */

.programme { margin-top: clamp(56px, 9vh, 88px); }

.programme .section-head { margin-bottom: 32px; }

/* Horizontal band: line-art icons above a gold rule, a tick at each stop,
   label and note below — the engraved-stationery treatment. */

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  position: relative;
  display: flex;
}

/* the gold rule the stops sit on, fading out at both ends */
.timeline::before {
  content: "";
  position: absolute;
  top: 61px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201,162,78,0.95) 14%,
    rgba(201,162,78,0.95) 86%,
    transparent
  );
}

.timeline-stop {
  position: relative;
  flex: 1;
  /* without this, a longer note widens its column and the ticks
     stop being evenly spaced along the rule */
  min-width: 0;
  text-align: center;
  padding: 0 6px;
}

/* the tick crossing the rule at each stop */
.timeline-stop::after {
  content: "";
  position: absolute;
  top: 53px;
  left: 50%;
  width: 1px;
  height: 17px;
  background: rgba(201,162,78,0.95);
}

.stop-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 48px;
}

.stop-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stop-label {
  display: block;
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.stop-note {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* ---------- flights ---------- */

.flights { margin-top: clamp(56px, 9vh, 88px); }

.flights .section-head { margin-bottom: 22px; }

.flights .section-head .muted {
  max-width: 460px;
  margin: 0 auto;
}

.flights-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-deep);
  border: 1px solid rgba(133,103,40,0.45);
  border-radius: 999px;
  padding: 12px 26px;
  transition: background 0.25s ease, color 0.25s ease;
}

.flights-link:hover,
.flights-link:focus-visible {
  background: var(--gold-deep);
  color: var(--parchment);
}

/* paper plane strip */

.plane-strip {
  margin-top: 36px;
  text-align: center;
}

.plane-strip svg {
  width: min(640px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
}

.flight {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.4;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: 0.7;
}

.plane-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

/* ---------- rsvp ---------- */

.rsvp { padding-top: clamp(44px, 7vh, 68px); }

form#rsvp-form {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* a non-<label> field wrapper, for controls that aren't a single input */
.field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* guest stepper — mirrors the travelers control on the flights page */
.stepper {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--card);
  border: 1px solid rgba(58,51,44,0.18);
  border-radius: 6px;
  overflow: hidden;
}

.stepper button {
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: var(--gold-deep);
  cursor: pointer;
  transition: background 0.2s ease;
}

.stepper button:hover:not(:disabled) { background: var(--parchment); }
.stepper button:disabled { color: rgba(58,51,44,0.25); cursor: default; }

.stepper span {
  min-width: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

input[type="text"],
input[type="number"],
textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(58,51,44,0.18);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 2px 0 0 var(--gold);
}

textarea { resize: vertical; }

fieldset {
  border: 1px solid var(--gold-pale);
  border-radius: 6px;
  padding: 16px 18px 18px;
  margin: 0;
}

legend {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px;
}

.radio-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.radio {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  cursor: pointer;
}

.radio input { accent-color: var(--gold-deep); width: 17px; height: 17px; }

.btn-primary {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--gold-deep);
  border: none;
  border-radius: 999px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.btn-primary:hover, .btn-primary:focus-visible { background: #6b521f; }
.btn-primary:active { transform: scale(0.985); }

.rsvp-status {
  min-height: 1.4em;
  text-align: center;
  font-size: 15px;
  margin: 0;
  color: var(--ink-soft);
}

.rsvp-status.error { color: #b0555f; }

/* sealed confirmation */

.rsvp-sealed {
  text-align: center;
  padding: 24px 0 8px;
  animation: settle 0.7s ease backwards;
}

.seal-face.small {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: flex;
}

.seal-face.small .seal-mono { font-size: 27px; }

.sealed-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 8px;
}

/* ---------- after dark footer ---------- */

.after-dark {
  position: relative;
  margin: clamp(48px, 8vh, 76px) calc(50% - 50vw) 0;
  padding: 72px 24px 64px;
  text-align: center;
  color: var(--parchment);
  background:
    radial-gradient(ellipse 600px 300px at 50% 120%, rgba(201,162,78,0.22), transparent 70%),
    linear-gradient(180deg, var(--dusk) 0%, var(--dusk-deep) 100%);
}

.fairy-lights {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  height: 10px;
  background:
    radial-gradient(circle 2.5px at 5% 4px, var(--gold) 98%, transparent),
    radial-gradient(circle 2px at 16% 7px, rgba(201,162,78,0.9) 98%, transparent),
    radial-gradient(circle 2.5px at 28% 3px, var(--gold) 98%, transparent),
    radial-gradient(circle 2px at 39% 6px, rgba(201,162,78,0.88) 98%, transparent),
    radial-gradient(circle 2.5px at 50% 4px, var(--gold) 98%, transparent),
    radial-gradient(circle 2px at 61% 7px, rgba(201,162,78,0.9) 98%, transparent),
    radial-gradient(circle 2.5px at 72% 3px, var(--gold) 98%, transparent),
    radial-gradient(circle 2px at 84% 6px, rgba(201,162,78,0.88) 98%, transparent),
    radial-gradient(circle 2.5px at 95% 4px, var(--gold) 98%, transparent);
}

.footer-names {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 5vw, 42px);
  margin: 0 0 10px;
}

.footer-line {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(247,239,223,0.82);
  margin: 0 0 22px;
}

.footer-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold);
  margin: 0;
}

/* ---------- responsive ---------- */

/* Short viewports: the cover is a fixed, non-scrolling panel, so everything
   in it competes for the same height. Rather than let the artwork absorb all
   the pressure and shrink to a sliver, tighten the type and the seal first,
   which buys back roughly 110px for the illustration. */
@media (max-height: 820px) {
  #cover { padding-top: 84px; }
  .names { font-size: clamp(46px, 9vw, 76px); }
  .cover-sub { margin-bottom: 14px; }
  .cover-date { margin-bottom: 24px; }
  #seal { gap: 10px; }
  .seal-face { width: 96px; height: 96px; }
  .seal-mono { font-size: 36px; }
}

/* Below this there is no room for the illustration even after tightening —
   the text and seal alone fill the panel. It is decorative and aria-hidden,
   so drop it rather than show a squashed remnant against the frame. */
@media (max-height: 660px) {
  .cover-shelf { display: none; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .cover-content { margin-bottom: 0; }
  .cover-date { font-size: 13px; letter-spacing: 0.1em; }
  .radio-row { flex-direction: column; gap: 12px; }

  /* keep the three stops on one line on a phone */
  .timeline-stop { padding: 0 3px; }
  .stop-icon svg { width: 36px; height: 36px; }
  .stop-label { font-size: 13px; letter-spacing: 0.1em; }
  .stop-note { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}