/* ============================================================
   The Brown Print — wedding page
   Shared components (hero, tiles, dialogs, CTA) live in css/site.css.
   ============================================================ */

/* ============ SELECTED COUPLES ============ */
.section-head .sample{display:block;margin-top:var(--sp-3)}
.filters{display:flex;gap:clamp(8px,1.6vw,24px)}
.filters button{position:relative;padding:14px 6px;font:700 var(--fs-label)/1 var(--f-body);letter-spacing:var(--tr-nav);
  text-transform:uppercase;color:var(--c-muted);transition:color var(--dur-fast) var(--ease)}
.filters button::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:1px;background:var(--c-accent);
  transform:scaleX(0);transition:transform var(--dur-ui) var(--ease)}
.filters button:hover,.filters button[aria-pressed="true"]{color:var(--c-text)}
.filters button[aria-pressed="true"]::after{transform:none}

.couples{display:flex;flex-direction:column;gap:var(--list-gap)}
.couple{display:grid;gap:var(--sp-5);cursor:pointer}
.couple:focus-visible{outline-offset:6px}
.couple .frame img{aspect-ratio:3/2}
.couple:hover .frame img{transform:scale(1.03)}
.couple .names{font:400 var(--fs-title)/var(--lh-head) var(--f-voice);letter-spacing:var(--tr-voice)}
.couple .names em{font-style:italic;color:var(--c-accent)}
.couple .cap .meta{margin-top:var(--sp-3)}
.couple .view{display:inline-flex;gap:var(--sp-2);color:var(--c-text-2);transition:color var(--dur-fast) var(--ease)}
.couple .view i{font-style:normal;transition:transform var(--dur-ui) var(--ease)}
.couple:hover .view{color:var(--c-accent)}
.couple:hover .view i{transform:translateX(4px)}
@media(min-width:1024px){
  .couple{grid-template-columns:repeat(12,1fr);align-items:end;column-gap:var(--card-gap)}
  .couple .frame{grid-column:1 / span 8}
  .couple .cap{grid-column:9 / span 4}
  .couple:nth-child(even) .frame{grid-column:5 / span 8}
  .couple:nth-child(even) .cap{grid-column:1 / span 4;grid-row:1}
}

/* ============ STORIES ============ */
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--list-gap) clamp(40px,6vw,100px)}
.story .ph{margin-bottom:var(--sp-5)}
.story .ph img{aspect-ratio:4/3}
.story .qt{margin-bottom:var(--sp-4);font:italic 400 var(--fs-h4)/1.35 var(--f-voice);letter-spacing:var(--tr-voice)}
.story .who b{color:var(--c-text);font-weight:700}
@media(max-width:767px){.story-row{grid-template-columns:1fr}}

/* ============ STORY VIEWER (<dialog>) ============ */
.lb-inner{max-width:1120px;margin:0 auto;padding:clamp(80px,10vw,120px) var(--page-margin) var(--sp-9)}
.lb-close{position:fixed;top:max(24px,env(safe-area-inset-top));right:var(--page-margin);z-index:1;background:rgb(10 9 8/.8)}
.lb-head{text-align:center;margin-bottom:var(--head-gap)}
.lb-head .label{display:block;margin-bottom:var(--sp-5);text-indent:var(--tr-label)}
.lb-head h2{font:400 var(--fs-xl)/1 var(--f-voice);letter-spacing:var(--tr-voice)}
.lb-head .place{margin-top:var(--sp-4);color:var(--c-text-2)}
.lb-head .desc{max-width:56ch;margin:var(--sp-5) auto 0;color:var(--c-muted)}
.lb-media{display:flex;flex-direction:column;gap:clamp(20px,3vw,48px)}
.lb-media .m{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--c-raised)}
.lb-media .m img{width:100%;height:auto}
.lb-media .m.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);background:none;border-radius:0}
.lb-media .m.pair img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md)}
.lb-media .m.video video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-surface)}
.lb-note{margin-top:var(--sp-7);text-align:center}
@media(max-width:479px){
  .lb-media .m.pair{grid-template-columns:1fr}
  .couple .frame img{aspect-ratio:4/5}
}