/* One block per page section. Mobile-first; desktop rules in min-width queries. */

/* ---- Contact strip above the nav ---- */
.util{
  background:#fff;color:var(--ink);
  font-size:var(--t-fine);letter-spacing:.01em;
  border-bottom:1px solid var(--line);
  position:relative;z-index:4;
}
.util .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3) var(--s-4);flex-wrap:wrap;padding-block:var(--s-2);
}
.util__left{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.util__item{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink);font-weight:500}
.util__item:hover{color:var(--crimson)}
.util__item svg{width:15px;height:15px;fill:var(--ink);flex:none}
.util__social{display:flex;gap:var(--s-4);align-items:center}
.util__social a{display:inline-flex;color:var(--ink)}
.util__social a:hover{color:var(--crimson)}
.util__social svg{width:18px;height:18px;fill:currentColor}
/* The address is the first thing to go when space runs out. */
@media (max-width:519px){ .util__item--address{display:none} }

/* ---- Nav, sitting over the hero picture, then following you down ---- */
/* It used to sit in the hero's flow, which is why it could not stick: a
   sticky element cannot escape its parent. Fixed instead, so it carries on
   past the hero; .stage takes back the 84px it used to occupy, which keeps
   the first screen exactly as it was.
   z-index above the hero: the open menu panel hangs outside this box, and
   the hero's own layer used to paint over it, which killed every link. */
.topbar{
  position:fixed;left:0;right:0;top:var(--topbar-top,41px);z-index:70;
  transition:background 240ms var(--ease),box-shadow 240ms var(--ease),
             border-color 240ms var(--ease);
}
.stage{padding-top:84px}

/* Past the hero: ivory ground, dark type, a shorter bar. */
/* Dark ground, so the crest keeps the same white artwork it uses over the
   hero — the burgundy version of the mark has a white S that disappears on
   an ivory bar. Everything else stays light-on-dark, exactly as at the top
   of the page, so the bar reads as the same header having landed. */
.topbar.is-stuck{
  background:rgba(24,28,36,.95);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
          backdrop-filter:saturate(1.1) blur(8px);
  box-shadow:0 1px 16px rgba(12,14,18,.30);
  border-bottom:1px solid rgba(247,245,242,.12);
}
.topbar.is-stuck .topbar__bar{min-height:62px}
.topbar.is-stuck .topbar__brand img{height:40px}
.topbar__bar,.topbar__brand img{
  transition:min-height 240ms var(--ease),height 240ms var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .topbar,.topbar__bar,.topbar__brand img{transition-duration:120ms}
}
.topbar__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:84px;
}
.topbar__brand{display:flex;align-items:center;gap:var(--s-3)}
.topbar__brand img{height:52px;width:auto}
.topbar__name{
  font-family:var(--font-display);font-size:1.1875rem;
  letter-spacing:.05em;color:var(--on-dark);line-height:1.15;
}
.topbar__name span{
  display:block;font-family:var(--font-body);font-size:.5rem;font-weight:500;
  letter-spacing:.28em;color:var(--on-dark);margin-top:3px;
}
.topbar__nav{display:none;align-items:center;gap:var(--s-5)}
.topbar__nav a{
  font-size:var(--t-label-nav);font-weight:var(--weight-label);letter-spacing:var(--track-nav);text-transform:uppercase;
  color:var(--on-dark);transition:color var(--dur) var(--ease);
}
/* Scoped, or this rule out-specifies .topbar__book:hover and the button
   keeps white text on a white background when you hover it. */
.topbar__nav a:not(.topbar__book):hover{color:var(--rose)}
.topbar__book{
  border:1px solid rgba(247,248,250,.6);color:var(--on-dark);
  min-height:44px;padding:0 var(--s-4);display:inline-flex;align-items:center;
  font-size:var(--t-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);text-transform:uppercase;
  border-radius:var(--radius);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.topbar__book:hover{background:var(--on-dark);color:var(--ink)}

.nav-toggle{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(247,248,250,.55);border-radius:var(--radius);
}
.nav-toggle span{
  display:block;width:18px;height:1.5px;background:var(--on-dark);
  box-shadow:0 -5px 0 var(--on-dark),0 5px 0 var(--on-dark);
}
/* Open on a phone: a solid panel, because the links sit over a photograph. */
.topbar__nav.is-open{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s-3);
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);padding:var(--s-4);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);
}
.topbar__nav.is-open a{color:var(--ink-soft)}
.topbar__nav.is-open a:hover{color:var(--crimson)}
.topbar__nav.is-open .topbar__book{
  border-color:var(--crimson);color:var(--crimson);justify-content:center;
}
@media (min-width:1040px){
  .topbar__nav{display:flex}
  .nav-toggle{display:none}
}

/* ---- Hero: three frames cropped and blended into one picture ---- */
.stage{position:relative;background:var(--ink);overflow:hidden}
.tri{position:absolute;inset:0;display:flex}
.tri__cell{flex:1;min-width:0;position:relative}
.tri__cell img{width:100%;height:100%;object-fit:cover;display:block}
/* Leighton cut these three himself. Rather than re-crop or re-compress them,
   the brightness and saturation are matched here so they read as one picture. */
.tri__cell:nth-child(1) img{filter:brightness(.917) saturate(.78)}
.tri__cell:nth-child(2) img{filter:brightness(1.028) saturate(.78)}
.tri__cell:nth-child(3) img{filter:brightness(1.068) saturate(.78)}
/* Only the middle frame is masked. Feathering the outer two as well left a
   band where both were semi-transparent and the dark ground showed through. */
.tri__cell:nth-child(2){
  flex:1.16;margin-inline:-4.5%;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
.tri__cell:nth-child(1),.tri__cell:nth-child(3){z-index:1}
/* Three slivers on a phone helps nobody — show the middle frame alone. */
@media (max-width:759px){
  .tri__cell--side{display:none}
  .tri__cell:nth-child(2){flex:1;margin-inline:0;-webkit-mask-image:none;mask-image:none}
}

.stage__scrim{
  position:absolute;inset:0;z-index:2;
  /* A flat base plus a gradient. The gradient alone left the middle of the
     picture too light for white text, and legibility changed panel to panel. */
  background:
    linear-gradient(180deg,rgba(12,14,18,.58) 0%,rgba(12,14,18,.26) 28%,rgba(12,14,18,.26) 68%,rgba(12,14,18,.74) 100%),
    rgba(12,14,18,.28);
}
.stage__inner{
  position:relative;z-index:3;
  min-height:calc(100vh - 44px);
  min-height:calc(100svh - 44px);
  display:grid;align-content:center;justify-items:center;
  text-align:center;color:var(--on-dark);
  padding-block:var(--s-8);
}
.stage__inner h1{
  font-size:clamp(1.875rem,4.2vw,3.5rem);
  letter-spacing:.02em;text-wrap:balance;max-width:20ch;
}
.stage__tagline{
  margin-top:var(--s-3);
  font-size:var(--t-label);font-weight:var(--weight-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.stage__sub{
  margin-top:var(--s-4);
  font-size:var(--t-body-l);max-width:52ch;
}
/* Everything in the hero takes its colour and its shadow from one place. */
.stage__inner,
.stage__inner h1,
.stage__tagline,
.stage__sub{color:var(--on-dark)}
.stage__inner h1,
.stage__tagline,
.stage__sub{text-shadow:var(--shadow-text)}

.stage__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-6)}

/* ---- Occasions: four photographs edge to edge, from Leighton's mockup —
   a full-width band with thin light lines between the pictures and the
   heading centred over the middle of them. Warm palette (tokens.css). ---- */
.occasions{background:var(--night)}

/* Phone: the words first on the dark ground, then the photographs as a
   2 x 2 with the same thin light lines between them. */
.panorama{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(247,245,242,.35);   /* shows through the gaps as the lines */
}
.panorama__panel{position:relative;margin:0;overflow:hidden;aspect-ratio:1/1;background:var(--night)}
.panorama__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A quiet dark wash over each photograph */
.panorama__panel::after{content:"";position:absolute;inset:0;background:rgba(18,20,28,.28)}
/* Where each photograph is cropped from */
.panorama__panel--weddings img{object-position:center 40%}
.panorama__panel--stage img{object-position:62% center}
.panorama__panel--violin img{object-position:58% center}

.panorama__copy{
  grid-column:1 / -1;order:-1;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s-6) var(--s-4);color:#fff;background:var(--night);
}
.panorama__copy .eyebrow{color:var(--leaf);margin-bottom:var(--s-3)}
.panorama__copy h2{
  font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.15;color:#fff;
  text-shadow:var(--shadow-text);text-wrap:balance;
}
.panorama__rule{width:56px;height:1px;border:0;background:var(--leaf);margin:var(--s-4) auto}
.panorama__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-4);
  font-size:var(--t-label-nav);font-weight:var(--weight-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(12,14,18,.6);
}

/* Tablet and up: four equal photographs across the full width, with the
   words centred over the middle of them. The wash is deepest through that
   middle band so the words read, and the thin lines between the
   photographs fade out where they would otherwise cross the words. */
@media (min-width:700px){
  .panorama{grid-template-columns:repeat(4,1fr);gap:0;background:var(--night);height:clamp(360px,28vw,420px)}
  .panorama__panel{aspect-ratio:auto}
  .panorama__panel::after{background:rgba(18,20,28,.16)}
  .panorama__panel + .panorama__panel::before{
    content:"";position:absolute;left:0;top:0;bottom:0;z-index:2;width:1px;
    background:linear-gradient(180deg,
      rgba(247,245,242,.5) 0%,rgba(247,245,242,.5) 18%,
      rgba(247,245,242,0) 34%,rgba(247,245,242,0) 66%,
      rgba(247,245,242,.5) 82%,rgba(247,245,242,.5) 100%);
  }
  .panorama::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(12,13,18,.30) 0%,rgba(12,13,18,.40) 20%,
      rgba(12,13,18,.70) 42%,rgba(12,13,18,.70) 60%,
      rgba(12,13,18,.40) 80%,rgba(12,13,18,.30) 100%);
  }
  .panorama__copy{
    position:absolute;inset:0;order:0;
    background:none;padding:var(--s-5) var(--s-5);
  }
  .panorama__list{display:flex;justify-content:center;gap:0}
  .panorama__list li + li::before{content:"|";color:var(--leaf);margin:0 var(--s-3)}
}
/* Wide screens: the heading fits on one line */
@media (min-width:1100px){ .panorama__copy h2 br{display:none} }

/* ---- Enquiry form (its section is laid out in contact.css) ---- */
.enquiry__form{display:grid;gap:var(--s-4)}
/* The paired row is a grid at every width — one column on a phone. It used
   to be a plain block below 600px, so the two fields in it sat flush
   against each other with no gap while every other field had one. */
.enquiry__row{display:grid;gap:var(--s-4)}
@media (min-width:640px){
  .enquiry__row{grid-template-columns:1fr 1fr}
}

/* ---- Footer: the crest and name, then location, phone and email in
   columns with fine rules between them, and the social links last. ---- */
.site-footer{background:var(--night);color:var(--on-dark);padding-block:var(--s-7) var(--s-5);font-size:var(--t-body-s);line-height:1.55}
.site-footer a:hover{color:var(--rose)}
.site-footer__top{display:grid;gap:var(--s-5)}
.site-footer__brand{display:flex;align-items:center;gap:var(--s-3)}
.site-footer__brand img{width:53px;height:auto;flex:none}
.site-footer__col small{
  display:block;font-size:var(--t-label);font-weight:var(--weight-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--rose);margin-bottom:var(--s-2);   /* same rose as the tagline */
}
.site-footer__social{display:flex;gap:var(--s-4);align-items:center}
.site-footer__social a{display:inline-flex;color:var(--on-dark)}
.site-footer__social svg{width:22px;height:22px;fill:currentColor}
.wordmark{margin:0;font-family:var(--font-display);font-size:1.6rem;letter-spacing:.04em;line-height:1.1}
.wordmark span{
  display:block;font-family:var(--font-body);font-size:.625rem;font-weight:600;
  letter-spacing:var(--track-label);color:var(--rose);margin-top:var(--s-2);
}
.site-footer__base{
  border-top:1px solid rgba(247,245,242,.16);
  margin-top:var(--s-6);padding-top:var(--s-4);
  font-size:var(--t-fine);color:var(--on-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
}
@media (min-width:720px){ .site-footer__top{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){
  .site-footer__top{grid-template-columns:auto 1fr 1fr 1fr auto;align-items:center;gap:0}
  .site-footer__top > *{padding-inline:var(--s-5)}
  .site-footer__top > :first-child{padding-left:0}
  .site-footer__top > :last-child{padding-right:0}
  .site-footer__col{border-left:1px solid rgba(247,245,242,.16)}
}