@font-face{font-family:"Prata";src:url("/fonts/prata-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("/fonts/red-hat-text-400.woff2") format("woff2");font-weight:400 500;font-display:swap}

/* Weir House. Quiet & editorial, Refined. Near-white, ink, one night band; no accent, the photographs carry the colour.
   Tokens per SPEC-SHEET.md. One light look by design. */
:root{
  --ground:#F5F5F2; --panel:#ECECE8; --white:#FFFFFF; --ink:#1C1D1F; --muted:#5F605B; --rule:#D3D3CE; --night:#151617; --on-night:#C9C9C4;
  --display:"Prata",Didot,"Bodoni 72",Georgia,serif; --body:"Red Hat Text",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  --gutter:50px; --section:120px; --nav-h:64px;
  --ease-enter:cubic-bezier(.16,1,.3,1); --ease-hover:cubic-bezier(.44,0,.56,1); --ease-settle:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (max-width:1024px){:root{--gutter:32px;--section:96px}}
@media (max-width:640px){:root{--gutter:18px;--section:72px}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance}
h1.big{font-size:clamp(44px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em}
h2.h2{font-size:clamp(34px,3.6vw,56px)}
.wrap{padding-inline:var(--gutter)}
.label{font:500 12px/1.3 var(--body);letter-spacing:.06em;color:var(--muted)}
.lede{color:var(--muted);max-width:44ch}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums lining-nums}
.ul{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;font-weight:500}
.ul:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{padding-block:var(--section)}
.sec-s{padding-block:calc(var(--section) * .6)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:48px}
.head p{justify-self:end}
@media (max-width:760px){.head{grid-template-columns:minmax(0,1fr)}.head p{justify-self:start}}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--ground)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);padding-inline:var(--gutter)}
.brand{font:400 22px/1 var(--display);text-decoration:none;letter-spacing:.01em}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none;color:var(--muted);transition:color 300ms var(--ease-hover)}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink)}
.nav ul a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav .right{display:flex;align-items:center;gap:18px}
.book{font-size:15px;font-weight:500;text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--ink)}
.menu-btn{display:none;border:1px solid var(--ink);background:none;padding:7px 12px;font-size:13px;cursor:pointer}
.menu{position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));bottom:0;z-index:39;background:var(--ground);padding:24px var(--gutter);display:grid;align-content:start;overflow:auto}
.menu a{font:400 36px/1.2 var(--display);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)}
@media (max-width:1060px){.nav ul{display:none}.menu-btn{display:inline-block}}
@media (max-width:420px){.nav .book{display:none}}

/* buttons, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;border:0;border-radius:0;background:var(--ink);color:#fff;font-weight:500;text-decoration:none;cursor:pointer;transition:background-color 300ms var(--ease-hover)}
.btn:hover{background:#3A3B3E}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--panel)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.fields label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.fields input,.fields select,.fields textarea{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:9px 0;font-size:17px;border-radius:0;outline:none}
.fields textarea{min-height:90px;resize:vertical;grid-column:1/-1}
.fields .full{grid-column:1/-1}
.on-night .fields label{color:var(--on-night)}
.on-night .fields input,.on-night .fields select{color:#fff;border-bottom-color:#45464A}
.on-night .fields input:focus,.on-night .fields select:focus{border-bottom-color:#fff}
.fields select option{color:var(--ink)}
.hp{position:absolute;left:-9999px}
.done{padding:18px 20px;background:#fff;color:var(--ink)}
.note b{font-weight:500}
@media (max-width:640px){.fields{grid-template-columns:minmax(0,1fr)}}

/* ---------- inner page header: type only ---------- */
.phead{padding-block:calc(var(--section) * .75) calc(var(--section) * .45);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 56px;align-items:end;border-bottom:1px solid var(--rule)}
.phead .label{grid-column:1/-1}
.phead .lede{justify-self:end}
@media (max-width:760px){.phead{grid-template-columns:minmax(0,1fr)}.phead .lede{justify-self:start}}

/* ---------- home: split reveal (three photos part to show the hall between them) ---------- */
.split-rev{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:min(78svh,720px)}
.split-rev .mid{position:absolute;inset:0 33.5% 0 33.5%;overflow:hidden;z-index:0}
.split-rev .mid img{width:100%;height:100%;object-fit:cover}
.split-rev figure{position:relative;z-index:1;margin:0;overflow:hidden;background:var(--panel)}
.split-rev figure img{width:100%;height:100%;object-fit:cover}

.split-rev .c2{visibility:hidden}
/* the outer photos start closed over the hall and part to their columns as the section scrolls through (--p 0 to 1) */
.js .split-rev.go .c1{transform:translate3d(calc((1 - var(--p,1)) * 52%),0,0);will-change:transform}
.js .split-rev.go .c3{transform:translate3d(calc((1 - var(--p,1)) * -52%),0,0);will-change:transform}
.split-rev .hall-cap{z-index:0}
/* one caption box for all three: centred, linked to the space, underline only on hover */
.split-rev .cap-box{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;background:var(--white);padding:12px 20px;display:grid;justify-items:center;gap:2px;width:max-content;max-width:calc(100% - 28px);white-space:nowrap;text-align:center;text-decoration:none;color:var(--ink)}
.split-rev .cap-box b{font:400 24px/1.1 var(--display)}
.split-rev .cap-box span{font-size:14px;color:var(--muted)}
.split-rev .cap-box:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:860px){.split-rev{grid-template-columns:minmax(0,1fr);min-height:0}.split-rev .mid{position:relative;inset:auto;aspect-ratio:4/3;order:2}.split-rev .c2{display:none}.split-rev figure{aspect-ratio:4/3}.split-rev .hall-cap{bottom:14px}}

/* ---------- budget-range cards ---------- */
.budget{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bcard{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:28px;background:var(--white);min-height:430px}
.bcard h3{font-size:30px}
.bcard dl{margin:18px 0 0}
.bcard dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:15px}
.bcard dt{color:var(--muted)}.bcard dd{margin:0}
.bcard .from{font:400 clamp(40px,3.6vw,58px)/1 var(--display)}
.bcard .from small{font:400 14px var(--body);color:var(--muted);margin-left:6px}
.bcard.best{background:var(--night);color:#fff}
.bcard.best dl div{border-color:#34363A}.bcard.best dt,.bcard.best .from small{color:var(--on-night)}
@media (max-width:900px){.budget{grid-template-columns:minmax(0,1fr)}.bcard{min-height:0}}

/* ---------- ruled timeline, rows draw in ---------- */
.tl{border-top:1px solid var(--ink)}
.tl .r{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tl .t{font:400 26px/1 var(--display)}
.tl b{font-weight:500}
.tl span{color:var(--muted)}
@media (max-width:760px){.tl .r{grid-template-columns:84px minmax(0,1fr)}.tl span{grid-column:2}}

/* ---------- two-column menu with a sticky dish photo ---------- */
.menu2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.menu2 figure{margin:0;overflow:hidden;position:sticky;top:100px}
.menu2 figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.course h3{font-size:26px;padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.course ul{list-style:none;margin:0;padding:0}
.course li{padding:10px 0;border-bottom:1px solid var(--rule)}
.course li span{display:block;font-size:14px;color:var(--muted)}
.course figure{margin:0 0 14px;overflow:hidden}
.course figure img{aspect-ratio:3/2;object-fit:cover;width:100%}
.perhead{margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.perhead b{font:400 34px var(--display)}
@media (max-width:860px){.menu2{grid-template-columns:minmax(0,1fr)}.menu2 figure{position:static}.courses{grid-template-columns:minmax(0,1fr)}}

/* ---------- presentation card on a pre-blurred backdrop ---------- */
.pres{position:relative;min-height:min(86svh,780px);display:grid;place-items:center;overflow:hidden;padding:var(--section) var(--gutter)}
.pres .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px);transform:scale(1.1)}
.pres .card{position:relative;z-index:1;background:#fff;padding:6px 6px 24px;width:min(420px,100%);display:grid;gap:18px}
.pres .card img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;width:100%}
.pres .card .t{padding:0 18px;display:grid;gap:6px}
.pres .card h2,.pres .card h3{font-size:28px}
.pres .card p{color:var(--muted);font-size:15px}
.pres .chip{position:absolute;left:var(--gutter);bottom:var(--gutter);z-index:1;background:#fff;padding:8px 14px;font-size:14px}
.pres .go{position:absolute;right:var(--gutter);bottom:var(--gutter);z-index:1}

/* ---------- portfolio grid ---------- */
.folio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.folio a{display:block;text-decoration:none}
.folio figure{margin:0;overflow:hidden;background:var(--panel)}
.folio img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-settle)}
.folio a:hover img{transform:scale(1.03)}
.folio .cap{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:15px}
.folio .cap b{font:400 20px/1.2 var(--display)}
.folio .f1{grid-column:span 5}.folio .f2{grid-column:span 4}.folio .f3{grid-column:span 3}
.folio .f1 figure{aspect-ratio:4/5}.folio .f2 figure{aspect-ratio:4/4.6}.folio .f3 figure{aspect-ratio:3/5}
@media (max-width:760px){.folio{grid-template-columns:minmax(0,1fr)}.folio>*{grid-column:1!important}.folio figure{aspect-ratio:4/5!important}}

/* ---------- tour band ---------- */
.tour{background:var(--night);color:#fff;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tour figure{margin:0;overflow:hidden}
.tour figure img{width:100%;height:100%;object-fit:cover;min-height:460px}
.tour form{padding:clamp(32px,5vw,72px) var(--gutter);display:grid;gap:22px;align-content:center}
.tour h2{font-size:clamp(34px,3.6vw,56px)}
.tour .sub{color:var(--on-night);max-width:44ch}
.tour .note{color:#fff}
@media (max-width:860px){.tour{grid-template-columns:minmax(0,1fr)}.tour figure img{min-height:0;aspect-ratio:4/3}}

/* ---------- filled cards (spaces) ---------- */
.filled{display:grid;gap:12px}
.fcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;background:var(--white);padding:12px;border:1px solid var(--rule)}
.fcard>figure{margin:0;overflow:hidden;position:relative;min-height:480px}
/* the photo fills the card; the text side sets the height, so portrait and landscape cards match */
.fcard>figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcard .t{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:18px 18px 12px}
.fcard h2{font-size:clamp(34px,3.4vw,52px)}
.fcard .t p{color:var(--muted);max-width:46ch;margin-top:12px}
.fcard .bot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:end}
.fcard .bot figure{margin:0;overflow:hidden}
.fcard .bot img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fcard ol{list-style:none;margin:0;padding:0}
.fcard li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.fcard li span{text-align:left}
.fcard li b{text-align:right}
.fcard li span{margin-right:auto}
.fcard li b{font-weight:500}
@media (max-width:900px){.fcard{grid-template-columns:minmax(0,1fr)}.fcard>figure{min-height:0;aspect-ratio:4/3}.fcard .bot{grid-template-columns:minmax(0,1fr)}.fcard .bot figure{display:none}}

/* ---------- compare table, extras ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th{font:400 20px/1.2 var(--display);text-align:left;padding:0 12px 14px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.cmp th:first-child{font:500 12px var(--body);letter-spacing:.06em;color:var(--muted)}
.cmp td.no{color:#A2A39E}
.cmp td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp td:first-child{color:var(--muted);width:30%}
.cmp .yes{font-weight:500}
.cmp-wrap{overflow-x:auto}
.extras{border-top:1px solid var(--ink)}
.extras div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.extras b{font:400 22px/1.2 var(--display)}
.extras span{color:var(--muted)}
.extras em{font-style:normal;font:400 22px var(--display);text-align:right}
@media (max-width:760px){.extras div{grid-template-columns:minmax(0,1fr);gap:4px}.extras em{text-align:left}}

/* ---------- full-bleed header, light wash ---------- */
.fhead{position:relative;min-height:min(72svh,680px);display:flex;align-items:flex-start;overflow:hidden;background:var(--panel)}
.fhead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fhead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,245,242,.94) 0%,rgba(245,245,242,.82) 32%,rgba(245,245,242,.18) 62%,rgba(245,245,242,0) 100%)}
.fhead .t{position:relative;z-index:1;padding:clamp(40px,6vw,88px) var(--gutter);display:grid;gap:18px;max-width:760px}
.fhead.dark{background:var(--night);color:#fff;align-items:flex-end}
.fhead.dark::after{background:linear-gradient(transparent 40%,rgba(12,12,13,.62))}
.fhead.dark .t p{color:#E6E6E2}
@media (max-width:760px){.fhead::after{background:linear-gradient(rgba(245,245,242,.92) 0%,rgba(245,245,242,.6) 55%,rgba(245,245,242,.1) 100%)}}

/* ---------- pull-quote ---------- */
.pq{display:grid;justify-items:center;text-align:center;gap:20px;padding-block:var(--section)}
.pq blockquote{margin:0;font:400 clamp(30px,3.6vw,56px)/1.15 var(--display);max-width:22ch;text-wrap:balance}
.pq cite{font-style:normal;color:var(--muted);font-size:15px}

/* ---------- priced block ---------- */
.priced{background:var(--white);padding:clamp(28px,4vw,52px);display:grid;gap:26px;border:1px solid var(--rule)}
.priced .top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.priced h3{font-size:clamp(30px,2.8vw,44px)}
.priced .amt{font:400 clamp(40px,4vw,60px)/1 var(--display)}
.priced .amt small{font:400 14px var(--body);color:var(--muted);margin-left:8px}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin:0}
.spec div{padding:14px 12px 0 0}
.spec dd{margin:4px 0 0;font:400 20px/1.2 var(--display)}
.pours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.pours div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.pours em{font-style:normal;color:var(--muted)}
@media (max-width:760px){.spec,.pours{grid-template-columns:repeat(2,minmax(0,1fr))}.pours{grid-template-columns:minmax(0,1fr)}}
.diet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.diet div{padding:18px 18px 0 0}
.diet b{display:block;font:400 22px/1.2 var(--display);margin-bottom:6px}
.diet p{color:var(--muted);font-size:15px}
@media (max-width:860px){.diet{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- assurance stack (stay) ---------- */
.assure{position:relative;padding:calc(var(--section) * .5) var(--gutter) calc(var(--section) * .9)}
.assure>figure{margin:0;overflow:hidden;border-radius:4px}
.assure>figure img{width:100%;aspect-ratio:21/9;object-fit:cover}
.promises{position:absolute;right:calc(var(--gutter) + 48px);bottom:calc(var(--section) * .9 - 90px);display:grid;gap:10px;width:min(360px,40%)}
.promise{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;background:#fff;padding:16px 18px;box-shadow:0 22px 50px -22px rgba(28,29,31,.35)}
.promise b{font:400 30px/1 var(--display);min-width:54px}
.promise span{font-size:15px}
@media (max-width:860px){.assure>figure img{aspect-ratio:4/3}.promises{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 16px 0}}

/* ---------- cottage rows ---------- */
.cots{border-top:1px solid var(--ink)}
.cot{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:center}
.cot figure{margin:0;overflow:hidden}
.cot img{aspect-ratio:3/2;object-fit:cover;width:100%}
.cot h3{font-size:clamp(28px,2.6vw,40px)}
.cot p{color:var(--muted);margin-top:8px;max-width:40ch}
.cot dl{margin:0;display:grid;gap:8px}
.cot dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:8px;font-size:15px}
.cot dt{color:var(--muted)}.cot dd{margin:0;font-weight:500}
@media (max-width:860px){.cot{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ---------- plain split ---------- */
.psplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--white)}
.psplit figure{margin:0;overflow:hidden}
.psplit figure img{width:100%;height:100%;object-fit:cover;min-height:520px}
.psplit .t{display:grid;gap:18px;align-content:center;padding:clamp(28px,5vw,72px)}
@media (max-width:860px){.psplit{grid-template-columns:minmax(0,1fr)}.psplit figure img{min-height:0;aspect-ratio:4/3}}

/* ---------- wedding story ---------- */
.story-hero figure{margin:0;overflow:hidden}
.story-hero img{width:100%;aspect-ratio:16/8;object-fit:cover}
.story-hero .t{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 56px;align-items:end;padding:36px var(--gutter) 0}
.story-hero h1{font-size:clamp(44px,5.4vw,84px)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin:0}
.facts div{padding-top:12px}
.facts dd{margin:4px 0 0;font:400 22px var(--display)}
@media (max-width:760px){.story-hero img{aspect-ratio:4/3}.story-hero .t{grid-template-columns:minmax(0,1fr)}}
.moments{display:grid;gap:0}
.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;text-decoration:none;background:var(--white);border:1px solid var(--rule)}
.next figure{margin:0;overflow:hidden}
.next img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.next .t{display:grid;gap:10px;align-content:center;padding:clamp(24px,4vw,56px)}
.next h3{font-size:clamp(30px,3vw,46px)}
@media (max-width:760px){.next{grid-template-columns:minmax(0,1fr)}}

/* ---------- plan: months in type, questions in two columns ---------- */
.months{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink)}
.months div{padding-top:16px;display:grid;gap:8px;align-content:start}
.months b{font:400 34px/1 var(--display)}
.months h3{font:500 17px/1.3 var(--body)}
.months p{color:var(--muted);font-size:15px}
@media (max-width:900px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.months{grid-template-columns:minmax(0,1fr)}}
.qa{columns:2 340px;column-gap:56px}
.qa div{break-inside:avoid;padding:20px 0;border-top:1px solid var(--rule)}
.qa h3{font:500 18px/1.35 var(--body);margin-bottom:6px}
.qa p{color:var(--muted)}

/* ---------- dates: calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mo{background:var(--white);padding:18px;border:1px solid var(--rule)}
.mo h3{font-size:20px;margin-bottom:12px}
.sats{display:flex;flex-wrap:wrap;gap:6px}
.sat{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--rule);background:#fff;font-size:15px;font-weight:500;cursor:pointer;border-radius:0;transition:background-color 300ms var(--ease-hover),color 300ms var(--ease-hover)}
.sat:hover{border-color:var(--ink)}
.sat[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sat.gone{color:#A2A39E;text-decoration:line-through;background:var(--ground);border-color:transparent;cursor:not-allowed}
.key{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--muted)}
@media (max-width:1000px){.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cal{grid-template-columns:minmax(0,1fr)}}
.tourin{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;background:var(--white);padding:clamp(28px,4vw,56px);border:1px solid var(--rule)}
@media (max-width:860px){.tourin{grid-template-columns:minmax(0,1fr)}}

/* ---------- visit ---------- */
.aerial{position:relative;min-height:min(84svh,800px);display:flex;align-items:flex-end;overflow:hidden}
.aerial>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aerial .pan{position:relative;z-index:1;margin:0 auto var(--gutter) var(--gutter);width:min(480px,calc(100% - 2*var(--gutter)));background:#fff;padding:32px;display:grid;gap:16px}
.aerial dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;font-size:15px}
.aerial dt{color:var(--muted)}.aerial dd{margin:0}
.ways{border-top:1px solid var(--ink)}
.ways div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ways b{font:400 24px/1.2 var(--display)}
.ways p{color:var(--muted)}
@media (max-width:760px){.ways div{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ---------- fade-in footer ---------- */
.fade{position:relative;min-height:min(92svh,860px);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(40px,6vw,88px) var(--gutter) 40px;overflow:hidden;background:var(--night);color:#fff}
.fade>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fade::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(21,22,23,.72) 0%,rgba(21,22,23,.38) 28%,rgba(21,22,23,.08) 50%,rgba(21,22,23,.2) 70%,var(--night) 100%)}
.fade>*:not(img){position:relative;z-index:1}
.fade h2{font-size:clamp(48px,6.6vw,110px);max-width:11ch;line-height:1}
.fade .cta{grid-row:3;display:flex;justify-content:flex-end;align-items:end;gap:28px;flex-wrap:wrap}
.fade .cta p{max-width:32ch;color:#E6E6E2}
footer{background:var(--night);color:var(--on-night);padding:10px var(--gutter) 28px}
.fbody{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;padding:40px 0;align-items:end}
.fbody .mark{font:400 clamp(56px,9vw,140px)/.9 var(--display);color:#fff;letter-spacing:-.02em}
.fbody b{display:block;color:#fff;font-weight:500;margin-bottom:8px}
.fbody p,.fbody li{font-size:15px}
.fbody ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fbody a{text-decoration:none}.fbody a:hover{color:#fff}
.fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px dashed #3A3B3E;font-size:13px}
@media (max-width:860px){.fbody{grid-template-columns:repeat(2,minmax(0,1fr))}.fbody .mark{grid-column:1/-1}}

/* ---------- 404 ---------- */
.nf{min-height:70svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:var(--section)}
.nf .big404{font:400 clamp(120px,18vw,260px)/.85 var(--display)}
@media (max-width:760px){.nf{grid-template-columns:minmax(0,1fr)}}

/* ---------- motion: visible without JS; armed only once the script runs ---------- */
@keyframes rise{from{opacity:0;transform:translateY(var(--r,40px))}to{opacity:1;transform:none}}
.js .ld{animation:rise 800ms var(--ease-enter) both;animation-delay:calc(var(--d,0) * 200ms)}
.js .st{opacity:0;transform:translateY(12px);transition:opacity 900ms var(--ease-enter),transform 900ms var(--ease-enter);transition-delay:calc(var(--i,0) * 80ms)}
.js .st.in{opacity:1;transform:none}
.js .sl{overflow:hidden}.js .sl img{transform:scale(1.06);transition:transform 1400ms var(--ease-settle)}.js .sl.in img{transform:none}
.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1100ms var(--ease-enter);transition-delay:calc(var(--i,0) * 110ms)}
.js .wipe.in{clip-path:inset(0)}
.js .promise{opacity:0;transition:opacity 700ms var(--ease-enter),translate 800ms var(--ease-enter);translate:0 40px;transition-delay:calc(var(--i,0) * 200ms)}
.js .promises.in .promise{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .st,.js .wipe,.js .promise{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
  .js .sl img{transform:none!important}
  .js .split-rev.go .c1,.js .split-rev.go .c3{transform:none!important}
}

/* ---------- weddings page: one row per couple, then the details ---------- */
.couple{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;padding-block:calc(var(--section) * .5);border-top:1px solid var(--rule)}
.couple .intro{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.couple .intro h2{font-size:clamp(32px,3.2vw,50px)}
.couple .intro p{color:var(--muted);max-width:52ch}
.couple figure{margin:0;overflow:hidden;background:var(--panel);position:relative}
.couple img{width:100%;height:100%;object-fit:cover}
.couple .lead{grid-column:1/7;grid-row:2/4;aspect-ratio:4/5}
/* right side is a 2x2 of near-portrait slots; no tall strip, so no couple gets cropped out. The link takes the fourth cell */
.couple .m1{grid-column:7/10;grid-row:2}.couple .m2{grid-column:10/13;grid-row:2}.couple .m3{grid-column:7/10;grid-row:3}
.couple.flip .lead{grid-column:7/13}.couple.flip .m1{grid-column:1/4}.couple.flip .m2{grid-column:4/7}.couple.flip .m3{grid-column:1/4}
.couple figcaption{position:absolute;left:10px;bottom:10px;background:var(--white);padding:5px 10px;font-size:13px}
/* the fourth tile carries the couple's own words, and the whole tile is the link */
.couple .go{grid-column:10/13;grid-row:3;margin:0;background:var(--night);color:var(--white);display:grid;grid-template-rows:auto 1fr auto auto;gap:10px;padding:clamp(18px,1.8vw,28px);text-decoration:none;transition:transform 500ms var(--ease-settle)}
.couple .go:hover{transform:translateY(-4px)}
.couple .go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.go-q{font:400 clamp(56px,5vw,84px)/.6 var(--display);color:var(--on-night);height:.55em}
.go-t{font:400 clamp(19px,1.6vw,26px)/1.3 var(--display);align-self:start}
.go-who{font-size:13px;color:var(--on-night);letter-spacing:.02em}
.go-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:500}
.go-cta i{font-style:normal;display:inline-block;transition:transform 400ms var(--ease-settle)}
.couple .go:hover .go-cta i{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){.couple .go,.go-cta i{transition:none}.couple .go:hover,.couple .go:hover .go-cta i{transform:none}}
.couple.flip .go{grid-column:4/7}
.details{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.details figure{margin:0;overflow:hidden;background:var(--panel)}
.details img{width:100%;height:100%;object-fit:cover}
.details .d1{grid-column:span 4;aspect-ratio:4/5}.details .d2{grid-column:span 5}.details .d3{grid-column:span 3}
.details .d4{grid-column:span 3;aspect-ratio:3/4}.details .d5{grid-column:span 5}.details .d6{grid-column:span 4}
@media (max-width:760px){.couple,.details{grid-template-columns:repeat(2,minmax(0,1fr))}.couple>*,.details>*{grid-column:auto!important;grid-row:auto!important}.couple .lead,.couple .intro,.couple .go{grid-column:1/-1!important}.couple .m{aspect-ratio:1/1}.couple .m3{grid-column:1/-1!important;aspect-ratio:16/10}.details figure{aspect-ratio:1/1!important}}
@media (max-width:760px){.couple .go{margin-top:2px;min-height:0;gap:14px}}
/* the small photos fill their slot without sizing it, so the two rows split the lead photo evenly */
.couple .m img{position:absolute;inset:0}
@media (max-width:760px){.couple .m img{position:static}}


/* desktop: the two photo rows are equal halves, whatever the quote tile holds */
@media (min-width:761px){.couple{grid-template-rows:auto 1fr 1fr}}

/* ---------- hero: split screen, the photo half pulls out ---------- */
.stage{position:relative;height:calc(100svh - var(--nav-h));min-height:600px;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:minmax(0,1fr)}
.rest,.stack{grid-column:1;grid-row:1}
.rest{visibility:hidden}
.stack{position:relative;overflow:hidden;background:var(--panel)}
.layer{position:absolute;inset:0;margin:0;transform-origin:0 0}
.layer img{width:100%;height:100%;object-fit:cover}
.layer:not(:first-child){display:none}
.side{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:40px var(--gutter) 40px 56px;position:relative;z-index:2;background:var(--ground)}
.free{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:.01em}
.free i{width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--rule)}
.side h1{font-size:clamp(44px,4.6vw,78px);letter-spacing:-.015em;line-height:1.02}
.side h1 span{color:var(--muted)}
.check{display:grid;gap:18px;padding:24px 24px 20px;background:#fff}
.check .row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.check label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.check select,.check input{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:10px 0;border-radius:0;font-size:17px}
.check select:focus,.check input:focus{border-color:var(--ink);outline:none}
.result{font-size:15px;min-height:1.6em}
.result b{color:var(--ink)}
.caps{display:none}
[data-cap]{position:absolute;left:var(--gutter);bottom:30px;z-index:3;color:#fff;opacity:0;transition:opacity 700ms var(--ease-hover);display:flex;align-items:baseline;gap:14px}
[data-cap] b{font:400 clamp(30px,2.8vw,44px)/1.1 var(--display)}
[data-cap] span{font-size:16px;font-weight:500;max-width:22ch}
[data-cap]{transition:opacity 280ms var(--ease-hover)!important}[data-cap].on{opacity:1;transition:opacity 700ms var(--ease-hover) 320ms!important}
.cam-on [data-cam]{height:calc(100svh - var(--nav-h) + var(--cam-len))}
.cam-on [data-cam] .stage{position:sticky;top:var(--nav-h);overflow:hidden}
.cam-on [data-cam] .stack{position:absolute;inset:0;grid-column:auto;grid-row:auto;justify-self:stretch;align-self:stretch;z-index:3;will-change:clip-path}
.cam-on [data-cam] .stack::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,rgba(12,12,13,.5));z-index:9;pointer-events:none}
.cam-on .layer{display:block!important;will-change:transform,opacity}
.cam-on .caps{display:block}
.cam-on [data-cap]{z-index:10}
@media (max-width:860px){
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:48svh auto;height:auto}
  .rest,.stack{grid-row:1}.side{grid-column:1;grid-row:2;padding:32px var(--gutter)}
  .cam-on [data-cam] .stage{height:calc(100svh - var(--nav-h));grid-template-rows:42svh 1fr}
  .cam-on .side{padding-block:18px;gap:12px;overflow:hidden;justify-content:flex-start}
  .side h1{font-size:34px}
  .side .lede{font-size:15px}
  .check{padding:16px;gap:12px}
  .check .row{grid-template-columns:minmax(0,1fr)}
}

.btn{display:inline-flex;justify-content:center;padding:16px 24px;border:0;background:var(--ink);color:#fff;font-weight:500;cursor:pointer;transition:background-color 300ms var(--ease-hover)}
.btn:hover{background:#3A3B3E}
.result a{color:var(--ink)}

@media (max-width:860px) and (max-height:720px){.cam-on [data-cam] .stage{grid-template-rows:30svh 1fr}.side .lede{display:none}.check .row{grid-template-columns:repeat(2,minmax(0,1fr))}}