@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Anton&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* =========================================================================
   T & S Wedding — Colors & Type
   --------------------------------------------------------------------------
   Vibe: Palm Springs mid-century modern × Coachella desert disco.
   Not traditional wedding — no script fonts, no eucalyptus green, no blush
   pink hand-lettering. Think: sun-faded stucco, breeze-block geometry,
   pastel doors against bright white walls, mountains in the distance, a
   disco ball spinning at golden hour.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Google Fonts — load these in <head>:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Bowlby+One&family=Bungee&family=Monoton&family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">

   These are Google Fonts — no licensing concerns, used as recommended.
   ------------------------------------------------------------------------- */

:root {
  /* ===================================================================
     COLORS — Primary palette
     The pastel doors of Palm Springs MCM, set against bright white stucco.
     =================================================================== */

  --pink-door:        #F4A6B6;   /* the pink door */
  --pink-door-deep:   #E07A95;
  --pink-door-soft:   #FBD7DE;

  --yellow-door:      #F5C84B;   /* the yellow door — sun, citrus */
  --yellow-door-deep: #E0A82E;
  --yellow-door-soft: #FBE8AC;

  --pool-blue:        #8CC8D6;   /* the baby-blue door / pool tile */
  --pool-blue-deep:   #4A9CB0;
  --pool-blue-soft:   #D6ECF1;

  --cactus:           #6B8E5A;   /* sage / desert greenery */
  --cactus-deep:      #4A6940;
  --cactus-soft:      #C4D3B4;

  --sunset:           #E97B4A;   /* terracotta, desert sunset */
  --sunset-deep:      #C45A2C;

  /* ===================================================================
     COLORS — Neutrals
     Sun-bleached stucco to deep palm-shadow black.
     =================================================================== */

  --stucco-00:        #FBF8F2;   /* paper / off-white stucco */
  --stucco-50:        #F4EFE5;   /* warm cream */
  --stucco-100:       #E8DFCB;   /* desert sand */
  --stucco-200:       #C9BFA6;   /* dry grass */
  --stucco-300:       #9A917B;   /* mountain dust */
  --stucco-400:       #6B6457;   /* dusk shadow */
  --stucco-500:       #3D3A33;   /* palm shadow */
  --stucco-900:       #161513;   /* deep night, near-black */

  --white:            #FFFFFF;
  --black:            #0B0A09;

  /* ===================================================================
     COLORS — Semantic
     =================================================================== */

  --bg:               var(--stucco-00);
  --bg-elevated:      var(--white);
  --bg-inverse:       var(--stucco-900);
  --bg-accent:        var(--pink-door-soft);

  --fg:               var(--stucco-900);
  --fg-muted:         var(--stucco-400);
  --fg-subtle:        var(--stucco-300);
  --fg-inverse:       var(--stucco-00);
  --fg-accent:        var(--pink-door-deep);

  --border:           var(--stucco-100);
  --border-strong:    var(--stucco-300);
  --border-inverse:   var(--stucco-500);

  --link:             var(--pool-blue-deep);
  --link-hover:       var(--stucco-900);

  --success:          var(--cactus-deep);
  --warning:          var(--yellow-door-deep);
  --danger:           var(--sunset-deep);

  /* ===================================================================
     TYPE — Font families
     =================================================================== */

  --font-display:     "Bagel Fat One", "Bowlby One", "Impact", sans-serif;  /* big retro-disco moments */
  --font-headline:    "Anton", "Oswald", "Helvetica Neue", sans-serif; /* condensed poster — pairs with Bagel */
  --font-body:        "DM Sans", "Helvetica Neue", sans-serif;  /* everything else */
  --font-mono:        "DM Mono", "IBM Plex Mono", monospace;    /* dates, codes, meta */

  /* ===================================================================
     TYPE — Scale (modular, 1.25 ratio with a hero jump)
     =================================================================== */

  --fs-hero:          clamp(72px, 14vw, 200px);   /* @kind font */  /* Bagel Fat One — names */
  --fs-display:       clamp(48px, 7vw, 96px);     /* @kind font */  /* Anton — section openers */
  --fs-h1:            48px;
  --fs-h2:            36px;
  --fs-h3:            24px;
  --fs-h4:            20px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-overline:      11px;

  --lh-tight:         0.95;   /* @kind font */
  --lh-snug:          1.15;   /* @kind font */
  --lh-normal:        1.45;   /* @kind font */
  --lh-relaxed:       1.7;    /* @kind font */

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.18em;   /* for overlines */

  /* ===================================================================
     SPACING — 4px base
     =================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===================================================================
     RADII — restrained. MCM is mostly sharp; soft radii only for
     organic shapes (the curved walkway, breeze-block circles).
     =================================================================== */

  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     6px;
  --radius-lg:     12px;
  --radius-pill:   999px;

  /* ===================================================================
     SHADOWS — keep them honest, sun is bright in the desert
     =================================================================== */

  --shadow-sm:  0 1px 2px rgba(22, 21, 19, 0.06);
  --shadow-md:  0 4px 16px rgba(22, 21, 19, 0.08);
  --shadow-lg:  0 18px 48px -12px rgba(22, 21, 19, 0.18);
  --shadow-hard: 6px 6px 0 var(--stucco-900);  /* offset block-shadow, retro poster */
}

/* =========================================================================
   Semantic type primitives.
   Use these instead of redeclaring fonts on every component.
   ========================================================================= */

.hero,
h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;            /* Monoton is single weight */
  text-transform: uppercase;
}

.display {
  font-family: var(--font-headline);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 400;             /* Anton is single weight */
}

h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;    /* Anton wants to be uppercase */
  font-weight: 400;
}

h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 400;
}

h3 {
  /* h3 stays mixed-case for sub-section legibility */
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  font-weight: 400;
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
}

p, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--fg);
}

p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
a:hover { color: var(--link-hover); }

/* =========================================================================
   RESPONSIVE — phones & small tablets.
   --------------------------------------------------------------------------
   The site is built with React inline styles, so these overrides hook onto
   class names added to the layout containers and use !important to win over
   the inline `style` attribute. Desktop layout is the default; everything
   here only kicks in below the breakpoints.
   ========================================================================= */

/* Nav: link row is inline by default; the hamburger is desktop-hidden. */
.ts-nav-links { display: flex; align-items: center; gap: 32px; }
.ts-nav-toggle { display: none; }

/* Tablet: the home card grid drops from three columns to two. */
@media (max-width: 900px) {
  .ts-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  /* --- Page gutters: 48px → 20px ------------------------------------- */
  .ts-pad { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- Any multi-column grid collapses to a single column ------------- */
  .ts-stack { grid-template-columns: 1fr !important; }
  .ts-cards { grid-template-columns: 1fr !important; }

  /* --- Nav → wordmark + RSVP + hamburger; links become a dropdown ----- */
  .ts-nav { padding: 12px 20px !important; }
  .ts-wordmark { font-size: 18px !important; }
  .ts-nav-toggle { display: inline-flex !important; }
  .ts-nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 8px 20px 16px; display: none;
  }
  .ts-nav-links.is-open { display: flex; }
  .ts-nav-links a {
    width: 100%;
    padding-top: 10px !important; padding-bottom: 10px !important;
    border-top: 0 !important;
  }

  /* --- Display type scales with the viewport so it never clips -------- */
  .ts-hero-name { font-size: clamp(56px, 15vw, 96px) !important; }
  .ts-title-xl  { font-size: clamp(34px, 9vw, 56px) !important; }
  .ts-title-lg  { font-size: clamp(30px, 8vw, 44px) !important; }

  /* --- Portraits that relied on grid-stretch get an explicit ratio ---- */
  .ts-portrait {
    height: auto !important; width: 100%;
    aspect-ratio: 4 / 5; max-height: 70vh;
  }

  /* --- Map: 16:7 is too short on a narrow screen --------------------- */
  .ts-map { aspect-ratio: 4 / 3 !important; }

  /* --- Schedule day rows: stack date, day name, and event cards ------ */
  .ts-dayrow { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ts-dayrow-date {
    flex-direction: row !important; align-items: baseline !important;
    gap: 10px !important; font-size: 44px !important; padding-top: 0 !important;
  }
  .ts-dayrow-day {
    writing-mode: horizontal-tb !important; font-size: 22px !important;
    padding: 0 !important;
  }

  /* --- EventDetail: drop the big gap left when the accent bar stacks -- */
  .ts-eventdetail {
    gap: 16px !important;
    padding-top: 40px !important; padding-bottom: 40px !important;
  }

  /* --- PageHeader: trim the tall hero header a little ---------------- */
  .ts-pageheader { min-height: 480px !important; padding-bottom: 56px !important; }
}

/* =====================================================================
   Guest photo gallery
   ===================================================================== */

/* The photo wall. Deliberately never collapses to a single column the way
   .ts-cards does at 768px — one enormous image per row turns a gallery into
   an endless scroll. 4 → 3 → 2 and it stops there. */
.ts-photogrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1080px) {
  .ts-photogrid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  .ts-photogrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* On wide screens a fixed 650px header forces `cover` to throw away a huge
   amount of vertical -- at 1723px the image renders 969px tall and 319px of it
   is discarded, which is what was cutting heads off. Letting the header grow
   with the viewport keeps far more of the frame. */
@media (min-width: 1400px) {
  .ts-pageheader { min-height: 42vw !important; }
}