/* =============================================================
   styles.css: the look of the website (colors, fonts, spacing)

   You do NOT need to edit this file to change your content.
   Colors and fonts are grouped at the top if you want to tweak.
   ============================================================= */

/* ---------- THE NEW YORKER FONT ----------
   Licensed web font, used for the names, headings and small labels. */
@font-face {
  font-family: "New Yorker";
  src: url("fonts/newyorkertype-classic-medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- THE HANDWRITTEN FONT ----------
   Hopeless Romantic Society, used for every handwritten line. */
@font-face {
  font-family: "Hopeless Romantic Society";
  src: url("fonts/hopelessromanticsociety-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette (same names as in Figma) */
  --tomato:  #d15241;
  --tomato-bright: #de5948;   /* the splash screen and RSVP card */
  --cream:   #f0dcc7;
  --paper:   #fbf4ea;
  --ink:     #1c1513;
  --butter:  #f4d35e;
  --olive:   #5a5e2b;
  --oxblood: #4a101c;
  --sand:    #e4ceb4;
  --pink:    #f5a3c7;
  --rose:    #df7382;
  --plum:    #682536;

  /* fonts */
  --font-display: "New Yorker", "Libre Caslon Display", Georgia, serif;
  --font-title:   "Libre Caslon Display", Georgia, serif;
  --font-serif:   "Libre Caslon Text", Georgia, serif;
  --font-script:  "Hopeless Romantic Society", "Snell Roundhand", cursive;

  --gutter: clamp(16px, 2vw, 28px);
  --tile-gap: 12px;
  /* the sliding photo next to the basics: shrinks on shorter
     screens so The Details heading always fits on the same screen */
  --bar-height: 56px;   /* the slim menu bar at the top */
  /* smallest gap above and below the photos in the basics
     (the two gaps grow equally to fill the screen) */
  --basics-space: clamp(32px, 5svh, 56px);
  /* how much of the first row of cards peeks up from the bottom */
  --details-peek: 64px;
  --details-head: 110px;   /* roughly the height of The Details heading row and the space above it */
  /* biggest the square photos can be, so The Details heading
     always fits on the same screen */
  --basics-photo-max: max(200px, 100svh - 410px);
  --ease: cubic-bezier(.65, 0, .25, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tomato);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(12px, 1.05vw, 15px);
}

/* ---------- THE ARROW ---------- */
.arrow {
  display: inline-block;
  width: 1.7em;
  height: 1.05em;
  vertical-align: middle;
  overflow: visible;
  transition: transform .35s var(--ease);
}
.arrow-down { transform: rotate(90deg); }
.arrow-left { transform: rotate(180deg); }

/* ---------- PILL BUTTON ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 12px 26px;
  transition: background-color .3s ease, color .3s ease;
}
.pill:hover, .pill:focus-visible { background: var(--tomato); color: var(--paper); }
.pill:hover .arrow { transform: translateX(4px); }
.pill-big { padding: 32px 64px; }

/* ---------- TOP MENU BAR ---------- */
/* sits right under the splash, scrolls up with the page,
   then stays pinned to the top. Nothing pops in, so no gap. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: var(--bar-height);
  padding: 14px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid color-mix(in srgb, var(--tomato) 25%, transparent);
}
.topbar-menu { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.2vw, 36px); }
.topbar-menu a { border-bottom: 1px solid transparent; transition: border-color .25s; }
.topbar-menu a:hover { border-color: currentColor; }

/* ---------- SPLASH ----------
   The tomato splash stays pinned in place while the cream page
   slides up over it like a sheet of paper. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 22px;
  background: var(--tomato-bright);
  color: var(--cream);
}
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.hero-row-end { justify-content: flex-end; }
/* corner text, sized like a magazine masthead */
.hero-row.label { font-size: clamp(14px, 1.8vw, 26px); letter-spacing: .04em; }

/* names at the top; the handwritten line sits a little above the
   middle of the space that's left */
.hero-mid { display: grid; grid-template-rows: auto 1fr; }
/* as the page covers the splash, its words drift up and soften */
.hero > * {
  transform: translateY(calc(var(--cover, 0) * -6vh));
  opacity: calc(1 - var(--cover, 0) * .7);
  will-change: transform, opacity;
}

/* the sheet of paper that slides over the splash */
.topbar, main, .footer { position: relative; z-index: 1; background: var(--paper); }
.topbar { position: sticky; z-index: 20; box-shadow: 0 -18px 40px -12px rgba(28, 21, 19, .28); }


.names {
  margin: .22em 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 9.6vw, 150px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  text-align: center;
}
.names .amp { font-size: .62em; vertical-align: .12em; }

/* handwritten line, centered under the names */
.tagline {
  justify-self: center;
  align-self: center;
  margin: 0 0 6svh;
  padding: 0 .2em;
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1.3;
}

.scroll-cue { display: grid; place-items: center; width: 48px; height: 64px; font-size: 26px; }
.scroll-cue .arrow { animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { translate: 0 -2px; }
  50%      { translate: 0 3px; }
}

/* ---------- SECTION HEADINGS ---------- */
.section-heading {
  margin: 0 0 36px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- THE BASICS ----------
   Heading, then three columns that line up with the card
   grid below: a line of text, the sliding photos, a line of
   text. The Details heading sits right below, so both show
   on one screen.                                           */
.basics {
  max-width: 1500px;
  margin: 0 auto;
  /* fills the screen minus The Details heading and a small peek of
     the cards, with the photos centered in the space that's left */
  min-height: calc(100svh - var(--bar-height) - var(--details-head) - var(--details-peek));
  display: flex;
  flex-direction: column;
  /* spacing, top to bottom: menu bar, a modest gap, the handwritten
     line, a bigger gap, the photo row, then any leftover room
     falls below the photo, before The Details */
  padding: clamp(44px, 6.5svh, 72px) 0 0;
  /* jumping here from the arrow leaves room for the menu bar */
  scroll-margin-top: var(--bar-height);
}
.details { scroll-margin-top: var(--bar-height); }
/* the heading above the photo: centered, a size down from the others */
.basics-heading {
  margin: 0 var(--gutter);
  text-align: center;
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.15;   /* a snug box, so the gaps around it look the way they measure */
  text-wrap: balance;
}
.basics-body {
  display: grid;
  /* a line of text, the photo, a line of text, sitting close together */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  margin-block: 0 auto;   /* leftover room goes below the photo */
  padding: clamp(60px, 9svh, 96px) var(--tile-gap) var(--basics-space);
  align-items: center;
}
/* the photo stays square, centered between the two lines of text;
   on short screens it shrinks so The Details still shows */
.basics .photo-square {
  justify-self: center;
  width: min(36vw, var(--basics-photo-max));
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.basics-text {
  margin: 0;
  padding: 0 clamp(8px, 2vw, 32px);
  text-align: center;
  text-wrap: balance;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.25;
}
.basics-left { text-align: right; }
.basics-right { text-align: left; }

.photo-square { position: relative; overflow: hidden; background: var(--ink); }
.photo-square img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- THE DETAILS ---------- */
.details { max-width: 1500px; margin: 0 auto; }
.details-head {
  margin-top: clamp(32px, 6svh, 64px);   /* room between the photo and The Details */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 0 var(--gutter) 22px;
}
.details-head .section-heading { margin: 0; display: flex; align-items: center; gap: .45em; }
.details-head .arrow { width: .62em; height: .4em; }   /* small arrow pointing down */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
  padding: 0 var(--tile-gap);
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.8vw, 26px);
  text-align: left;
  color: var(--ink);
  --tilt: -2deg; --dx: -4px; --dy: -6px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.2), box-shadow .5s ease;
}
/* each card leans its own way, so the grid looks hand-placed */
.tile:nth-child(3n+2) { --tilt: 1.8deg;  --dx: 3px; --dy: -8px; }
.tile:nth-child(3n)   { --tilt: -1.4deg; --dx: 5px; --dy: -5px; }
.tile:nth-child(4n)   { --tilt: 2.4deg; }
.tile:is(a, button):hover, .tile:is(a, button):focus-visible {
  transform: translate(var(--dx), var(--dy)) rotate(var(--tilt));
  z-index: 2;
  box-shadow: 0 18px 30px -18px rgba(28, 21, 19, .45);
}
.tile:hover .arrow, .tile:focus-visible .arrow { transform: translateX(5px); }

.tile-top { display: flex; justify-content: space-between; align-items: center; }
.tile-bottom { display: grid; justify-items: start; gap: clamp(12px, 1.6vw, 24px); }

/* "Coming soon": a small outlined tag above a faded title */
.soon-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: .38em .6em .3em;
  font-size: clamp(12px, 1.3vw, 19px);
  line-height: 1;
}
.is-soon .tile-title { opacity: .5; }
.is-soon .tile-top .arrow { display: none; }   /* not clickable yet, so no arrow */
.tile-title {
  font-family: var(--font-title);
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* a photo card with several photos fades slowly between them */
.tile .fade { opacity: 0; transition: opacity 2.4s ease; }
.tile .fade.is-on { opacity: 1; }
.tile img, .tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.on-butter  { background: var(--butter);  color: var(--ink); }
.on-olive   { background: var(--olive);   color: var(--cream); }
.on-tomato  { background: var(--tomato);  color: var(--cream); }
.on-tomato-bright { background: var(--tomato-bright); color: var(--cream); }
.on-sand    { background: var(--sand);    color: var(--ink); }
.on-oxblood { background: var(--oxblood); color: var(--cream); }
.on-pink    { background: var(--pink);    color: var(--oxblood); }
.on-rose    { background: var(--rose);    color: var(--cream); }
.on-plum    { background: var(--plum);    color: var(--cream); }
.on-cream   { background: var(--cream);   color: var(--ink); }

/* ---------- RSVP + FOOTER ---------- */
.rsvp {
  display: grid;
  justify-items: center;
  gap: 40px;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  text-align: center;
  font-size: clamp(20px, 1.8vw, 26px);
}
.rsvp p { margin: 0; }
.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
}

/* ---------- THE CARD THAT OPENS OUT INTO A PAGE ---------- */
.page-stage { position: fixed; inset: 0; z-index: 40; }
.page-sheet { position: absolute; overflow: hidden; }
.page-view {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 48px;
}
.page-view > * { transition: opacity .35s ease; }
.page-stage:not(.is-open) .page-view > * { opacity: 0; }

/* top corners, with the page name exactly in the middle */
.page-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.page-top .page-back { justify-self: start; }
.page-number { justify-self: center; text-align: center; }
.page-top .page-rsvp { justify-self: end; }
.page-back { display: inline-flex; align-items: center; gap: .6em; text-transform: inherit; letter-spacing: inherit; }
.page-rsvp, .page-next { display: inline-flex; align-items: center; gap: .6em; }
.page-next:hover .arrow, .page-rsvp:hover .arrow { transform: translateX(4px); }
.page-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 48px; }

.page-body {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 0 40px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 22px;
}
/* typed in ordinary capitals, the New Yorker font shows the
   small letters as small capitals, as in Figma */
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9.4vw, 140px);
  line-height: 1;
  text-wrap: balance;
}
.page-intro:empty { display: none; }
/* a small handwritten line under the title */
.page-intro { margin: 0; font-family: var(--font-script); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; max-width: 44ch; }
.page-view .pill:hover, .page-view .pill:focus-visible { background: currentColor; color: var(--page-bg); }

/* ---------- PAGE PARTS: events, hotels, questions ----------
   Every item uses the same sizes and spacing as Friday on
   The Weekend page. */
.page-parts { display: grid; justify-items: center; gap: clamp(56px, 5.5vw, 80px); width: 100%; margin-top: clamp(16px, 2.4vw, 36px); }
.page-parts:empty { display: none; }
.item { display: grid; justify-items: center; text-align: center; }
.item p { margin: 0; }
.item-label { font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .12em; margin-bottom: clamp(10px, 1.1vw, 16px) !important; }
.item-script {
  font-family: var(--font-script);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.35;
  margin-bottom: clamp(12px, 1.3vw, 20px) !important;
}
.item-name {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.1;
  text-wrap: balance;
}
.item-details { margin-top: 6px !important; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; text-wrap: balance; }
.item-note { margin-top: 4px !important; font-size: clamp(13px, 1.05vw, 15px); font-style: italic; line-height: 1.5; opacity: .9; }
.item-note + .item-note { margin-top: 0 !important; }

/* little dots in place of dashes */
.dot {
  display: inline-block;
  width: .2em;
  height: .2em;
  margin: 0 .6em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .28em;
}
.item-name .dot { width: .12em; height: .12em; vertical-align: .3em; margin: 0 .45em; }

.item a, .group-list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .25s;
}
.item a:hover, .group-list a:hover { text-decoration-color: currentColor; }

/* handwritten section heading */
.part-script {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.part-script + * { margin-top: calc(-1 * clamp(12px, 1.6vw, 24px)); }
.group > .part-script + .group-body { margin-top: 0; padding-top: clamp(40px, 4.4vw, 64px); }

/* a thin line to start a new section */
.part-line { width: min(180px, 50%); margin: calc(-1 * clamp(24px, 3vw, 44px)) 0 0; border: 0; border-top: 1px solid currentColor; opacity: .6; }
.page-parts > .part-line + * { margin-top: calc(-1 * clamp(24px, 3vw, 44px)); }

/* ---------- GROUPS, set like a menu ----------
   small spaced capitals with a short rule underneath, then
   smaller names, details and notes with plenty of air */
.group { width: 100%; display: grid; justify-items: center; }
.group-head { width: 100%; display: grid; justify-items: center; gap: 14px; list-style: none; }
.group-head::-webkit-details-marker { display: none; }
.group-title { margin: 0; font-size: clamp(19px, 1.9vw, 27px); letter-spacing: .14em; line-height: 1.1; font-weight: 400; }
.group-rule { position: relative; display: block; width: 48px; border-top: 1px solid currentColor; opacity: .7; }
.group-body { display: grid; justify-items: center; gap: clamp(30px, 3vw, 42px); padding-top: clamp(18px, 2vw, 26px); width: 100%; }
.group-intro { margin: 0 0 clamp(4px, .6vw, 8px); max-width: 40ch; font-size: clamp(15px, 1.2vw, 17px); font-style: italic; line-height: 1.5; text-wrap: balance; }
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; font-size: clamp(16px, 1.35vw, 19px); }


/* a group that opens: a small plus under the heading, which
   turns into a cross once it's open */
summary.group-head { cursor: pointer; }
details.group .group-rule { width: 96px; margin-top: 4px; }
.group-plus {
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 24px;
  translate: -50% -50%;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--page-bg);
  transition: rotate .35s var(--ease);
}
.group-plus::before, .group-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  border-top: 1px solid currentColor;
  translate: -50% -50%;
}
.group-plus::after { rotate: 90deg; }
summary.group-head:hover .group-plus { rotate: 90deg; }
details[open] .group-plus { rotate: 45deg; }
details.group > .group-head { padding-bottom: 12px; }
details.group .group-rule { opacity: 1; }

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
  /* photo on top, the two lines underneath with an orange line between */
  .basics-body { grid-template-columns: 1fr 1fr; gap: 28px 0; padding-inline: var(--gutter); }
  .basics .photo-square { grid-column: 1 / -1; grid-row: 1; width: min(100%, 560px); }
  .basics-text { align-self: stretch; display: flex; align-items: center; padding: 6px clamp(14px, 3vw, 24px); }
  .basics-left { justify-content: flex-end; text-align: right; }
  .basics-right { justify-content: flex-start; text-align: left; border-left: 1px solid currentColor; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-menu a:not(.keep) { display: none; }
}

/* ---------- PHONE ---------- */
@media (max-width: 600px) {
  :root { --tile-gap: 12px; }
  /* square cards, with room around them */
  .grid { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .tile { aspect-ratio: 1 / 1; }
  .soon-tag { font-size: 14px; }
  .page-top .page-back span { display: none; }   /* just the arrow, to leave room */
  .item-script { font-size: 7.4vw; line-height: 1.45; white-space: nowrap; }
  .item-label { margin-bottom: 10px !important; }
  .item-script { margin-bottom: 12px !important; }
  .part-script { font-size: 9vw; }
  .item-name { font-size: 6.6vw; }
  .names { font-size: 15vw; }
  .tagline { font-size: 10vw; line-height: 1.5; }
  .basics-heading { line-height: 1.5; }   /* room for the loops when it wraps to two lines */
  .hero-row:first-child span:last-child { text-align: right; }
  .pill-big { padding: 26px 52px; }
  .footer { flex-direction: column; align-items: center; }
}

/* ---------- FOR PEOPLE WHO TURN OFF MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero > * { transform: none; opacity: 1; }
}