*{box-sizing:border-box}
html,body{margin:0}
:root{
--bg:#eef0ec; --alt:#e3e7e1; --paper:#f8f9f6; --ink:#14201b; --muted:#4d5a53; --line:rgba(20,32,27,.16);
--action:#2b5a43; --action-hover:#234b37; --action-ink:#fff; --open:#d19a2a;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
--r:8px; --nav:68px; --gut:72px; --max:1200px;
--spring:cubic-bezier(.2,.9,.25,1);
--serif:"Young Serif",Georgia,"Times New Roman",serif;
--font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
html{scroll-padding-top:var(--nav);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.skip:focus{width:auto;height:auto;clip-path:none;left:var(--s4);top:var(--s4);background:var(--ink);color:#fff;padding:var(--s2) var(--s4);z-index:20}
h1,h2,h3{margin:0}
h1,h2{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.025em;max-width:13ch}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin-bottom:var(--s7)}
h3{font:600 19px/1.3 var(--font);letter-spacing:0}
p{margin:0}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* nav: translucent layer, content scrolls under */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);background:rgba(238,240,236,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line);z-index:10}
.nav__in{height:100%;display:flex;align-items:center;gap:var(--s6)}
.logo{font-family:var(--serif);font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-right:auto}
.logo span{font-family:var(--font);font-size:15px;color:var(--muted);letter-spacing:0}
.nav__links{display:flex;gap:var(--s6)}
.link{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:var(--s2) 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1px no-repeat;transition:background-size .3s var(--spring)}
.link:hover{background-size:100% 1px}

/* buttons: respond on press, instantly */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 var(--s5);border-radius:var(--r);font:500 16px/1 var(--font);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--spring),background .2s,border-color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn--primary{background:var(--action);color:var(--action-ink)}
.btn--primary:hover{background:var(--action-hover);transform:translateY(-1px)}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap}

/* hero */
.hero{padding:calc(var(--nav) + var(--s9)) 0 var(--s9)}
.hero__grid{display:grid;grid-template-columns:6fr 5fr;gap:var(--s8);align-items:center}
.hero__in{display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start}
.hero__lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:30em;color:var(--muted)}
.hero__fact{font-size:15px;color:var(--muted)}
.hero__side{display:flex;flex-direction:column;gap:var(--s5)}
.hero__art{aspect-ratio:4/5;max-height:70svh;overflow:hidden;border-radius:4px;width:100%;background:var(--alt)}
.hero__art img{width:100%;height:100%;object-fit:cover;display:block}
/* when a photo exists, the timeline moves out of the hero */
.hero__side:has(.hero__art:not([hidden])) .week{display:none}

/* open-times timeline */
.week{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.week figcaption{font-weight:600;font-size:15px;margin-bottom:var(--s4)}
.week__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.week__rows li{display:grid;grid-template-columns:40px 1fr 112px;align-items:center;gap:var(--s3);font-size:14px;min-height:24px}
.week__day{font-weight:600}
.week__t{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.week__off .week__t,.week__off .week__day{color:#66736b}
.week__track{position:relative;height:12px;border-radius:6px;background:rgba(20,32,27,.07);overflow:hidden}
.week__track i{position:absolute;top:0;bottom:0;left:var(--s);width:var(--w);background:var(--open);border-radius:6px;transform-origin:left center;animation:grow .9s var(--spring) .15s backwards}
.week__rows li:nth-child(3) i{animation-delay:.25s}.week__rows li:nth-child(5) i{animation-delay:.35s}.week__rows li:nth-child(6) i{animation-delay:.45s}
@keyframes grow{from{transform:scaleX(0)}}
.week__axis{display:grid;grid-template-columns:40px 1fr 112px;gap:var(--s3);margin-top:var(--s3);font-size:12px;color:var(--muted)}
.week__axis{padding:0}
.week__axis span{grid-column:2}
.week__axis{display:flex;justify-content:space-between;padding:0 112px 0 calc(40px + var(--s3))}
.week__axis span{display:block}

.book__head .week{margin-top:var(--s6);max-width:440px}

/* sections */
.section{padding:var(--s9) 0}
.section--alt{background:var(--alt)}
.section[hidden]{display:none}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.shot{all:unset;display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--alt);cursor:zoom-in;border-radius:4px;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--spring)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--spring),opacity .5s;opacity:0}
.shot img.is-in{opacity:1}
.shot:hover img{transform:scale(1.025)}
.shot:active{transform:scale(.985);transition-duration:.08s}
.shot:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* sessions */
.rows{max-width:880px}
.row{display:grid;grid-template-columns:132px 1fr auto;gap:var(--s6);align-items:center;padding:var(--s5) 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row__txt p{color:var(--muted);margin-top:var(--s1);max-width:34em}
.row__act{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3)}
.row__price{font:400 32px/1 var(--serif);letter-spacing:-.02em}
.note{margin-top:var(--s5);color:var(--muted);font-size:15px}

/* frames: how many photos you get */
.row__frames{display:grid;gap:3px;align-content:center}
.row__frames i{display:block;aspect-ratio:4/5;background:var(--ink);border-radius:1px}
.row__frames i.maybe{background:transparent;box-shadow:inset 0 0 0 1px rgba(20,32,27,.4)}
.row__frames[data-frames="5"]{grid-template-columns:repeat(5,1fr);gap:5px}
.row__frames[data-frames="75"]{grid-template-columns:repeat(15,1fr);gap:2px}
.row__frames--wide{grid-template-columns:1fr}
.row__frames--wide i{aspect-ratio:3/2}

/* booking */
.book{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.book__head h2{margin-bottom:var(--s5)}
.book__head p{color:var(--muted);max-width:28em;margin-bottom:var(--s6)}
.tabs{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start}
.tab{all:unset;cursor:pointer;padding:var(--s2) 0;font-size:17px;font-weight:500;color:var(--muted);transition:color .2s,transform .3s var(--spring);box-shadow:inset 0 -2px 0 transparent;-webkit-tap-highlight-color:transparent}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--open)}
.tab:active{transform:scale(.97);transition-duration:.08s}
.tab:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.book__frame{min-height:640px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex}
.book__frame iframe{border:0;width:100%;min-height:640px;opacity:0;transition:opacity .4s}
.book__frame iframe.is-in{opacity:1}
.book__empty{margin:auto;padding:var(--s6);text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:var(--s4);align-items:center}

.about p{max-width:34em;margin-bottom:var(--s5);font-size:19px;line-height:1.65}
.foot{border-top:1px solid var(--line);padding:var(--s6) 0;font-size:14px;color:var(--muted)}
.foot__in{display:flex;justify-content:space-between}

/* lightbox: translucent material, drag to dismiss */
.lb{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;touch-action:none}
.lb[hidden]{display:none}
.lb__scrim{position:absolute;inset:0;background:rgba(14,22,18,.84);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);opacity:var(--o,1);transition:opacity .3s}
.lb__img{position:relative;max-width:92vw;max-height:86vh;object-fit:contain;border-radius:2px;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb__btn{all:unset;position:absolute;color:#fff;font:500 15px var(--font);padding:var(--s3) var(--s4);cursor:pointer;border-radius:var(--r);background:rgba(255,255,255,.14);transition:background .2s,transform .3s var(--spring)}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__btn:active{transform:scale(.96);transition-duration:.08s}
.lb__btn:focus-visible{outline:2px solid #fff}
.lb__close{top:var(--s5);right:var(--s5)}
.lb__prev{left:var(--s5);top:50%;translate:0 -50%}
.lb__next{right:var(--s5);top:50%;translate:0 -50%}

/* tablet and phone */
@media (max-width:1023px){
:root{--gut:40px}
.hero{padding-top:calc(var(--nav) + var(--s8))}
.hero__grid{grid-template-columns:1fr;gap:var(--s7)}
.hero__art{aspect-ratio:4/3;max-height:none}
.week{max-width:520px}
.gallery{grid-template-columns:repeat(2,1fr)}
.book{grid-template-columns:1fr}
.book__frame,.book__frame iframe{min-height:600px}
.section{padding:var(--s8) 0}
}
@media (max-width:639px){
:root{--gut:20px;--nav:56px}
body{font-size:16px}
.nav__links{display:none}
.nav__cta{height:40px;padding:0 var(--s4);font-size:15px}
.logo{font-size:17px}
.logo span{display:none}
.hero{padding-top:calc(var(--nav) + var(--s7));padding-bottom:var(--s7)}
.btn-row .btn{width:100%}
.week{padding:var(--s4)}
.week__rows li,.week__axis{grid-template-columns:34px 1fr 96px;gap:var(--s2)}
.week__axis{padding:0 96px 0 calc(34px + var(--s2))}
.gallery{gap:var(--s2)}
.row{grid-template-columns:1fr;gap:var(--s3);align-items:start}
.row__frames{max-width:200px}
.row__frames--wide{max-width:112px}
.row__act{flex-direction:row;justify-content:space-between;align-items:center}
.row__act .btn{flex:0 1 auto}
.lb__prev,.lb__next{display:none}
.book__frame,.book__frame iframe{min-height:560px}
}

/* accessibility preferences */
@media (prefers-reduced-motion:reduce){
*{transition-duration:.01ms!important;animation:none!important}
.shot:hover img,.btn:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.lb__scrim{background:#0e1612;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){:root{--line:rgba(20,32,27,.65);--muted:#2c3631}.row__frames i.maybe{box-shadow:inset 0 0 0 1px var(--ink)}}