/* Yaron Averbuch Photography — shared styles.
   White page, one typewriter face, photos always shown whole (never cropped).
   Background photos run edge to edge at their true shape with text laid over them;
   on phones the text drops below the photo. */
:root{
  --bg:#fdfcfa; --panel:#f1eee9; --fg:#1b1917; --muted:#6c645c; --line:#e2ddd5;
  --accent:#8f5a22; --accent-ink:#fdfaf5; --on-photo:#f6f1ea;
  --type:"DM Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1320px;
  --gap:clamp(10px,1.4vw,18px);
  --space:clamp(64px,9vw,128px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--fg);font:400 16px/1.75 var(--type);-webkit-font-smoothing:antialiased;margin:0}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-weight:300;margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.section{margin-top:var(--space)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.section-head h2{font-size:clamp(24px,3.4vw,40px)}
.section-head p{max-width:52ch;color:var(--muted)}
.more{font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;white-space:nowrap}

/* nav */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.brand{text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav ul{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);list-style:none;margin:0;padding:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--fg)}
.nav .cta{color:var(--accent-ink)!important;background:var(--accent);padding:8px 12px}
.menu-btn{display:none;background:none;border:1px solid var(--line);font:400 12px/1 var(--type);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;color:var(--fg);cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px}
  .nav ul.open{display:flex}
  .nav ul li a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav ul li:last-child a{border:0;margin-top:12px;text-align:center}
}

/* edge-to-edge photo background, whole image shown */
.bg{position:relative;margin:0}
.bg > img{display:block;width:100%;height:auto}
.bg .over{position:absolute;inset:0;display:flex;align-items:flex-end;color:var(--on-photo);background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.bg .over > .wrap{width:100%;padding-block:clamp(24px,4vw,56px)}
.bg .over .label{color:#e2dbd1}
@media (max-width:820px){
  .bg .over{position:static;background:none;color:var(--fg)}
  .bg .over > .wrap{padding-block:20px 0}
  .bg .over .label{color:var(--muted)}
}
.hero h1{font-size:clamp(26px,4.4vw,58px);letter-spacing:-.01em;max-width:22ch}
.hero .lead{margin-top:12px;max-width:56ch}
.hero .meta{margin-top:10px;font-size:14px;opacity:.9}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:14px 22px;font:500 13px/1 var(--type);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.facts div{padding:18px 16px 18px 0;display:grid;gap:2px;min-width:0}
.facts div + div{padding-left:16px;border-left:1px solid var(--line)}
.facts b{font-weight:400;font-size:15px}
.facts .price b{color:var(--accent)}
@media (max-width:700px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* uncropped column gallery */
.gallery{columns:3 280px;column-gap:var(--gap)}
.gallery button{display:block;width:100%;margin:0 0 var(--gap);padding:0;border:0;background:var(--panel);cursor:zoom-in;break-inside:avoid}
.gallery img{display:block;width:100%;height:auto;transition:opacity .3s}
.gallery button:hover img{opacity:.85}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{font:400 12px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer}
.filters button[aria-pressed="true"]{color:var(--accent-ink);background:var(--fg);border-color:var(--fg)}
.count{font-size:13px;color:var(--muted)}

/* service cards on home: whole photo, text below */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.card{display:grid;gap:12px;text-decoration:none}
.card img{display:block;width:100%;height:auto}
.card h3{font-size:24px}
.card p{color:var(--muted);font-size:15px}
.card .go{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card:hover h3{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* list blocks */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3em 1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--accent)}
.steps b{font-weight:400}
.steps span{color:var(--muted);font-size:15px;grid-column:2}
.includes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.includes li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.includes li::before{content:"+";color:var(--accent)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--muted);max-width:62ch}

/* panel over a background photo (about, booking) */
.panel{background:rgba(253,252,250,.95);color:var(--fg);padding:clamp(22px,3vw,40px)}
.on-photo .over{align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.25))}
.about .panel{max-width:560px;margin-left:auto}
.about h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.about .text{display:grid;gap:14px}
.about dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.about dt{color:var(--muted)}
.about dd{margin:0}
@media (max-width:1100px){
  .on-photo .over{position:static;background:none;color:var(--fg)}
  .on-photo .over > .wrap{padding-block:24px 0}
  .on-photo .panel{padding:0;background:none;max-width:62ch;margin:0}
}

/* booking */
.book-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.book h2{font-size:clamp(26px,3.4vw,44px);margin-bottom:14px}
.book aside p{max-width:42ch}
.book aside .small{margin-top:16px;font-size:14px;color:var(--muted)}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:var(--panel);padding:clamp(20px,3vw,36px)}
.field{display:grid;gap:6px;min-width:0}
.full{grid-column:1/-1}
label,.legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,textarea{width:100%;font:400 16px/1.5 var(--type);color:var(--fg);background:transparent;border:0;border-bottom:1px solid #c4bcb1;padding:7px 0;border-radius:0}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer;letter-spacing:.04em;text-transform:none;font-size:14px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:8px 12px;border:1px solid #c4bcb1;color:var(--fg);background:var(--bg)}
.chips input:checked + span{border-color:var(--accent);color:var(--accent)}
.chips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.err{color:#b1442a;font-size:14px}
.sent{grid-column:1/-1;display:grid;gap:8px}
.sent h3{font-size:24px}
.sent p{color:var(--muted)}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* sticky mobile CTA for ad traffic */
.mobile-cta{display:none}
@media (max-width:820px){
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 94%,transparent);border-top:1px solid var(--line)}
  .mobile-cta .btn{display:block;text-align:center}
  body.has-mcta{padding-bottom:72px}
}

footer{margin-top:var(--space);padding-block:28px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}

/* lightbox */
.box{position:fixed;inset:0;z-index:50;background:rgba(253,252,250,.98);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:calc(64px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px))}
.box figure{margin:0;height:100%;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:12px}
.box img{max-width:100%;max-height:100%;object-fit:contain}
.box figcaption{font-size:12px;letter-spacing:.08em;color:var(--muted);text-align:center}
.box-btn{background:var(--bg);border:1px solid var(--line);color:var(--fg);font:400 12px/1 var(--type);letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;cursor:pointer}
.box-btn:hover{border-color:var(--fg)}
#box-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px}
@media (max-width:600px){.box{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto}.box figure{grid-column:1/-1;grid-row:1}.box .nav-btn{grid-row:2}}

/* photographer intro: his portrait shown whole beside the text */
.me{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.me-photo img{display:block;width:100%;height:auto}
.me-text{display:grid;gap:14px;max-width:60ch}
.me-text h2{font-size:clamp(24px,3vw,36px)}
.me-text .muted{color:var(--muted);font-size:15px}
@media (max-width:700px){.me{grid-template-columns:minmax(0,1fr)}.me-photo{max-width:300px}}

/* ---- motion: calm, quick, never crops ---- */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .over .wrap > *{animation:rise .6s var(--ease) both}
.hero .over .wrap > :nth-child(2){animation-delay:.08s}
.hero .over .wrap > :nth-child(3){animation-delay:.16s}
.hero .over .wrap > :nth-child(4){animation-delay:.24s}
.hero .over .wrap > :nth-child(5){animation-delay:.32s}

/* photos fade in as they finish loading (only when JS is running) */
.motion img.m-wait{opacity:0}
.motion img.m-in{opacity:1;transition:opacity .5s var(--ease)}

/* scroll reveal for gallery tiles below the fold */
.motion .m-hide{opacity:0;transform:translateY(16px)}
.motion .m-show{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:var(--d,0s)}

/* hover */
.gallery button{transition:transform .2s var(--ease)}
.gallery button:hover{transform:translateY(-2px)}
.gallery button img{transition:filter .2s var(--ease),opacity .5s var(--ease)}
.gallery button:hover img{filter:brightness(1.05);opacity:1}
.more,.card .go{display:inline-block;transition:letter-spacing .15s var(--ease)}
.more:hover,.card:hover .go{letter-spacing:.14em}

/* nav shadow once scrolled */
header.nav{transition:box-shadow .2s var(--ease)}
header.nav.scrolled{box-shadow:0 1px 12px rgba(27,25,23,.06)}

/* lightbox */
.box{animation:boxin .25s var(--ease)}
@keyframes boxin{from{opacity:0}to{opacity:1}}
.box img{transition:opacity .2s var(--ease),transform .25s var(--ease)}
.box img.m-swap{opacity:0;transform:scale(.98)}

/* phone CTA appears once the hero's own button is gone */
@media (max-width:820px){
  .motion .mobile-cta{transform:translateY(110%);transition:transform .25s var(--ease)}
  .motion .mobile-cta.up{transform:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .motion .m-hide,.motion img.m-wait{opacity:1!important;transform:none!important}
  .motion .mobile-cta{transform:none!important}
}

/* lightbox fix: the whole photo always fits inside the screen */
.box{grid-template-rows:minmax(0,1fr)}
.box figure{max-height:100%;overflow:hidden}
.box img{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto}
@media (max-width:600px){.box{grid-template-rows:minmax(0,1fr) auto}.box img{max-height:calc(100dvh - 190px)}}

/* panel style: clear tint, the background photo stays visible through the panel */
.on-photo .panel{background:rgba(253,252,250,.4);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:none;backdrop-filter:none}
.on-photo form{background:rgba(253,252,250,.55)}
.on-photo .panel .label,.on-photo .panel label,.on-photo .panel .legend,.on-photo .panel .small{color:#3f3832}
.on-photo .chips span{background:rgba(253,252,250,.7)}
.on-photo .over{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18))}

/* background-photo variants for the middle section and About */
.mid .panel,.about-bg .panel{max-width:none;margin:0}
.about-bg .panel.me{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
@media (max-width:700px){.about-bg .panel.me{grid-template-columns:minmax(0,1fr)}}

/* other panel styles chosen in the site editor (clear tint is the default above) */
.panel-frost .on-photo .panel{background:rgba(253,252,250,.55);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.panel-grain .on-photo .panel{background:rgba(253,252,250,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.panel-grain .on-photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.panel-paper .on-photo .panel{background-color:rgba(246,241,233,.74);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
@media (max-width:1100px){.panel-frost .on-photo .panel,.panel-grain .on-photo .panel,.panel-paper .on-photo .panel{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* lightbox controls: no boxes, large clear arrows */
.box-btn{border:0;background:none;color:var(--fg);cursor:pointer;font:400 13px/1 var(--type);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px}
.box-btn:hover{border:0;text-decoration:underline;text-underline-offset:5px}
.box .nav-btn{font-size:44px;line-height:1;letter-spacing:0;text-transform:none;padding:18px 16px;min-width:64px;min-height:64px;color:var(--fg);opacity:.9}
.box .nav-btn:hover{opacity:1;text-decoration:none;transform:translateX(var(--nudge,0))}
#box-prev{--nudge:-3px} #box-next{--nudge:3px}
.box .nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
@media (max-width:600px){.box .nav-btn{font-size:40px;justify-self:center}}

/* ===== Buttons: "safelight" style =====
   No boxes. Words with a small red darkroom light beside them; the light glows brighter on hover
   and the words warm up. The main action has a lit, glowing light; secondary links a smaller, dimmer one.
   The same light marks the active filter and the chosen option in the booking form. */
:root{--safe:#c8392b;--safe-hot:#ff4d33;--safe-text:#b8321f}
.btn,.btn.ghost,.nav .cta,form .btn{background:none!important;border:0!important;box-shadow:none!important;padding:8px 0!important;display:inline-flex;align-items:center;gap:10px;
  font:500 13px/1.2 var(--type);letter-spacing:.12em;text-transform:uppercase;color:inherit!important;text-decoration:none;cursor:pointer;filter:none!important}
.btn::before,.nav .cta::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--safe);box-shadow:0 0 8px 2px rgba(232,67,47,.45);transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),background .3s,opacity .3s}
.btn.ghost::before{width:6px;height:6px;box-shadow:none;opacity:.6}
.btn:hover::before,.nav .cta:hover::before,.btn:focus-visible::before{background:var(--safe-hot);box-shadow:0 0 14px 5px rgba(255,77,51,.55);opacity:1}
.btn,.nav .cta{transition:color .3s,text-shadow .3s}
.btn:hover,.nav .cta:hover{color:var(--safe-text)!important;text-shadow:0 0 14px rgba(232,67,47,.22)}
.hero .btn:hover,.bg .over .btn:hover{color:#ffd2c4!important;text-shadow:0 0 18px rgba(255,77,51,.6)}
.btns{gap:14px 30px}
.nav .cta{font-size:13px}
.nav ul li:last-child a.cta{border:0}
/* phone booking bar: centered words with the light */
.mobile-cta .btn{display:flex!important;justify-content:center;padding:12px 0!important;color:var(--fg)!important}
/* filters on the gallery page: plain words, the active one has the light */
.filters{gap:6px 22px}
.filters button{background:none!important;border:0!important;padding:6px 0;display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.filters button::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;transition:all .3s}
.filters button[aria-pressed="true"]{background:none!important;color:var(--fg)!important}
.filters button[aria-pressed="true"]::before{background:var(--safe);box-shadow:0 0 8px 2px rgba(232,67,47,.45)}
.filters button:hover{color:var(--fg)}
/* booking choices: plain words, the chosen one has the light */
.chips{gap:8px 22px}
.chips span{border:0!important;background:none!important;padding:6px 0!important;display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.chips span::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor;opacity:.6;transition:all .3s}
.chips input:checked + span{color:var(--fg)!important;border:0}
.chips input:checked + span::before{background:var(--safe);border-color:var(--safe);opacity:1;box-shadow:0 0 8px 2px rgba(232,67,47,.45)}
.on-photo .chips span{background:none!important}
@media (prefers-reduced-motion:reduce){.btn::before,.filters button::before,.chips span::before{transition:none}}

/* phone menu toggle: plain words, no box */
.menu-btn{border:0!important;background:none!important;padding:8px 0!important}

/* sections with a background photo keep the normal space above them (the .bg reset was removing it) */
.section.bg{margin-top:var(--space)}

/* home service cards: photo, price, title, text and link line up across all three cards.
   Photos stay whole; shorter ones sit at the bottom of the photo row so the text starts on one line. */
.cards:has(.card-photo){grid-template-rows:auto auto auto auto auto;row-gap:0}
.card:has(.card-photo){display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:10px;align-content:start}
.card-photo{display:flex;align-items:flex-end}
.card-photo img{display:block;width:100%;height:auto}
.card .label:empty,.card p:empty{min-height:0}
#h-services.label{font-size:12px;font-weight:400}
@media (max-width:900px){.cards:has(.card-photo){grid-template-rows:none;row-gap:clamp(18px,2.4vw,32px)}.card:has(.card-photo){grid-row:auto;grid-template-rows:none}}

/* four service cards on the home page; two per row on tablets */
.cards:has(.card-photo){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cards:has(.card-photo){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;row-gap:clamp(24px,3vw,40px)}.card:has(.card-photo){grid-row:auto;grid-template-rows:none}}
@media (max-width:600px){.cards:has(.card-photo){grid-template-columns:1fr}}
.cards:not(:has(.card-photo)){grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:1180px) and (min-width:821px){.nav ul{gap:16px}}
/* two-per-row cards (tablets) keep their parts aligned too */
@media (max-width:1100px) and (min-width:601px){
  .cards:has(.card-photo){grid-template-rows:none;row-gap:0}
  .card:has(.card-photo){grid-row:span 5;grid-template-rows:subgrid}
  .card:has(.card-photo):nth-child(n+3){margin-top:clamp(28px,4vw,44px)}
}
/* hero text stays readable on bright photos (e.g. the white multiple-exposure on Musicians) */
@media (min-width:821px){
  .hero .over{background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.78) 100%)}
  .hero .over .wrap > *{text-shadow:0 1px 14px rgba(0,0,0,.35)}
  .hero .over .label{color:#f1ebe2}
}

/* top photos never grow taller than the screen, so the heading and booking button are visible on arrival.
   Wide photos still run edge to edge; taller ones sit centred, whole, with white space at the sides. */
.hero{display:flex;justify-content:center}
.hero-frame{position:relative;max-width:100%}
.hero-frame > img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 64px);max-height:calc(100svh - 64px)}
@media (max-width:820px){.hero{display:block}.hero-frame > img{width:100%;max-height:none}}

/* gallery page links: all four sit on one bottom line */
.cards:not(:has(.card-photo)){align-items:end}
.cards:not(:has(.card-photo)) .card{align-content:end}
/* gallery page links: labels share one line and titles share one bottom line, even when a title wraps */
.cards:not(:has(.card-photo)){grid-template-rows:auto auto;row-gap:0;align-items:stretch}
.cards:not(:has(.card-photo)) .card{grid-row:span 2;display:grid;grid-template-rows:subgrid;gap:8px;align-content:normal}
.cards:not(:has(.card-photo)) .card .label{align-self:start}
.cards:not(:has(.card-photo)) .card h3{align-self:end}
@media (max-width:900px){.cards:not(:has(.card-photo)){grid-template-rows:none;row-gap:clamp(18px,2.4vw,32px)}.cards:not(:has(.card-photo)) .card{grid-row:auto;grid-template-rows:none}}

.cards:not(:has(.card-photo)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cards:not(:has(.card-photo)){grid-template-columns:1fr}}