:root{
    --bg:#0b0a0e; --bg2:#131118; --panel:#16131c;
    --gold:#e8c36b; --gold-hi:#f6da8c; --gold-deep:#bd9442;
    --cream:#f7f1e6; --muted:#a99e8e; --faint:#6f6455;
    --line:rgba(232,195,107,0.22);
    --gold-tex:url('assets/tex/gold-brushed.webp');
    --leather:url('assets/tex/leather-black.webp');
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{background:var(--bg); color:var(--cream); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  /* dark leather field, sits fixed behind everything (full texture, not a tiled patch) */
  body::after{content:""; position:fixed; inset:0; z-index:-1; background:var(--leather) center/cover no-repeat; opacity:.5; pointer-events:none;}
  /* slim gold sliver: a thin cut of the brushed-gold texture, used as a divider/accent */
  .sliver{border:0; height:2px; background:var(--gold-tex) center/cover; opacity:.85; margin:0;}
  .sliver.center{width:min(130px,36%); height:3px; margin:38px auto 0; border-radius:2px;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
  .serif{font-family:"Fraunces",Georgia,serif;}

  /* nav */
  nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
      padding:20px 28px; transition:background .4s, padding .4s, border-color .4s; border-bottom:1px solid transparent;}
  nav.scrolled{background:rgba(11,10,14,0.86); backdrop-filter:blur(10px); padding:14px 28px; border-color:var(--line);}
  nav .brand{font-family:"Fraunces",serif; font-weight:600; font-size:19px; letter-spacing:1px; color:var(--cream);}
  nav .brand b{color:var(--gold);}
  nav .links{display:flex; gap:26px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
  nav .links a{transition:color .3s; position:relative;}
  nav .links a:hover{color:var(--gold);}
  nav .links a.cta{color:var(--gold); border:1px solid var(--line); padding:8px 16px; border-radius:999px;}
  nav .links a.cta:hover{background:var(--gold); color:var(--bg);}
  @media(max-width:640px){ nav .links a:not(.cta){display:none;} nav{padding:16px 20px;} }

  /* hero */
  .hero{position:relative; height:100svh; min-height:620px; display:flex; align-items:flex-end; overflow:hidden; background:var(--bg);}
  /* blur-fill: whole portrait stays in frame (contain), a blurred cover copy fills the sides so nothing is cut */
  .hero .heroimg{position:absolute; inset:0; z-index:0; overflow:hidden;}
  .hero .heroimg::before{content:""; position:absolute; inset:-6%; background:url('assets/purple-lights.webp') center/cover; filter:blur(26px) brightness(.5) saturate(1.05); transform:scale(1.08);}
  .hero .heroimg .fg{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 46%;}
  .hero .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,10,14,.55) 0%, rgba(11,10,14,.15) 35%, rgba(11,10,14,.5) 72%, var(--bg) 100%);}
  .hero .inner{position:relative; z-index:2; padding-bottom:9vh;}
  .hero .kick{color:var(--gold); font-size:12px; letter-spacing:4px; text-transform:uppercase; margin-bottom:16px;}
  .hero h1{font-family:"Fraunces",serif; font-weight:400; font-size:clamp(54px,11vw,140px); line-height:.92; letter-spacing:-2px; color:var(--cream);}
  .hero h1 em{font-style:italic; color:var(--gold);}
  .hero .lead{margin-top:22px; max-width:520px; font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--muted); font-weight:300;}
  .scrollcue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:var(--faint); font-size:11px; letter-spacing:3px; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(6px);opacity:1}}

  /* section heads */
  .sec{padding:clamp(38px,5.5vw,72px) 0;}
  .eyebrow{color:var(--gold); font-size:12px; letter-spacing:4px; text-transform:uppercase; margin-bottom:14px;}
  .sec h2{font-family:"Fraunces",serif; font-weight:400; font-size:clamp(34px,6vw,64px); line-height:1; letter-spacing:-1px;}
  .sec .sub{color:var(--muted); max-width:560px; margin-top:16px; line-height:1.6; font-weight:300;}

  /* gallery */
  .gallery{margin-top:48px; columns:3 340px; column-gap:16px;}
  .shot{break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden; border-radius:5px; cursor:pointer; background:var(--panel);
        opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease;}
  .shot.in{opacity:1; transform:none;}
  .shot img{width:100%; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); filter:saturate(1.02);}
  .shot:hover img{transform:scale(1.045);}
  .shot .cap{position:absolute; left:0; right:0; bottom:0; padding:34px 16px 15px; color:var(--cream); font-size:11px; letter-spacing:2px; text-transform:uppercase;
             background:linear-gradient(transparent, rgba(9,8,11,.82)); opacity:0; transform:translateY(8px); transition:.4s;}
  .shot:hover .cap{opacity:1; transform:none;}
  .shot .cap b{color:var(--gold); font-weight:600;}
  /* filters */
  .filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:38px;}
  .chip{background:transparent; border:1px solid var(--line); color:var(--muted); font-family:inherit; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:9px 17px; border-radius:999px; cursor:pointer; transition:.25s;}
  .chip:hover{color:var(--gold); border-color:var(--gold-deep);}
  .chip.active{background:var(--gold); color:var(--bg); border-color:var(--gold);}
  .chip .ct{opacity:.55; font-size:10px; margin-left:5px;}
  /* epigraph */
  .quote-sec{background:linear-gradient(180deg,var(--bg),var(--bg2)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center;}
  .pullquote{max-width:840px; margin:0 auto;}
  .pullquote .mark{font-family:"Fraunces",serif; color:var(--gold-deep); font-size:100px; line-height:.3; display:block; height:52px; user-select:none;}
  .pullquote p{font-family:"Fraunces",serif; font-style:italic; font-weight:300; font-size:clamp(21px,3.3vw,36px); line-height:1.42; color:var(--cream); letter-spacing:-.3px;}
  .pullquote cite{display:block; margin-top:30px; font-style:normal; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold);}

  /* about */
  .about{background:linear-gradient(180deg, var(--bg), var(--bg2)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .about .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .about .portrait{border-radius:6px; overflow:hidden; aspect-ratio:4/5;}
  .about .portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
  .about p{color:var(--muted); line-height:1.75; margin-top:18px; font-weight:300; font-size:16px;}
  .about p .lead-line{color:var(--cream);}
  .about .place{margin-top:26px; color:var(--gold); font-family:"Fraunces",serif; font-style:italic; font-size:17px;}
  .stats{display:flex; gap:40px; margin-top:34px;}
  .stat .n{font-family:"Fraunces",serif; font-size:40px; color:var(--gold); line-height:1;}
  .stat .l{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--faint); margin-top:6px;}
  @media(max-width:760px){ .about .grid{grid-template-columns:1fr; gap:32px;} .about .portrait{max-width:420px;} }

  /* inquire */
  .inquire{text-align:center;}
  .inquire h2{margin-bottom:10px;}
  .inquire .big{font-family:"Fraunces",serif; font-size:clamp(19px,5.4vw,52px); color:var(--gold); display:inline-block; max-width:100%; overflow-wrap:anywhere; margin-top:26px; border-bottom:1px solid var(--line); padding-bottom:6px;}
  .inquire .big:hover{color:var(--gold-hi);}
  .socials{margin-top:30px; display:flex; gap:22px; justify-content:center; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);}
  .socials a:hover{color:var(--gold);}

  footer{padding:40px 0 46px; text-align:center; color:var(--faint); font-size:12px; letter-spacing:1px; border-top:1px solid var(--line);}
  footer b{color:var(--gold);}

  /* lightbox */
  .pricecue{position:absolute; left:14px; top:12px; z-index:2; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--bg); background:var(--gold); padding:4px 9px; border-radius:999px; opacity:0; transform:translateY(-6px); transition:.35s;}
  .shot:hover .pricecue{opacity:1; transform:none;}
  .shot.open .pricecue{opacity:0;}
  /* click a card and the photo dissolves into its info, in place. no flip, no page. */
  .cardinfo{position:absolute; inset:0; z-index:4; background:rgba(9,8,11,.92); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.4rem 1.3rem; opacity:0; pointer-events:none; transition:opacity .6s ease; overflow-y:auto;}
  .cardinfo .ci-desc{font-family:"Fraunces",serif; font-size:15px; line-height:1.55; color:var(--cream); font-weight:300; max-width:34ch; margin:0;}
  .cardinfo .ci-buy{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:13px; margin-top:1.1rem;}
  .shot.open .cardinfo{opacity:1; pointer-events:auto;}
  .shot img{transition:filter .6s ease, transform .9s cubic-bezier(.2,.6,.2,1);}
  .shot.open img{filter:brightness(.4) blur(2px); transform:scale(1.04)!important;}
  .cardinfo .ci-k{font-family:"Fraunces",serif; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-size:10px; margin-bottom:.7rem;}
  .cardinfo .ci-r{display:flex; justify-content:space-between; align-items:baseline; gap:.7rem; padding:.42rem 0; border-bottom:1px solid rgba(232,195,107,.16); font-size:13.5px; color:var(--cream);}
  .cardinfo .ci-r span em{font-style:italic; color:var(--muted); font-size:.82em; margin-left:.3em;}
  .cardinfo .ci-r b{font-family:"Fraunces",serif; color:var(--gold-hi); font-size:17px; font-weight:500;}
  .cardinfo .pbtn{display:block; text-align:center; margin-top:.85rem; padding:.6rem; background:var(--gold) var(--gold-tex) center/cover; background-blend-mode:overlay; color:var(--bg); border-radius:3px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;}
  .cardinfo .pbtn:hover{filter:brightness(1.08);}

  /* film & aerial */
  .filmgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px 22px; margin-top:44px; max-width:900px; margin-left:auto; margin-right:auto;}
  @media(min-width:641px){.filmgrid > div:last-child:nth-child(odd){grid-column:1 / -1; max-width:calc(50% - 11px); justify-self:center;}}
  @media(max-width:640px){.filmgrid{grid-template-columns:1fr; max-width:440px;}}
  .videowrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.55); background:#000 center/cover no-repeat; cursor:pointer;}
  .videowrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .videowrap .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; border:0; cursor:pointer; background:rgba(11,10,14,.5); backdrop-filter:blur(4px); display:grid; place-items:center; transition:.3s;}
  .videowrap .play::after{content:""; width:0; height:0; border-left:23px solid var(--gold); border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:6px; transition:.3s;}
  .videowrap:hover .play{background:var(--gold); transform:translate(-50%,-50%) scale(1.07);}
  .videowrap:hover .play::after{border-left-color:var(--bg);}
  .vcap{margin-top:11px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);}
  .vcap b{color:var(--gold); font-weight:600;}
  /* offer list (pricing, commission) */
  .offers{list-style:none; margin:36px 0 0; padding:0; max-width:660px;}
  .offers li{display:flex; justify-content:space-between; gap:1.4rem; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line);}
  .offers .o-l{flex:1;}
  .offers .o-t{font-family:"Fraunces",serif; font-size:21px; color:var(--cream);}
  .offers .o-d{color:var(--muted); font-size:15px; font-weight:300; margin-top:4px; line-height:1.5;}
  .offers .o-p{font-family:"Fraunces",serif; color:var(--gold); font-size:15px; white-space:nowrap;}
  .offers .o-buy{color:var(--gold); text-decoration:none; display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px; transition:color .2s;}
  .offers .o-buy:hover{color:var(--gold-hi);}
  .offers .o-buy span{font-family:Inter,system-ui,sans-serif; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transition:color .2s;}
  .offers .o-buy:hover span{color:var(--gold);}
  .offers li.o-head{display:block; padding:30px 0 6px; border-bottom:0;}
  .offers li.o-head:first-child{padding-top:0;}
  .offers li.o-head:hover{padding-left:0;}
  .offers .o-hk{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:16px; letter-spacing:.04em;}
  .offers .o-hs{color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:5px; max-width:520px;}
  
  .wed{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg),var(--bg2));}
  .sig{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:clamp(19px,2.6vw,28px); margin-top:22px; line-height:1.45; max-width:760px;}
  .sigclose{text-align:center; margin:clamp(40px,7vw,64px) auto 0; max-width:820px;}
  /* a thread of a landscape: a bar of vibrant color to open a section of words */
  .cstrip{height:clamp(172px,19.5vw,292px); overflow:hidden; margin:0 0 clamp(22px,3.4vw,40px);}
  .cstrip img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  /* The Light: the week ahead, read as light. you pick a light, not a date. */
  .week{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:30px 0 0;}
  @media(min-width:640px){ .week{grid-template-columns:repeat(4,1fr);} }
  @media(min-width:980px){ .week{grid-template-columns:repeat(7,1fr);} }
  .wday{border:1px solid var(--line); border-radius:6px; padding:14px 12px; background:rgba(255,255,255,.012); display:flex; flex-direction:column; gap:6px; min-height:132px;}
  .wday .wd-d{font-family:"Fraunces",serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
  .wday .wd-n{font-family:"Fraunces",serif; font-size:23px; color:var(--cream); line-height:1;}
  .wday .wd-l{font-family:"Fraunces",serif; font-style:italic; font-size:12.5px; line-height:1.35; color:var(--muted); margin-top:auto;}
  .wday .wd-t{font-size:11px; color:var(--faint,#6f6878); letter-spacing:.05em;}
  .wday.closed{opacity:.42;}
  .wday.open{border-color:var(--gold-deep); background:rgba(232,195,107,.05); cursor:pointer; transition:.2s;}
  .wday.open:hover{border-color:var(--gold); background:rgba(232,195,107,.1); transform:translateY(-2px);}
  .wday.open .wd-n{color:var(--gold-hi);}
  .wday.open .wd-l{color:var(--cream);}
  .wday .wd-o{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-family:"Fraunces",serif;}
  .lgloss{margin:34px 0 0; border-top:1px solid var(--line); padding-top:22px; display:grid; grid-template-columns:1fr; gap:10px; max-width:760px;}
  @media(min-width:700px){ .lgloss{grid-template-columns:1fr 1fr; gap:10px 34px;} }
  .lgloss div{font-size:14px; color:var(--muted); line-height:1.5;}
  .lgloss b{font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:var(--gold); display:block; font-size:15px; margin-bottom:2px;}
  /* the day, read as colour. real sun times, not a diagram. */
  .dayarc{margin:34px 0 0; border-top:1px solid var(--line); padding-top:26px;}
  .arc-k{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:15px; margin-bottom:14px;}
  .arc-bar{height:58px; border-radius:5px; position:relative; overflow:hidden; border:1px solid var(--line);}
  .arc-bar .arc-tick{position:absolute; top:0; bottom:0; width:1px; background:rgba(11,10,14,.5);}
  .arc-labels{position:relative; height:46px; margin-top:7px;}
  .arc-labels span{position:absolute; transform:translateX(-50%); text-align:center; font-size:10.5px; line-height:1.35; color:var(--muted); white-space:nowrap;}
  .arc-labels span b{display:block; font-family:"Fraunces",serif; font-weight:400; font-size:12.5px; color:var(--cream); font-style:normal;}
  .arc-labels span.edge-l{transform:none; left:0!important;}
  .arc-labels span.edge-r{transform:none; right:0; left:auto!important;}
  .arc-note{font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.55; font-style:italic; font-family:"Fraunces",serif;}
  .clouds{display:grid; grid-template-columns:1fr; gap:9px; margin-top:24px; border-top:1px solid var(--line); padding-top:22px;}
  @media(min-width:700px){ .clouds{grid-template-columns:1fr 1fr; gap:9px 34px;} }
  .clouds div{font-size:13.5px; color:var(--muted); line-height:1.5; display:flex; gap:11px; align-items:flex-start;}
  .clouds i{width:34px; height:16px; border-radius:3px; flex:none; margin-top:2px;}
  .clouds b{font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:var(--cream); font-size:14px;}
  /* faq accordion */
  .faqlist{max-width:760px; margin:38px auto 0;}
  .faq{border-top:1px solid var(--line);}
  .faq:last-child{border-bottom:1px solid var(--line);}
  .faq summary{list-style:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:"Fraunces",serif; font-weight:400; font-size:clamp(17px,2.3vw,21px); color:var(--cream);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .plus{color:var(--gold); font-size:22px; line-height:1; transition:transform .3s; flex:none;}
  .faq[open] summary .plus{transform:rotate(45deg);}
  .faq .fa{padding:0 4px 22px; color:var(--muted); font-size:15px; line-height:1.62; max-width:660px;}
  /* words */
  .words .wgrid{display:grid; grid-template-columns:1fr; gap:26px; margin-top:44px;}
  @media(min-width:760px){ .words .wgrid{grid-template-columns:repeat(3,1fr);} }
  .wq{border:1px solid var(--line); border-radius:6px; padding:32px 28px; background:rgba(20,18,26,.5); display:flex; flex-direction:column;}
  .wq p{font-family:"Fraunces",serif; font-style:italic; font-weight:300; font-size:19px; line-height:1.55; color:var(--cream); margin-bottom:auto;}
  .wq cite{display:block; margin-top:22px; font-style:normal; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold);}

  /* cinematic film grain, site-wide */
  .grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; 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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  /* hero entrance, staggered */
  @keyframes riseIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
  .hero .kick{animation:riseIn .9s .10s both cubic-bezier(.2,.7,.2,1);}
  .hero h1{animation:riseIn 1.1s .25s both cubic-bezier(.2,.7,.2,1);}
  .hero .lead{animation:riseIn 1s .45s both cubic-bezier(.2,.7,.2,1);}
  .hero .promise{margin-top:12px; font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:clamp(15px,2.1vw,20px); animation:riseIn 1s .58s both cubic-bezier(.2,.7,.2,1);}
  .hero .herocta{animation:riseIn 1s .65s both cubic-bezier(.2,.7,.2,1);}
  /* hero call to action */
  .herocta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
  .btn-g{display:inline-block; padding:14px 26px; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; border-radius:2px; font-weight:600; background:var(--gold) var(--gold-tex) center/cover; background-blend-mode:overlay; color:var(--bg); transition:.3s;}
  .btn-g:hover{filter:brightness(1.09);}
  .btn-o{display:inline-block; padding:14px 26px; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; border-radius:2px; border:1px solid var(--line); color:var(--cream); transition:.3s;}
  .btn-o:hover{border-color:var(--gold); color:var(--gold-hi);}
  /* per-room commission links (income by design) */
  .roomcta{display:inline-block; margin-top:34px; font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:18px; border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .3s, border-color .3s;}
  .roomcta:hover{color:var(--gold-hi); border-color:var(--gold);}
  /* micro-polish, life on hover */
  .offers li{transition:padding-left .3s ease, border-color .3s;}
  .offers li:hover{padding-left:10px; border-color:var(--gold-deep);}
  .videowrap{transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;}
  .videowrap:hover{transform:translateY(-4px); box-shadow:0 42px 92px rgba(0,0,0,.66);}
  .wq{transition:border-color .4s, transform .4s;}
  .wq:hover{border-color:var(--gold-deep); transform:translateY(-3px);}

  /* ken burns hero */
  .kb{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bg);}
  .kb .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:transform,opacity; animation:kb 26s infinite ease-in-out;}
  .kb .slide:nth-child(1){animation-delay:0s; transform-origin:35% 40%;}
  .kb .slide:nth-child(2){animation-delay:6.5s; transform-origin:65% 55%;}
  .kb .slide:nth-child(3){animation-delay:13s; transform-origin:45% 62%;}
  .kb .slide:nth-child(4){animation-delay:19.5s; transform-origin:58% 38%;}
  @keyframes kb{0%{opacity:0; transform:scale(1.04);} 3%{opacity:1;} 22%{opacity:1;} 27%{opacity:0; transform:scale(1.17);} 100%{opacity:0; transform:scale(1.17);}}
  /* phones crop the hero hard (a 0.46 screen vs 1.4-1.5 frames keeps only the middle ~31%),
     so point each slide at its actual subject instead of assuming dead centre. */
  @media(max-width:760px){
    .kb .slide{background-position:50% 45%;}
    .kb .slide:nth-child(1){background-position:44% 42%; transform-origin:44% 42%;}
    .kb .slide:nth-child(2){background-position:48% 48%; transform-origin:48% 48%;}
    .kb .slide:nth-child(3){background-position:70% 38%; transform-origin:70% 38%;}
    .kb .slide:nth-child(4){background-position:50% 45%; transform-origin:50% 45%;}
  }

  .hero .inner{text-shadow:0 2px 34px rgba(0,0,0,.55);}
  @media(prefers-reduced-motion:reduce){ .kb .slide{animation:kbfade 26s infinite; transform:none!important;} @keyframes kbfade{0%{opacity:0}3%{opacity:1}22%{opacity:1}27%{opacity:0}100%{opacity:0}} }

  @keyframes bspin{to{transform:rotate(360deg);}}

  /* nav b.spoke mark */
  nav .brand{display:inline-flex; align-items:baseline; gap:0; font-size:21px; letter-spacing:0;}
  nav .brand .lg-b{color:var(--gold);}
  nav .brand .lg-o{width:.62em; height:.62em; align-self:baseline; position:relative; top:.02em; flex:none;}
  nav .brand .lg-o .sp{stroke:var(--gold); stroke-width:8; stroke-linecap:round; transform-origin:50px 50px; animation:navspin 6s linear infinite;}
  nav .brand:hover .lg-o .sp{animation-duration:1.6s;}
  @keyframes navspin{to{transform:rotate(360deg);}}
  .wheelrule{display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,22px); padding:clamp(14px,2vw,26px) clamp(22px,5vw,90px);}
  .wheelrule::before,.wheelrule::after{content:""; flex:1; height:1px; max-width:520px;}
  .wheelrule::before{background:linear-gradient(90deg, rgba(232,195,107,0), rgba(232,195,107,.3));}
  .wheelrule::after{background:linear-gradient(90deg, rgba(232,195,107,.3), rgba(232,195,107,0));}
  .wheelrule svg{width:50px; height:50px; color:var(--gold-deep);}
  .wheelrule .wr-sp{transform-origin:50px 50px; animation:navspin 5.5s linear infinite;}
  @media(prefers-reduced-motion:reduce){ nav .brand .lg-o .sp, .wheelrule .wr-sp{animation:none;} }
  /* opening intro: logotype spins center, then flies to the nav corner */
  .intro{position:fixed; inset:0; z-index:400; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .6s ease;}
  .intro.gone{opacity:0; pointer-events:none;}
  .intro .ilogo{font-family:"Fraunces",serif; font-weight:600; color:var(--cream); display:inline-flex; align-items:baseline; letter-spacing:1px; font-size:clamp(48px,12vw,128px); transform-origin:left top; transition:transform 1s cubic-bezier(.6,0,.2,1); will-change:transform;}
  .intro .ilogo .lg-b{color:var(--gold);}
  .intro .ilogo .lg-o{width:.62em; height:.62em; align-self:baseline; position:relative; top:.02em; flex:none;}
  .intro .ilogo .lg-o .sp{stroke:var(--gold); stroke-width:8; stroke-linecap:round; transform-origin:50px 50px; animation:navspin 2.4s linear infinite;}
  @media(prefers-reduced-motion:reduce){ .intro{display:none;} }
  /* film per-clip description */
  .vdesc{color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:6px; max-width:46ch;}
  /* build examples */
  .examples{display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px; max-width:760px;}
  @media(min-width:640px){.examples{grid-template-columns:1fr 1fr;}}
  .exa{display:block; border:1px solid var(--line); border-radius:6px; padding:18px 20px; transition:border-color .3s, transform .3s, background .3s;}
  .exa:hover{border-color:var(--gold-deep); transform:translateY(-3px); background:rgba(20,18,26,.5);}
  .exa .ex-t{font-family:"Fraunces",serif; font-size:19px; color:var(--cream);}
  .exa .ex-d{color:var(--muted); font-size:13.5px; margin-top:4px; line-height:1.5;}
  .exa .ex-u{color:var(--gold); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-top:10px; display:inline-block;}
  /* words reading overlay */
  .wq{cursor:pointer;}
  .wq .wmore{margin-top:16px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); transition:color .3s;}
  .wq:hover .wmore{color:var(--gold);}
  .reader{position:fixed; inset:0; z-index:120; background:rgba(6,5,8,.94); backdrop-filter:blur(10px); display:none; padding:6vh 1.2rem; overflow-y:auto;}
  .reader.on{display:block;}
  .reader .rd{max-width:680px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(2rem,5vw,3.4rem); box-shadow:0 40px 100px rgba(0,0,0,.7);}
  .reader .rk{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:11px; margin-bottom:1rem;}
  .reader h3{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(26px,4vw,40px); color:var(--cream); margin-bottom:1.6rem; line-height:1.06;}
  .reader .rbody{font-family:"Fraunces",serif; font-weight:300; font-size:18px; line-height:1.75; color:var(--cream); white-space:pre-line;}
  .reader .rx{position:fixed; top:2.4vh; right:3.4vw; font-size:2.2rem; color:var(--muted); cursor:pointer; z-index:2; line-height:1;}
  .reader .rx:hover{color:var(--gold);}

  /* deposit */
  .deposit{margin-top:28px;}
  .dep-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px;}
  .depnote{color:var(--gold); font-family:"Fraunces",serif; font-style:italic; font-size:15px; margin-top:18px;}

  /* booking machine */
  .bkg{position:fixed; inset:0; z-index:160; background:rgba(6,5,8,.94); backdrop-filter:blur(10px); display:none; padding:5vh 1.2rem; overflow-y:auto;}
  .bkg.on{display:block;}
  .bkg .rx{position:fixed; top:2.4vh; right:3.4vw; font-size:2.2rem; color:var(--muted); cursor:pointer; z-index:2; line-height:1;}
  .bkg .rx:hover{color:var(--gold);}
  .bkform{max-width:520px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(1.8rem,4vw,2.8rem); box-shadow:0 40px 100px rgba(0,0,0,.7);}
  .bkform .rk{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:11px; margin-bottom:.7rem;}
  .bkform h3{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(24px,4vw,34px); color:var(--cream); margin-bottom:.6rem; line-height:1.06;}
  .bksub{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:1.4rem;}
  .bkform label{display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:1rem;}
  .bkform input, .bkform textarea{display:block; width:100%; margin-top:6px; background:#0e0d11; border:1px solid var(--line); color:var(--cream); padding:.75rem .9rem; border-radius:4px; font-family:"Inter",system-ui,sans-serif; font-size:15px; letter-spacing:0; text-transform:none;}
  .bkform input:focus, .bkform textarea:focus{outline:none; border-color:var(--gold);}
  .bkform .btn-g{width:100%; margin-top:6px; border:0; cursor:pointer; text-align:center;}
  .bkmsg{color:#e0a06a; font-size:13px; margin-top:12px; min-height:1rem; text-align:center;}
  .bkdone{text-align:center;}

  /* wheel architecture: rim dividers */
  .rim{text-align:center; padding:clamp(64px,10vw,120px) 24px clamp(10px,3vw,30px);}
  .rim .rk{font-family:"Fraunces",serif; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); font-size:12px; margin-bottom:16px;}
  .rim h2{font-family:"Fraunces",serif; font-weight:400; font-size:clamp(40px,8vw,90px); line-height:1; letter-spacing:-2px; color:var(--cream);}
  .rim p{color:var(--muted); max-width:600px; margin:18px auto 0; line-height:1.62; font-weight:300;}
  .rim .sliver{max-width:120px; margin:30px auto 0;}
  /* the two doors */
  .doors{display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px;}
  @media(min-width:760px){.doors{grid-template-columns:1fr 1fr;}}
  .door{display:block; border:1px solid var(--line); border-radius:8px; padding:clamp(1.8rem,4vw,2.6rem); background:rgba(20,18,26,.4); transition:border-color .3s, transform .3s, background .3s;}
  .door:hover{border-color:var(--gold-deep); transform:translateY(-4px); background:rgba(22,19,28,.6);}
  .door .dk{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:11px; margin-bottom:.8rem;}
  .door h3{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(26px,4vw,36px); color:var(--cream); line-height:1.05; margin-bottom:.8rem;}
  .door>p{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:1.2rem;}
  .door ul{list-style:none; margin:0;}
  .door li{color:var(--cream); font-size:14px; padding:8px 0; border-bottom:1px solid rgba(232,195,107,.12);}
  .door .dgo{margin-top:1.3rem; font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:15px;}
  /* care plan */
  .careplan{border:1px solid var(--gold-deep); border-radius:10px; padding:clamp(2rem,5vw,3rem); background:linear-gradient(160deg, rgba(232,195,107,.07), rgba(20,18,26,.5)); max-width:840px;}
  .careplan .ck{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:11px; margin-bottom:.8rem;}
  .careplan h3{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(26px,4vw,40px); color:var(--cream); margin-bottom:1rem; line-height:1.06;}
  .careplan p{color:var(--muted); line-height:1.7; max-width:640px;}
  .careplan .btn-g{display:inline-block;}

  /* hamburger + drawer */
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:34px; background:none; border:0; cursor:pointer; padding:0;}
  .burger span{display:block; height:2px; width:28px; margin-left:auto; background:var(--gold); border-radius:2px; transition:.3s;}
  .burger:hover span{width:28px;}
  .drawer-scrim{position:fixed; inset:0; z-index:135; background:rgba(6,5,8,.6); opacity:0; visibility:hidden; transition:.4s;}
  .drawer-scrim.open{opacity:1; visibility:visible;}
  .drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:140; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .45s cubic-bezier(.4,0,.2,1); overflow-y:auto; padding:26px 26px 46px; box-shadow:-30px 0 80px rgba(0,0,0,.5);}
  .drawer.open{transform:none;}
  .drawer .dx{position:absolute; top:18px; right:22px; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1;}
  .drawer .dx:hover{color:var(--gold);}
  /* the bare nav{position:fixed...} rule also hits this nav: pin it back into the drawer flow */
  .drawer .dlinks{position:static; z-index:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; margin:44px 0 30px;}
  .drawer .dlinks a{font-family:"Fraunces",serif; font-size:23px; color:var(--cream); padding:10px 0; border-bottom:1px solid rgba(232,195,107,.1); transition:color .3s;}
  .drawer .dlinks a:hover{color:var(--gold);}
  .cal .ck{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:11px; margin-bottom:14px;}
  .cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
  .cal-head span{font-family:"Fraunces",serif; font-size:18px; color:var(--cream);}
  .cal-head button{background:none; border:1px solid var(--line); color:var(--gold); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px;}
  .cal-head button:hover{border-color:var(--gold);}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
  .cal-grid .wd{text-align:center; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--faint); padding-bottom:6px;}
  .cal-grid .day{aspect-ratio:1; display:grid; place-items:center; font-size:13px; color:var(--muted); border-radius:6px;}
  .cal-grid .day.empty{visibility:hidden;}
  .cal-grid .day.past{opacity:.28;}
  .cal-grid .day.open{background:var(--gold) var(--gold-tex) center/cover; background-blend-mode:overlay; color:var(--bg); font-weight:700; cursor:pointer; transition:.2s;}
  .cal-grid .day.open:hover{filter:brightness(1.1); transform:scale(1.07);}
  .cal-light{margin-top:14px; border-top:1px solid var(--line); padding-top:12px;}
  .cal-light .clk{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:12px; letter-spacing:.05em; margin-bottom:9px;}
  .cal-light ul{list-style:none; margin:0; padding:0;}
  .cal-light li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px; color:var(--muted); padding:6px 0; border-bottom:1px solid rgba(232,195,107,.08);}
  .cal-light li:last-child{border-bottom:0;}
  .cal-light li b{color:var(--cream); font-weight:400; white-space:nowrap;}
  .cal-light li span{text-align:right; font-style:italic; font-family:"Fraunces",serif; font-size:12.5px;}
  .cal-say{margin-top:12px; font-size:11.5px; line-height:1.55; color:var(--muted); font-style:italic; font-family:"Fraunces",serif;}
  .cal-say b{color:var(--gold); font-style:normal; font-weight:400;}
  .cal-note{margin-top:14px; font-size:12px; color:var(--muted); line-height:1.55;}
  .cal-note b{color:var(--gold);}
  /* lowcountry spots */
  .morelead{margin-top:46px !important;}
  .spots{display:grid; grid-template-columns:1fr; gap:14px; margin-top:42px;}
  @media(min-width:680px){.spots{grid-template-columns:1fr 1fr;}}
  .spot{border:1px solid var(--line); border-radius:6px; padding:20px 22px; transition:border-color .3s, transform .3s;}
  .spot:hover{border-color:var(--gold-deep); transform:translateY(-3px);}
  .spot .st{font-family:"Fraunces",serif; font-size:21px; color:var(--cream); margin-bottom:5px;}
  .spot .sd{color:var(--muted); font-size:15px; line-height:1.55;}
  .spot .sl{display:block; margin-top:9px; color:var(--gold); font-size:12.5px; font-style:italic; font-family:"Fraunces",serif;}
  /* the picture book */
  .story{padding:clamp(24px,4vw,44px) 0 clamp(6px,1vw,14px);}
  .book{padding:clamp(4px,0.8vw,8px) 0 0;}
  /* the story: this is a visual site. pictures win, gaps lose. */
  .s-open{font-family:"Fraunces",serif; font-weight:300; font-size:clamp(30px,5.2vw,58px); line-height:1.06; color:var(--cream); letter-spacing:-.6px; margin-bottom:clamp(10px,1.6vw,18px);}
  .s-open em{font-style:italic; color:var(--gold);}
  .s-para{font-family:"Fraunces",serif; font-weight:300; font-size:clamp(19px,2.6vw,30px); line-height:1.36; letter-spacing:-.3px; color:var(--cream); margin:0 auto 6px; max-width:1180px; padding:clamp(6px,1vw,12px) 24px 0;}
  .s-para b{color:var(--gold); font-weight:400;}
  .s-pull{font-family:"Fraunces",serif; font-style:italic; font-weight:300; color:var(--gold); font-size:clamp(24px,3.8vw,42px); line-height:1.2; margin:clamp(8px,1.2vw,16px) 0; max-width:none; text-align:center; letter-spacing:-.4px; padding:clamp(30px,4.4vw,56px) max(26px, calc((100% - 1000px)/2)); border-top:1px solid rgba(232,195,107,.22); border-bottom:1px solid rgba(232,195,107,.22); background:rgba(232,195,107,.035);}
  /* the pause of reality: a question you already know the answer to, held on black, no picture */
  .s-pause{max-width:none; margin:clamp(8px,1.2vw,16px) 0; text-align:center; padding:clamp(30px,4.4vw,56px) max(26px, calc((100% - 1040px)/2)); border-top:1px solid rgba(232,195,107,.22); border-bottom:1px solid rgba(232,195,107,.22); background:rgba(232,195,107,.035);}
  .s-pause .lead{font-family:"Fraunces",serif; font-weight:300; font-style:normal; color:var(--muted); font-size:clamp(17px,2.1vw,23px); line-height:1.5; margin:0 0 clamp(18px,2.6vw,30px);}
  .s-pause .lead b{color:var(--cream); font-weight:400;}
  .s-pause .q{font-family:"Fraunces",serif; font-style:italic; font-weight:300; color:var(--gold); font-size:clamp(21px,3.1vw,35px); line-height:1.3; letter-spacing:-.3px; margin:0 0 clamp(10px,1.4vw,16px);}
  .s-pause .q:last-child{margin-bottom:0;}
  /* a cut section of a landscape, used as a thread of colour. the whole frame lives in Wall Art. */
  .s-strip{height:clamp(150px,17vw,252px); overflow:hidden; margin:clamp(4px,0.6vw,8px) 0;}
  .s-strip img{width:100%; height:100%; object-fit:cover; display:block;}
  .s-full{margin:clamp(4px,0.6vw,8px) 0;}
  .s-full img{width:100%; display:block;}
  .s-cap{font-family:"Fraunces",serif; font-style:italic; color:var(--muted); font-size:13px; margin:4px auto 0; padding:0 26px; max-width:960px;}
  .s-side{max-width:1640px; margin:clamp(4px,0.6vw,8px) auto; padding:0 6px; display:grid; grid-template-columns:1fr; gap:clamp(10px,1.4vw,20px); align-items:center;}
  @media(min-width:840px){ .s-side{grid-template-columns:1.55fr 1fr;} .s-side.flip .s-im{order:2;} }
  .s-im img{width:100%; display:block; border-radius:3px;}
  .s-tx{font-size:clamp(16px,2vw,20px); line-height:1.6; color:var(--muted); padding:0 14px;}
  .s-tx b{color:var(--cream); font-weight:400;}
  .s-tx .k{display:block; font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:15px; letter-spacing:.04em; margin-bottom:7px;}
  .s-pair{max-width:1640px; margin:clamp(4px,0.6vw,8px) auto; padding:0 6px; display:grid; grid-template-columns:1fr; gap:6px;}
  @media(min-width:700px){ .s-pair{grid-template-columns:1fr 1fr;} }
  .s-pair img{width:100%; display:block; border-radius:3px;}
  .s-plate{max-width:1320px; margin:clamp(4px,0.6vw,8px) auto; padding:0 6px;}
  .s-plate img{width:100%; display:block; border-radius:3px;}
  .s-over{position:relative; margin:clamp(4px,0.6vw,8px) 0; min-height:clamp(420px,66vh,740px); display:grid; overflow:hidden;}
  .s-over img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.62) contrast(1.22) saturate(.95);}
  .s-over.whole{min-height:0; max-width:980px; margin:clamp(4px,0.6vw,8px) auto; display:block; position:relative; overflow:visible;}
  .s-over.whole img{position:static; width:100%; height:auto; object-fit:unset; object-position:unset; filter:brightness(.78) contrast(1.12) saturate(1); border-radius:3px;}
  .s-over.whole .s-ot{position:absolute; top:0; left:0; right:0; bottom:auto; align-items:flex-start; padding:11.2% clamp(16px,2.4vw,34px) clamp(18px,3vw,40px); background:linear-gradient(180deg, rgba(6,5,8,.55) 0%, rgba(6,5,8,.84) 32%, rgba(6,5,8,.7) 60%, rgba(6,5,8,.22) 85%, rgba(6,5,8,0) 100%); border-radius:3px 3px 0 0;}
  .s-over.whole p{line-height:1.2; margin-bottom:clamp(6px,0.9vw,11px);}
  .s-over.whole .s-ow{max-width:100%;}
  .s-over.tall{min-height:clamp(560px,88vh,1000px);}
  .s-over.top img{object-position:top;}
  .s-over.top .s-ot{align-items:flex-start; background:linear-gradient(180deg, rgba(6,5,8,.9) 0%, rgba(6,5,8,.66) 40%, rgba(6,5,8,.2) 74%, rgba(6,5,8,.05) 100%);}
  .s-over.top .s-ow{margin-top:clamp(4px,1vw,14px);}
  .s-over .s-ot{position:relative; display:flex; align-items:center; justify-content:center; padding:clamp(26px,6vw,80px); background:radial-gradient(ellipse at center, rgba(6,5,8,.86) 0%, rgba(6,5,8,.52) 62%, rgba(6,5,8,.34) 100%);}
  .s-over .s-ow{max-width:1020px; text-align:center;}
  .s-over .s-oh{font-family:"Fraunces",serif; font-weight:300; font-size:clamp(29px,4.8vw,56px); line-height:1.04; letter-spacing:-.7px; color:var(--cream); text-shadow:0 2px 36px rgba(0,0,0,.95); margin:0 0 clamp(14px,2vw,22px);}
  .s-over .s-oh em{font-style:italic; color:var(--gold);}
  .s-over p{font-family:"Fraunces",serif; font-weight:300; font-size:clamp(19px,2.9vw,34px); line-height:1.3; letter-spacing:-.4px; color:var(--cream); text-shadow:0 2px 34px rgba(0,0,0,.9); margin:0 0 14px;}
  .s-over p:last-child{margin-bottom:0;}
  .s-over b{color:var(--gold-hi); font-weight:400;}
  .s-r{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
  .s-r.in{opacity:1; transform:none;}
  .chapter{max-width:820px; margin:clamp(46px,8vw,88px) auto clamp(16px,3vw,28px); text-align:center; padding:0 22px;
    opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s ease;}
  .chapter:first-child{margin-top:0;}
  .chapter.in{opacity:1; transform:none;}
  .chapter .cn{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:9px;}
  .chapter .cl{font-family:"Fraunces",serif; font-weight:300; color:var(--cream); font-size:clamp(21px,3.1vw,31px); line-height:1.32; letter-spacing:-.3px;}
  .leaf{position:relative; max-width:820px; margin:0 auto clamp(20px,4vw,44px); border-radius:6px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.5); opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s ease;}
  .leaf.in{opacity:1; transform:none;}
  .leaf img{width:100%; display:block;}
  .leaf .ln{position:absolute; left:0; right:0; bottom:0; margin:0; padding:38px 26px 20px; background:linear-gradient(to top, rgba(6,5,8,.86), rgba(6,5,8,0)); font-family:"Fraunces",serif; font-style:italic; font-weight:300; color:var(--cream); font-size:clamp(17px,2.3vw,23px); letter-spacing:.2px;}
  /* the wall (gallery) as a hamburger-opened overlay */
  .wallview{position:fixed; inset:0; z-index:145; background:var(--bg); overflow-y:auto; display:none; padding:64px 0 50px;}
  .wallview.open{display:block;}
  .wvx{position:fixed; top:18px; right:24px; z-index:3; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1;}
  .wvx:hover{color:var(--gold);}

  /* ===== multi-page rebuild: collapsible drawer groups ===== */
  .drawer .dgroup{display:flex; flex-direction:column;}
  .drawer .dgh{font-family:"Fraunces",serif; font-size:23px; color:var(--cream); background:none; border:none; border-bottom:1px solid rgba(232,195,107,.1); padding:10px 0; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:color .3s;}
  .drawer .dgh:hover{color:var(--gold);}
  .drawer .dgh::after{content:"+"; color:var(--gold); font-size:20px; font-family:Inter,sans-serif; transition:transform .3s;}
  .drawer .dgroup.open .dgh::after{content:"\2013";}
  .drawer .dgc{max-height:0; overflow:hidden; transition:max-height .45s ease; display:flex; flex-direction:column;}
  .drawer .dgroup.open .dgc{max-height:460px;}
  .drawer .dgc a{font-family:"Fraunces",serif; font-size:17px; color:var(--muted); padding:8px 0 8px 20px; border-bottom:1px solid rgba(232,195,107,.06); transition:color .3s;}
  .drawer .dgc a:hover{color:var(--gold);}
  .drawer .dlinks a.here, .drawer .dgc a.here{color:var(--gold);}

  /* ===== compact page header for sub-pages (the hero is home only) ===== */
  .phead{padding:130px 0 46px; text-align:center; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg2),var(--bg));}
  .phead .kick{font-family:"Fraunces",serif; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:12px; margin-bottom:14px;}
  .phead h1{font-size:clamp(36px,6.5vw,64px); line-height:1.02;}
  .phead h1 em{font-style:italic;}
  .phead .lead{color:var(--muted); margin-top:16px; font-size:18px; max-width:640px; margin-left:auto; margin-right:auto;}

  /* ===== clothing catalog, DB-driven ===== */
  .cloth-grid{display:grid; grid-template-columns:1fr; gap:14px; margin:clamp(20px,3vw,34px) 0;}
  @media(min-width:640px){ .cloth-grid{grid-template-columns:1fr 1fr;} }
  .cloth-card{display:flex; gap:16px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:8px; background:var(--panel);}
  .cloth-card .cc-img{flex:0 0 88px; height:88px; border-radius:6px; overflow:hidden; background:var(--bg2);}
  .cloth-card .cc-img img{width:100%; height:100%; object-fit:cover;}
  .cloth-card .cc-body{flex:1; min-width:0;}
  .cloth-card .cc-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
  .cloth-card .cc-name{font-family:"Fraunces",serif; font-size:19px; color:var(--cream);}
  .cloth-card .cc-price{font-family:"Fraunces",serif; color:var(--gold); font-size:16px; white-space:nowrap;}
  .cloth-card .cc-desc{color:var(--muted); font-size:14px; margin-top:5px;}

  /* ===== /apps/ interactive sandbox ===== */
  .sandbox .sb-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:clamp(22px,3vw,36px);}
  @media(min-width:720px){ .sandbox .sb-grid{grid-template-columns:1fr 1fr;} .sandbox .sb-wide{grid-column:1/-1;} }
  .sb-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; position:relative; overflow:hidden;}
  .sb-k{font-family:"Fraunces",serif; font-size:19px; color:var(--cream); margin-bottom:5px;}
  .sb-d{color:var(--muted); font-size:13.5px; margin-bottom:15px;}
  .sb-in{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--cream); border-radius:7px; padding:10px 12px; margin-bottom:9px; font-family:inherit; font-size:14px;}
  .sb-in:focus{outline:none; border-color:var(--gold-deep);}
  .sb-btn{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:#241d0f; border:none; border-radius:7px; padding:11px 20px; font-family:"Fraunces",serif; font-size:14px; letter-spacing:.02em; cursor:pointer; font-weight:600;}
  .sb-btn.sm{padding:8px 16px; font-size:13px; margin-top:10px;}
  .sb-btn:hover{filter:brightness(1.06);}
  .sb-note{color:var(--gold); font-size:13px; margin-top:8px; min-height:1em;}
  /* cart */
  .sb-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid rgba(232,195,107,.08);}
  .sb-row .n{color:var(--cream); font-size:14px;} .sb-row .p{color:var(--muted); font-size:13px; margin-left:auto; margin-right:12px;}
  .sb-qty{display:flex; align-items:center; gap:9px;}
  .sb-qty button{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--gold); cursor:pointer; font-size:15px; line-height:1;}
  .sb-qty button:hover{border-color:var(--gold);}
  .sb-qty span{color:var(--cream); min-width:16px; text-align:center; font-size:14px;}
  .sb-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-family:"Fraunces",serif; color:var(--cream); font-size:17px;}
  .sb-total span{color:var(--gold); font-size:20px;}
  /* accordion */
  .sb-acc .q{border-bottom:1px solid rgba(232,195,107,.1);}
  .sb-acc .q button{width:100%; text-align:left; background:none; border:none; color:var(--cream); font-family:inherit; font-size:14.5px; padding:12px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
  .sb-acc .q button::after{content:"+"; color:var(--gold);} .sb-acc .q.open button::after{content:"\2013";}
  .sb-acc .a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--muted); font-size:13.5px;}
  .sb-acc .q.open .a{max-height:120px; padding-bottom:12px;}
  /* hologram */
  .sb-holo{aspect-ratio:16/10; border-radius:12px; background:linear-gradient(135deg,#1a1622,#0e0b14); border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .1s ease; transform-style:preserve-3d; cursor:pointer;}
  .sb-holo-in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
  .sb-holo-t{font-family:"Fraunces",serif; font-size:30px; color:var(--cream); letter-spacing:.04em;}
  .sb-holo .lg-b{color:var(--gold); font-family:"Fraunces",serif; font-size:34px;}
  .sb-holo-s{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);}
  .sb-shine{position:absolute; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(246,218,140,.28),transparent 70%); pointer-events:none; opacity:0; transition:opacity .2s;}
  /* flip cards */
  .sb-flips{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
  .sb-flip{aspect-ratio:3/4; perspective:800px; cursor:pointer;}
  .sb-flip-in{position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d;}
  .sb-flip.on .sb-flip-in{transform:rotateY(180deg);}
  .sb-flip-f,.sb-flip-b{position:absolute; inset:0; backface-visibility:hidden; border-radius:9px; border:1px solid var(--line); padding:14px; display:flex; flex-direction:column; justify-content:flex-end;}
  .sb-flip-f{background:linear-gradient(180deg,var(--bg2),var(--panel));}
  .sb-flip-b{background:var(--bg2); transform:rotateY(180deg); justify-content:center;}
  .sb-flip .ft{font-family:"Fraunces",serif; color:var(--cream); font-size:16px;}
  .sb-flip .fp{color:var(--gold); font-size:13px; margin-top:3px;}
  .sb-flip .fb{color:var(--muted); font-size:12.5px;}
  .sb-flip .fh{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px;}
  /* reactive */
  .sb-react{height:150px; border-radius:10px; border:1px solid var(--line); background:var(--bg2); position:relative; overflow:hidden; display:grid; place-items:center;}
  .sb-react span{color:var(--muted); font-size:14px; z-index:1;}
  .sb-react::before{content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(232,195,107,.22),transparent 65%); left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%); transition:left .12s,top .12s;}
  /* light/dark toggle */
  .sb-mode{border-radius:10px; padding:18px; background:var(--bg2); transition:.4s;}
  .sb-mode.light{background:#f2ebdd;} .sb-mode.light .sb-mode-label,.sb-mode.light .sb-mode-body{color:#2a2416;}
  .sb-mode-row{display:flex; justify-content:space-between; align-items:center;}
  .sb-mode-label{font-family:"Fraunces",serif; color:var(--cream); font-size:15px;}
  .sb-mode-body{color:var(--muted); font-size:13px; margin-top:8px;}
  .sb-toggle{width:46px; height:26px; border-radius:13px; border:1px solid var(--line); background:var(--panel); position:relative; cursor:pointer;}
  .sb-toggle span{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--gold); transition:.3s;}
  .sb-mode.light .sb-toggle span{left:22px;} .sb-mode.light .sb-toggle{background:#d9c7a3;}

  /* ===== /apps/ monthly pricing block ===== */
  .apps-price{margin-top:clamp(30px,5vw,54px); padding:clamp(26px,4vw,40px); border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,var(--panel),var(--bg2)); text-align:center;}
  .apps-price h3{font-size:clamp(24px,3.6vw,38px); line-height:1.1; margin:6px 0 4px;}
  .apps-price .sub{max-width:560px; margin:12px auto 0;}
  .apps-cost-row{display:flex; gap:clamp(20px,5vw,60px); justify-content:center; margin:clamp(22px,3vw,32px) 0 8px; flex-wrap:wrap;}
  .app-cost{display:flex; flex-direction:column; align-items:center;}
  .app-cost .ac-n{font-family:"Fraunces",serif; font-size:clamp(38px,6vw,58px); color:var(--gold); line-height:1;}
  .app-cost .ac-n em{font-style:normal; font-size:.4em; color:var(--muted);}
  .app-cost .ac-l{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:8px;}
  .apps-price .sb-btn{margin-top:6px; padding:13px 30px;}

  .cloth-card .cc-buy{display:inline-block; margin-top:10px; background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:#241d0f; text-decoration:none; font-family:"Fraunces",serif; font-size:13px; font-weight:600; padding:8px 16px; border-radius:6px;}
  .cloth-card .cc-buy:hover{filter:brightness(1.06);}