/* ShyGirlsFly: a walk through Bukchon-dong */
:root{
  --hanji:#F7F1E5; --hanji2:#EFE5D2; --paper:#FFFDF8;
  --ink:#241C18; --soft:#5E534B;
  --tile:#2D2F33; --stone:#8D877A; --wood:#5A3B2A;
  --door:#6E1F2B; --door-d:#4E1420;
  --lantern:#E8A94E; --pine:#33503F; --indigo:#1D3F7A; --indigo-d:#132C58;
  --rule:#DCCFB6;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --kr:'Noto Serif KR','Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--hanji);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--door);text-underline-offset:3px}
a:hover{color:var(--door-d)}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;border-radius:3px}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;color:var(--ink)}
h1{font-size:clamp(42px,6.4vw,78px);letter-spacing:-.012em}
h2{font-size:clamp(30px,4vw,46px);margin-bottom:14px}
h3{font-size:23px;margin-bottom:6px}
p{margin:0 0 1em}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--door);margin:0 0 14px}
.kr{font-family:var(--kr);font-weight:500}
.lede{font-size:clamp(19px,2.2vw,22px);color:var(--soft);max-width:34em}

/* buttons */
.btn{display:inline-block;background:var(--door);color:var(--hanji);padding:15px 28px;border-radius:3px;font-weight:600;font-size:17px;text-decoration:none;border:2px solid var(--door);transition:background .15s,color .15s;line-height:1.2;text-align:center}
.btn:hover{background:var(--door-d);border-color:var(--door-d);color:#fff}
.btn.ghost{background:transparent;color:var(--door)}
.btn.ghost:hover{background:var(--door);color:#fff}
.btn.indigo{background:var(--indigo);border-color:var(--indigo)}
.btn.indigo:hover{background:var(--indigo-d);border-color:var(--indigo-d)}
.btn.sm{padding:11px 20px;font-size:16px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(247,241,229,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
.brand{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--door);text-decoration:none;letter-spacing:-.01em}
.brand small{display:block;font-family:var(--kr);font-size:11px;font-weight:500;color:var(--soft);letter-spacing:.14em;margin-top:-4px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;padding:9px 13px;border-radius:3px}
.nav a:hover{background:var(--hanji2)}
.nav a[aria-current="page"]{color:var(--door);font-weight:600}
.nav a.pill{background:var(--indigo);color:#fff;font-weight:600}
.nav a.pill:hover{background:var(--indigo-d)}
.navbtn{display:none;background:none;border:2px solid var(--ink);color:var(--ink);padding:8px 14px;border-radius:3px;font:600 15px var(--sans);cursor:pointer}
@media(max-width:900px){
  .navbtn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--hanji);flex-direction:column;align-items:stretch;padding:12px 18px 18px;border-bottom:1px solid var(--rule);gap:2px}
  .nav.open{display:flex}
  .nav a{padding:13px 12px;font-size:18px}
}

/* stone wall divider */
.wall{height:26px;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='26'%3E%3Crect width='170' height='26' fill='%23766F63'/%3E%3Crect x='3' y='3' width='46' height='9' rx='4' fill='%239A9486'/%3E%3Crect x='53' y='3' width='62' height='9' rx='4' fill='%23ADA697'/%3E%3Crect x='119' y='3' width='48' height='9' rx='4' fill='%2392897A'/%3E%3Crect x='-12' y='15' width='52' height='8' rx='4' fill='%23A39C8C'/%3E%3Crect x='44' y='15' width='44' height='8' rx='4' fill='%238D8576'/%3E%3Crect x='92' y='15' width='60' height='8' rx='4' fill='%239F9889'/%3E%3Crect x='156' y='15' width='30' height='8' rx='4' fill='%23B1AA9B'/%3E%3C/svg%3E") repeat-x}
.tiles{height:14px;background:linear-gradient(var(--tile),var(--tile)) 0 0/100% 5px no-repeat,repeating-linear-gradient(90deg,#3B3E43 0 14px,#2D2F33 14px 18px);margin:0}

/* hero: the gate */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#F2D7B4 0%,#F6E6CC 34%,#F7F1E5 72%)}
.hero .copy{position:relative;z-index:3;padding:84px 0 360px;max-width:700px}
.hero h1{margin-bottom:20px}
.scene{position:absolute;left:0;right:0;bottom:0;height:430px;z-index:1}
.scene svg{width:100%;height:100%;display:block}
.sun{position:absolute;right:11%;top:46px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,#F5C27A 0%,rgba(245,194,122,.55) 38%,rgba(245,194,122,0) 70%);z-index:0}
.lanternG{animation:glow 4.5s ease-in-out infinite;transform-origin:center}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.9}}
.proof{position:relative;z-index:3;margin-top:30px;display:flex;gap:30px;flex-wrap:wrap}
.proof div{font-size:15px;color:var(--soft);line-height:1.35}
.proof b{display:block;font-family:var(--serif);font-size:30px;color:var(--door);line-height:1.1}
@media(max-width:700px){.hero .copy{padding:52px 0 260px}.scene{height:340px}.sun{width:130px;height:130px;right:4%}}

/* generic sections */
section{padding:84px 0}
.band{background:var(--paper)}
.band2{background:var(--hanji2)}
.sechead{max-width:640px;margin-bottom:40px}
.sechead p{color:var(--soft)}

/* first step (free guide teaser) */
.step{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center}
.cover{aspect-ratio:6/8.5;background:#0B2559;overflow:hidden;border:1px solid rgba(216,184,103,.6);border-radius:5px;box-shadow:0 26px 44px -22px rgba(11,37,89,.7);color:#D8B867;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;position:relative;margin:0 auto;width:100%;max-width:260px}
.cover small{letter-spacing:.3em;font-size:10px;font-weight:600}
.cover b{font-family:var(--serif);font-size:32px;line-height:1.05;margin:14px 0 6px}
.cover span{font-size:12px;color:#BBD6F5;font-family:var(--serif);font-style:italic}
.cover i{position:absolute;bottom:18px;font-style:normal;font-size:10.5px;font-weight:600;background:#D8B867;color:#0B2559;padding:5px 12px;border-radius:99px}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px}
@media(max-width:760px){.step{grid-template-columns:1fr;gap:30px}}

/* the lane: programs */
.group{margin:0 0 54px;display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;padding-top:22px;border-top:1px solid var(--rule)}
.group .gl h3{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--door);font-weight:600;margin:0 0 10px}
.group .gl p{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--ink);margin:0}
@media(max-width:860px){.group{grid-template-columns:1fr;gap:16px}}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.door{background:var(--paper);border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.door .lat{height:50px;background-color:var(--hanji2);background-image:
  repeating-linear-gradient(90deg,transparent 0 17px,rgba(90,59,42,.38) 17px 19px),
  repeating-linear-gradient(0deg,transparent 0 17px,rgba(90,59,42,.38) 17px 19px);
  border-bottom:6px solid var(--door);position:relative}
.door .lat::after{content:attr(data-kr);position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--kr);font-size:15px;color:var(--wood);background:var(--hanji2);padding:2px 8px;letter-spacing:.1em}
.door .in{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.door .price{font-family:var(--serif);font-size:30px;color:var(--door);line-height:1;margin:0 0 4px}
.door .price small{font-family:var(--sans);font-size:14px;color:var(--soft);margin-left:6px}
.door p{color:var(--soft);font-size:16.5px;max-width:38em}
.door .btnrow{margin-top:auto;padding-top:6px}
.door .fine{font-size:15px;margin:10px 0 0}
.door.soon .lat{border-bottom-color:var(--stone)}

/* host */
.host{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:center}
.portrait{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(160deg,#EFE5D2,#E3D4B8);position:relative;overflow:hidden;border:1px solid var(--rule)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--wood);text-align:center;padding:20px}
.portrait .ph b{font-family:var(--serif);font-size:64px;color:var(--door)}
.portrait .ph span{font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.facts{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.facts li{font-size:16px;color:var(--soft);padding-left:18px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--door);border-radius:50%}
@media(max-width:820px){.host{grid-template-columns:1fr;gap:30px}.portrait{max-width:320px}.facts{grid-template-columns:1fr}}

/* tea house */
.tea{background:var(--tile);color:var(--hanji)}
.tea h2,.tea h3{color:var(--hanji)}
.tea p{color:#D5CDBE}
.tea .eyebrow{color:var(--lantern)}
.tea a{color:var(--lantern)}
.tea .btn{color:var(--tile);background:var(--lantern);border-color:var(--lantern)}
.tea .btn.ghost{background:transparent;color:var(--lantern)}
.tea .btn.ghost:hover,.tea .btn:hover{background:#F4C37C;color:var(--tile);border-color:#F4C37C}
.tgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.quote{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1.2;color:var(--hanji);margin:0 0 18px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stats div{border:1px solid rgba(247,241,229,.22);padding:20px;border-radius:4px}
.stats b{display:block;font-family:var(--serif);font-size:38px;color:var(--lantern);line-height:1}
.stats span{font-size:15px;color:#D5CDBE}
@media(max-width:820px){.tgrid{grid-template-columns:1fr;gap:34px}}

/* share */
.share{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:28px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);font-family:var(--serif);font-size:32px;color:var(--door);line-height:1}
.steps b{display:block}
.steps span{color:var(--soft);font-size:16.5px}
@media(max-width:820px){.share{grid-template-columns:1fr;gap:30px}}

/* forms */
form label{display:block;font-weight:600;font-size:15.5px;margin:0 0 6px}
form .f{margin-bottom:16px}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:17px;padding:13px 14px;border:1.5px solid #B7A98C;border-radius:3px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--indigo);outline:3px solid rgba(29,63,122,.25)}
textarea{min-height:110px;resize:vertical}
.check{font-weight:400!important;display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--soft);margin:4px 0 18px}
.check input{margin-top:5px;width:18px;height:18px;flex:none}
.hp{position:absolute;left:-9999px}
.ok{background:#EAF2E7;border:1px solid #9DBE93;color:#1F3B1B;padding:20px 22px;border-radius:4px}
.hide{display:none!important}
.note{font-size:14.5px;color:var(--soft)}

/* guide page */
.ghero{background:linear-gradient(180deg,#E7EEF8,#F7F1E5);padding:70px 0 40px}
.gcols{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center}
.gcols .cover{max-width:300px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shots figure{margin:0}
.shots img{border:1px solid var(--rule);border-radius:4px;box-shadow:0 14px 26px -18px rgba(0,0,0,.5);width:100%}
.shots figcaption{font-size:14.5px;color:var(--soft);margin-top:8px}
.new{background:var(--indigo-d);color:#fff;border-radius:4px;padding:26px 28px}
.new h3{color:#fff}
.new ul{margin:10px 0 0;padding-left:1.1em}
.new li{margin:6px 0;color:#DCE7FA}
@media(max-width:820px){.gcols{grid-template-columns:1fr;gap:30px}.shots{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shots{grid-template-columns:1fr}}

/* footer */
footer{background:var(--tile);color:#CFC7B8;padding:56px 0 40px}
footer a{color:#F0DFC0}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;color:var(--lantern)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:7px 0;font-size:16px}
footer .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:22px;font-size:14px;color:#A8A092;max-width:60em}
@media(max-width:760px){footer .fg{grid-template-columns:1fr}}

/* lane map */
.lanemap{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px}
.lanemap a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;color:var(--soft);font-size:12.5px;letter-spacing:.06em;padding:6px 0}
.lanemap a span{opacity:0;transition:opacity .2s;background:var(--paper);padding:2px 9px;border-radius:3px;border:1px solid var(--rule);white-space:nowrap}
.lanemap a:hover span,.lanemap a.on span{opacity:1}
.lanemap a i{width:11px;height:11px;border-radius:50%;border:2px solid var(--stone);background:var(--hanji);display:block}
.lanemap a.on i{background:var(--door);border-color:var(--door)}
@media(max-width:1260px){.lanemap{display:none}}

/* invitation popup */
.invite{position:fixed;left:20px;bottom:20px;z-index:90;width:min(380px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--rule);border-left:6px solid var(--indigo);border-radius:4px;box-shadow:0 22px 44px -20px rgba(0,0,0,.45);padding:22px 22px 20px;transform:translateY(24px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.invite.show{transform:none;opacity:1;pointer-events:auto}
.invite h2{font-size:23px;margin:0 0 6px}
.invite p{font-size:16px;color:var(--soft);margin:0 0 14px}
.invite .x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:26px;line-height:1;color:var(--soft);cursor:pointer;padding:4px 8px}
.invite .btnrow{gap:10px}
.invite .no{background:none;border:0;color:var(--soft);font:500 15px var(--sans);text-decoration:underline;cursor:pointer;padding:8px 4px}
@media(max-width:560px){.invite{left:8px;right:8px;bottom:8px;width:auto}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lanternG{animation:none;opacity:.8}
  .invite{transition:none}
  .btn{transition:none}
}

.ghero h1{margin-bottom:16px}
.ghero .lede{margin-bottom:6px}

/* ======================================================================
   v2: a photographic walk through Bukchon-dong
   ====================================================================== */
.amb{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;filter:blur(18px) saturate(1.05);z-index:0}
.hero,.firststep,.gatesec,.hostsec,.tea,.sharesec,.ghero{position:relative;overflow:hidden}

/* hero */
.hero{background:#2a1c15;padding:0}
.hero .amb{filter:blur(22px) brightness(.5) saturate(1.12)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(26,16,12,.84),rgba(26,16,12,.52) 55%,rgba(26,16,12,.18))}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:76px;padding-bottom:88px}
.hero .copy{padding:0;max-width:none}
.hero h1{color:#FBF4E6}
.hero .eyebrow{color:var(--lantern)}
.hero .lede{color:#EADFCF}
.hero .proof{margin-top:30px}
.hero .proof div{color:#DACDBA}
.hero .proof b{color:#F2C26F}
.btn.ghost.light{color:#FBF4E6;border-color:#FBF4E6}
.btn.ghost.light:hover{background:#FBF4E6;color:var(--door-d);border-color:#FBF4E6}
.postcard{margin:0;background:#FFFDF8;padding:12px 12px 12px;box-shadow:0 34px 60px -26px rgba(0,0,0,.85);transform:rotate(1.4deg);border-radius:2px}
.postcard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.postcard figcaption{font-family:var(--serif);font-style:italic;color:var(--soft);padding:10px 4px 2px;font-size:16px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:52px;padding-bottom:60px}.postcard{max-width:520px}.hero::after{background:linear-gradient(180deg,rgba(26,16,12,.8),rgba(26,16,12,.55))}}

/* shared photo panels */
.panel{background:rgba(255,253,248,.93);border:1px solid var(--rule);border-radius:4px;padding:34px;box-shadow:0 24px 50px -30px rgba(0,0,0,.55)}
.firststep{padding:84px 0}
.firststep .amb{filter:blur(8px) saturate(.95)}
.firststep::after,.hostsec::after,.sharesec::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(247,241,229,.74)}
.firststep .wrap,.hostsec .wrap,.sharesec .wrap{position:relative;z-index:2}
.hostsec,.sharesec{padding:84px 0}
.hostsec .amb,.sharesec .amb{filter:blur(10px) saturate(.95)}
.laneintro{padding:84px 0 56px;background:var(--hanji)}
.laneintro h2{max-width:16em}

/* the doorways */
.gatesec{background:#241812;color:#F7F1E5;padding:96px 0 104px}
.gatesec .amb{filter:blur(20px) brightness(.46) saturate(1.2)}
.gatesec .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,12,8,.55),rgba(20,12,8,.2) 45%,rgba(20,12,8,.65))}
.gatesec .wrap{position:relative;z-index:2}
.gl{max-width:640px;margin-bottom:46px}
.gl .eyebrow{color:var(--lantern)}
.gl h2{color:#FBF4E6}
.gl p{color:#E4D8C5}
.stage{position:relative;perspective:1800px;margin-top:6px}
.inside{position:relative;display:grid;grid-template-columns:minmax(240px,36%) 1fr;gap:28px;align-items:start;padding:26px;background:#1B120C;border:10px solid #3A2418;border-radius:4px;box-shadow:inset 0 0 80px rgba(0,0,0,.65),0 34px 60px -30px rgba(0,0,0,.85);overflow:hidden}
.stage.s-right .inside{grid-template-columns:1fr minmax(240px,36%)}
.stage.s-right .window{order:2}
.inside>*{position:relative;z-index:2}
.window{margin:0;position:sticky;top:96px;border-radius:3px;overflow:hidden;background:#000;box-shadow:0 18px 36px -18px rgba(0,0,0,.9)}
.window img{width:100%;height:auto;display:block}
.window figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-family:var(--serif);font-style:italic;font-size:15px;color:#F7F1E5;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.stage .doors{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.glow{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;background:radial-gradient(60% 70% at 50% 35%,rgba(246,180,90,.30),transparent 72%)}
.lintel{position:absolute;left:-16px;right:-16px;top:-24px;height:32px;z-index:6;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#3C3F45,#1E2023);box-shadow:0 10px 16px rgba(0,0,0,.45);display:none}
.js .lintel{display:block}
.lintel::after{content:"";position:absolute;inset:6px 8px 0;background:repeating-linear-gradient(90deg,#4A4D54 0 12px,#2B2D31 12px 16px);border-radius:4px 4px 0 0;opacity:.8}

.leaf,.knock,.badge{display:none}
.js .leaf{display:block;position:absolute;top:0;bottom:0;width:50%;z-index:5;backface-visibility:hidden;transition:transform 1.6s cubic-bezier(.22,.8,.2,1);border:10px solid #3A2418;box-shadow:inset 0 0 44px rgba(0,0,0,.5);
  background:
   radial-gradient(circle at 55px 40px,#D2AE62 0 3px,transparent 4px) 0 0/56px 80px,
   repeating-linear-gradient(90deg,transparent 0 54px,rgba(0,0,0,.32) 54px 56px),
   linear-gradient(180deg,#7E2535,#5E1925 60%,#4A1320)}
.js .leaf.l{left:0;transform-origin:left center;border-right-width:3px}
.js .leaf.r{right:0;transform-origin:right center;border-left-width:3px}
.js .stage.open .leaf.l{transform:rotateY(-112deg)}
.js .stage.open .leaf.r{transform:rotateY(112deg)}
.leaf .lat{position:absolute;left:12%;right:12%;top:10%;height:34%;border:7px solid #3A2418;background-color:#F1E6CC;background-image:linear-gradient(90deg,#5A3B2A 0 3px,transparent 3px),linear-gradient(0deg,#5A3B2A 0 3px,transparent 3px);background-size:28px 28px;box-shadow:inset 0 0 16px rgba(120,80,40,.45),0 0 30px rgba(246,180,90,.25)}
.leaf .ring{position:absolute;top:60%;width:36px;height:36px;border:6px solid #C9A45A;border-radius:50%;box-shadow:0 3px 5px rgba(0,0,0,.55),inset 0 1px 2px rgba(255,255,255,.3)}
.leaf.l .ring{right:16px}
.leaf.r .ring{left:16px}

.js .knock{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;background:#F7F1E5;color:var(--door-d);border:2px solid #C9A45A;border-radius:3px;padding:13px 24px;font:600 17px var(--sans);cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.5);transition:opacity .4s,transform .4s}
.js .knock:hover{background:#fff}
.js .stage.open .knock{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}
.js .badge{display:block;position:absolute;right:20px;top:-34px;z-index:8;background:var(--lantern);color:#2A1B0F;padding:8px 16px;border-radius:99px;line-height:1.2;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,.4);transform:scale(0) rotate(-10deg);transition:transform .7s cubic-bezier(.34,1.9,.64,1) 1.2s}
.badge b{display:block;font-size:14.5px}
.badge span{font-size:12.5px;opacity:.85}
.js .stage.open .badge{transform:scale(1) rotate(-2deg)}

/* what's behind the doors, before and after */
.js .stage .window{opacity:0;transform:scale(1.07);transition:opacity 1.2s .45s,transform 2.2s cubic-bezier(.2,.7,.2,1) .45s}
.js .stage.open .window{opacity:1;transform:none}
.js .glow{opacity:0;transition:opacity 1.6s .2s}
.js .stage.open .glow{opacity:1}
.js .stage .door{opacity:0;transform:translateY(38px) scale(.9);transition:opacity .6s ease,transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*160ms + 700ms)}
.js .stage.open .door{opacity:1;transform:none;animation:arrive 1.8s ease-out calc(var(--i,0)*160ms + 700ms) both}
@keyframes arrive{0%{box-shadow:0 0 0 0 rgba(232,169,78,0)}35%{box-shadow:0 0 0 5px rgba(232,169,78,.65),0 0 46px rgba(232,169,78,.55)}100%{box-shadow:0 0 0 0 rgba(232,169,78,0)}}

/* passport stamps counter */
.stamps{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--rule);border-radius:99px;padding:9px 14px;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s,transform .4s}
.stamps.show{opacity:1;transform:none}
.stamps .lbl{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-right:3px}
.stamps i{width:24px;height:24px;border-radius:50%;border:2px dashed var(--stone);display:block}
.stamps i.on{border:2px solid var(--door);background:var(--door) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F7F1E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;animation:pop .6s cubic-bezier(.34,1.9,.64,1)}
@keyframes pop{0%{transform:scale(.2) rotate(-30deg)}100%{transform:none}}
@media(max-width:560px){.stamps{right:8px;bottom:10px;padding:7px 11px}.stamps .lbl{display:none}.invite{bottom:64px}}

/* dark tea house + share */
.tea{background:#201814;padding:84px 0}
.tea .amb.dark{filter:blur(4px) brightness(.36) saturate(1.1)}
.tea .wrap{position:relative;z-index:2}
.ghamb{opacity:.3;filter:blur(3px)}
.ghero .wrap{position:relative;z-index:2}

@media(max-width:860px){
  .inside,.stage.s-right .inside{grid-template-columns:1fr;padding:18px}
  .window{position:relative;top:0;max-width:440px}
  .stage.s-right .window{order:0}
  .js .badge{right:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .leaf,.js .knock,.js .badge,.lintel{display:none!important}
  .js .stage .door,.js .stage .window,.js .glow{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .stamps{transition:none}
}

/* affiliate terms */
.terms{max-width:820px}
.terms ol{counter-reset:t;list-style:none;padding:0;margin:18px 0 0}
.terms li{counter-increment:t;position:relative;padding:16px 0 16px 52px;border-bottom:1px solid var(--rule);color:var(--soft);font-size:17px}
.terms li::before{content:counter(t);position:absolute;left:0;top:10px;font-family:var(--serif);font-size:32px;color:var(--door);line-height:1.2}
.terms li b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:2px}

.share>div:first-child{align-self:start}