/* Jane & Quoc — save the date
   Palette is taken from the invitation's gradient: coral, peach, pink,
   dusty blue and cornflower on a pink ground with deep indigo type. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/fraunces-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spacemono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F4A3B8;
  --text: #2E1F3E;
  --muted: #2e1f3ea6;
  --amp: #F07A4A;
  --rule: #2e1f3e40;

  /* The five glows, positioned to match the invitation's composition. */
  --g1: #86A2DB; /* dusty blue, top left */
  --g2: #D9A0D6; /* mauve pink, top right */
  --g3: #F2806E; /* coral, left */
  --g4: #F7B78E; /* peach, low centre */
  --g5: #5788EC; /* cornflower, bottom right */
  --gmix: 90%;

  --light: 255 240 244;
  --light-opacity: .45;

  --gutter: clamp(1rem, 4vw, 3rem);
  --pad-block: clamp(1.5rem, 5vw, 3rem);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Mono', ui-monospace, Menlo, monospace;
  font-size: .95rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.lbl {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the ground ---------- */

.splash {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 8% 6%,   color-mix(in srgb, var(--g1) var(--gmix), transparent), transparent 70%),
    radial-gradient(44% 38% at 92% 4%,  color-mix(in srgb, var(--g2) calc(var(--gmix) - 10%), transparent), transparent 70%),
    radial-gradient(42% 46% at 4% 62%,  color-mix(in srgb, var(--g3) calc(var(--gmix) - 2%), transparent), transparent 70%),
    radial-gradient(56% 40% at 55% 96%, color-mix(in srgb, var(--g4) calc(var(--gmix) - 14%), transparent), transparent 72%),
    radial-gradient(38% 36% at 96% 92%, color-mix(in srgb, var(--g5) calc(var(--gmix) + 6%), transparent), transparent 70%);
}

/* Drawn at 300x300 and scaled up, so the blur costs nothing at any screen size. */
#caustics {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  pointer-events: none;
  filter: blur(5px) saturate(1.2) contrast(1.1);
  mix-blend-mode: screen;
  opacity: var(--light-opacity);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: multiply;
  background-size: 280px 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- content ---------- */

.in, .foot {
  position: relative;
  z-index: 4;
  padding-inline: var(--gutter);
}

.in {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 0;
  max-width: 78rem;
  width: 100%;
  margin: 0 auto;
  padding-block: calc(var(--pad-block) + env(safe-area-inset-top, 0px)) var(--pad-block);
}

.copy { display: grid; min-width: 0; }
.copy .lbl { margin-bottom: 1.3rem; }

.names {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 100;
  letter-spacing: -.02em;
  line-height: .94;
  margin: 0;
  font-size: clamp(3.2rem, 14vw, 10.5rem);
  overflow-wrap: anywhere;
}

/* The ampersand is the ROMAN glyph, obliqued by hand — not the italic face.
   Fraunces' italic '&' is a swash "et" ligature that reads as a cursive 'e',
   and the WONK axis swaps that same form into the roman. So: WONK 0 for a
   recognisable ampersand, then skewX to get the slant the italic would have
   given. Switching this back to font-style:italic reintroduces the 'e'. */
.names em {
  font-style: normal;
  font-weight: 500;
  color: var(--amp);
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 144;
  display: inline-block;
  transform: skewX(-12deg);
}

.line {
  height: 2px;
  background: var(--rule);
  margin: .7rem 0 1.6rem;
  max-width: min(100%, 42rem);
}

.details {
  display: flex;
  gap: 1.4rem 2.2rem;
  flex-wrap: wrap;
  margin: 0;
}

.details div { display: grid; gap: .15rem; }
.details dt { line-height: 1.3; }

.details dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-variant-numeric: tabular-nums;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: .6rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.2rem;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  font-size: .78rem;
  line-height: 1.7;
  color: var(--muted);
}

.foot p { margin: 0; max-width: 52ch; }

@media (max-width: 640px) {
  .foot { font-size: .7rem; }
}

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