/* ============================================================================
   Moments — crimsoncatevents.com/moments  (gallery, album pages, photo/video pages)
   Built on the site's own pieces: .wrap for width and gutters, .page-head (eyebrow / serif h1 / lede) and the shared
   hero spacing tokens for the header, .label + serif h2 for album blocks, .cc-btn for actions, .arr links.
   Photos sit on a 12-column grid (6 on phones) with one gutter; a photo's shape decides how many columns it spans.
   ============================================================================ */
.moments-page{--ivory:#F3EBE1;--ivory-dim:rgba(243,235,225,.68);--ivory-soft:rgba(243,235,225,.5);--rose:#C9948A;--antique:#B08D57;
  --hair:rgba(243,235,225,.14);--hair-soft:rgba(243,235,225,.08);--m-gap:12px;--m-ease:cubic-bezier(.2,.7,.2,1)}
.moments-page .nav-center a,.moments-page .nav-right a{font-family:var(--font-body)}
.moments-page .label{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--antique)}
.m-wrap{padding-bottom:clamp(8px,2vw,20px)}
.m-dot{color:var(--antique);padding:0 2px}
.m-link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:15px;font-weight:600;color:rgba(243,235,225,.82);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.m-link-arrow .arr{font-family:var(--font-head);font-size:1.15em;line-height:1;transition:transform .18s ease}
.m-link-arrow:hover,.m-link-arrow:focus-visible{color:var(--ivory);border-bottom-color:var(--antique)}
.m-link-arrow:hover .arr{transform:translateX(3px)}
.m-link-arrow:focus-visible{outline:2px solid var(--antique);outline-offset:4px}
.m-link-arrow.is-copied{color:var(--antique)}

/* ---------- headers: the site's .page-head (Games, FAQ …) ---------- */
.moments-page .page-head .lede a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.moments-page .page-head .lede a:hover{text-decoration-color:var(--antique)}
.m-back{margin:0 0 clamp(14px,2vw,22px);font-size:14px;font-weight:600}
.m-back a{color:var(--ivory-dim);border-bottom:1px solid transparent}
.m-back a:hover,.m-back a:focus-visible{color:var(--ivory);border-bottom-color:var(--antique)}
.m-album-head .lede.m-desc{margin-top:12px}
.m-meta{margin:14px 0 0;font-size:14px;color:var(--ivory-dim)}
.m-head-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin:18px 0 0}
html body .page-head .cc-btn.cc-btn,html body .m-photo__acts .cc-btn.cc-btn{min-height:44px;padding:0 18px;font-size:14px}

/* ---------- event / date filter ---------- */
.m-filter{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 clamp(16px,2.5vw,26px)}
.m-filter__lab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-soft)}
.m-filter__sel{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 40px 0 14px;border:1px solid var(--hair);border-radius:2px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08D57' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;
  color:var(--ivory);font:500 14px/1.2 var(--font-body);cursor:pointer;max-width:min(100%,360px)}
.m-filter__sel:focus-visible{outline:2px solid var(--antique);outline-offset:3px}
.m-filter__sel option{background:#1A1416;color:var(--ivory)}

/* ---------- album blocks on the main page: section heading pattern (label + serif h2), one meta line, text actions ---------- */
.m-section{padding:0 0 clamp(32px,5vw,64px)}
.m-section + .m-section{padding-top:clamp(28px,4vw,52px);border-top:1px solid var(--hair-soft)}
.m-section[hidden]{display:none}
.m-album{margin:0 0 clamp(16px,2.4vw,24px)}
.m-album .label{margin-bottom:10px}
.m-album__title{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.012em;color:var(--ivory)}
.m-album__title a{color:inherit}
.m-album__title a:hover,.m-album__title a:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:var(--antique);text-underline-offset:6px;text-decoration-thickness:1px}
.m-album__meta{margin:8px 0 0;font-size:15px;color:var(--ivory-dim)}
.m-album__meta a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.m-album__meta a:hover{text-decoration-color:var(--antique)}
.m-album__desc{margin:10px 0 0;max-width:62ch;color:var(--muted,#B3A29C)}
.m-album__acts{display:flex;flex-wrap:wrap;gap:4px 24px;margin:4px 0 0}

/* ---------- the grid: 12 columns (6 on phones), one gutter; moments/build.py places every tile so rows fill edge to edge ---------- */
.m-grid{--cols:12;--w:calc(min(100vw,1180px) - 2 * max(clamp(22px,6vw,34px),env(safe-area-inset-left)));
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((var(--w) - (var(--cols) - 1) * var(--m-gap)) / var(--cols));gap:var(--m-gap)}
.m-item{position:relative;margin:0;min-width:0;grid-column:var(--cs,auto) / span var(--c,4);grid-row:span var(--r,3)}
.m-link{display:block;position:relative;height:100%;overflow:hidden;background:#120D0E;border-radius:2px;color:var(--ivory)}
.m-link:focus-visible{outline:2px solid var(--antique);outline-offset:3px}
.m-item picture{display:block;height:100%}
.m-img{display:block;width:100%;height:100%;object-fit:cover;background:#120D0E;transition:transform .9s var(--m-ease)}
.m-link:hover .m-img,.m-link:focus-visible .m-img{transform:scale(1.025)}
.m-no{position:absolute;left:12px;bottom:10px;z-index:1;font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,235,225,.9);text-shadow:0 1px 2px rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease;pointer-events:none}
.m-item:hover .m-no,.m-item:focus-within .m-no{opacity:1}
@media(hover:none){.m-no{display:none}}
.m-cap{display:none}                                   /* captions are read in the lightbox and on the photo's own page */
.m-empty{margin:clamp(30px,6vw,70px) auto;max-width:40ch;text-align:center;font-family:var(--font-head);font-style:italic;font-size:1.25rem;color:var(--ivory-dim)}

/* video tiles: thumbnail + play ring + label; the player only loads when opened */
.m-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(243,235,225,.55);background:rgba(12,10,10,.35);color:var(--ivory);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,transform .3s var(--m-ease)}
.m-play svg{margin-left:3px}
.m-link:hover .m-play,.m-link:focus-visible .m-play,.m-yt__play:hover .m-play,.m-yt__play:focus-visible .m-play{background:rgba(207,31,56,.85);border-color:rgba(207,31,56,.9);transform:scale(1.04)}
.m-item.is-video .m-link::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(180deg,rgba(12,10,10,0),rgba(12,10,10,.55) 55%,rgba(12,10,10,.85));pointer-events:none}   /* soft footer so the title reads on any thumbnail */
.m-item.is-video .m-play{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(243,235,225,.75);background:rgba(12,10,10,.5)}
.m-vlab{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.m-vlab__k{font:600 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--antique)}
.m-vlab{font:500 clamp(1rem,1.5vw,1.25rem)/1.25 var(--font-head);color:var(--ivory);text-shadow:0 1px 2px rgba(0,0,0,.5);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.m-vlab{display:flex}
.m-item.is-video .m-no{left:auto;right:14px;bottom:auto;top:14px}

/* ---------- lightbox ---------- */
.m-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.m-lb[hidden]{display:none}
.m-lb__bg{position:absolute;inset:0;background:rgba(10,8,8,.96)}
.m-lb__frame{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;padding:max(12px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom))}
.m-lb__stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(12px,6vw,80px)}
.m-lb__stage img{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);border-radius:2px}
.m-lb__stage .m-lb__video{width:min(100%,calc((100vh - 170px) * 1.7778));width:min(100%,calc((100dvh - 170px) * 1.7778));aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.m-lb__stage .m-lb__video iframe{width:100%;height:100%;border:0;display:block}
.m-lb__btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);background:rgba(12,10,10,.55);color:var(--ivory);cursor:pointer;transition:background .18s ease,border-color .18s ease}
.m-lb__btn:hover,.m-lb__btn:focus-visible{background:rgba(207,31,56,.8);border-color:rgba(207,31,56,.9)}
.m-lb__btn:focus-visible{outline:2px solid var(--antique);outline-offset:3px}
.m-lb__close{top:max(14px,env(safe-area-inset-top));right:14px}
.m-lb__arrow{top:50%;margin-top:-23px}
.m-lb__prev{left:14px}.m-lb__next{right:14px}
.m-lb__btn[disabled]{opacity:.3;cursor:default;pointer-events:none}
.m-lb__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;padding:14px clamp(22px,6vw,34px) 0;max-width:1180px;width:100%;margin-inline:auto}
.m-lb__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0;font-size:14px;color:var(--ivory-dim)}
.m-lb__no{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--antique)}
.m-lb__title{color:var(--ivory);font-weight:600}
.m-lb__cap{flex-basis:100%;font-family:var(--font-head);font-style:italic;font-size:1.05rem;color:var(--ivory-dim)}
.m-lb__cap:empty,.m-lb__when:empty{display:none}
.m-lb__acts{display:flex;flex-wrap:wrap;gap:4px 20px}
.m-act{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;color:var(--ivory);font:600 14px/1.2 var(--font-body);cursor:pointer;text-decoration:none;
  border-bottom:1px solid var(--hair);transition:border-color .18s ease,color .18s ease}
.m-act:hover,.m-act:focus-visible{color:#fff;border-bottom-color:var(--antique)}
.m-act:focus-visible{outline:2px solid var(--antique);outline-offset:4px}
.m-act--ig{color:var(--rose)}
.m-act.is-copied{color:var(--antique)}
.m-act[hidden]{display:none}
@media(max-width:640px){
  .m-lb__stage{padding:0 10px}
  .m-lb__arrow{display:none}   /* swipe (or the keyboard) moves between pictures on phones */
  .m-lb__stage img{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
}
.m-toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:1300;transform:translate(-50%,8px);padding:10px 16px;border-radius:2px;border:1px solid var(--hair);background:#1A1416;color:var(--ivory);font:500 14px/1.2 var(--font-body);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s var(--m-ease)}
.m-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- "Were you there?" + notice ---------- */
.m-join{margin:clamp(8px,2vw,24px) 0 0;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.m-join__in{max-width:58ch;margin-inline:auto;text-align:center}
.m-join__lead{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.012em}
.m-join__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:22px 0 0}
.m-join__btn{min-width:200px}
.page-head .m-studio{margin:12px 0 0;font-size:14px}
.page-head .m-studio a{color:var(--antique);text-decoration:underline;text-decoration-color:rgba(176,141,87,.4);text-underline-offset:3px}
.page-head .m-studio a:hover{text-decoration-color:currentColor}
.m-note{margin:clamp(22px,3vw,32px) auto 0;max-width:70ch;text-align:center;font-size:13.5px;line-height:1.6;color:var(--ivory-soft)}
.m-note a{color:var(--ivory-dim);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.m-note a:hover{color:var(--ivory);text-decoration-color:var(--antique)}

/* ---------- one photo / one video (same hierarchy as the page head: eyebrow, serif heading, lede) ---------- */
.m-one .m-photo{margin:0 auto;width:min(100%,calc(var(--ar) * 78vh));width:min(100%,calc(var(--ar) * 78dvh))}
.m-photo__img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:2px;background:#120D0E}
.m-photo--video{width:min(100%,calc(var(--ar,1.7778) * 74vh))}
.m-yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.m-yt__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.m-yt__play img{width:100%;height:100%;object-fit:cover;display:block}
.m-yt__play:focus-visible{outline:2px solid var(--antique);outline-offset:3px}
.m-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.m-photo__body{max-width:680px;margin:clamp(22px,3.5vw,36px) auto 0;text-align:center}
.m-eyebrow{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 0 var(--hero-eyebrow-gap,16px);font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--antique)}
.m-eyebrow__sep{display:inline-block;width:22px;height:1px;background:var(--antique);opacity:.6}
.m-eyebrow span:empty,.m-eyebrow__sep:has(+ span:empty),.m-eyebrow__sep:last-child{display:none}
.m-photo__title{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1.08;letter-spacing:-.02em;color:var(--ivory)}
.m-photo__venue{margin:var(--hero-heading-gap,20px) 0 0;font-size:1.05rem;color:var(--muted,#B3A29C)}
.m-photo__venue a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.m-photo__cap{margin:14px auto 0;max-width:46ch;font-family:var(--font-head);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--rose)}
.m-photo__acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin:clamp(18px,3vw,26px) 0 0}
.m-dl{position:relative}
.m-dl__menu{position:absolute;left:50%;top:calc(100% + 8px);z-index:5;transform:translateX(-50%);min-width:220px;padding:6px;border:1px solid var(--hair);border-radius:2px;background:#1A1416;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);text-align:left}
.m-dl__menu[hidden]{display:none}
.m-dl__menu a{display:block;padding:10px 12px;font-size:14px;font-weight:500;color:var(--ivory);border-radius:2px}
.m-dl__menu a:hover,.m-dl__menu a:focus-visible{background:rgba(243,235,225,.06);color:#fff}
.m-pnav{display:flex;justify-content:space-between;gap:16px;margin:clamp(24px,4vw,36px) 0 0;padding-top:16px;border-top:1px solid var(--hair-soft)}
.m-pn{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--ivory-dim)}
.m-pn:hover,.m-pn:focus-visible{color:var(--ivory)}
.m-pn.is-off{visibility:hidden}
.m-photo__album{margin:10px 0 0;font-size:14px;font-weight:600}
.m-photo__album a{color:var(--ivory-dim);border-bottom:1px solid transparent}
.m-photo__album a:hover{color:var(--ivory);border-bottom-color:var(--antique)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .moments-page{--m-gap:10px}
  .m-grid{--cols:6}
  .m-grid{grid-auto-rows:auto}
  .m-item{grid-column:auto / span var(--mc,3);grid-row:auto;aspect-ratio:var(--mar,3/2)}   /* phones: each tile keeps its proportion (videos 16:9) */
  .m-filter{justify-content:flex-start}
}
@media(max-width:560px){
  .moments-page{--m-gap:8px}
  .m-item.is-video .m-play{width:54px;height:54px;margin:-27px 0 0 -27px}
  .m-vlab{left:12px;right:12px;bottom:10px;font-size:1rem}
  .m-photo__acts{gap:8px 18px}.m-join__btn{min-width:0;flex:1 1 100%}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .m-img,.m-play,.m-toast,.m-act,.m-link-arrow,.m-lb__btn{transition:none}
  .m-link:hover .m-img,.m-link:focus-visible .m-img{transform:none}
}

/* ---------- Moments gallery: editorial hero + album header (Nov 2026) ----------
   Left-aligned like the site's editorial pages (Articles); shared hero tokens and .wrap gutters, so the hero, album
   heading and photo grid share one left edge. Tighter hero bottom so the album reads as the page's first section. */
.moments-page .page-head.m-hero{--hero-bottom:clamp(24px,3vw,32px)}   /* hero → filter bar: tighter so the gallery starts sooner */
.moments-page .page-head.m-hero{text-align:left}
.moments-page .page-head.m-hero p.lede{margin-inline:0;font-family:var(--font-head);font-style:italic;font-size:clamp(1.12rem,1rem + .6vw,1.4rem);line-height:1.4;color:rgba(243,235,225,.74)}
.m-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.page-head.m-hero .m-studio{margin:16px 0 0;font-size:15px}
.page-head.m-hero .m-studio a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--antique);
  text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(176,141,87,.45);text-underline-offset:5px;transition:color .15s ease,text-decoration-color .15s ease}
.page-head.m-hero .m-studio a:hover,.page-head.m-hero .m-studio a:focus-visible{color:#E2C58F;text-decoration-color:currentColor}
.page-head.m-hero .m-studio a:hover .m-ic{transform:translateX(3px)}
.page-head.m-hero .m-studio a:focus-visible{outline:2px solid var(--antique);outline-offset:3px;border-radius:2px}

/* album header: label → title → meta (one quiet line) → actions, then the photographs close underneath */
.m-section:first-child{padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--hair-soft)}
.m-album{margin:0 0 clamp(18px,2.4vw,26px)}
.m-album__meta{margin-top:10px}
.m-album__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(16px,2vw,22px);margin:18px 0 0}
html body .m-album__acts .cc-btn.cc-btn{min-height:44px;padding:0 18px 0 20px;font-size:14px}
html body .m-album__acts .cc-btn.cc-btn:hover .m-ic{transform:translateX(3px)}
.m-share-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:600 14px/1.2 var(--font-body);color:rgba(243,235,225,.82);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(243,235,225,.25);text-underline-offset:5px;transition:color .15s ease,text-decoration-color .15s ease}
.m-share-link::before{content:"";width:16px;height:16px;flex:none;background:currentColor;   /* Lucide share-2, kept in CSS so the "Link copied" text swap leaves it in place */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E") center/contain no-repeat}
.m-share-link:hover,.m-share-link:focus-visible{color:var(--ivory);text-decoration-color:var(--antique)}
.m-share-link:focus-visible{outline:2px solid var(--antique);outline-offset:3px;border-radius:2px}
.m-share-link.is-copied{color:var(--antique)}
@media(prefers-reduced-motion:reduce){.m-ic{transition:none}}
@media(max-width:359px){.m-album__acts{column-gap:12px}html body .m-album__acts .cc-btn.cc-btn{padding:0 14px 0 16px}}   /* both actions stay on one line on the narrowest phones */

/* clips hosted on the site (portrait phone videos): sized by their own proportion, never cropped */
.m-lb__stage .m-lb__video--clip{aspect-ratio:var(--ar);width:min(100%,calc((100vh - 170px) * var(--ar)));width:min(100%,calc((100dvh - 170px) * var(--ar)))}
.m-lb__stage .m-lb__video--clip video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.m-vid{position:relative;aspect-ratio:var(--ar);background:#000;border-radius:2px;overflow:hidden}
.m-vid video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.m-item.is-video .m-vlab{justify-content:flex-end}

/* album header: date line (more prominent) above the quieter photo/video count */
.m-album__when{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--ivory);text-wrap:pretty}
.m-album__when a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.m-album__when a:hover{text-decoration-color:var(--antique)}
.m-album__count{margin:4px 0 0;font-size:14px;color:var(--ivory-dim)}

/* ===== Moments gallery (Nov 2026): one continuous masonry grid + compact filters ===== */
.m-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin:0 0 14px}
.m-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--hair);border-radius:999px;max-width:100%}
.m-seg button{min-height:38px;padding:0 14px;border:0;border-radius:999px;background:none;cursor:pointer;white-space:nowrap;
  font:500 14px/1 var(--font-body);color:var(--ivory-dim);transition:background-color .18s ease-out,color .18s ease-out}
.m-seg button:hover{color:var(--ivory)}
.m-seg button[aria-pressed="true"]{background:rgba(243,235,225,.12);color:var(--ivory)}
.m-seg button:focus-visible{outline:2px solid var(--antique);outline-offset:2px}
.m-date{min-height:44px}
.m-date.is-set{border-color:var(--antique);color:var(--ivory)}
.m-gal{display:flex;align-items:flex-start;gap:var(--m-gap,10px)}
.m-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--m-gap,10px)}
.m-gal .m-item{grid-column:auto;grid-row:auto;margin:0}
.m-gal .m-link{height:auto;aspect-ratio:var(--ar);border-radius:2px}
.m-gal .m-item picture{height:100%}
.m-gal .m-img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}   /* the box already has the photo's own proportion, so nothing is cropped */
.m-gal .m-item.is-video .m-play{width:54px;height:54px;margin:-27px 0 0 -27px}
.m-gal .m-vlab{left:12px;right:12px;bottom:10px}
.m-gal-empty{margin:clamp(28px,6vw,56px) 0;text-align:center;font-family:var(--font-head);font-style:italic;font-size:1.2rem;color:var(--ivory-dim)}
.m-gal-more{display:flex;justify-content:center;margin:clamp(18px,3vw,28px) 0 0}
.m-gal-more .cc-btn[hidden]{display:none}
@media(max-width:899px){.moments-page{--m-gap:8px}}
@media(max-width:380px){.m-bar{gap:8px}.m-seg{width:100%}.m-seg button{flex:1;padding:0 8px;font-size:13px}.m-date{width:100%;max-width:none}}
@media(prefers-reduced-motion:reduce){.m-seg button{transition:none}}

/* ===== Lightbox controls (Nov 2026): quiet oxblood hover, muted-pink text links, colour-only 200ms transitions =====
   Arrows sit fully inside the viewer at the same inset on both sides; the picture keeps clear of them. Hover styles only
   apply on devices that can hover (no "stuck" hover after a tap); a tap gets the same colour while pressed. */
.m-lb__btn{transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;-webkit-tap-highlight-color:transparent;color:var(--ivory)}
.m-lb__btn:hover,.m-lb__btn:focus-visible{background:rgba(12,10,10,.55);border-color:var(--hair)}   /* clears the old bright-red fill */
@media (hover:hover){.m-lb__btn:hover{background:#381820;border-color:rgba(213,155,155,.35)}}
.m-lb__btn:active{background:#381820;border-color:rgba(213,155,155,.35)}
.m-lb__btn:focus-visible{background:#381820;border-color:rgba(213,155,155,.35);outline:2px solid #D59B9B;outline-offset:3px}
.m-lb__btn svg{pointer-events:none}
.m-lb__close{right:max(16px,env(safe-area-inset-right))}
.m-lb__prev{left:max(16px,env(safe-area-inset-left))}
.m-lb__next{right:max(16px,env(safe-area-inset-right))}
@media (min-width:641px){.m-lb__stage{padding-left:max(78px,6vw);padding-right:max(78px,6vw)}}   /* 16px inset + 46px button + 16px air */
.m-lb .m-act{min-height:44px;transition:color .2s ease-out,border-color .2s ease-out;-webkit-tap-highlight-color:transparent}
.m-lb .m-act:hover,.m-lb .m-act:focus-visible{color:var(--ivory);border-bottom-color:transparent}
@media (hover:hover){.m-lb .m-act:hover{color:#D59B9B;border-bottom-color:rgba(213,155,155,.45)}}
.m-lb .m-act:active{color:#D59B9B}
.m-lb .m-act:focus-visible{color:#D59B9B;outline:2px solid #D59B9B;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.m-lb__btn,.m-lb .m-act{transition:none}}

/* ===== "Share photo" preview (lightbox → Share on a photo): same paper card as the site's other modals ===== */
.m-sp{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.m-sp[hidden]{display:none}
.m-sp__bg{position:absolute;inset:0;background:rgba(8,6,7,.84)}
.m-sp__card{position:relative;box-sizing:border-box;width:min(420px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;
  padding:clamp(20px,5.5vw,26px) clamp(18px,5.5vw,26px) clamp(18px,5vw,22px);background:#F6EFE2;background-image:linear-gradient(#F6EFE2,#EFE5D3);
  box-shadow:inset 0 0 0 1px rgba(122,82,48,.18),0 30px 80px rgba(0,0,0,.45);color:#2A1F17;font-family:var(--font-body)}
.m-sp__close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(122,82,48,.22);
  background:rgba(246,239,226,.92);color:#7A5230;cursor:pointer;transition:background-color .2s ease-out,color .2s ease-out;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.m-sp__close:hover{background:#EADFCB;color:#2A1F17}}
.m-sp__close:focus-visible{outline:2px solid #7A5230;outline-offset:2px}
.m-sp__title{margin:2px 56px 14px 0;font-family:var(--font-head);font-weight:500;font-size:clamp(1.38rem,6vw,1.75rem);line-height:1.12;letter-spacing:-.01em;color:#2A1F17}
.m-sp__fig{position:relative;display:grid;place-items:center;min-height:180px;margin:0;border-radius:8px;background:#E9DECB;overflow:hidden}
.m-sp__img{display:block;width:100%;height:auto;max-height:min(52vh,52dvh);object-fit:contain}
.m-sp__img[hidden]{display:none}
.m-sp__wait{padding:24px;font-size:14px;color:#5E4D42}
.m-sp__wait[hidden]{display:none}
.m-sp__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.m-sp__btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;box-sizing:border-box;margin:0;padding:0 12px;border:1px solid rgba(42,31,23,.2);border-radius:999px;
  background:transparent;color:#2A1F17;font:600 14px/1.15 var(--font-body);cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;-webkit-tap-highlight-color:transparent}
.m-sp__btn--primary{grid-column:1 / -1;background:#381820;border-color:#381820;color:#F4E9DF}
@media (hover:hover){.m-sp__btn:hover:not([disabled]){background:rgba(42,31,23,.06);border-color:rgba(42,31,23,.4)}.m-sp__btn--primary:hover:not([disabled]){background:#4A2029;border-color:#4A2029;color:#F4E9DF}}
.m-sp__btn:active:not([disabled]){background:rgba(42,31,23,.1)}
.m-sp__btn--primary:active:not([disabled]){background:#4A2029}
.m-sp__btn:focus-visible{outline:2px solid #7A5230;outline-offset:2px}
.m-sp__btn[disabled]{opacity:.45;cursor:not-allowed}
.m-sp__acts .m-sp__btn:only-of-type,.m-sp__acts.is-computer .m-sp__btn:last-child:nth-child(2){grid-column:1 / -1}
.m-sp__ic{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.m-sp__status{margin:10px 0 0;min-height:1.4em;font-size:13px;line-height:1.45;color:#5E4D42;text-align:center;text-wrap:pretty}
.m-sp__status.is-ok{color:#2E6B45}
@media (prefers-reduced-motion:reduce){.m-sp__btn,.m-sp__close{transition:none}}

/* ===== Moments refinement (Nov 2026) ===== */
/* gaps: the old phone rule gave every tile box a 3:2 shape — tiles now take exactly their media's proportion */
.m-gal .m-item{aspect-ratio:auto;grid-column:auto;grid-row:auto}
.m-gal .m-item.is-failed .m-link{aspect-ratio:auto;height:0;overflow:hidden;padding:0}
.m-fail{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--hair);border-radius:2px;background:#120D0E;font-size:13px;line-height:1.4;color:var(--ivory-dim)}
.m-fail__btn{min-height:44px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;background:none;color:var(--ivory);font:600 13px/1 var(--font-body);cursor:pointer}
.m-fail__btn:hover,.m-fail__btn:focus-visible{border-color:var(--antique)}
.m-fail__btn:focus-visible{outline:2px solid var(--antique);outline-offset:2px}
/* video tiles: the thumbnail as it is — no dark wash, no visible "VIDEO" label (the link keeps its accessible name) */
.m-gal .m-item.is-video .m-link::after{display:none}
.m-gal .m-item.is-video .m-vlab{display:none}
.m-gal .m-item.is-video .m-play{width:56px;height:56px;margin:-28px 0 0 -28px;border:1px solid rgba(243,235,225,.7);background:rgba(12,10,10,.42);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
/* Photo Studio: a compact outlined button under the description */
.page-head.m-hero .m-studio{margin:18px 0 0}
html body .page-head.m-hero .m-studio a.cc-btn.cc-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;font-size:14px;text-decoration:none}
html body .page-head.m-hero .m-studio a.cc-btn.cc-btn .m-ic{flex:none}
html body .page-head.m-hero .m-studio a.cc-btn.cc-btn:hover .m-ic{transform:translateX(3px)}
/* bottom invitation */
h2.m-join__lead{margin:0;color:var(--ivory)}
@media(max-width:640px){
  .moments-page main > .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .moments-page{--m-gap:8px}
  .m-bar{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 16px}
  .m-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .m-seg button{min-height:44px;padding:0 6px;font-size:14px}
  .m-date{width:100%;max-width:none;min-height:48px}
  .m-join__acts{display:grid;grid-template-columns:minmax(0,320px);justify-content:center;gap:12px;width:100%}   /* stacked: equal widths, max 320px, centred; the section's own 20px gutters are the side margins */
  .m-join__btn{width:100%;min-width:0}
  .page-head.m-hero{--hero-bottom:24px}
}
@media(min-width:641px){.m-bar{margin-bottom:18px}}
@media(max-width:359px){.m-seg button{font-size:13px;padding:0 4px}}

/* ===== Editorial mosaic (Nov 2026): explicit grid placement from moments.js; every cell keeps its reserved size ===== */
.m-gal{display:grid;align-items:stretch;gap:var(--m-gap,10px);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:110px}
.m-gal.is-phone{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-gal .m-item{min-width:0;min-height:0;height:100%}
.m-gal .m-link{height:100%;aspect-ratio:auto}
.m-gal .m-item picture{display:block;height:100%}
.m-gal .m-img{width:100%;height:100%;object-fit:cover}
.m-gal .m-item.is-failed .m-link{height:100%;visibility:hidden}
.m-gal .m-item.is-failed .m-fail{position:absolute;inset:0;justify-content:center}
.m-gal .m-item.is-big.is-video .m-play{width:72px;height:72px;margin:-36px 0 0 -36px}
.moments-page{--m-gap:10px}
@media(max-width:640px){.moments-page{--m-gap:8px}}

/* "Share video": same cream card as "Share photo" — link field + five actions, status line reserved (no size change) */
.m-vs__name{margin:-6px 0 12px;font-size:14px;line-height:1.4;color:#5E4D42;text-wrap:pretty}
.m-vs__k{display:block;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7A5230}
.m-vs__url{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:0 12px;border:1px solid rgba(122,82,48,.28);border-radius:10px;background:#FBF7F1;
  font:500 14px/1 var(--font-body);color:#2A1F17;text-overflow:ellipsis}
.m-vs__url:focus-visible{outline:2px solid #7A5230;outline-offset:2px}
.m-vs__acts a.m-sp__btn{text-decoration:none}
.m-vs__acts .m-sp__btn[data-vs="email"]{grid-column:auto}
.m-vs__acts > :last-child:nth-child(even){grid-column:1 / -1}
.m-sp__status.m-vs__status{min-height:2.9em}

/* photo-page share preview sits over the page (no lightbox there) */
.m-sp.m-sp--page{position:fixed;z-index:1300}
html.m-noscroll,html.m-noscroll body{overflow:hidden}
/* individual photo pages: title → event date → venue → actions, tighter rhythm; no album counter */
.m-one .m-back{margin-bottom:14px}
.m-photo__body{margin-top:clamp(18px,2.6vw,26px)}
.m-photo__when{margin:10px 0 0;font-size:1rem;color:var(--ivory)}
.m-photo__venue{margin-top:4px}
.m-photo__acts{margin-top:18px}
.m-photo__acts .m-photo-dl{text-decoration:none}
.m-pnav{margin-top:22px}
.m-photo__album{margin-top:6px}
.m-one .m-note{margin-top:22px}
/* phones: arrows stay visible (44px) at the image edges; swipe still works */
@media (max-width:640px){
  .m-lb__arrow{display:flex;width:44px;height:44px;margin-top:-22px}
  .m-lb__prev{left:max(8px,env(safe-area-inset-left))}.m-lb__next{right:max(8px,env(safe-area-inset-right))}
  .m-lb__bar{padding-bottom:max(6px,env(safe-area-inset-bottom))}
}

/* ===== "Frame your photo": two overlapping empty picture frames (24px, crisp 1.5px stroke in the button's gold) + sparkles at the corners on hover / keyboard focus ===== */
html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn{gap:10px;padding:0 15px;   /* 24px icon + 10px gap: 3px less padding each side keeps the button at 190×44 */
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;-webkit-tap-highlight-color:transparent}
.m-fr{position:relative;flex:none;display:inline-block;width:24px;height:24px}
.m-fr__ic{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter;stroke-linecap:square;shape-rendering:geometricPrecision}
html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn:hover .m-fr__ic,html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn:focus-visible .m-fr__ic{--m-fr-bg:#381820}   /* the front frame's fill matches the hovered button so the rear frame stays hidden behind it */
.m-fr__sp{position:absolute;width:5px;height:5px;opacity:0;pointer-events:none;
  background:#E2C58F;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}   /* tiny four-point gold star */
.m-fr__sp--1{top:-3px;right:-3px}                      /* front frame's top-right corner */
.m-fr__sp--2{top:5px;left:-4px;width:4px;height:4px}  /* rear frame's top-left corner */
.m-fr__sp--3{bottom:-3px;right:0;width:4px;height:4px} /* front frame's bottom-right corner */
@keyframes mSpark{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
/* mouse / trackpad: oxblood fill, brighter gold border, sparkles play once (re-triggered on each new hover) */
@media (hover:hover) and (pointer:fine){
  html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn:hover{background:#381820;border-color:#E2C58F;color:#E2C58F}
  .m-studio__btn:hover .m-fr__sp{animation:mSpark .5s ease-out 1 both}
  .m-studio__btn:hover .m-fr__sp--2{animation-delay:.06s}
  .m-studio__btn:hover .m-fr__sp--3{animation-delay:.12s}
}
/* keyboard focus: same colours + the same single sparkle, with a clear focus ring */
html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn:focus-visible{background:#381820;border-color:#E2C58F;color:#E2C58F;outline:2px solid #E2C58F;outline-offset:3px}
.m-studio__btn:focus-visible .m-fr__sp{animation:mSpark .5s ease-out 1 both}
.m-studio__btn:focus-visible .m-fr__sp--2{animation-delay:.06s}
.m-studio__btn:focus-visible .m-fr__sp--3{animation-delay:.12s}
/* touchscreens: one small static sparkle, no hover state to get stuck */
@media (hover:none),(pointer:coarse){ .m-fr__sp--1{opacity:.9} }
/* reduced motion: no sparkle animation — the static sparkle only */
@media (prefers-reduced-motion:reduce){
  .m-studio__btn .m-fr__sp,.m-studio__btn:hover .m-fr__sp,.m-studio__btn:focus-visible .m-fr__sp{animation:none!important;opacity:0}
  .m-studio__btn .m-fr__sp--1{opacity:.9}
  html body .page-head.m-hero .m-studio a.m-studio__btn.cc-btn{transition:none}
}

/* ===== viewer scroll lock (moments.js lockScroll): page pinned in place, scrollbar space kept → no sideways shift ===== */
html.m-locked{overflow:hidden;scroll-behavior:auto}
html.m-locked body{position:fixed;left:0;right:0;width:auto;overflow:hidden;padding-right:var(--m-gutter,0px)}
html.m-locked header.nav,html.m-locked .announce-stack{padding-right:var(--m-gutter,0px)}
.m-lb{overscroll-behavior:contain}
.m-lb__bg{touch-action:none}

.m-lb__venue{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(243,235,225,.35);text-underline-offset:4px;transition:color .2s ease-out,text-decoration-color .2s ease-out}
@media (hover:hover){.m-lb__venue:hover{color:#D59B9B;text-decoration-color:currentColor}}
.m-lb__venue:focus-visible{color:#D59B9B;outline:2px solid #D59B9B;outline-offset:3px;border-radius:2px}

/* ===== Moments hero rhythm = About's opening: same distance from the header to the eyebrow (About sets --hero-top:40px from
   760px; phones use the shared 36px), then 24px heading → tagline and 24px tagline → "Frame your photo" ===== */
.moments-page .page-head.m-hero .m-studio{margin-top:24px}

/* "Frame your photo" sparkles: a gentle, staggered twinkle that loops only while hovered or keyboard-focused
   (replaces the one-time burst). Opacity/scale only — the icon, label and button never move or resize. */
@keyframes mTwinkle{0%,100%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1)}70%{opacity:.35;transform:scale(.8)}}
@media (hover:hover) and (pointer:fine){
  .m-studio__btn:hover .m-fr__sp{animation:mTwinkle .8s ease-in-out infinite both}
  .m-studio__btn:hover .m-fr__sp--2{animation-delay:-.27s}
  .m-studio__btn:hover .m-fr__sp--3{animation-delay:-.53s}
}
.m-studio__btn:focus-visible .m-fr__sp{animation:mTwinkle .8s ease-in-out infinite both}
.m-studio__btn:focus-visible .m-fr__sp--2{animation-delay:-.27s}
.m-studio__btn:focus-visible .m-fr__sp--3{animation-delay:-.53s}
@media (prefers-reduced-motion:reduce){
  .m-studio__btn .m-fr__sp,.m-studio__btn:hover .m-fr__sp,.m-studio__btn:focus-visible .m-fr__sp{animation:none!important;opacity:0}
  .m-studio__btn .m-fr__sp--1,.m-studio__btn:hover .m-fr__sp--1,.m-studio__btn:focus-visible .m-fr__sp--1{opacity:.9}
}

/* individual photo pages: back link aligns with the photo's left edge; divider sits 32px above "Explore all moments"; two-paragraph notice */
.m-one--photo .m-back{width:min(100%,calc(var(--ar) * 78vh));width:min(100%,calc(var(--ar) * 78dvh));margin-left:auto;margin-right:auto}
.m-one--photo .m-pnav{margin-top:16px;border-top:0;padding-top:0}
.m-one--photo .m-photo__album{margin-top:16px;padding-top:30px;border-top:1px solid var(--hair-soft)}
div.m-note p{margin:0}
div.m-note p + p{margin-top:10px}

/* a YouTube thumbnail that only exists in 4:3 with black bands baked in (moments.js marks it): show only the 16:9 picture */
.m-link .m-img.is-lb{position:absolute;left:0;top:-16.667%;width:100%;height:133.333%;object-fit:cover}

/* lightbox actions: compact outlined buttons (Share with icon · Photo page →); the venue link above keeps its underline */
.m-lb .m-lb__acts{gap:8px 12px;align-items:center}
.m-lb .m-act{min-height:44px;padding:0 16px;border:1px solid rgba(243,235,225,.28);border-bottom:1px solid rgba(243,235,225,.28);border-radius:6px;background:transparent;color:var(--ivory);
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.m-lb .m-act__ic{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-lb .m-act:hover,.m-lb .m-act:focus-visible{color:var(--ivory);border-color:rgba(243,235,225,.28);border-bottom-color:rgba(243,235,225,.28)}
@media (hover:hover){.m-lb .m-act:hover{background:rgba(243,235,225,.08);border-color:rgba(243,235,225,.45);border-bottom-color:rgba(243,235,225,.45)}}
.m-lb .m-act:active{background:rgba(243,235,225,.12)}
.m-lb .m-act:focus-visible{outline:2px solid #E2C58F;outline-offset:3px;border-color:rgba(243,235,225,.45);border-bottom-color:rgba(243,235,225,.45)}
.m-lb .m-act.is-copied{color:var(--antique);border-color:rgba(176,141,87,.6);border-bottom-color:rgba(176,141,87,.6)}
.m-lb .m-act--ig{color:var(--rose)}

/* ===== Individual photo page (Nov 2026 redesign): photo left with Previous/Next under it; details, actions and removal
   info right. One page scroll, the photo never cropped (its own aspect ratio, height capped to the screen). ===== */
body main > .m-pg:first-child{--hero-top:clamp(16px,2.4vw,28px);--hero-bottom:clamp(40px,5vw,64px)}
.m-pg{max-width:1320px;margin-inline:auto;
  --mh:max(300px,calc(100vh - var(--header-height,83px) - var(--announcement-height,0px) - 150px));
  --mh:max(300px,calc(100svh - var(--header-height,83px) - var(--announcement-height,0px) - 150px))}
.m-pg__back{margin:0;font-size:14px;font-weight:600}
.m-pg__back a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ivory-dim);text-decoration:none;transition:color .2s ease}
.m-pg__back a span{border-bottom:1px solid transparent;transition:border-color .2s ease}
.m-pg__back a:hover,.m-pg__back a:focus-visible{color:var(--ivory)}
.m-pg__back a:hover span,.m-pg__back a:focus-visible span{border-bottom-color:var(--antique)}
.m-pg__back a:focus-visible{outline:2px solid var(--ivory);outline-offset:2px;border-radius:2px}
.m-pg__ic,.m-pn__ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-pg__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
/* photo: the whole picture at its own proportion; the column shrinks to the photo's width so Previous/Next sit right under it */
.m-pg__media{min-width:0;width:min(100%,calc(var(--ar) * var(--mh)));margin-inline:auto}
html body .m-pg .m-pg__photo{width:100%;margin:0;max-width:none}
html body .m-pg .m-photo__img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:contain;border-radius:3px}
/* Previous / Next: one row, opposite sides; the missing one at the first/last photo keeps its place but is hidden */
.m-pg__nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:10px 0 0}
.m-pg .m-pn{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--ivory-dim);text-decoration:none;transition:color .2s ease}
.m-pg .m-pn:hover,.m-pg .m-pn:focus-visible{color:var(--ivory)}
.m-pg .m-pn:focus-visible{outline:2px solid var(--ivory);outline-offset:2px;border-radius:2px}
.m-pg .m-pn.is-off{visibility:hidden}
/* details */
.m-pg__info{min-width:0}
.m-pg__eyebrow{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--antique)}
.m-pg__title{margin:10px 0 0;font-family:var(--font-head);font-weight:500;font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.01em;color:var(--ivory);overflow-wrap:anywhere;text-wrap:balance}
.m-pg__venue{margin:8px 0 0;font-size:1rem;line-height:1.45;color:var(--ivory-dim);overflow-wrap:anywhere}
.m-pg__venue a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px;transition:text-decoration-color .2s ease}
.m-pg__venue a:hover,.m-pg__venue a:focus-visible{text-decoration-color:var(--antique)}
.m-pg .m-photo__cap{margin:12px 0 0;max-width:none;text-align:left;font-size:1.1rem}
.m-pg__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0 0}   /* two equal buttons side by side when both fit, otherwise stacked */
html body .m-pg__acts .cc-btn.cc-btn{width:100%;min-width:0;height:48px;min-height:48px;padding:0 14px;justify-content:center;text-decoration:none;white-space:nowrap}
.m-pg .m-act--ig{margin-top:12px}
/* removal information: hairline, then a quiet two-line note; each link underlined as one continuous line */
.m-pg__rm{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--hair-soft)}
.m-pg__rm-q{margin:0;font-size:13.5px;line-height:1.5;color:var(--ivory-soft,rgba(243,235,225,.7))}
.m-pg__rm-links{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:13.5px;line-height:1.6}
.m-pg__rm-links a{color:var(--ivory-dim);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.m-pg__rm-links a:hover,.m-pg__rm-links a:focus-visible{color:var(--ivory);text-decoration-color:var(--antique)}
.m-pg__rm-links a:focus-visible,.m-pg__venue a:focus-visible{outline:2px solid var(--ivory);outline-offset:2px;border-radius:2px}
.m-pg__dot{color:rgba(243,235,225,.4)}
.m-pg__eyebrow .m-pg__dot{color:inherit;opacity:.7}
/* desktop + wide tablets: two columns, both starting at the top; the photo column takes the remaining width */
@media(min-width:900px){
  .m-pg__grid{grid-template-columns:minmax(0,calc(var(--ar) * var(--mh))) minmax(280px,340px);column-gap:clamp(32px,4vw,56px);align-items:start;justify-content:center}
  .m-pg__media{width:100%;margin:0}   /* the photo column is exactly the photo's width (or narrower when space runs out); the pair is centred */
  .m-pg__back{grid-column:1 / -1;margin-bottom:-10px}   /* spans both columns; starts at the photo's left edge */
  .m-pg__info{padding-top:4px}
}
/* phones: one column — back link, photo, Previous/Next, details, actions, removal; full-width buttons; safe areas */
/* phones + tablets: one column on an 8 / 16 / 24 spacing scale */
@media(max-width:899px){
  .m-pg{--mh:max(280px,calc(100svh - var(--header-height,64px) - 140px))}
  .m-pg__grid{gap:8px}                                  /* back → photo, photo+nav → details */
  .m-pg__media{width:min(100%,calc(var(--ar) * var(--mh)))}
  .m-pg__nav{margin-top:4px}
  .m-pg__info{padding-top:8px}
  .m-pg__title{margin-top:8px}
  .m-pg__venue{margin-top:4px}
  .m-pg__acts{margin-top:16px}
  .m-pg__rm{margin-top:16px;padding-top:12px}
}
@media(max-width:640px){
  body main > .m-pg:first-child{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));
    padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px))}
}
@media(prefers-reduced-motion:reduce){.m-pg__back a,.m-pg__back a span,.m-pg .m-pn,.m-pg__rm-links a{transition:none}}
/* the site's shared first-section rule zeroes h1 margins — restore the title's own spacing on photo pages */
html body main > .m-pg:first-child:not(.nx-wrap) .m-pg__title{margin:10px 0 0}
@media(max-width:899px){html body main > .m-pg:first-child:not(.nx-wrap) .m-pg__title{margin-top:8px}}
/* filter toggle: three equal segments (All · Photos · Videos); selected = same dark fill + ivory text + a 1px gold outline drawn
   inside the segment (no size change); keyboard focus = a separate ivory ring outside it */
.m-seg{display:inline-grid;grid-template-columns:repeat(3,minmax(84px,1fr))}
.m-seg button{box-shadow:inset 0 0 0 1px transparent;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.m-seg button[aria-pressed="true"]{background:rgba(243,235,225,.12);color:var(--ivory);box-shadow:inset 0 0 0 1px #E2C58F}
.m-seg button:focus-visible{outline:2px solid #F3EBE1;outline-offset:2px}
@media(max-width:640px){.m-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.m-seg button{transition:none}}

/* photo pages: Previous / Next always shown; at the first / last photo the unavailable one is dimmed and inactive */
.m-pg .m-pn.is-disabled{opacity:.35;cursor:default;pointer-events:none}
.m-pg__nav{min-height:44px}

/* ===== Moments filter toggle (All · Photos · Videos): understated Crimson Cat segmented control ===== */
.m-bar .m-seg{display:inline-grid;grid-template-columns:repeat(3,minmax(84px,1fr));gap:0;padding:4px;box-sizing:border-box;
  background:#191416;border:1px solid #403336;border-radius:999px}
.m-bar .m-seg button{min-height:36px;margin:0;padding:0 14px;border:1px solid transparent;border-radius:999px;box-shadow:none;background:transparent;
  color:#B4A9A9;font-weight:500;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
@media (hover:hover){.m-bar .m-seg button:not([aria-pressed="true"]):hover{color:#FFF5E8}}
.m-bar .m-seg button[aria-pressed="true"]{background:#4C2029;border-color:#C5A16B;color:#FFF5E8;box-shadow:none}
.m-bar .m-seg button:focus{outline:0}
.m-bar .m-seg button:focus-visible{outline:2px solid #FFF5E8;outline-offset:3px}
@media(max-width:640px){.m-bar .m-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.m-bar .m-seg button{min-height:40px;padding:0 6px}}
@media(prefers-reduced-motion:reduce){.m-bar .m-seg button{transition:none}}

/* photo pages: "Request photo removal" confirmation — same look as the "Ages 20+" modal (js/info-modal.js .im):
   centred at every width, 16px (or safe-area) side margins, cream panel, 18px corners, × top-right */
.m-pg__rm-links [data-m-removal]{cursor:pointer}
.m-rm{--g:16px;--side:max(var(--g),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;width:min(420px,calc(100vw - 2 * var(--side)));height:fit-content;
  max-height:calc(100vh - 2 * var(--g));max-height:calc(100svh - 2 * max(var(--g),env(safe-area-inset-top,0px)));overflow:visible;
  color:#2A1F17;font-family:var(--font-body,"DM Sans",system-ui,sans-serif);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.m-rm::backdrop{background:rgba(8,6,7,.84)}
.m-rm:focus,.m-rm:focus-visible{outline:0}
.m-rm__in{box-sizing:border-box;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;
  padding:clamp(22px,6vw,28px) clamp(20px,6vw,32px) 32px;background:#F6EFE2;background-image:linear-gradient(#F6EFE2,#EFE5D3);box-shadow:inset 0 0 0 1px rgba(122,82,48,.18)}
.m-rm__x{position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(122,82,48,.22);background:rgba(246,239,226,.92);
  color:#7A5230;display:grid;place-items:center;cursor:pointer;padding:0}
.m-rm__x:hover{background:#fff}
.m-rm__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-rm__x:focus-visible{outline:2px solid #7A5230;outline-offset:2px}
.m-rm__t{margin:2px 56px 0 0;font-family:var(--font-head,Georgia,serif);font-weight:500;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;color:#2A1F17;text-wrap:balance}   /* 56px clear of the × */
.m-rm__b{margin:12px 0 0;max-width:none;padding:0;font-size:1rem;line-height:1.55;color:#5E4D42;text-wrap:wrap;overflow-wrap:break-word}   /* full content width; natural wrapping (no balancing) */
.m-rm__b + .m-rm__b{margin-top:8px}
.m-rm__acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.m-rm__btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;box-sizing:border-box;white-space:nowrap}
.m-rm__btn--ghost{border:1px solid rgba(42,31,23,.25);background:none;color:#2A1F17}
.m-rm__btn--ghost:hover{border-color:rgba(122,82,48,.6);background:rgba(255,252,244,.7)}
.m-rm__btn--go{border:1px solid #6E0E1E;background:#6E0E1E;color:#F6EFE2}
.m-rm__btn--go:hover{background:#7E1426}
.m-rm__btn:focus-visible{outline:2px solid #7A5230;outline-offset:2px}
@media(max-width:340px){.m-rm__btn{padding:0 10px;font-size:14px}}
@media(prefers-reduced-motion:no-preference){.m-rm[open]{animation:mRmIn .2s ease-out}@keyframes mRmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}