/* Cindy & Kelvin, still wrapped: one wine page, one ivory ribbon, the names and the date. */

/* ---------- faces: the real family first, the licensed stand-in second ---------- */
@font-face { font-family: 'Spirequal Light'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/spirequal-light.ttf') format('truetype'); }
@font-face { font-family: 'Roue Stand-in'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roue-standin.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pinyon-script.woff2') format('woff2'); }
/* Kelvin's reference faces. Once licensed, add the files to fonts/ and uncomment.
@font-face { font-family: 'La Roue'; font-weight: 400; font-display: swap; src: url('../fonts/la-roue.woff2') format('woff2'); }
@font-face { font-family: 'Eleven Eleven'; font-weight: 500; font-display: swap; src: url('../fonts/eleven-eleven.woff2') format('woff2'); }
@font-face { font-family: 'Altesse Std'; font-weight: 400; font-display: swap; src: url('../fonts/altesse-std.woff2') format('woff2'); }
*/

:root {
  --wine: #3E0507;
  --wine-lit: #5B090B;
  --ivory: #F6F1EA;
  --silver-flat: #C6C7CD;

  /* the cube's lettering (Kelvin's reference: La Roue, Eleven Eleven, Altesse Std) */
  --display: 'Spirequal Light', 'Roue Stand-in', Georgia, serif;   /* La Roue: the names and every running line */
  --text: 'Spirequal Light', 'Roue Stand-in', Georgia, serif;
  --caps: 'Eleven Eleven', 'Montserrat', system-ui, sans-serif;    /* Eleven Eleven: tracked label capitals */
  --caps-weight: 500;
  --script: 'Altesse Std', 'Pinyon Script', Georgia, serif;        /* Altesse Std: the couple's script */
  --script-scale: 1.32;

  --gutter: max(24px, env(safe-area-inset-left));
  --vh: 100vh;

  /* the bow, and the ribbon it is tied on */
  --bow-w: clamp(136px, 36vw, 196px);
  --bow-h: calc(var(--bow-w) * 517 / 760);
  --band: calc(var(--bow-w) * 0.09);
  --knot: 0.335;                       /* the knot sits a third of the way down the bow image */
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--wine); color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 18px;  /* the running-line face reads small; 18px is its floor */
  line-height: 1.5;
  color: var(--ivory);
  background: var(--wine);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--wine-lit); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--silver-flat); outline-offset: 4px; border-radius: 2px; }

.page {
  min-height: var(--vh);
  display: grid;
  align-content: center;            /* names to links, centred; the monogram hangs below without moving them */
  padding: max(clamp(28px, 6vh, 48px), env(safe-area-inset-top)) var(--gutter) max(clamp(28px, 6vh, 48px), env(safe-area-inset-bottom));
  text-align: center;
  overflow-x: clip;
}

.stack {
  position: relative;
  display: grid;
  gap: clamp(24px, 5vh, 56px);
}

/* ---------- the monogram: hung under the links, outside the centring ---------- */
.mark {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + clamp(28px, 5vh, 48px));
}
.mark img { display: block; width: clamp(34px, min(11vw, 6.5vh), 56px); height: auto; margin: 0 auto; }

/* ---------- the names ---------- */
/* the names lettering alone, lifted a little; the date, the place and everything below stay put */
.names__title { transform: translateY(calc(-1 * clamp(14px, 2.8vh, 28px))); }
/* the names are Kelvin's own lettering artwork (Cindy AND Kelvin), set in ivory */
.names__title { margin: 0; line-height: 0; }
.names__title img { display: block; width: min(88%, 460px, 60vh); height: auto; margin: 0 auto; }
.names__when, .names__where {
  margin: 0;
  font: var(--caps-weight) 12px/1.4 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver-flat);
}
.names__when { margin-top: 20px; }
.names__where { margin-top: 6px; }

/* ---------- the ribbon: edge to edge, the bow tied at the centre ---------- */
.ribbon {
  position: relative;
  height: var(--band);
  margin: calc(var(--bow-h) * var(--knot) - var(--band) / 2) calc(var(--gutter) * -1) calc(var(--bow-h) * (1 - var(--knot)) - var(--band) / 2);
  /* duchess satin lying flat, lit like the bow from the upper left: an even body, one soft sheen high on the band, crisp selvedges */
  background:
    linear-gradient(90deg, rgba(255, 252, 246, 0.16), rgba(255, 252, 246, 0) 45%, rgba(70, 40, 25, 0.06)),
    linear-gradient(180deg, #CBBCA7 0 1px, #EEE7DC 1px, #F5F0E8 32%, #EFE8DD 58%, #E9E1D4 calc(100% - 1px), #C4B49E calc(100% - 1px));
  box-shadow: 0 1px 0 rgba(20, 0, 2, 0.55);
}
.ribbon__bow {
  position: absolute;
  left: 50%;
  top: calc(var(--band) / 2 - var(--bow-h) * var(--knot));
  width: var(--bow-w);
  height: auto;
  margin-left: calc(var(--bow-w) / -2);
  filter: drop-shadow(0 2px 2px rgba(20, 0, 2, 0.45)) drop-shadow(0 6px 8px rgba(20, 0, 2, 0.3));
}

/* ---------- the note ---------- */
.note__title {
  margin: 0 0 10px;
  font: 400 calc(clamp(26px, 7vw, 32px) * var(--script-scale))/1.1 var(--script);
}
.note__line {
  margin: 0 auto;
  max-width: 28ch;
  font: 400 clamp(20px, 5.4vw, 23px)/1.42 var(--text);
  letter-spacing: .015em;
  color: var(--ivory);
  text-wrap: balance;
}
.note__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
  margin: 22px 0 0;
  font: var(--caps-weight) 12px/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--silver-flat);
}
.note__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  white-space: nowrap;
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: rgba(198, 199, 205, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .2s;
}
.note__links a:hover { text-decoration-color: var(--ivory); }