/*  ----------  Theme  ----------  */
html {
  scroll-behavior: smooth;
}

:root{
    --clr-terracotta:#C37D4A;
    --clr-brick:#94421D;
    --clr-sage:#737B64;
    --clr-blush:#AE6F5E;
    --clr-sand:#D7BBA3;
    --ff-script:'Great Vibes',cursive;
    --ff-serif:'Playfair Display',serif;
    --ff-sans:'Raleway',sans-serif;
  }

  /* Touch devices: anchor image; remove any overlay to avoid visible lines */
  @media (pointer: coarse) {
    .hero {
      background-position: center top; /* reduce repositioning during UI bar changes */
    }
    .hero::after { content: none; }
  }
  
  /* Lock hero behavior on touch devices to prevent iOS scroll-induced zoom/resizes */
  @media (pointer: coarse) {
    .hero {
      background-attachment: scroll; /* no parallax on touch */
      background-position: center top; /* anchor to top to avoid visible shift */
      height: auto;
      min-height: 70vh;  /* avoid full-screen to reduce iOS UI bar effects */
      overflow: hidden;
      /* Avoid full-bleed width tricks on touch */
      left: 0;
      width: 100%;
      /* Remove extra overlaps that can expose seams */
      margin-bottom: 0;
      /* Keep rendering simple to reduce artifacts */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: none;
      will-change: auto;
    }
    .hero__bg { display: none !important; }
  }

  /* Remove small-screen override that disabled background */

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,
body {
  width: 100%;
  min-height: 100vh; /* Ensure body takes at least full viewport height */
  overflow-x: hidden; /* Prevent horizontal scrollbars if any element overflows slightly */
}
  
  body{
    font-family:var(--ff-sans);
    line-height:1.6;
    color:var(--clr-terracotta); /* Changed from --clr-brick for general content text */
    background:
      url('images/floral.jpg') left top / 380px 180px repeat,
      var(--clr-sand);
  }
  
  /* Centered “work-out book” container */
  .book{
    max-width:960px;
    margin-inline:auto;
    background: url('images/white-bg.jpg'); /* Repeating background image */
    box-shadow:0 0 20px rgba(0,0,0,.1);
    padding:2.5rem 1rem;
    overflow: hidden; /* Clip subpixel seams at section edges on iOS/iPadOS */
  }
  
  /*  ----------  Sections  ----------  */
  .section{padding:5rem 1rem;text-align:center;}
  /* Use inset shadow instead of border to avoid subpixel seams on mobile */
  .section:not(:last-of-type):not(.hero):not(.countdown){
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--clr-sand);
  }
  
  .section__heading{
    font-family:var(--ff-script);
    font-size:2.5rem;
    color:var(--clr-brick);
    margin-bottom:1.5rem;
  }

  .hero .section__heading {
    color: var(--clr-brick); /* Keep original color for hero headings */
  }
  
  /* Hero */
  .hero {
    /* Override default section padding */
    padding-top: 0; /* Remove top padding */
    padding-bottom: 5rem; /* Keep original bottom padding or adjust as needed */
    padding-left: 0;
    padding-right: 0;
    /* Counteract .book container's top padding only */
    margin-top: -2.5rem; /* Counteract .book's padding-top */
    /* Full-bleed width without negative side margins (avoids iOS seams) */
    position: relative;
    left: -1rem; /* Cancel .book's left padding */
    width: calc(100% + 2rem); /* Extend to cancel left+right padding of .book */
    /* Single-format background per your preference */
    background-color: var(--clr-sand);
    background-image: url('images/desert.jpeg');
    background-attachment: fixed; /* Keep parallax on desktop */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  }

  /* Inline image for touch devices (hidden on desktop) */
  .hero__bg {
    display: none; /* default hidden; desktop uses CSS background */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* show more of the upper part on mobile */
    z-index: 0;
  }

  /* Removed hero masks to prevent visible lines across the image on iOS */

  /* Mobile: disable parallax only */
  @media (max-width: 768px) {
    .hero {
      background-attachment: scroll; /* Disable parallax on mobile to prevent blank backgrounds */
      min-height: 100svh; /* Lock to visual viewport height on mobile */
    }
  }

  /* Disable parallax on touch devices (phones/tablets, including iPadOS Chrome/Safari) */
  @media (pointer: coarse) {
    .hero { background-attachment: scroll; }
    .hero__bg { display: none !important; }
  }

  /* Ensure touch rules take precedence over width-based mobile rules */
  @media (pointer: coarse) {
    .hero {
      min-height: 70vh !important; /* prevent iOS zoomy resize */
      background-position: center top !important;
      margin-bottom: 0 !important;
    }
    .countdown { margin-top: -8px !important; }
  }


  /* Hero Title Fade-in Animation */
  .hero-title-fade-char {
    opacity: 0;
    animation: fadeInLetter 0.3s ease-out forwards;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @keyframes fadeInLetter {
    from {
      opacity: 0;
      /* Optional: slight transform from left if desired for 'left-to-right' feel per letter */
      /* transform: translateX(-5px); */ 
    }
    to {
      opacity: 1;
      /* transform: translateX(0); */
    }
  }

  .party-cards__wrap {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Space between Best Man and Maid of Honor cards */
    margin-bottom: 2rem;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
  }

  /* Officiant Card */
  .officiant-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2rem; /* space below before Parents */
    background: #fff;
    border: 1px solid var(--clr-sand);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .officiant-card__image {
    flex: 0 0 42%;
    min-height: 180px;
    background-image: url('images/hands.jpg');
    background-size: cover;
    background-position: center center;
    position: relative;
  }

  /* Fade the right side of the image into the white card background */
  .officiant-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 55%, #ffffff 100%);
    pointer-events: none;
  }

  .officiant-card__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.25rem;
    text-align: left;
  }

  .officiant-card__title {
    font-family: var(--ff-script);
    color: var(--clr-brick);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 0.35rem;
  }

  .officiant-card__name {
    font-family: var(--ff-serif);
    color: var(--clr-terracotta);
    font-size: 1.1rem;
    margin: 0;
  }

  @media (max-width: 768px) {
    .officiant-card { gap: 0.75rem; }
    .officiant-card__image { flex-basis: 48%; min-height: 160px; }
    .officiant-card__title { font-size: 1.4rem; }
  }

  @media (max-width: 520px) {
    .officiant-card { flex-direction: column; }
    .officiant-card__image { width: 100%; flex: none; min-height: 180px; }
    .officiant-card__title { font-size: 1.35rem; }
  }

.party-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  width: 280px; /* Fixed width for cards */
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Match sponsors-category effect */
}
  .party-card__img {
    width: 120px; /* Or your desired size */
    height: 120px; /* Or your desired size */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary, without distortion */
    margin-bottom: 1rem;
    border: 3px solid var(--clr-sand-dark); /* Optional: adds a border like the placeholder had */
  }

/* Parents section (first cards group): slightly larger images with soft shadow */
.wedding-party .party-cards__wrap.fade:first-of-type .party-card .party-card__img {
  width: 150px;
  height: 150px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.party-card__name {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  color: var(--clr-brick);
  margin-bottom: 0.25rem;
}

.party-card__title {
  font-size: 1rem;
  color: var(--clr-terracotta);
}

/* Style for party cards without an image */
.party-card.party-card--no-image {
  width: 592px; /* Width of two cards (280*2) + one gap (32px) */
  max-width: 90%; /* Ensure it doesn't overflow on very small screens */
  min-height: 100px; /* Adjust as needed, less height might be fine now */
  padding: 1rem; /* Adjust padding if needed for smaller size */
  /* Inherits border, box-shadow, background from .party-card */
  
  /* For internal content centering */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center; /* Ensure text inside is centered */
  min-height: 80px; /* Adjust as looks best */
  /* margin-bottom is removed from here, will be handled by gap in parent */
}

.party-card--no-image .party-card__name {
  font-size: 1.1rem; /* Smaller name text */
  margin-bottom: 0.25rem; /* Adjust spacing if needed */
}

/* Specific style for groom's father heading */
.wedding-party .party-card:first-child h2.party-card__name {
  font-size: 1.2rem; /* Slightly larger than the no-image cards but smaller than default */
  margin: 0.5rem 0; /* Add some vertical spacing */
}

.party-card--no-image .party-card__title {
  font-size: 0.85rem; /* Smaller title text */
}


.party-cards__wrap.party-cards__wrap--stacked {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;   /* Center children horizontally */
  gap: 1.5rem;           /* Space between stacked wider cards */
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Entourage Toggle Buttons (replaces old modal-toggle styles) */
.entourage-toggle__wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  border: 1px solid var(--clr-sand);
  border-radius: 50px; /* Pill shape for the wrap */
  overflow: hidden; /* To make children conform to border-radius */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.entourage-toggle__btn {
  background-color: #fff;
  color: var(--clr-terracotta);
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  transition: background-color 0.3s, color 0.3s;
  flex-grow: 1; /* Make buttons take equal space if needed */
}

.entourage-toggle__btn:not(:last-child) {
  border-right: 1px solid var(--clr-sand); /* Separator line */
}

.entourage-toggle__btn.active {
  background-color: var(--clr-terracotta);
  color: #fff;
}

.entourage-toggle__btn:hover:not(.active) {
  background-color: var(--clr-sand);
}

/* Styles for sponsors section */
.additional-entourage {
  margin-top: 2.5rem; /* Space above the sponsors section */
  margin-bottom: 2rem; /* Add space below to avoid crowding next blocks */
  text-align: center; /* Center the subheadings */
}

.story-intro__name {
  font-family: var(--ff-script);
  font-weight: bold;
  font-size: 1.2em;
}

.section__subheading {
  font-family: var(--ff-script);
  font-size: 2rem;
  color: var(--clr-blush);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.sponsors-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.sponsors-category {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sponsors-category h4 {
  font-family: var(--ff-script);
  font-size: 1.5rem;
  color: var(--clr-brick);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--clr-sand);
}

/* FAQ styles */
.faq .section__heading {
  margin-bottom: 1rem;
}

.faq__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  text-align: left;
}

.faq__question {
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--clr-terracotta);
  border: 1px solid var(--clr-sand);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.faq__question::after {
  content: "+";
  font-family: var(--ff-sans);
  color: var(--clr-sage);
  font-weight: 600;
}

.faq__question[aria-expanded="true"]::after {
  content: "−";
}

.faq__answer {
  background: #fff;
  border: 1px solid var(--clr-sand);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.85rem 1rem;
  color: var(--clr-terracotta);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

@media (max-width: 768px) {
  .faq__list { gap: 0.5rem; }
  .faq__question { font-size: 1rem; padding: 0.8rem 0.9rem; }
  .faq__answer { font-size: 0.95rem; }
}

.entourage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.entourage-list li {
  font-family: var(--ff-serif);
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--clr-terracotta);
  border-bottom: 1px dashed var(--clr-sand);
}

.entourage-list li:last-child {
  border-bottom: none;
}

/* Responsive adjustments for sponsors section */
@media (max-width: 768px) {
  .additional-entourage {
    margin-top: 2rem;
  }
  
  .sponsors-container {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .sponsors-category {
    width: 100%;
    max-width: 400px;
  }
}

/* Timeline - Clean Table Style */
.timeline-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.timeline-table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  color: var(--clr-terracotta);
  font-family: var(--ff-sans);
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.timeline-table th,
.timeline-table td {
  padding: 10px 15px;
  text-align: left;
  font-size: 0.95rem;
  color: var(--clr-terracotta);
  border-bottom: none;
}

.timeline-table th {
  background-color: var(--clr-brick);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  font-family: var(--ff-sans);
}

/* Add dashed lines between rows, except after separators */
/* Add dashed lines between non-separator rows */
.timeline-table tr:not(.program-separator) + tr:not(.program-separator) td {
  border-top: 1px dashed var(--clr-sand);
  position: relative;
}

/* Ensure no top border on first row */
.timeline-table tr:first-child td {
  border-top: none !important;
}

.timeline-table .time {
  width: 160px;
  font-weight: 600;
  color: var(--clr-terracotta);
  vertical-align: middle;
  font-family: var(--ff-sans);
  white-space: nowrap;
}

.timeline-table .event {
  text-align: left;
  padding: 10px 15px;
  color: var(--clr-terracotta);
}

.timeline-table h4 {
  margin: 0;
  color: var(--clr-terracotta);
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 500;
}

.timeline-table p {
  color: var(--clr-terracotta);
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.timeline-table ul {
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  max-width: 400px;
}

.timeline-table li {
  margin-bottom: 5px;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* Program Part Separator */
.program-separator {
  position: relative;
  margin: 10px 0;
  width: 100%;
  text-align: center;
  border: none !important;
  padding: 8px 0;
}

/* Remove any borders from separator cells */
.program-separator td {
  border: none !important;
  padding: 15px 0 !important;
  position: relative;
}

/* Line above the separator text */
.program-separator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clr-sand);
}

/* Line below the separator text */
.program-separator::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clr-sand);
}

.program-separator span {
  display: inline-block;
  background: white;
  color: var(--clr-brick);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 15px;
  position: relative;
  z-index: 1;
  margin: 5px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timeline-container {
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
  }
  
  .timeline-table {
    width: 100%;
    min-width: 100%;
    display: table;
    table-layout: auto;
  }
  
  .timeline-table th,
  .timeline-table td {
    padding: 10px 8px;
    font-size: 0.9rem;
    white-space: normal;
    word-break: break-word;
  }
  
  .timeline-table .time {
    width: 110px;
    min-width: 110px;
    padding-right: 8px;
  }
  
  .timeline-table .event {
    width: auto;
    padding: 10px 8px 10px 0;
  }
  
  .timeline-table h4 {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  
  .program-separator {
    margin: 25px 0;
  }
  
  .program-separator td {
    padding: 12px 0 !important;
  }
  
  .program-separator span {
    padding: 0 15px;
    font-size: 0.8rem;
  }
}

.timeline__item {
  width: 100%; /* Allow timeline items to take available width if needed by text content */
  max-width: 600px; /* Optional: constrain max width of timeline items */
}

.timeline__event {
  text-align: center; /* Center the text (time | description) within each event paragraph */
  font-size: 1.1rem;  /* Adjust font size as desired */
  line-height: 1.5;
  padding: 0.25rem 0; /* Add a little vertical padding */
}

.timeline__event strong {
  font-weight: 600; /* Ensure the time part is sufficiently bold */
  margin-right: 0.5em; /* Space before the pipe */
}

/* Optional: Add a separator line between timeline items if desired, can be removed if not needed */
/*
.timeline__item:not(:last-child) {
  border-bottom: 1px solid var(--clr-sand); 
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
}
*/
  .hero > * {
    position: relative;
    z-index: 3; /* keep hero content above any overlays */
  }

  .hero__title{
    font-family:var(--ff-script);
    font-size:3.5rem; /* Keep or adjust font size as needed */
    /* color is inherited from .hero or can be set to white explicitly */
    /* min-height:80px; /* Likely no longer needed with flex centering */
    margin-bottom: 0.5rem; /* Add some space below title */
  }
  .hero__subtitle{
    font-family: var(--ff-sans); /* Changed to sans-serif for a modern look */
    font-size: 1.25rem; /* Adjust as needed */
    font-weight: 300; /* Lighter font weight */
    margin: 1rem 0;
    /* color is inherited from .hero (white) */
  }
  .hero__img{width:50%;height:auto;border-radius:8px;margin-top:1rem;}
  
  /* Countdown Timer Section */
.countdown {
  /* background-color: var(--clr-sand); -- Removed, section will be transparent to page background */
  /* color: #fff; -- Removed, text colors will be specific */
  padding-top: 0; /* Remove top padding to bring heading closer to hero */
  padding-bottom: 3rem; /* Keep bottom padding */
  padding-left: 1rem;
  padding-right: 1rem;
  /* Remove hero's bottom border if it exists and countdown is directly after */
  /* This might need a more specific rule depending on overall structure */
  border-top: none !important; /* Ensure no top border on countdown section itself */
  box-shadow: none !important; /* Remove inset shadow line for this section */
  /* Slight overlap under hero to mask any 1px seam during scroll */
  margin-top: -8px;
  position: relative;
  z-index: 1;
}

/* Ensure hero section does not have a bottom border if countdown follows */
.hero {
    /* ... existing hero styles ... */
    border-bottom: none !important; /* Force no bottom border on hero if it's followed by this */
}

.countdown .section__heading {
  color: var(--clr-brick); /* Match 'Our Story' title color */
  margin-bottom: 0; /* Remove bottom margin to allow timer to 'hang' directly below */
  padding-top: 2rem; /* Add some padding above heading if needed, since section top padding is 0 */
  position: relative; /* For z-index if needed, and to be a positioning context */
  z-index: 1; /* Ensure heading is above the timer's potential negative margin */
}

.countdown__timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--clr-brick); /* Timer container background - 'hanging part' */
  padding: 2rem 1.5rem 1.5rem; /* Add padding, more at top for rounded effect */
  border-radius: 20px 20px 8px 8px; /* Rounded top corners, less rounded bottom */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  margin-top: 0; /* Avoid creating a visible seam line on some mobile browsers */
  position: relative; /* Needed for z-index and potential pseudo-elements */
  z-index: 0; /* Below heading if heading has z-index */
}

.countdown__item {
  background-color: rgba(255, 255, 255, 0.15); /* Slightly transparent white boxes on the terracotta */
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  min-width: 100px; /* Minimum width for each item */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.countdown__value {
  font-family: var(--ff-serif);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff; /* Numbers are white */
}

.countdown__label {
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.85); /* Labels are slightly transparent white */
}

/* Responsive adjustments for countdown timer */
@media (max-width: 768px) {
  .countdown__timer {
    flex-wrap: nowrap; /* Keep items on one line */
    gap: 0.5rem; /* Reduce gap between items */
    padding-left: 0.5rem; /* Add some padding if items get too close to edge */
    padding-right: 0.5rem;
  }
  .countdown__item {
    flex: 1; /* Allow items to grow and shrink equally */
    padding: 0.75rem 0.25rem; /* Reduce padding significantly */
    min-width: auto; /* Remove fixed min-width to allow shrinking */
    font-size: 0.9em; /* Adjust overall font size for the item */
  }
  .countdown__value {
    font-size: 1.6rem; /* Reduce number font size */
  }
  .countdown__label {
    font-size: 0.6rem; /* Reduce label font size */
    margin-top: 0.25rem;
  }
}

@media (max-width: 480px) {
  .countdown__timer {
    /* flex-wrap: nowrap; is inherited from 768px query */
    gap: 0.25rem; /* Further reduce gap */
    padding: 1rem 0.5rem 0.5rem; /* Adjust padding for the timer box */
    border-radius: 12px 12px 4px 4px;
  }
  .countdown__item {
    /* flex: 1; is inherited */
    padding: 0.5rem 0.15rem; /* Further reduce padding */
    /* min-width: auto; is inherited */
  }
  .countdown__value {
    font-size: 1.2rem; /* Further reduce number font size */
  }
  .countdown__label {
    font-size: 0.5rem; /* Further reduce label font size */
    letter-spacing: 0; /* Remove letter spacing if too tight */
  }
  .countdown .section__heading {
    font-size: 1.8rem; /* Adjust heading size on mobile */
    padding-top: 1.5rem;
  }
}


  /* Galleries */
  .gallery{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem;}
  .gallery img{width:calc(33.333% - .67rem);border-radius:8px;object-fit:cover;}
  
  /* Attire (placeholder swatches) */
  .attire-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed; /* Prevent overflow from wide content */
  }

  .attire-table th,
  .attire-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--clr-sand);
    vertical-align: middle;
    text-align: center;
  }

  /* Remove bottom border from the last row */
  .attire-table tr:last-child th,
  .attire-table tr:last-child td {
    border-bottom: none;
  }

  .attire-table th {
    width: 160px;
    text-align: center;
    font-family: var(--ff-serif);
    color: var(--clr-brick);
    white-space: normal; /* allow wrapping */
  }

  .attire__subnote {
    display: block;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--clr-sage);
    font-weight: normal;
    margin-top: 0.2rem;
    white-space: normal;       /* ensure wrapping */
    overflow-wrap: anywhere;   /* break long tokens if needed */
  }

  .attire__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 0;
  }

  /* Two-column variant for Godfather row */
  .attire__grid.attire__grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* Three-column variant for Godfather row when White is added */
  .attire__grid.attire__grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  .attire__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .attire__item img {
    width: min(120px, 28vw);
    height: auto; /* maintain aspect */
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .attire__item figcaption {
    font-family: var(--ff-serif);
    font-size: 0.95rem;
    color: var(--clr-terracotta);
  }

  .attire__role {
    font-family: var(--ff-serif);
    font-size: 1.2rem;
    color: var(--clr-brick);
    margin-top: 1rem;
  }

  .attire__note {
    color: var(--clr-sage);
    font-size: 0.95rem;
    margin: 0 auto 0.5rem;
  }

  /* Additionals block spacing and list formatting */
  .attire__additionals {
    margin-top: 1.25rem; /* add space below the Guests row */
  }
  .attire__additionals-title {
    display: inline-block;
    margin-bottom: 0.25rem;
  }
  .attire__additionals-list {
    list-style: disc inside; /* keep bullets close to text */
    padding-left: 0;         /* remove extra indent */
    margin: 0.25rem auto 0;  /* a bit of space above the list */
  }

  /* Placeholder chips for Godfather row */
  .attire__chip {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 6px;
  }

  .attire__chip--placeholder {
    background: repeating-linear-gradient(45deg, #f3f3f3 0 8px, #e6e6e6 8px 16px);
    border: 1px solid var(--clr-sand);
  }

  /* Responsive adjustments for attire grid */
  @media (max-width: 768px) {
    .attire__grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 100%;
      gap: 0.5rem;
    }
    .attire__item img { width: min(88px, 32vw); }
    .attire__chip { width: 100px; height: 100px; }
    .attire-table { table-layout: auto; }
    .attire-table th { width: auto; padding-right: 0.5rem; }
    /* Force 2 columns for the 3-color Godfather row so the 3rd wraps below */
    .attire__grid.attire__grid--three { grid-template-columns: repeat(2, 1fr); }
  }

  /* Very small phones */
  @media (max-width: 400px) {
    .attire__grid { gap: 0.4rem; }
    .attire__item img { width: min(72px, 36vw); }
    .attire__grid.attire__grid--three { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
    .attire-table th, .attire-table td { padding: 0.5rem; }
  }

  /* Hero mobile adjustments */
  @media (max-width: 768px) {
    .hero {
      background-size: cover; /* Keep cover on mobile */
      background-position: center bottom; /* Anchor to bottom to hide potential top/bottom seams */
      background-attachment: scroll; /* Fixed is buggy on many mobile browsers */
      /* Optional: Add a background color if 'contain' leaves empty space */
      /* background-color: var(--clr-sand); */ 
      /* Use small/dynamic viewport units to avoid iOS/Android 1px gaps */
      min-height: 100vh;  /* Fallback */
      min-height: 100svh; /* iOS 16+ small viewport height */
      min-height: 100dvh; /* Dynamic viewport height */
      margin-bottom: -3px; /* Nudge more to cover potential subpixel seam */
      background-clip: border-box;
      -webkit-background-clip: border-box;
      /* Avoid forcing layer promotion that can create hairline seams on iOS */
      /* will-change: transform; */
    }


    .hero__subtitle {
      max-width: 85%; /* Constrain width to encourage wrapping */
      margin-left: auto; /* Center the subtitle */
      margin-right: auto;
      font-size: 1.15rem; /* Adjust font size for mobile if needed */
      line-height: 1.5; /* Adjust line height for wrapped text */
    }
  }
  
  /* Calendar */
  .calendar__wrap{
    display:flex;
    flex-direction:row; /* image left, content right on desktop */
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    flex-wrap:wrap; /* allow wrapping if space is tight */
  }
  .calendar__image{
    width: min(55%, 420px);
    height: auto;
    object-fit: contain;
  }
  .calendar__content{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cal{border-collapse:collapse;font-family:var(--ff-sans);font-size:.9rem;}
  .cal caption{font-family:var(--ff-serif);font-weight:700;font-size:1.2rem;margin-bottom:.5rem;color:var(--clr-terracotta);}
  .cal th,.cal td{border:1px solid var(--clr-sand);padding:.35rem;width:2.2rem;height:2.2rem;text-align:center;}
  .cal__day--mark{background:var(--clr-terracotta);color:#fff;font-weight:700;border-color:var(--clr-terracotta);}
  .calendar__note{font-style:italic;color:var(--clr-sage);margin-top:1rem;}
  @media (max-width: 768px) {
    .calendar__wrap{flex-direction: row; gap: 0.5rem;}
    .calendar__image{width: min(52%, 240px);}  
    .cal { font-size: .8rem; }
    .cal th,.cal td{ width: 1.8rem; height: 1.8rem; padding: .25rem; }
  }

  /* Location */
  .location__wrap {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 2rem;
    justify-content: center; /* Horizontally center the paragraph and map group */
    align-items: center;    /* Vertically align paragraph box and map box */
    margin-top: 2rem;
  }
  .location__wrap p {
    flex: 0 1 260px; /* Do not grow, can shrink, basis 260px */
    font-size: 1.1rem;
    display: flex; /* Make <p> a flex container */
    flex-direction: column; /* Stack text lines normally */
    justify-content: center; /* Vertically center text within the <p>'s allocated space */
    text-align: center; /* Center align the text within the paragraph */
  }
  .location__map {
    flex: 0 1 300px; /* Do not grow, can shrink, basis 300px */
    border: 0;
    min-height: 280px;
    border-radius: 8px;
    /* width: 100%; Removed as flex-basis should handle width in a row */
  }
  
  /* Prenup Video */
  .video .section__heading {
    margin-bottom: 0.75rem;
  }
  .video-frame {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--clr-sand);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0.75rem;
  }
  .video-player {
    width: 100%;
    height: auto;
    display: block;
    background: #000; /* pleasant letterboxing */
    border-radius: 8px;
  }
  @media (max-width: 768px) {
    .video-frame { padding: 0.5rem; }
  }
  
  /* Collage Album */
  .collage__wrap {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: stretch;
    max-width: 960px;
    margin: 0 auto;
  }
  .collage__thumbs-wrap {
    display: grid;
    grid-template-rows: auto 1fr auto; /* up button | list | down button */
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.5rem; /* space between buttons and list */
    position: relative; /* for indicator chevrons */
    padding-top: 0;  /* no indicator spacing */
    padding-bottom: 0; /* no indicator spacing */
  }
  .collage__thumbs {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 560px; /* vertical area height */
    padding: 0.25rem 6px 0.25rem 0; /* gutter for scrollbar */
    scroll-snap-type: y mandatory;
    justify-items: center; /* center thumbnails horizontally in column */
  }
  /* Hide interactive buttons; keep scrollbars */
  .collage__thumbs-btn,
  .collage__thumbs-mobile-ctrls { display: none !important; }
  .collage__thumb {
    width: 100%;
    aspect-ratio: 1 / 1; /* squares in 140px column */
    object-fit: cover;
    display: block;
    background: #fff;
    border: 2px solid var(--clr-brick); /* brick outline */
    border-radius: 50%; /* make circular */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
    scroll-snap-align: start;
  }
  .collage__thumb:hover { transform: scale(1.02); }
  .collage__thumb.is-active {
    border-color: var(--clr-terracotta);
    box-shadow: 0 0 0 2px rgba(195, 125, 74, 0.25);
  }

  .collage__main {
    margin: 0;
    background: #fff;
    border: 1px solid var(--clr-sand);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
  }
  .collage__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 768px) {
    .collage__wrap { grid-template-columns: 1fr; gap: 0.75rem; }
    .collage__main { order: 1; }
    .collage__thumbs-wrap { order: 2; }
    /* Horizontal carousel for thumbs on mobile */
    .collage__thumbs {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.6rem;
      overflow-x: auto;
      overflow-y: hidden;
      max-height: none;
      padding: 0.25rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .collage__thumb { flex: 0 0 72px; width: 72px; height: 72px; aspect-ratio: auto; border-radius: 50%; }
    /* No mobile indicators */
  }

  /* No desktop indicators */

  /* Gifts Section */
  .gifts__wrap {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .gifts__icon {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 0.5rem;
  }
  .gifts__bullets {
    list-style: disc;
    list-style-position: inside; /* keep bullets but remove hanging indent */
    color: var(--clr-terracotta);
    margin: 0 auto 1rem; /* center block, no extra left indent */
    padding-left: 0; /* remove default ul padding */
    max-width: 700px;
    text-align: left; /* left-align text inside centered container */
  }
  .gifts__bullets li { text-indent: 0; }
  .gifts__bullets li + li { margin-top: 0.4rem; }

  .gift-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: #fff;
    border: 1px solid var(--clr-sand);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 1rem;
  }
  /* QR image: preserve sharp edges and proportions for better scanning */
  .gift-card__img img {
    width: 220px;
    height: 220px;
    object-fit: contain; /* avoid cropping/distortion of QR modules */
    image-rendering: pixelated; /* preserve contrast on some browsers */
    image-rendering: crisp-edges; /* fallback hint for others */
    border-radius: 0; /* keep square corners for finder patterns */
    border: 1px solid var(--clr-sand);
    display: block;
  }
  .gift-card__content { text-align: left; }
  .gift-card__title {
    font-family: var(--ff-script);
    color: var(--clr-brick);
    font-size: 1.6rem;
    margin: 0 0 0.25rem;
  }
  .gift-card__desc {
    font-family: var(--ff-serif);
    color: var(--clr-terracotta);
    margin: 0;
    line-height: 1.5;
  }

  @media (max-width: 640px) {
    .gift-card { flex-direction: column; text-align: center; }
    .gift-card__content { text-align: center; }
    .gift-card__img img { width: 200px; height: 200px; }
  }

  /* Favors list */
  .favors__list{list-style:disc;margin:0 auto;max-width:600px;text-align:left;padding-left:1.2rem;font-size:1rem;}
  .favors__list li+li{margin-top:.6rem;}
  
  /* FAQ: question button base */
  .faq__question {
    width: 100%;
    text-align: left;
    background: #fff;
    color: var(--clr-terracotta);
    border: 1px solid var(--clr-sand);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: var(--ff-sans);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* Space between FAQ items */
  .faq__item { margin-bottom: 0.75rem; }

  .faq__question:hover {
    background: #f8f1ea; /* subtle hover */
  }

  .faq__question:focus-visible {
    outline: 2px solid var(--clr-brick);
    outline-offset: 2px;
  }

  /* Highlight selected (expanded) question */
  .faq__question[aria-expanded="true"] {
    background: var(--clr-brick);
    color: #fff;
    border-color: var(--clr-brick);
    box-shadow: none;
    /* Visually connect with its answer */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* FAQ answer panel */
  .faq__answer {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f3e7dc; /* a bit darker than white for contrast */
    border: 1px solid var(--clr-sand);
    border-radius: 8px;
    text-align: left;
    color: var(--clr-brick);
  }

  /* When the question is expanded, remove the seam and connect borders */
  .faq__question[aria-expanded="true"] + .faq__answer {
    margin-top: 0;            /* no gap between question and answer */
    border-top: none;         /* remove double border line */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-color: var(--clr-brick); /* match the active question border */
  }
  
  /* Buttons */
  .btn{
    display:inline-block;
    background:var(--clr-terracotta);
    color:#fff;
    padding:.8rem 2.4rem;
    border:none;
    border-radius:50px;
    font-family:var(--ff-serif);
    font-size:1.1rem;
    cursor:pointer;
    transition:background .3s ease;
  }
  .btn:hover{background:var(--clr-brick);}
  .btn--submit{background:var(--clr-brick);}
  .btn--submit:hover{background:var(--clr-terracotta);}
  
  /*  ----------  Modal  ----------  */
  .overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    z-index:100;
  }
  .modal{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(.85);
    background:#fff;
    padding:2rem 1.5rem 2.5rem;
    border-radius:8px;
    width:92%;
    max-width:480px;
    box-shadow:0 15px 30px rgba(0,0,0,.2);
    display:none;
    z-index:101;
    transition:transform .3s ease,opacity .3s ease;
  }
  .modal__close{
    position:absolute;top:.5rem;right:.8rem;
    background:none;border:none;font-size:1.8rem;color:var(--clr-brick);cursor:pointer;
  }
  .modal__heading{
    font-family:var(--ff-script);
    font-size:2rem;
    color:var(--clr-blush);
    margin-bottom:1rem;
    text-align: center;
  }
  .modal__form label{
    display:block;text-align:left;font-family:var(--ff-serif);margin:.8rem 0;
  }
  .plus-one-section {
    display: none; /* Hidden by default */
  }

  .guest-name-field {
    display: none; /* Hidden by default */
  }

  .modal__form input,
  .modal__form select,
  .modal__form textarea {
    width:100%;padding:.6rem;border:1px solid var(--clr-sand);border-radius:6px;font-family:inherit;
  }
  .modal__form small{display:block;margin-top:.35rem;font-size:.8rem;color:var(--clr-sage);}
  .hidden{opacity:0;pointer-events:none;}
  .show{display:block;opacity:1;}
  .overlay.show { touch-action: none; /* Prevent touch gestures on active overlay */ }
  .show.modal{transform:translate(-50%,-50%) scale(1);}
  
  /*  ----------  Animations  ----------  */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
  /* Disable fade-in on scroll globally */
  .fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fade.visible { opacity: 1 !important; transform: none !important; }

  /* Timeline */
  .timeline__wrap {display: flex;flex-direction: column;align-items: center;gap: 2rem;}
  .timeline__items {display: flex;flex-direction: column;gap: 1.5rem;max-width: 800px;width: 100%;}
  .timeline__item {display: flex;align-items: center;justify-content: center;gap: 2rem;}
  .timeline__time {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--clr-terracotta);
    min-width: 80px;
    text-align: center;
  }
  .timeline__desc {
    font-size: 1.1rem;
    margin: 0;
    color: var(--clr-brick);
    text-align: center;
    flex: 1;
  }
  
  /* Responsive adjustments for timeline */
  @media (max-width: 768px) {
    .timeline__item {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .timeline__time {
      min-width: auto;
      margin-bottom: 0.5rem;
    }
  }
  
  /*  ----------  Responsive tweaks  ----------  */
  @media (max-width:650px){
    .gallery img{width:100%;}
  }
  
  /* Intersection Observer toggles .visible */
  .visible{animation:fadeInUp .9s ease forwards;}

/* Vertical Story Timeline */
.vertical-timeline {
  position: relative;
  margin: 2rem auto;
  padding: 2rem 0; /* Padding for top/bottom */
  width: 90%;
  max-width: 800px;
  overflow: hidden; /* To contain floats */
}

.vertical-timeline::before { /* The actual timeline line */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: var(--clr-sand);
  z-index: 1; /* Behind items but above timeline background */
}

.vertical-timeline > .timeline-item {
  display: block; /* Ensure block-level for float */
  position: relative;
  margin-bottom: 3rem; /* Increased vertical spacing */
  width: 50%;
  box-sizing: border-box;
  z-index: 2; /* Above the line */
  padding: 1rem 60px; /* Horizontal padding for space from center line */
  clear: both; /* Each item clears previous floats, taking its own line */
}

.vertical-timeline > .timeline-item:nth-child(odd) {
  float: left;
  /* clear: left; */ /* Redundant due to clear: both on parent */
  text-align: right; /* Text inside aligns right */
}

.vertical-timeline > .timeline-item:nth-child(even) {
  float: right;
  /* clear: right; */ /* Redundant due to clear: both on parent */
  text-align: left; /* Text inside aligns left */
}

/* Clearfix for the .vertical-timeline container to contain the floats */
.vertical-timeline::after {
  content: "";
  display: table;
  clear: both;
}

/* Dot on the timeline */
.vertical-timeline > .timeline-item::after { /* The dot */
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  box-sizing: border-box; /* Border is inside the width/height */
  border-radius: 50%;
  background-color: white;
  border: 4px solid var(--clr-terracotta);
  top: 20px; /* Adjust vertical position of dot */
  z-index: 3; /* Above item's background, on the line */
}

.vertical-timeline > .timeline-item:nth-child(odd)::after {
  /* With box-sizing: border-box, dot's visual width is 20px. Half is 10px. */
  /* To center, its right edge should be 10px left of the item's right edge. */
  right: -10px; 
}


.vertical-timeline > .timeline-item:nth-child(even)::after {
  /* With box-sizing: border-box, dot's visual width is 20px. Half is 10px. */
  /* To center, its left edge should be 10px right of the item's left edge. */
  left: -10px;
}


.timeline-item__image { 
  margin-bottom: 0.5rem; 
  /* text-align is inherited from .timeline-item */ 
}

.timeline-item__image img { 
  max-width: 100%; 
  height: auto; 
  border-radius: 8px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.timeline-item__content { 
  background-color: #fff; 
  padding: 1rem; 
  border-radius: 6px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
  max-width: 350px; /* Constrain content width */ 
  display: inline-block; /* Allows text-align from parent to work well and respects max-width */
}

.timeline-item__title {
  font-family: var(--ff-script);
  font-size: 1.8rem;
  color: var(--clr-blush);
  margin-bottom: 0.25rem;
}

.timeline-item__date {
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  color: var(--clr-sage);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.timeline-item__content p:not(.timeline-item__date) {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--clr-brick);
}


/* Responsive adjustments for vertical timeline */
@media (max-width: 768px) {
  .vertical-timeline > .timeline-item {
    width: 100%;
    float: none !important; /* Override desktop floats */
    clear: both !important; /* Ensure stacking */
    padding-left: 50px; /* Space for line and dot */
    padding-right: 20px;
    text-align: left !important; /* Reset text-align from desktop */
  }
  .vertical-timeline > .timeline-item:nth-child(odd),
  .vertical-timeline > .timeline-item:nth-child(even) {
    float: none;
    clear: both;
    text-align: left;
  }
  .vertical-timeline > .timeline-item::after { /* Dot positioning for mobile */
    left: 6px; /* Visual fine-tune for device rounding */
    transform: none;
    right: auto; /* Reset right positioning from desktop */
  }
  .vertical-timeline > .timeline-item:nth-child(odd)::after,
  .vertical-timeline > .timeline-item:nth-child(even)::after {
    left: 6px; /* Keep nth-child variants consistent with main mobile dot rule */
    transform: none;
    right: auto;
  }
  /* Ensure the vertical line shifts to the left on mobile */
  .vertical-timeline::before {
    left: 15px;
    transform: translateX(0);
  }
}
/* Venue section */
.venue__figure {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid var(--clr-sand);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.venue__image {
  display: block;
  width: 100%;
  height: auto;
}

.venue__caption {
  padding: 0.85rem 1rem;
  text-align: center;
  color: var(--clr-terracotta);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.venue__name {
  font-family: var(--ff-script);
  color: var(--clr-brick);
  font-size: 1.6rem;
  line-height: 1.2;
}

.venue__address {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  color: var(--clr-sage);
}

@media (max-width: 480px) {
  .venue__name { font-size: 1.4rem; }
  .venue__caption { padding: 0.75rem 0.9rem; }
}