@font-face {
  font-family: "Priestacy";
  src: url("assets/fonts/priestacy.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Alchemist";
  src: url("assets/fonts/alchemist-ultralight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Alchemist";
  src: url("assets/fonts/alchemist-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Alchemist";
  src: url("assets/fonts/alchemist-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alchemist";
  src: url("assets/fonts/alchemist-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Latin-only subset: digits and Latin come from Montserrat, Hebrew falls through to Alchemist */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #ebe7de;
  --line: #b3afa5;
  --line-light: rgba(255, 255, 255, 0.6);
  --numeral: #aaa69c;
  --accent: #ea756c;
  --ink: #4a4321;
  --ink-soft: #6c6545;

  /* Geometry of the wedding-day cell; main.js overwrites these to fit the screen */
  --cw: 250px;
  --ch: 380px;
  --top: 90px;
  --u: calc(var(--cw) / 100);

  --font-hebrew: "Alchemist", "Arial Hebrew", sans-serif;
  --font-mixed: "Montserrat", "Alchemist", sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hebrew);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  /* An invitation, not a document: no text selection or iOS copy callout on long press */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Stage and depth layers ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  min-height: 560px;
}

.paper {
  position: absolute;
  inset: -48px;
  background: var(--paper) radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120, 108, 80, 0.10));
}
/* The texture is baked by main.js a moment after load; fade it in rather than letting it pop */
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-texture) 0 0 / 420px 420px;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.paper-ready .paper::after { opacity: 1; }

.zoom,
.layer {
  position: absolute;
  inset: 0;
}

.zoom { transform-origin: 50% calc(var(--top) + var(--ch) / 2); }

/* The zoom wrapper gets its own GPU layer just while the opening plays */
.intro-playing .zoom { will-change: transform; }

/* Layers are stacked full-screen; only the content itself should catch taps */
.layer { pointer-events: none; }
.card,
.below { pointer-events: auto; }

/* All three layers share this frame, placed exactly over the wedding-day cell */
.cell-frame {
  position: absolute;
  left: calc(50% - var(--cw) / 2);
  top: var(--top);
  width: var(--cw);
  height: var(--ch);
}

/* ---------- Calendar grid ---------- */

/* The month's heading, written on the calendar itself: readable in the zoomed-out opening,
   it simply leaves the frame as the camera closes in on the wedding day */
.month-title {
  position: absolute;
  transform: translate(-100%, -100%);
  font-family: var(--font-hebrew);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
/* Printed-ink grain (drawn by main.js) showing through the letters */
.month-title.textured {
  color: transparent;
  background: var(--ink-grain) 0 0 / 96px 96px;
  -webkit-background-clip: text;
  background-clip: text;
}

.line {
  position: absolute;
  background: var(--line);
}
.line--v {
  width: 1.5px;
  margin-left: -0.75px;
  box-shadow: 1px 0 0 var(--line-light);
  transform-origin: top;
}
.line--h {
  height: 1.5px;
  margin-top: -0.75px;
  box-shadow: 0 1px 0 var(--line-light);
  transform-origin: right;
}

.day {
  position: absolute;
  width: var(--cw);
  height: var(--ch);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  font-family: var(--font-mixed);
  font-weight: 300;
  font-size: calc(var(--u) * 9.5);
  line-height: 1;
  color: var(--numeral);
  text-align: right;
}
.day small {
  display: block;
  margin-top: calc(var(--u) * 1.6);
  font-family: var(--font-hebrew);
  font-size: calc(var(--u) * 4.4);
  font-weight: 400;
}
.day--other-month { color: #c4c0b6; }
/* The wedding day reads as a lighter sheet within the grid */
.day--wedding {
  color: var(--ink);
  font-weight: 700;
  background-color: #f6f3ec;
  background-image: var(--paper-texture);
  background-size: 420px 420px;
  background-blend-mode: multiply;
}

/* ---------- Wedding-day card ---------- */

.card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 7);
}

.card__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: inherit;
}

/* Written on a slant across the cell's left border, like a note added by hand */
.script {
  position: absolute;
  left: calc(var(--u) * -25);
  top: calc(var(--u) * 2);
  width: calc(var(--u) * 112);
  transform: rotate(-24deg);
}

.lead {
  margin-top: calc(var(--u) * 29);
  font-size: calc(var(--u) * 8.5);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-soft);
}

.names {
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 18);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}


.details {
  margin: 0;
  font-family: var(--font-mixed);
  font-size: calc(var(--u) * 6.2);
  line-height: 1.45;
  font-weight: 400;
}
.details dd { margin: 0; }
.details__date {
  font-weight: 400;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
}
.details__hebrew {
  font-weight: 300;
  color: var(--ink-soft);
}
.details__venue { font-family: var(--font-hebrew); }

/* ---------- Countdown and actions, in the cell under the wedding day ---------- */

.below {
  position: absolute;
  top: calc(100% + var(--u) * 17);
  inset-inline: 0;
  padding: 0 calc(var(--u) * 7);
}

.countdown {
  margin: 0;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(var(--u) * 17);
}
.countdown b {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: calc(var(--u) * 11);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.countdown small {
  margin-top: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4.6);
  color: var(--ink-soft);
}

.countdown-done {
  margin: 0;
  font-size: calc(var(--u) * 8);
  font-weight: 700;
}

.actions {
  margin-top: calc(var(--u) * 7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(244, 241, 234, 0.55);
  font-family: var(--font-mixed);
  font-size: max(14px, calc(var(--u) * 5.6));
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, color 0.2s;
}
.action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action:hover,
.action:active {
  background: var(--ink);
  color: var(--paper);
}
.action:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Doodles ---------- */

.doodles { pointer-events: none; }

.doodle {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Idle motion once the intro is over: the ring glints, the couple sways.
   Only whole elements are transformed, so the browser can animate them on the GPU. */
.doodle--ring > svg,
.doodle--us > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.alive .rays {
  transform-origin: 48% 39%; /* the diamond */
  animation: glint 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes glint {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* The couple sways gently from their feet, as if dancing */
.us { transform-origin: 50% 100%; }
.alive .us {
  animation: sway 2.6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .alive .rays, .alive .us { animation: none; }
}

.doodle--ring {
  width: calc(var(--u) * 38);
  aspect-ratio: 1;
  right: calc(var(--u) * -23);
  top: max(calc(var(--u) * -39), calc(var(--top) * -1 + 4px));
  transform: rotate(12deg);
}
.doodle--sparkles {
  width: calc(var(--u) * 11);
  right: calc(var(--u) * 15);
  top: calc(var(--u) * 5);
  stroke-width: 2.2;
}
.doodle--heart {
  width: calc(var(--u) * 10);
  left: calc(var(--u) * 6);
  bottom: calc(var(--u) * 8);
  transform: rotate(-8deg);
}
/* In the day before the wedding, standing low beside the wedding day's left border. On phones that
   column is only partly on screen, so the drawing narrows to fit what is visible of it. */
.doodle--us {
  width: min(calc(var(--u) * 34), calc((100vw - var(--cw)) / 2 - var(--u) * 2 - 12px));
  aspect-ratio: 468 / 741;
  right: calc(100% + var(--u) * 2);
  bottom: calc(var(--u) * 4);
}

/* ---------- Intro: hidden until main.js starts the sequence ---------- */

.intro-pending .zoom { visibility: hidden; }

@media (min-width: 700px) {
  .action { min-height: 44px; }
}

/* Phones show only a sliver of the column beside the wedding day, so there the couple is larger and
   steps a little into the wedding day's cell, and the heart moves over to make room */
@media (max-width: 699px) {
  .doodle--us {
    width: min(calc(var(--u) * 34), calc((100vw - var(--cw)) / 2 + var(--u) * 8 - 12px));
    right: calc(100% - var(--u) * 8);
  }
  .doodle--heart { left: calc(var(--u) * 17); }
}

/* ---------- Spanish page (es/index.html): Latin text set in Montserrat ---------- */

:root[lang="es"] { --font-hebrew: "Montserrat", sans-serif; }
/* Left-aligned text moves the heart to the right, and on phones keeps the couple out of the cell */
[lang="es"] .doodle--heart {
  left: auto;
  right: calc(var(--u) * 7);
}
@media (max-width: 699px) {
  [lang="es"] .doodle--us {
    width: min(calc(var(--u) * 34), calc((100vw - var(--cw)) / 2 - var(--u) * 2 - 12px));
    right: calc(100% + var(--u) * 2);
  }
}
[lang="es"] .lead {
  margin-top: calc(var(--u) * 25);
  font-size: calc(var(--u) * 8);
}
[lang="es"] .names {
  font-size: calc(var(--u) * 13.5);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
[lang="es"] .details { font-size: calc(var(--u) * 5.3); }
/* Spanish unit names are longer than the Hebrew ones */
[lang="es"] .countdown b { font-size: calc(var(--u) * 10); }
[lang="es"] .countdown small { font-size: calc(var(--u) * 3.9); }
[lang="es"] .details__date { white-space: pre-line; } /* the hour goes on its own line */
[lang="es"] .month-title { font-weight: 200; letter-spacing: 0.12em; }

/* Link-preview rendering (?preview): just the card, no countdown */
.preview .below { display: none; }