
body{background:var(--bg);color:var(--fg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.btn{text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:600;min-height:48px;padding:0 24px}
.eyebrow{font-weight:600;letter-spacing:.2em}
h2,h3,.pkg-head h3,.mini-top h3,.br-sheet-body>h2,.bk-pane h2{letter-spacing:.02em}
.pkg{border:1px solid var(--line)}
.pkg-head h3{font-size:28px}
.pkg-price{font-family:var(--body);font-weight:600;font-size:20px}
.pkg-inc li::before{background:var(--sage)}
.pkg.is-feature{border-color:var(--fg)}
.rv-h{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;margin:0}
.review blockquote{font-family:var(--body);font-size:15px;color:var(--muted)}
.tier-len{background:var(--sage);color:var(--sage-ink)}
.chip.on{background:var(--accent);color:var(--accent-fg)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;gap:12px}
.logo{font-family:var(--display);font-size:clamp(24px,5.6vw,30px);letter-spacing:.14em;color:var(--fg);text-decoration:none;text-align:center;line-height:1;white-space:nowrap}
.logo small{display:block;font-family:var(--body);font-size:8.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nl,.nr{display:flex;gap:2px;align-items:center}
.nr{justify-content:flex-end}
.nl a,.nr a{display:none;padding:8px 12px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.nl a:hover,.nr a:hover{color:var(--fg)}
.nl a.active,.nr a.active{color:var(--fg);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
@media(min-width:960px){.nl a,.nr a{display:inline-block}}
.top .btn{min-height:38px;padding:0 14px;font-size:10.5px}
.ig-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(min-width:960px){.ig-l{display:none}}

/* tab bar */
.tabbar{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:18px;background:color-mix(in srgb,#3a2c20 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -16px rgba(40,28,18,.6)}
.tabbar .ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/5);border-radius:13px;background:#eee7d8;transition:transform .5s var(--spring)}
.tabbar a{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;padding:7px 0 6px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#d9cdb6;text-decoration:none;transition:color .3s}
.tabbar a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.tabbar a.active{color:#3a2c20}
@media(min-width:960px){.tabbar{display:none}}
main{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media(min-width:960px){main{padding-bottom:0}}

/* hero */
.hero{padding-block:30px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:center;text-align:center}
.kicker{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hero>*{max-width:100%;min-width:0}
.mast{font-family:var(--display);font-weight:400;font-size:clamp(40px,12vw,190px);line-height:.86;letter-spacing:.01em;margin:0;white-space:nowrap}
.mast .amp{font-family:var(--script);font-size:.62em;color:var(--moss);vertical-align:.08em;margin:0 .04em}
.mast .w{display:inline-block;animation:inkIn 1.4s var(--ease) both}
.mast .w:nth-child(3){animation-delay:.18s}
@keyframes inkIn{from{opacity:0;letter-spacing:.2em;filter:blur(6px)}to{opacity:1;filter:none}}
.hero p{max-width:520px;color:var(--muted);font-size:16.5px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dip{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-inline:max(6px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-right,0px))}
@media(min-width:760px){.dip{gap:10px;padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px))}}
.dip figure{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;max-width:100%}
@media(min-width:960px){.dip figure{aspect-ratio:auto;height:min(86vh,920px)}}
.dip img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.dip.in img{transform:scale(1)}
.dip figcaption{position:absolute;left:12px;bottom:12px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#f6efe2;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.dip .note{position:absolute;right:12px;top:12px;font-family:var(--script);font-size:clamp(20px,3vw,30px);color:#f6efe2;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* reel */
.strip{background:var(--sage);padding:18px 0;overflow:hidden;position:relative;margin-top:6px}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:9px;background-image:radial-gradient(circle,var(--bg) 2px,transparent 2.4px);background-size:20px 9px;opacity:.9}
.strip::before{top:4px}.strip::after{bottom:4px}
.reel{display:flex;gap:10px;width:max-content;animation:reel 70s linear infinite;padding:0 5px 12px}
.strip:hover .reel{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.frame{position:relative;width:150px;flex-shrink:0}
@media(min-width:760px){.frame{width:200px}}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frame span{position:absolute;left:2px;bottom:-15px;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}

/* sections */
.sec{padding-block:52px;display:grid;gap:26px}
@media(min-width:960px){.sec{padding-block:96px}}
.sh{display:grid;gap:10px;border-top:1px solid var(--fg);padding-top:14px}
@media(min-width:760px){.sh{grid-template-columns:220px 1fr auto;align-items:baseline;gap:24px}}
.sh h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,6.4vw,72px);line-height:.95}
.sh h2 i{font-family:var(--script);font-style:normal;font-size:.8em;color:var(--moss)}
.sh p{color:var(--muted);max-width:46ch;font-size:15px}

/* hey I'm bella */
.hey{display:grid;gap:26px}
@media(min-width:900px){.hey{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}}
.paper{background:var(--surface);padding:clamp(24px,5vw,52px);box-shadow:0 1px 0 var(--line),0 30px 60px -44px rgba(58,44,32,.55);display:grid;gap:16px;position:relative}
.paper h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:.95;text-transform:lowercase}
.paper p{max-width:56ch}
.paper .sig{font-family:var(--script);font-size:42px;color:var(--moss);line-height:1}
.stamp{position:absolute;right:20px;top:-22px;width:78px;height:96px;background:var(--surface);padding:5px;transform:rotate(6deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.3);-webkit-mask:radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/9px 9px;mask:radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/9px 9px}
.stamp img{width:100%;height:100%;object-fit:cover}
.thumbs3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbs3 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.thumbs3 figure{margin:0;display:grid;gap:6px}
.thumbs3 figcaption{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.facts div{padding:14px 4px;display:grid;gap:2px}
.facts div+div{border-left:1px solid var(--line);padding-left:14px}
.facts b{font-family:var(--display);font-weight:400;font-size:clamp(22px,5vw,30px);line-height:1;white-space:nowrap}
.facts span{font-size:11px;color:var(--muted);letter-spacing:.06em}

/* volumes */
.vols{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:960px){.vols{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.vol{display:grid;gap:10px;text-align:left;color:var(--fg);text-decoration:none}
.vol .ph{position:relative;overflow:hidden;aspect-ratio:3/4;max-width:100%}
.vol img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vol:hover img{transform:scale(1.05)}
.vol .n{font-family:var(--display);font-size:15px;letter-spacing:.12em;color:var(--muted)}
.vol b{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1}
.vol small{font-size:12.5px;color:var(--muted)}

/* price guide card */
.guide{background:var(--sage);color:var(--sage-ink);padding:clamp(22px,5vw,56px) clamp(16px,5vw,60px) clamp(18px,4vw,40px);display:grid;gap:0;box-shadow:0 40px 80px -60px rgba(40,30,15,.7)}
.guide .gw{font-family:var(--display);font-size:clamp(28px,7.4vw,84px);letter-spacing:.06em;text-align:center;line-height:1;padding-bottom:clamp(16px,3vw,30px);white-space:nowrap;overflow:hidden;text-overflow:clip}
.g-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;border-block:1px solid var(--sage-line);padding:12px 0}
.g-tabs .tl{display:flex;gap:4px;flex-wrap:wrap}
.g-tabs button{font-size:clamp(14px,2.4vw,20px);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;color:var(--sage-ink);opacity:.5;border-radius:2px;transition:opacity .2s,background-color .2s}
.g-tabs button.on{opacity:1;background:rgba(255,255,255,.18)}
.g-tabs .h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;display:none}
@media(min-width:640px){.g-tabs .h{display:block}}
.g-row{display:grid;grid-template-columns:1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--sage-line);animation:viewIn .6s var(--ease) both}
@media(min-width:700px){.g-row{grid-template-columns:150px minmax(0,1fr) 170px;gap:24px}}
.g-row .t{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.g-row ul{list-style:none;margin:0;padding:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:grid;gap:3px}
.g-row .mid{display:grid;gap:14px;align-content:space-between;min-width:0}
.g-row .price{font-weight:700;font-size:18px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.g-row .price small{font-weight:500;font-size:12px;letter-spacing:.02em;opacity:.8;margin-left:6px}
.g-row .acts{display:flex;gap:8px;flex-wrap:wrap}
.g-row .acts .btn{min-height:40px;padding:0 16px;font-size:10.5px}
.g-row .btn-primary{background:var(--sage-ink);color:var(--sage)}
.g-row .btn-ghost{color:var(--sage-ink);box-shadow:inset 0 0 0 1px var(--sage-line)}
.g-row .ph{border:2px solid var(--sage-ink);aspect-ratio:3/4;overflow:hidden;max-width:170px;width:100%}
@media(max-width:699px){.g-row{grid-template-columns:minmax(0,1fr) 110px;grid-template-areas:"t ph" "mid ph"}.g-row .t{grid-area:t}.g-row .mid{grid-area:mid}.g-row .ph{grid-area:ph;align-self:start}}
.g-row .ph img{width:100%;height:100%;object-fit:cover}
.g-info{display:grid;gap:12px;padding:18px 0;border-bottom:1px solid var(--sage-line);font-size:13px;letter-spacing:.04em}
@media(min-width:700px){.g-info{grid-template-columns:150px 1fr 1fr;gap:24px}}
.g-info b{letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.g-info p+p{margin-top:2px}
.g-foot{font-family:var(--display);font-size:clamp(40px,10vw,110px);text-align:center;line-height:1;padding-top:clamp(16px,3vw,26px);letter-spacing:.02em}

/* love notes slider */
.notes{display:grid;gap:22px}
@media(min-width:900px){.notes{grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}}
.notes-ph{aspect-ratio:4/5;overflow:hidden;max-width:100%}
.notes-ph img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.note-card{display:grid;gap:16px;min-height:260px;align-content:center}
.note-card .q{font-family:var(--display);font-size:clamp(34px,5vw,58px);line-height:1;animation:viewIn .7s var(--ease) both}
.note-card p{color:var(--muted);max-width:52ch;font-size:16px}
.note-card .who{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.note-ctl{display:flex;gap:10px;align-items:center}
.note-ctl button{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:10px 0}
.note-ctl .dots{display:flex;gap:6px;margin:0 8px}
.note-ctl .dots i{width:22px;height:2px;background:var(--line);transition:background-color .3s}
.note-ctl .dots i.on{background:var(--fg)}

/* follow along */
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
@media(min-width:760px){.ig{grid-template-columns:repeat(6,1fr);gap:8px}}
.ig a{position:relative;aspect-ratio:1;overflow:hidden;display:block;max-width:100%}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .4s}
.ig a:hover img{transform:scale(1.06);filter:brightness(.85)}

/* closing */
.closing{text-align:center;display:grid;gap:20px;justify-items:center;padding-block:72px}
.closing h2{font-family:var(--display);font-weight:400;font-size:clamp(46px,9vw,120px);line-height:.92;text-transform:lowercase}
.closing h2 i{font-family:var(--script);font-style:normal;color:var(--moss);font-size:.75em}

/* work (masonry + load more) */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters .chip{border-radius:2px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}
.masonry{columns:2;column-gap:8px}
@media(min-width:960px){.masonry{columns:3;column-gap:16px}}
.m-item{break-inside:avoid;margin-bottom:8px;display:grid;gap:6px;width:100%;text-align:left}
@media(min-width:960px){.m-item{margin-bottom:16px}}
.m-item .ph{overflow:hidden}
.m-item img{width:100%;height:auto;transition:transform 1.1s var(--ease)}
.m-item:hover img{transform:scale(1.04)}
.m-item span{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.m-item.hide{display:none}
.lb img{width:100%;max-height:72vh;object-fit:contain}
.lb-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* envelope */
.env-wrap{display:grid;gap:24px}
@media(min-width:900px){.env-wrap{grid-template-columns:1fr 1fr;align-items:center}}
.envelope{position:relative;width:min(100%,460px);aspect-ratio:1.55;justify-self:center;margin-top:96px;cursor:pointer}
.envelope .back{position:absolute;inset:0;background:var(--env-2);border-radius:3px}
.envelope .card{position:absolute;left:6%;right:6%;top:8%;bottom:6%;background:var(--surface);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.25);transition:transform .9s var(--ease) .35s;z-index:1}
.envelope .card img{width:80px;height:100px;object-fit:cover}
.envelope .card b{font-family:var(--display);font-weight:400;font-size:24px;display:block;line-height:1.05}
.envelope .card small{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.envelope .card em{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.envelope .front{position:absolute;inset:0;z-index:2;background:linear-gradient(to top right,var(--env) 50%,transparent 50.2%) left/50.2% 100% no-repeat,linear-gradient(to top left,var(--env) 50%,transparent 50.2%) right/50.2% 100% no-repeat;pointer-events:none}
.envelope .flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:3;transform-origin:top;transition:transform .7s var(--ease),z-index 0s .35s;background:linear-gradient(to bottom right,var(--env-2) 50%,transparent 50.2%) left/50.2% 100% no-repeat,linear-gradient(to bottom left,var(--env-2) 50%,transparent 50.2%) right/50.2% 100% no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.envelope .seal{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:var(--moss);color:#f4ede0;display:grid;place-items:center;font-family:var(--display);font-size:20px;letter-spacing:.04em;z-index:4;transition:opacity .3s,transform .4s var(--spring);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.envelope.open .flap{transform:rotateX(180deg);z-index:0}
.envelope.open .seal{opacity:0;transform:scale(.4)}
.envelope.open .card{transform:translateY(-62%)}
.env-copy{display:grid;gap:14px}
.env-copy h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1}
.env-copy p{color:var(--muted)}
.gal-cards{display:grid;gap:10px}
@media(min-width:760px){.gal-cards{grid-template-columns:1fr 1fr}}
.gal-card{border-radius:3px}
.gal-card img{border-radius:2px}
.foot{border-top:1px solid var(--fg);padding-block:36px;display:grid;gap:20px}
@media(min-width:900px){.foot{grid-template-columns:1.5fr 1fr 1fr}}
.foot .logo{text-align:left;font-size:44px}
.foot p,.foot li{font-size:14px;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:var(--fg)}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline code{font-family:var(--body);font-size:13px;background:var(--surface);padding:6px 10px;border-radius:2px;user-select:all}

/* studio + instagram handoff */
.ig-send{gap:10px}
.ig-msg{width:100%;text-align:left;border:1px solid var(--line);background:var(--surface)}
.ig-msg-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ig-msg pre{margin:0;padding:12px;font-family:var(--body);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto;user-select:all}
.ig-steps{text-align:left;width:100%;margin:0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;color:var(--muted)}
.adm{display:grid;gap:18px;background:var(--surface);padding:clamp(16px,4vw,32px);border:1px solid var(--line)}
.adm-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.adm-head h3,.adm-lock h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1}
.adm-lock{display:grid;gap:10px;padding:28px;border:1px solid var(--line);background:var(--surface)}
.adm-lock p{color:var(--muted)}
.adm-tabs{border-radius:4px}.adm-tabs button{border-radius:3px}
.adm-reqs{display:grid;gap:10px}
@media(min-width:900px){.adm-reqs{grid-template-columns:1fr 1fr}}
.adm-req{display:grid;gap:8px;padding:16px;border:1px solid var(--line);background:var(--bg)}
.adm-req.st-new{border-color:var(--fg)}
.adm-req.st-declined{opacity:.55}
.adm-req-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.adm-req-top b{font-family:var(--display);font-weight:400;font-size:24px}
.adm-req-meta{font-size:13.5px;color:var(--muted)}
.adm-note{font-size:14px;font-style:italic}
.adm-req-acts{display:flex;gap:6px;flex-wrap:wrap}
.adm-empty{padding:24px;border:1px dashed var(--line);display:grid;gap:6px}
.adm-empty p{color:var(--muted);font-size:14px}
.adm-cal{display:grid;gap:18px}
@media(min-width:860px){.adm-cal{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
.adm-d.d-open{background:var(--bg)}
.adm-d.d-part{background:var(--butter);color:#3a2c20}
.adm-d.d-full{background:var(--blush);color:#3a2c20}
.adm-d.d-closed{background:var(--fg);color:var(--bg)}
.adm-d.d-off{opacity:.35}
.adm-d.sel{outline:2px solid var(--fg);outline-offset:1px}
.adm-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.adm-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.adm-legend .d-open::before{background:var(--bg)}.adm-legend .d-part::before{background:var(--butter)}.adm-legend .d-full::before{background:var(--blush)}.adm-legend .d-closed::before{background:var(--fg)}
.adm-daypanel{display:grid;gap:10px;padding:16px;border:1px solid var(--line);background:var(--bg)}
.adm-hours{display:grid;gap:18px}
.adm-hours .eyebrow{margin-bottom:8px}
.adm-minis{display:grid;gap:12px}
.adm-mini{display:grid;gap:12px;padding:16px;border:1px solid var(--line);background:var(--bg)}
@media(min-width:900px){.adm-mini .fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
.adm-mini-acts{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.studio-chip{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-decoration:none;padding:6px 10px;border:1px solid var(--fg);border-radius:2px}
.nl a.studio-chip{display:inline-block}
@media(min-width:960px){.nl a.studio-chip{display:none}}

/* owner login + galleries */
.adm-login{display:grid;gap:14px;max-width:520px;margin:0 auto;padding:clamp(22px,5vw,44px);background:var(--surface);border:1px solid var(--line)}
.adm-login h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,46px);line-height:1}
.adm-login>p{color:var(--muted)}
.adm-login .fields{grid-template-columns:1fr}
.adm-head-r{display:flex;gap:8px;align-items:center}
.adm-acct{max-width:640px}
.adm-acct-btns{display:flex;gap:8px;flex-wrap:wrap}
.gal-adm{display:grid;gap:20px}
@media(min-width:1000px){.gal-adm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.gal-new,.gal-list{display:grid;gap:12px;align-content:start;min-width:0}
.gal-new{padding:16px;border:1px solid var(--line);background:var(--bg)}
.pw-row{display:flex;gap:8px;align-items:center}
.pw-row input{flex:1;min-width:0;font-family:var(--body);letter-spacing:.04em}
.upload{display:grid;gap:4px;padding:18px;border:1px dashed var(--fg);text-align:center;cursor:pointer;background:var(--surface)}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload span{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.upload small{font-size:12px;color:var(--muted)}
.upload:focus-within{outline:2px solid var(--fg);outline-offset:2px}
.st-ph.up{opacity:1;position:relative}
.up-x{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center}
.gal-port summary{cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 0}
.gal-port .st-pick{margin-top:8px}
.gal-done{display:grid;gap:10px}
.gal-pw{font-size:12.5px;color:var(--muted)}
.gal-pw code,.gal-done code{font-family:var(--body);font-weight:700;color:var(--fg);background:var(--surface-2);padding:1px 6px;border-radius:2px;user-select:all}
.gal-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px 12px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.gal-cover{width:56px;height:70px;overflow:hidden;background:var(--sage);display:grid;place-items:center}
.gal-cover img{width:100%;height:100%;object-fit:cover}
.gal-cover span{font-family:var(--display);font-size:26px;color:var(--sage-ink)}
.gal-info{display:grid;gap:2px;min-width:0}
.gal-info b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1}
.gal-info>span{font-size:12.5px;color:var(--muted)}
.gal-item .st-btns{grid-column:1/-1;flex-wrap:wrap}
.unlock-wrap{max-width:640px}
.unlock{display:grid;gap:14px}
.unlock:not(.in-sheet){padding:clamp(18px,4vw,32px);background:var(--sage);color:var(--sage-ink)}
.unlock:not(.in-sheet) .fld input{background:#f7f2e7;color:#3a2c20;border-color:rgba(63,51,36,.35)}
.unlock:not(.in-sheet) .btn-primary{background:var(--sage-ink);color:var(--sage)}
.unlock:not(.in-sheet) .fine{color:var(--sage-ink);opacity:.8}
.unlock.in-sheet h2{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;padding-right:40px}
.unlock.in-sheet>p{color:var(--muted)}
.fld-hide{display:none}

/* drawn logo in header/footer, swapped for the oat version in dark mode */
.logo{display:grid;justify-items:center;gap:4px}
.logo .lg{height:30px;width:auto;display:block}
@media(min-width:760px){.logo .lg{height:34px}}
.lg-dk{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-lt{display:none!important}:root:not([data-theme="light"]) .lg-dk{display:block!important}}
:root[data-theme="dark"] .lg-lt{display:none!important}:root[data-theme="dark"] .lg-dk{display:block!important}
.foot .lg{margin-bottom:10px}

/* =====================================================================
   Mobile-first layer (v2). Designed for the Instagram in-app browser first
   (≈390×660 visible), then tablet (≥700px), then desktop (≥1024px).
   ===================================================================== */
html{scroll-padding-top:64px}
.top .wrap{grid-template-columns:auto 1fr auto;height:56px}
.top .logo{justify-items:start;grid-column:1}
.top .logo .lg{height:26px}
.top .logo small{font-size:8px;letter-spacing:.28em}
.top .nl{display:none}
.top .nr{grid-column:3}
.top .nr-gal{display:inline-block!important;font-size:10.5px;letter-spacing:.14em;padding:8px 4px}
.top .nr-book{display:none}
@media(min-width:1024px){
  .top .wrap{grid-template-columns:1fr auto 1fr;height:68px}
  .top .logo{justify-items:center;grid-column:2}
  .top .logo .lg{height:34px}
  .top .nl{display:flex;grid-column:1;grid-row:1}
  .top .nl a{display:inline-block}
  .top .nr-book{display:inline-flex}
}

/* hero: photo-first on phones, text over a soft gradient */
.hero2{position:relative;display:grid}
.hero2-media{position:relative;height:clamp(440px,calc(100svh - 56px - 82px),720px);overflow:hidden;background:#2a2118}
.hm{margin:0;position:absolute;inset:0}
.hm img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;animation:heroIn 1.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.08);opacity:.5}to{transform:none;opacity:1}}
.hm-b{display:none}
.hm-note{position:absolute;right:14px;top:14px;font-family:var(--script);font-size:24px;color:#f6efe2;text-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1}
.hero2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,20,12,0) 30%,rgba(28,20,12,.25) 55%,rgba(28,20,12,.82) 100%)}
.hero2-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:12px;padding:0 max(18px,env(safe-area-inset-left,0px)) 22px max(18px,env(safe-area-inset-right,0px));color:#f7f2e7}
.hero2-copy .kicker{color:#efe5d1;font-size:9.5px;letter-spacing:.22em;justify-content:flex-start;text-align:left}
.hero2-copy .mast{font-size:clamp(46px,14.5vw,72px);color:#f7f2e7;white-space:nowrap;text-align:left}
.hero2-copy .mast .amp{color:#e9d58f}
.hero2-copy p{font-size:15px;line-height:1.5;max-width:36ch;color:#efe7d8}
.hero2-copy .hero-cta{justify-content:flex-start;gap:8px}
.hero2-copy .hero-cta .btn{min-height:46px;padding:0 18px}
.hero2-copy .btn-primary{background:#f7f2e7;color:#3a2c20}
.hero2-copy .btn-ghost{color:#f7f2e7;box-shadow:inset 0 0 0 1px rgba(247,242,231,.75)}
.hero-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;letter-spacing:.04em;color:#efe5d1}
.hero-facts li{display:flex;align-items:center;gap:6px}
.hero-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:#e9d58f}
@media(min-width:700px){
  .hero2-media{height:clamp(520px,72svh,820px)}
  .hero2-copy{padding-bottom:40px;padding-left:max(36px,env(safe-area-inset-left,0px));gap:16px}
  .hero2-copy .mast{font-size:clamp(72px,11vw,104px)}
  .hero2-copy p{font-size:17px}
}
/* desktop: two columns, text on oat, two arched photos at a size that stays sharp */
@media(min-width:1024px){
  .hero2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px;max-width:1240px;margin:0 auto;padding:56px max(40px,env(safe-area-inset-right,0px)) 40px max(40px,env(safe-area-inset-left,0px))}
  .hero2-copy{position:static;order:1;color:var(--fg);padding:0}
  .hero2-copy .kicker{color:var(--muted)}
  .hero2-copy .mast{color:var(--fg);font-size:clamp(84px,8.4vw,128px)}
  .hero2-copy .mast .amp{color:var(--moss)}
  .hero2-copy p{color:var(--muted);font-size:18px;max-width:40ch}
  .hero2-copy .btn-primary{background:var(--accent);color:var(--accent-fg)}
  .hero2-copy .btn-ghost{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
  .hero-facts{color:var(--muted)}
  .hero-facts li::before{background:var(--gold)}
  .hero2-media{order:2;height:600px;background:none;overflow:visible}
  .hero2-media::after{display:none}
  .hm-a{inset:0 auto auto 6%;width:58%;height:88%;border-radius:999px 999px 0 0;overflow:hidden;box-shadow:0 30px 60px -40px rgba(40,28,18,.6)}
  .hm-b{display:block;inset:auto 0 0 auto;width:44%;height:58%;border-radius:999px 999px 0 0;overflow:hidden;border:8px solid var(--bg)}
  .hm-note{right:auto;left:0;top:auto;bottom:16%;color:var(--moss);text-shadow:none;font-size:34px}
}

/* tighter vertical rhythm on phones */
.sec{padding-block:40px;gap:20px}
.sec-tight{padding-block:30px 10px}
@media(min-width:1024px){.sec{padding-block:80px}.sec-tight{padding-block:56px 16px}}
.sh h2{font-size:clamp(32px,8vw,64px)}

/* session cards: swipe rail on phones and tablets, grid on desktop */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));padding-bottom:4px;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
@media(min-width:700px){.rail{grid-auto-columns:40%}}
@media(min-width:1024px){.rail{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin:0;padding:0}}
.rail-hint{font-size:12px;color:var(--muted);margin-top:-6px}
@media(min-width:1024px){.rail-hint{display:none}}
.pcard{scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);min-width:0}
.pcard-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;width:100%}
.pcard-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard-ph img{transform:scale(1.04)}
.pcard-cat{position:absolute;left:10px;top:10px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(247,242,231,.92);color:#3a2c20;padding:4px 8px}
.pcard-b{padding:14px;display:grid;gap:4px;align-content:start}
.pcard-b b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.pcard-b>span{font-size:13px;color:var(--muted)}
.pcard-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.pcard-f em{font-style:normal;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}

/* next mini teaser */
.mteaser{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;padding:10px;background:var(--sage);color:var(--sage-ink);text-decoration:none;transition:transform .2s var(--ease)}
.mteaser:active{transform:scale(.99)}
.mt-ph{display:block;aspect-ratio:4/5;overflow:hidden}
.mt-ph img{width:100%;height:100%;object-fit:cover}
.mt-b{display:grid;gap:3px;min-width:0}
.mt-b .eyebrow{color:var(--sage-ink)}
.mt-b b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.mt-b span{font-size:13px}
.mt-left{font-weight:700;letter-spacing:.06em;margin-top:4px}
@media(min-width:700px){.mteaser{grid-template-columns:180px minmax(0,1fr);gap:24px;padding:14px}.mt-b b{font-size:32px}}

/* bottom bar with a big Book button in the thumb zone */
.tabbar{grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;align-items:center;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px 6px;border-radius:16px}
.tabbar .ind{display:none}
.tabbar a{border-radius:12px;padding:7px 0 6px}
.tabbar a.active{color:#3a2c20;background:#eee7d8}
.tab-book{height:50px;margin:0 4px;border-radius:12px;background:#eee7d8;color:#3a2c20;font:600 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;box-shadow:0 0 0 2px #e9d58f inset;transition:transform .15s var(--ease)}
.tab-book:active{transform:scale(.96)}
@media(min-width:1024px){.tabbar{display:none}main{padding-bottom:0}}
main{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}

/* closing CTA */
.closing .link{font-size:13px}
.closing{padding-block:56px 40px}

/* tablet: two-column letter, wider cards */
@media(min-width:700px) and (max-width:1023px){
  .wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
  .hey{grid-template-columns:1fr;gap:24px}
  .thumbs3{grid-template-columns:repeat(3,1fr)}
}

/* in-app browsers (Instagram, Facebook, TikTok): no hover effects, larger tap targets */
.in-app .btn{min-height:48px}
.in-app .pcard:hover .pcard-ph img{transform:none}
@media(min-width:960px) and (max-width:1023px){.tabbar{display:grid}main{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
/* v2 fixes */
.hero2-copy .mast{font-size:clamp(40px,12.4vw,72px)}
@media(min-width:700px){.hero2-copy .mast{font-size:clamp(64px,10vw,100px)}}
@media(min-width:1024px){
  .hero2-copy .mast{font-size:clamp(60px,6vw,100px)}
  .hm-note{left:0;top:0;bottom:auto}
}
@media(min-width:700px) and (max-width:1023px){
  .sh{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 16px}
  .sh .eyebrow{grid-column:1/-1}
}
@media(min-width:1024px){.hm-note{display:none}}

/* v3 phone hero: photo on top that fades into a solid espresso panel, so the words never sit on the busy part of the photo */
@media(max-width:699px){
  .hero2{background:#2a2118;color:#f7f2e7}
  .hero2-media{height:clamp(300px,calc(100svh - 56px - 92px - 250px),560px)}
  .hm img{object-position:50% 36%}
  .hero2-media::after{background:linear-gradient(180deg,rgba(42,33,24,0) 52%,rgba(42,33,24,.55) 74%,#2a2118 100%)}
  .hm-note{display:none}
  .hero2-copy{position:relative;margin-top:-58px;gap:12px;padding:0 max(20px,env(safe-area-inset-right,0px)) 26px max(20px,env(safe-area-inset-left,0px))}
  .hero2-copy .kicker{font-size:10px;letter-spacing:.2em;color:#e9d58f}
  .hero2-copy .mast{font-size:clamp(44px,13.4vw,64px);line-height:.92;letter-spacing:.01em;text-shadow:0 2px 24px rgba(20,14,8,.35)}
  .hero2-copy p{font-size:15.5px;line-height:1.5;color:#e9e0cf;max-width:34ch}
  .hero2-copy .hero-cta{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin-top:4px}
  .hero2-copy .hero-cta .btn{min-height:50px;padding:0 12px;justify-content:center;font-size:12px;letter-spacing:.16em}
  .hero2-copy .btn-ghost{text-decoration:none}
  .hero-facts{gap:6px 16px;font-size:12px;color:#d9cdb6}
  .hero-facts li:nth-child(3){display:none}
}
@media(max-width:359px){.hero2-copy .hero-cta{grid-template-columns:1fr}}
@media(max-width:699px){.hero2-media{height:clamp(268px,calc(100svh - 56px - 92px - 262px),560px)}}
@media(max-width:379px){.hero-facts li:nth-child(2){display:none}.hero2-copy p{font-size:15px}}
