/* The Mahogany Ridge page (public/venue-page.js). Type, actions, the photo wall and its viewer are shared with the
   other pages (pages.css); these are the page's own sections: the logo hero with the venue film, Ryan's welcome, the
   two set-ups, the gardens after dark and what the venue includes. */
.mr-film ::selection,.mr-night ::selection{background:#f6ead6;color:var(--wine-dark)}
.mr-film :focus-visible,.mr-night :focus-visible,.mr-hero-film :focus-visible{outline-color:#f6ead6}

/* Hero: the logo, one line, the two actions; the venue film beside them */
.mr-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(10px,1.2vw,16px) var(--padx) clamp(16px,1.6vw,24px)}
.mr-title{margin:0;line-height:1}
.mr-logo{display:block;width:clamp(300px,25vw,380px);filter:saturate(.78);margin:0 0 0 -4px;padding:0;border:0;background:none;cursor:pointer;transition:transform 200ms var(--ease-out)}
.mr-logo img{display:block;width:100%;height:auto}
.mr-logo:active{transform:scale(.98)}
.mr-lede{max-width:56ch;margin:12px 0 18px;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--ink-soft)}
.mr-badge{display:flex;align-items:center;gap:12px;margin:16px 0 0;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.mr-anniversary{display:block;flex:none;width:92px;height:54px;object-fit:contain}
.mr-address{margin:0 0 0 104px;font-size:14px;color:var(--muted)}
.mr-hero-film{position:relative;margin:0;aspect-ratio:2/1;background:#172119 url(/assets/relaunch/relaunch-exterior.webp) center/cover no-repeat}
.mr-loop{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  .mr-logo:hover{transform:translateY(-2px)}
}

/* The wall (the pw- rules in pages.css) */
.mr-wall{padding:4px var(--padx) clamp(40px,5vw,72px)}
.mr-wall-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 48px;margin-bottom:6px}
.mr-wall-head h2{margin:0}
.mr-wall-head p{max-width:46ch;margin:0;color:var(--ink-soft)}
.mr-credit{margin:14px 0 0;font-size:13px;color:var(--muted)}
.mr-wall .pw-tile[data-supplied]{max-width:var(--source-width)}
.mr-wall .pw-tile[data-supplied] img,.mr-wall .pw-tile[data-supplied] .pw-shot:hover img{transform:none}

/* Ryan's welcome */
.mr-film{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(56px,7vw,104px) var(--padx);background:var(--wine-dark);color:#f6ead6}
.pg-page .mr-film h2{color:#fff}
.mr-film p{max-width:40ch;margin:0;color:#ead9c5}
.mr-film-player{margin:0}
.mr-film-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#140a0e}
.mr-film-player figcaption{margin-top:12px;font-size:13px;color:#dcc8b1}

/* Example set-ups (illustrations) */
.mr-setups{padding:clamp(56px,7vw,104px) var(--padx);background:var(--cream)}
.mr-setups-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(28px,5vw,72px);align-items:end;margin-bottom:26px}
.mr-setups-head h2{margin:0}
.mr-setups-head p{max-width:56ch;margin:0;color:var(--ink-soft)}
.mr-setup-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mr-setup{margin:0}
.mr-setup img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.mr-setup figcaption{margin-top:10px;font-size:13px;color:var(--ink-soft)}

/* The gardens after dark */
.mr-night{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(420px,58vw,760px);padding:clamp(32px,5vw,72px) var(--padx);color:#fff}
.mr-night img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mr-night::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,6,12,.84) 0%,rgba(8,6,12,.4) 38%,rgba(8,6,12,0) 68%)}
.pg-page .mr-night h2{color:#fff}
.mr-night p{max-width:40ch;margin:0;color:#f1e8f2}

/* What the venue includes */
.mr-details{padding:clamp(56px,7vw,104px) var(--padx) clamp(48px,6vw,88px)}
.mr-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:30px}
.mr-lists ul{margin:0 0 6px;padding:0;list-style:none}
.mr-lists li{padding:11px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.mr-lists p{margin:0 0 24px;font-size:15px;color:var(--ink-soft)}

@media (max-width:1000px){
  .mr-hero,.mr-film,.mr-setups-head{grid-template-columns:minmax(0,1fr)}
  .mr-lists{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .mr-hero{gap:28px}
  .mr-logo{width:min(100%,320px)}
  .mr-lists,.mr-setup-row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .mr-logo{transition:none}
  .mr-logo:active,.mr-logo:hover{transform:none}
}

/* Book a viewing (viewing-form.js): the button reads like the links beside it, and opens a short form in a window on
   the site's paper, with the serif title, the quote form's fields and a row of time-of-day choices. */
button.pg-link{padding:0;border:0;background:none;cursor:pointer}
.vf-dialog{width:min(640px,calc(100% - 24px));max-height:calc(100vh - 32px);padding:0;border:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--sans)}
.vf-dialog::backdrop{background:rgba(48,45,40,.55)}
.vf-form{position:relative;display:grid;gap:14px;padding:28px clamp(18px,4vw,32px) 26px}
.vf-form h2{margin:0;padding-right:40px;font:500 clamp(30px,5vw,38px)/1.1 var(--serif);color:var(--ink)}
.vf-lede{margin:0;max-width:52ch;color:var(--ink-soft)}
.vf-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink-soft);cursor:pointer}
.vf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.vf-field{display:grid;gap:5px;min-width:0;margin:0;padding:0;border:0}
.vf-field label,.vf-field legend{padding:0;font:600 14px/1.3 var(--sans);color:var(--ink)}
.vf-field label span{font-weight:400;color:var(--muted)}
.vf-field input:not([type=radio]),.vf-field textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cfc6b8;background:#fff;color:var(--ink);font:400 16px/1.4 var(--sans);transition:border-color 160ms ease}
.vf-field input:focus,.vf-field textarea:focus{outline:2px solid var(--wine);outline-offset:1px;border-color:var(--wine)}
.vf-field [aria-invalid="true"]{border-color:#8a2c2c}
.vf-field:has(textarea),.vf-times,.vf-field:has(#vf-event){grid-column:1/-1}
.vf-chips{display:flex;flex-wrap:wrap;gap:6px}
.vf-chip{position:relative}
.vf-chip input{position:absolute;opacity:0;pointer-events:none}
.vf-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font:600 14px/1 var(--sans);cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.vf-chip input:checked+span{background:var(--cream);border-color:var(--wine);color:var(--wine)}
.vf-chip input:focus-visible+span{outline:2px solid var(--wine);outline-offset:2px}
.vf-note{font-size:13px;color:var(--muted)}
.vf-error{font-size:14px;font-weight:600;color:#8a2c2c}
.vf-error:empty{display:none}
.vf-summary{margin:0;padding:10px 12px;border-left:3px solid #8a2c2c;background:#fff;color:#8a2c2c;font-weight:600}
.vf-hp{position:absolute;left:-9999px}
.vf-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;color:var(--ink-soft)}
.vf-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--wine)}
.vf-consent a{color:var(--wine)}
.vf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:4px}
.vf-cancel{min-height:44px;padding:0;border:0;background:none;color:var(--wine);font:600 15px/1.3 var(--sans);text-decoration:underline;text-underline-offset:.3em;cursor:pointer}
.vf-sent{gap:12px}
.vf-stamp{display:grid;place-items:center;width:56px;height:56px;background:var(--wine);color:#fff}
.vf-stamp path{stroke-dasharray:1;stroke-dashoffset:0}
@media (hover:hover) and (pointer:fine){.vf-chip span:hover{border-color:var(--wine);color:var(--wine)}.vf-close:hover{color:var(--wine)}}
@media (max-width:560px){.vf-grid{grid-template-columns:minmax(0,1fr)}}
@keyframes vf-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes vf-tick{from{stroke-dashoffset:1}}
@keyframes vf-pop{from{opacity:0;transform:scale(.7)}}
@media (prefers-reduced-motion:no-preference){
  .vf-dialog[open]{animation:vf-in 240ms var(--ease-out)}
  .vf-dialog[open]::backdrop{animation:vf-fade 240ms ease}
  .vf-sent .vf-stamp{animation:vf-pop 360ms var(--ease-out) backwards}
  .vf-sent .vf-stamp path{animation:vf-tick 380ms var(--ease-out) 200ms backwards}
  .vf-sent>:not(.vf-stamp){animation:vf-in 360ms var(--ease-out) 260ms backwards}
}
@keyframes vf-fade{from{opacity:0}}

/* The same quiet floating frame used by the homepage showcase. */
.mr-hero-film {background:none;isolation:isolate;overflow:visible}
.mr-video-mat {position:relative;border-radius:24px}
.mr-video-mat .mr-loop {border-radius:16px}
.mr-hero-film.is-motion-paused .mr-video-float,.mr-hero-film:focus-within .mr-video-float {animation-play-state:paused}
@media (hover:hover) {.mr-hero-film:hover .mr-video-float {animation-play-state:paused}}
.mr-page .pw-grid {gap:12px;padding:6px}
.mr-page .pw-tile {border-radius:18px;box-shadow:0 4px 12px rgba(65,43,28,.08)}
@media (prefers-reduced-motion:reduce),(prefers-reduced-data:reduce) {.mr-video-float {animation:none!important;transform:none!important}}
@media print {.mr-video-float {animation:none!important;transform:none!important}.mr-video-mat,.mr-page .pw-tile {box-shadow:none}}

/* Phone layout audit, 18 October 2026: public viewing calendar labels, day targets and outer gutter. */
@media (max-width:720px){
  .pg-page.viewing-page{padding-inline:16px}
  .vf-dialog .calendar-day{min-width:0;min-height:44px;padding:0}
  .vf-dialog .calendar-weekday,.vf-dialog .calendar-legend{font-size:13px}
}