/* ===================================================================
   by elle — wedding photography
   Structure modeled directly on andrewtallon.com/wedding: tight,
   top-aligned left sidebar (logo + nav + icons, plenty of empty
   space below) / single scrolling right column with generous
   whitespace, large full-bleed photos at natural aspect ratio, and
   centered serif headlines. Ratecard is content only, not layout.
   =================================================================== */

@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-Light.otf') format('opentype'); font-weight:300; font-style:normal; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-Regular.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-Italic.otf') format('opentype'); font-weight:400; font-style:italic; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-Semibold.otf') format('opentype'); font-weight:600; font-style:normal; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-SemiboldItalic.otf') format('opentype'); font-weight:600; font-style:italic; }
@font-face{ font-family:'PPNM'; src:url('../fonts/PPNeueMontreal-Extrabold.otf') format('opentype'); font-weight:800; font-style:normal; }
@font-face{ font-family:'PPNM Text'; src:url('../fonts/PPNeueMontrealText-Book.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face{ font-family:'PPNM Text'; src:url('../fonts/PPNeueMontrealText-BookItalic.otf') format('opentype'); font-weight:400; font-style:italic; }
@font-face{ font-family:'Lust Text'; src:url('../fonts/Lust-Text-Medium.otf') format('opentype'); font-weight:500; font-style:normal; }

:root{
  --paper:#FFFFFF;
  --ink:#1B1C1D;
  --ink-soft:#63645D;
  --ink-faint:#767666;
  --line:#E4E1D8;
  --accent-deep:#5C7086;

  --font-head: 'Lust Text', Georgia, serif;
  --font-body: 'PPNM Text', 'PPNM', Helvetica, Arial, sans-serif;
  --font-ui: 'PPNM', Helvetica, Arial, sans-serif;

  --sidebar-w: 255px;
  --pad: clamp(20px, 4.25vw, 75px);
  --measure: 540px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:80%;}
@media (max-width:880px){
  html{font-size:95%;}
  /* the mobile header is fixed on top of the page — without this, jumping
     to an anchor (#portfolio, #contact, etc.) lands the target right under
     that bar instead of visibly at the top of the viewport */
  html{scroll-padding-top:70px;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;}

h1,h2,h3{font-family:var(--font-head); font-weight:500; margin:0; letter-spacing:0; line-height:1.25;}
p{margin:0 0 1.6em;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

.mark{font-family:var(--font-head); font-weight:500; color:var(--accent-deep);}

/* an explicit line break that only takes effect on mobile, for headlines
   where the natural wrap leaves an orphaned word or an awkward split */
.mobile-break{display:none;}
@media (max-width:880px){ .mobile-break{display:inline;} }

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  display:flex; flex-direction:column; align-items:flex-start;
  padding:92px 30px 40px 58px;
  background:var(--paper); z-index:100;
}
.sidebar-top{margin-bottom:40px;}
.sidebar-top .brand{font-family:var(--font-head); font-size:1.92rem; color:var(--ink); line-height:1.15;}

.sidebar nav{margin-bottom:36px;}
.sidebar nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.sidebar nav li{line-height:1.15;}
.sidebar nav a{display:inline-block; font-family:var(--font-body); font-size:1.01rem; line-height:1.15; color:var(--ink-faint); transition:color .2s ease;}
.sidebar nav a:hover{color:var(--ink);}
.sidebar nav a.active{color:var(--ink);}

.sidebar-icons{display:flex; gap:12px; align-items:center;}
.sidebar-icons a{color:var(--ink-faint); transition:color .2s ease;}
.sidebar-icons a:hover{color:var(--accent-deep);}
.sidebar-icons svg{width:14px; height:14px; display:block;}

.nav-toggle{display:none;}

@media (max-width:880px){
  body.nav-open{overflow:hidden;}
  .sidebar{
    position:fixed; top:0; left:0; right:0; bottom:auto; width:auto; height:60px;
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:0 20px; border-bottom:0;
    transition:transform .3s ease;
  }
  /* hide the bar on scroll-down, bring it back on scroll-up (see
     initHeaderAutoHide in main.js) */
  .sidebar.header-hidden{transform:translateY(-100%);}
  .sidebar-top{margin-bottom:0;}
  .sidebar-top .brand{font-size:1.3rem;}
  .sidebar nav{
    position:fixed; inset:60px 0 0 0; margin:0; z-index:120;
    background:var(--paper); padding:48px 36px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .sidebar nav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .sidebar nav ul{gap:30px;}
  .sidebar nav a{font-size:1.7rem; letter-spacing:0;}

  /* social icons live inside the sidebar's flow but are hidden by default
     on mobile; the full-screen nav overlay reveals them, pinned near the
     bottom of the screen, once it's open. */
  .sidebar-icons{display:none;}
  .sidebar nav.open ~ .sidebar-icons{
    display:flex; position:fixed; left:36px; bottom:40px; z-index:121; gap:22px;
  }
  .sidebar nav.open ~ .sidebar-icons svg{width:20px; height:20px;}

  /* hamburger icon, morphs into an X when the menu is open */
  .nav-toggle{
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:5px; width:32px; height:32px; background:none; border:0; padding:4px;
    cursor:pointer; z-index:130; position:relative;
  }
  .nav-toggle-bar{
    display:block; width:24px; height:2px; background:var(--ink);
    transition:transform .25s ease, opacity .2s ease, width .2s ease;
  }
  .nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg); width:24px;}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg); width:24px;}
}

/* ---------- CONTENT ---------- */
.content{margin-left:var(--sidebar-w);}
@media (max-width:880px){ .content{margin-left:0; padding-top:60px;} }

/* centered text block */
.section-text{max-width:600px; margin:0 auto; padding:0 var(--pad); text-align:center;}
.section-text p{color:var(--ink-soft); font-size:.98rem; text-wrap:balance;}
.section-text .eyebrow{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:22px;}
.section-text h1, .section-text h2{font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.35; font-weight:500; margin-bottom:22px;}
.section-text .signoff{font-family:var(--font-head); font-size:1.05rem; color:var(--accent-deep); margin-top:20px;}
.section-text .text-link{color:var(--ink-faint); font-family:var(--font-body); font-size:.85rem; border-bottom:1px solid transparent;}
.section-text .text-link:hover{color:var(--accent-deep); border-color:var(--accent-deep);}
.hero-divider{width:220px; height:1px; background:var(--ink); border:0; margin:36px auto 0; opacity:.35;}
.section-text p.hero-lede{color:var(--ink-faint);}
@media (max-width:880px){
  /* var(--pad) alone can clamp down to 20px on narrow phones, which reads
     as text touching the screen edges — add a firmer floor here. */
  .section-text{padding-left:34px; padding-right:34px;}
}

section{padding:120px 0;}
section:first-of-type{padding-top:136px;}

/* full-bleed photo — natural aspect ratio, generous surrounding space */
.bleed{margin:100px 0; width:100%; padding:0 var(--pad);}
.bleed img{width:100%; height:auto; display:block;}
.bleed.two{display:grid; grid-template-columns:1fr 1fr; gap:4px; align-items:start;}
@media (max-width:880px){ .bleed.two{grid-template-columns:1fr;} }

/* staggered pair: one image left-aligned (inset right), one right-aligned (inset left) */
.bleed-stagger{margin:100px 0; padding:0 var(--pad); display:flex; flex-direction:column; gap:42px;}
.bleed-stagger .stagger-left{align-self:flex-start; width:64%;}
.bleed-stagger .stagger-right{align-self:flex-end; width:64%;}
.bleed-stagger img{width:100%; height:auto; display:block;}
@media (max-width:880px){
  .bleed-stagger .stagger-left, .bleed-stagger .stagger-right{width:100%;}
}

/* The homepage's photo sequence mixes single full-bleed images (.bleed) with
   paired stagger blocks (.bleed-stagger) back-to-back, with no text section
   between them. Each block still carries its own 100px margin (needed when
   it's next to a text section instead), but two of these blocks sitting
   directly next to each other were colliding into an inconsistent, larger
   gap than the 42px used between the two images inside a single stagger
   pair. Standardize that adjacency to the same 42px, so the whole sequence
   reads as one evenly spaced train of photos. */
:is(.bleed, .bleed-stagger):has(+ :is(.bleed, .bleed-stagger)){margin-bottom:42px;}
:is(.bleed, .bleed-stagger) + :is(.bleed, .bleed-stagger){margin-top:42px;}

/* edge-to-edge photos on mobile: flush to both screen edges, no side
   margin, matching the andrewtallon.com reference. Text blocks keep
   their padding — only image-block classes lose it here. */
@media (max-width:880px){
  .bleed, .bleed-stagger, .bleed.two, .story-gallery, .testimonial-overlay{
    padding-left:0; padding-right:0;
  }
  .bleed.two{gap:2px;}
}

.divider{height:1px; background:var(--line); border:0; margin:0;}

/* ---------- RATES ---------- */
.rates-block{margin-bottom:76px;}
.rates-block:last-child{margin-bottom:0;}
.rates-block h3{font-size:1.15rem; margin-bottom:10px; font-weight:500;}
.rates-quote{color:var(--ink-faint); font-family:var(--font-body); font-style:italic; font-size:.88rem; margin:10px 0 30px;}
.rates-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:40px; align-items:baseline; margin-bottom:18px;}
.rate-item{display:flex; align-items:baseline; gap:10px;}
.rate-item .num{font-family:var(--font-head); font-size:2rem; color:var(--ink); line-height:1;}
.rate-item .label{font-family:var(--font-ui); font-size:.72rem; color:var(--ink-faint);}
.rate-item .price{font-family:var(--font-body); font-size:.9rem; color:var(--accent-deep);}
.rates-note, .rates-addon{font-family:var(--font-ui); font-size:.78rem; color:var(--ink-faint);}
.rates-footnote{font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); margin-top:52px;}

/* ---------- outlined button ---------- */
.btn-outline{
  display:inline-block; padding:13px 32px; border:1px solid currentColor;
  font-family:var(--font-ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.btn-outline:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-outline.on-photo{color:#F3F1EA; border-color:rgba(243,241,234,.7);}
.btn-outline.on-photo:hover{background:#F3F1EA; color:var(--ink);}

/* ---------- PORTFOLIO CAROUSEL ---------- */
.carousel{padding:0 var(--pad); position:relative; max-width:1060px; margin:0 auto;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex; transition:transform .5s ease;}
.carousel-card{
  flex:0 0 calc((100% - 2*20px)/3); margin-right:20px;
  position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--line);
}
.carousel-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.carousel-card:hover img{transform:scale(1.04);}
.carousel-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.68) 100%);}
.carousel-caption{position:absolute; left:0; right:0; bottom:28px; z-index:2; text-align:center; padding:0 16px;}
.carousel-caption .names{font-family:var(--font-head); font-size:1.54rem; color:#F3F1EA;}
.carousel-caption .btn-outline{margin-top:16px;}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:auto; height:auto; border-radius:0;
  background:none; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-soft); line-height:1;
  z-index:20; box-shadow:none;
  transition:color .2s ease, opacity .2s ease;
}
.carousel-arrow svg{width:56px; height:56px; display:block;}
.carousel-arrow:hover{color:var(--accent-deep);}
.carousel-arrow.prev{left:-8px;}
.carousel-arrow.next{right:-8px;}
.carousel-arrow.is-edge{color:var(--ink-faint); opacity:.4;}
.carousel-arrow.is-edge:hover{color:var(--ink-faint);}
@media (max-width:1180px){
  .carousel-arrow.prev{left:4px;}
  .carousel-arrow.next{right:4px;}
  .carousel-arrow svg{width:40px; height:40px;}
}

.carousel-dots{display:flex; justify-content:center; gap:10px; margin-top:32px;}
.carousel-dots button{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer; transition:background .2s ease;}
.carousel-dots button.active{background:var(--ink);}

/* Mobile: one narrow, tall card at a time — generous margin around it
   rather than edge-to-edge (a deliberate exception to the site's mobile
   edge-to-edge rule, per feedback) — with the prev/next arrows sitting
   close together in a row underneath instead of floating over the photo,
   and no dots. grid-area placement needs no HTML change: the arrows/dots
   are already flat siblings of .carousel-viewport. */
@media (max-width:880px){
  .carousel{
    padding:0 32px; display:grid; row-gap:20px;
    grid-template-columns:1fr auto 18px auto 1fr;
    grid-template-areas:"viewport viewport viewport viewport viewport" ". prev . next .";
    justify-items:center;
  }
  .carousel-viewport{grid-area:viewport; width:100%; display:flex; justify-content:center;}
  .carousel-track{width:100%;}
  .carousel-card{flex:0 0 100%; margin-right:0; aspect-ratio:3/4.6;}
  .carousel-arrow{position:static; transform:none;}
  .carousel-arrow.prev{grid-area:prev;}
  .carousel-arrow.next{grid-area:next;}
  .carousel-arrow svg{width:44px; height:44px;}
  .carousel-dots{display:none;}
}
@media (min-width:881px) and (max-width:1180px){ .carousel-card{flex:0 0 calc((100% - 24px)/2);} }

/* ---------- TESTIMONIAL OVERLAY ---------- */
.testimonial-overlay{margin:100px 0; padding:0 var(--pad);}
.testimonial-overlay .frame{position:relative; width:100%; overflow:hidden;}
.testimonial-overlay .frame img{width:100%; height:auto; display:block; filter:brightness(.6);}
.testimonial-overlay .quote{position:absolute; max-width:260px; font-family:var(--font-body); font-size:.82rem; line-height:1.55; color:#F3F1EA;}
.testimonial-overlay .quote p{margin:0; color:#F3F1EA;}
.testimonial-overlay .quote .attr{display:block; margin-top:10px; font-family:var(--font-head); font-style:italic; font-size:1rem; color:#F3F1EA; opacity:.9;}
.testimonial-overlay .tag{
  position:absolute; top:5%; left:50%; transform:translateX(-50%);
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#F3F1EA; opacity:.85; white-space:nowrap;
}
.testimonial-overlay .q1{top:15%; left:6%;}
.testimonial-overlay .q2{top:15%; right:6%; text-align:right;}
.testimonial-overlay .q3{top:41%; left:6%;}
.testimonial-overlay .q4{top:41%; right:6%; text-align:right;}
.testimonial-overlay .q5{bottom:25%; left:6%;}
.testimonial-overlay .q6{bottom:25%; right:6%; text-align:right;}
.testimonial-overlay .q7{bottom:6%; left:50%; transform:translateX(-50%); text-align:center; max-width:320px;}
@media (max-width:880px){
  /* Crop the photo taller so it holds real presence on a phone screen,
     and keep one quote overlaid on it — the same overlay treatment as
     desktop — instead of dumping every quote as plain stacked text.
     aspect-ratio lives on the img itself (not the .frame wrapper) so its
     height is self-contained rather than a %-of-parent that would fight
     the static quotes stacking below it in the same box. */
  .testimonial-overlay .frame img{width:100%; height:auto; aspect-ratio:3/4.1; object-fit:cover;}
  .testimonial-overlay .tag{
    top:22px; white-space:normal; text-align:center; width:100%; left:0; right:0; transform:none; padding:0 24px;
  }
  .testimonial-overlay .q1{
    position:absolute; top:auto; left:24px; right:24px; bottom:26px; max-width:none; text-align:center;
  }
  /* q2 through q7 drop out of the photo and become a clean, evenly spaced
     list underneath, each separated by a hairline — same voice as
     desktop's overlay quotes, just stacked instead of scattered. */
  .testimonial-overlay .q2, .testimonial-overlay .q3, .testimonial-overlay .q4,
  .testimonial-overlay .q5, .testimonial-overlay .q6, .testimonial-overlay .q7{
    position:static; max-width:none; transform:none; text-align:center; white-space:normal;
    color:var(--ink-soft); margin:0; padding:26px 4px 0; border-top:1px solid var(--line);
  }
  .testimonial-overlay .q2 p, .testimonial-overlay .q3 p, .testimonial-overlay .q4 p,
  .testimonial-overlay .q5 p, .testimonial-overlay .q6 p, .testimonial-overlay .q7 p{color:var(--ink-soft);}
  .testimonial-overlay .q2 .attr, .testimonial-overlay .q3 .attr, .testimonial-overlay .q4 .attr,
  .testimonial-overlay .q5 .attr, .testimonial-overlay .q6 .attr, .testimonial-overlay .q7 .attr{color:var(--accent-deep); opacity:1;}
}
/* Pulled entirely off mobile per feedback — the overlay treatment wasn't
   working on a phone screen. Desktop is untouched; the mobile CSS above
   is left in place, just inert, in case this gets revisited later. */
@media (max-width:880px){
  .testimonial-overlay{display:none;}
}

/* ---------- BACKGROUND MUSIC TOGGLE ---------- */
.music-toggle{
  position:fixed; right:24px; bottom:24px; z-index:150;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink-soft); cursor:pointer;
  padding:8px 14px; border-radius:20px;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:color .2s ease, border-color .2s ease;
}
.music-toggle:hover{color:var(--accent-deep); border-color:var(--accent-deep);}
@media (max-width:880px){
  .music-toggle{right:16px; bottom:16px; padding:9px 15px; font-size:.72rem;}
  /* hide the floating pill while the full-screen mobile nav is open, so it
     never renders on top of the takeover menu */
  body.nav-open .music-toggle{display:none;}
}

/* ---------- LIGHTBOX (story gallery image viewer) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(15,15,14,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:90vw; max-height:85vh; width:auto; height:auto; display:block; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:0; color:#F3F1EA; cursor:pointer;
  font-family:var(--font-ui); display:flex; align-items:center; justify-content:center;
  transition:color .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{color:var(--accent-deep);}
.lightbox-close{top:20px; right:20px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:12px 16px;}
.lightbox-prev, .lightbox-next{top:50%; transform:translateY(-50%); font-size:2.2rem; padding:16px 20px; line-height:1;}
.lightbox-prev{left:8px;}
.lightbox-next{right:8px;}
@media (max-width:700px){
  .lightbox img{max-width:94vw; max-height:78vh;}
  .lightbox-close{top:12px; right:12px; padding:14px;}
  .lightbox-prev{left:2px;}
  .lightbox-next{right:2px;}
  .lightbox-prev, .lightbox-next{font-size:1.8rem; padding:14px;}
}

/* ---------- CONTACT SPACER ---------- */
.contact-spacer{height:14vh;}

/* ---------- PORTRAIT LEAD (About page headshot) ---------- */
.portrait-lead{max-width:480px; margin:0 auto 40px; padding:0 var(--pad);}
.portrait-lead img{width:100%; height:auto; display:block;}

/* ---------- FAQ ---------- */
.faq-list{max-width:var(--measure); margin:0 auto; padding:0 var(--pad); text-align:left;}
.faq-item{border-top:1px solid var(--line); padding:26px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  cursor:pointer; background:none; border:0; width:100%; text-align:left; padding:0;
  font-family:var(--font-body); font-size:.92rem; color:var(--ink);
}
.faq-q .plus{font-size:.9rem; color:var(--accent-deep); transition:transform .25s ease; flex:none;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-soft); font-size:.88rem;}
.faq-item.open .faq-a{max-height:400px; margin-top:14px;}

/* ---------- FOOTER SUB-NAV + FOOTER ---------- */
.footer-subnav{padding:80px var(--pad) 56px; text-align:center;}
.footer-subnav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.footer-subnav a{font-family:var(--font-body); font-size:.88rem; color:var(--ink-faint); transition:color .2s ease;}
.footer-subnav a:hover, .footer-subnav a.current{color:var(--ink);}

footer{padding:0 var(--pad) 90px; text-align:center; font-family:var(--font-ui); font-size:.76rem; color:var(--ink-faint);}
footer .mark{font-size:1rem; display:block; margin-bottom:14px;}
.footer-links{display:flex; gap:20px; justify-content:center; flex-wrap:wrap;}
.footer-links a{color:var(--ink-soft);}
.footer-links a:hover{color:var(--accent-deep);}

/* =================================================================
   WEDDING STORY PAGE
   ================================================================= */
.story-hero{padding:64px var(--pad) 0; text-align:center;}
.story-hero .eyebrow{font-family:var(--font-ui); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:14px;}
.story-hero h1{font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500;}
.story-back{display:inline-block; font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:30px;}
.story-back:hover{color:var(--accent-deep);}

.story-copy{max-width:var(--measure); margin:56px auto 0; padding:0 var(--pad); text-align:center;}
.story-copy p{color:var(--ink-soft); font-size:.98rem; text-wrap:balance;}
.story-copy .signoff{font-family:var(--font-head); font-size:1.05rem; color:var(--accent-deep); margin-top:18px;}

.story-gallery{margin-top:80px; padding:0 var(--pad); display:flex; flex-direction:column; gap:63px;}
.story-gallery img{width:100%; height:auto; display:block;}
/* One image per row, standardized by orientation, nothing overlapping or
   paired. Landscapes run near-full column width; portraits stay capped
   narrower and flush-left, with the gap held on the right (desktop only —
   on mobile, per feedback, portraits go full width like landscapes so
   they don't read as too small on a phone screen). */
.story-gallery .gallery-landscape{width:97%;}
.story-gallery .gallery-portrait{width:46%; margin-right:auto;}
@media (max-width:880px){
  .story-gallery{gap:40px;}
  .story-gallery .gallery-landscape{width:100%;}
  .story-gallery .gallery-portrait{width:100%;}
}

.story-nav{
  max-width:var(--measure); margin:0 auto; padding:70px var(--pad) 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.story-nav a{border-bottom:1px solid transparent; transition:border-color .2s, color .2s;}
.story-nav a:hover{border-color:var(--accent-deep); color:var(--accent-deep);}
.story-nav .next{text-align:right;}

/* =================================================================
   ABOUT PAGE — "Photos with my Couples" mixed grid
   Alternating rows: 3 portrait photos, then 2 landscape photos,
   capped at 4 rows total. Each photo keeps its own natural aspect
   ratio — fixed row height, auto width, nothing cropped. Fewer photos
   per row than before, so each one runs larger. The dinner row (no
   .landscape/.single modifier) uses the same base height as the
   portrait rows.
   ================================================================= */
.couples-grid{padding:0 var(--pad); margin:32px 0; display:flex; flex-direction:column; gap:14px;}
.couples-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;}
.couples-row img{height:300px; width:auto; max-width:100%; object-fit:contain; display:block;}
.couples-row.landscape img{height:200px;}
.couples-row.single img{height:300px;}
@media (max-width:880px){
  .couples-row img{height:220px;}
  .couples-row.landscape img{height:145px;}
  .couples-row.single img{height:220px;}
}
@media (max-width:520px){
  .couples-row img{height:160px;}
  .couples-row.landscape img{height:105px;}
  .couples-row.single img{height:160px;}
}

/* =================================================================
   ABOUT PAGE — vertical spacing cut well down from the site default;
   this page reads as a lot of scroll for not much content otherwise.
   Reduced ~20% again on top of the earlier pass per feedback.
   ================================================================= */
.about-page section{padding:45px 0;}
.about-page section:first-of-type{padding-top:58px;}
.about-page .bleed{margin:38px 0;}
.about-page .bleed-stagger{margin:38px 0;}
.about-page .couples-grid{margin:32px 0; gap:14px;}
/* Closing "dinners with couples" row: sits right under its caption text
   (tighten the gap above) and is the last thing on the page (give it real
   room to breathe below, instead of the page just stopping). */
.about-page .couples-grid.dinner-row{margin-top:19px; margin-bottom:104px;}