/* ================= THE CIGAR LOUNGE — /experiences/cigar-lounge.html =================
   A night page (table.css turns the tokens round on body.tb-page): the box on
   the lamp's table, two doors, the School on cream paper and the Humidor in
   the dark. Loaded after table.css and carta.css (Your Table, the toast). */

.cg-page{--cedar:#a8703d;--cedar-d:#6e4524;--ember:#ff8a2a}
.cg-k{font:500 11px/1.5 var(--sans);letter-spacing:.34em;color:var(--gold)}
.cg-k span{color:var(--ink-45);letter-spacing:.2em}
.cg-h{font:500 clamp(34px,5vw,68px)/1.06 var(--serif);color:var(--light)}
.cg-h em{font-style:italic;color:var(--gold)}
.cg-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- the box ---------------- */
.cg-box{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 70% 30%,#3a2213 0%,#1a0f08 55%,#0d0704 100%)}
.cg-box__light{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--lamp,.6);
  background:radial-gradient(42% 50% at 66% 24%,rgba(255,196,120,.32),transparent 70%),radial-gradient(30% 30% at 20% 90%,rgba(110,34,25,.25),transparent 70%)}
.cg-box__stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(20px,4vw,60px);
  height:100%;padding:calc(var(--navh) + 10px) var(--pad) 30px}
.cg-box__words{position:relative;z-index:2;max-width:460px;text-shadow:0 2px 18px rgba(13,7,4,.9)}
.cg-box__title{margin:18px 0 26px;font:500 clamp(30px,3.6vw,52px)/1.1 var(--serif);color:var(--light)}
.cg-box__title em{font-style:italic;color:var(--gold)}
.cg-box__lines{display:grid;list-style:none;min-height:5.6em}
.cg-box__lines li{grid-area:1/1;font:400 clamp(18px,1.7vw,23px)/1.5 var(--sans);color:var(--ink-70);
  opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cg-box__lines li.is-on{opacity:1;transform:none}

.cg-box__scene{position:relative;height:100%;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 30%}
.cg-box__box{--w:min(660px,50vw,86vh);--d:calc(var(--w) * .16);position:relative;width:var(--w);aspect-ratio:1600/1073;
  transform-style:preserve-3d;transform-origin:72% 50%;transform:translateY(var(--lift,6%)) rotateX(var(--tilt,54deg)) rotateZ(var(--turn,-9deg)) scale(var(--zoom,1));will-change:transform}
.cg-box__floor,.cg-box__floor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-box__floor{filter:brightness(var(--inside,.55))}
.cg-box__wall{position:absolute;display:block;
  background:repeating-linear-gradient(90deg,rgba(255,235,200,.05) 0 2px,transparent 2px 7px),linear-gradient(var(--cedar),var(--cedar-d))}
.cg-box__wall--front{left:0;top:100%;width:100%;height:var(--d);transform-origin:top;transform:rotateX(90deg);filter:brightness(.82)}
.cg-box__wall--back{left:0;bottom:100%;width:100%;height:var(--d);transform-origin:bottom;transform:rotateX(-90deg);filter:brightness(.6)}
.cg-box__wall--left{right:100%;top:0;width:var(--d);height:100%;transform-origin:right;transform:rotateY(90deg);filter:brightness(.7);
  background:repeating-linear-gradient(0deg,rgba(255,235,200,.05) 0 2px,transparent 2px 7px),linear-gradient(90deg,var(--cedar-d),var(--cedar))}
.cg-box__wall--right{left:100%;top:0;width:var(--d);height:100%;transform-origin:left;transform:rotateY(-90deg);filter:brightness(.95);
  background:repeating-linear-gradient(0deg,rgba(255,235,200,.05) 0 2px,transparent 2px 7px),linear-gradient(90deg,var(--cedar),var(--cedar-d))}
/* the lid sits on the walls and turns on its back edge */
.cg-box__lid{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(var(--d)) rotateX(var(--open,0deg))}
.cg-box__lidTop,.cg-box__lidIn{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px}
.cg-box__lidTop img{width:100%;height:100%;object-fit:cover}
.cg-box__lidTop{box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.cg-box__lidIn{transform:rotateX(180deg);
  background:repeating-linear-gradient(90deg,rgba(255,235,200,.06) 0 2px,transparent 2px 9px),linear-gradient(#c08a52,#98653a)}
.cg-box__shadow{position:absolute;left:50%;top:56%;width:min(700px,56vw);height:28%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(18px);pointer-events:none}
.cg-box__smoke{position:absolute;inset:-10% 0 0;width:100%;height:110%;pointer-events:none;mix-blend-mode:screen}

@media (max-width:880px){
  .cg-box__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;padding-top:calc(var(--navh) + 4px)}
  .cg-box__title{margin:10px 0 12px;font-size:clamp(26px,7.4vw,36px)}
  .cg-box__lines{min-height:4.6em}
  .cg-box__lines li{font-size:17px}
  .cg-box__box{--w:min(86vw,520px);transform-origin:50% 50%}
  .cg-box__shadow{width:90vw}
}

/* ---------------- the fork: two doors ---------------- */
.cg-fork{padding:clamp(80px,12vh,140px) var(--pad);text-align:center}
.cg-fork__doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4vw,64px);max-width:1040px;margin:clamp(40px,6vh,70px) auto 0}
.cg-door{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(18px,3vw,34px) clamp(14px,2.6vw,30px) 30px;
  border:1px solid rgba(233,181,121,.16);border-radius:999px 999px 6px 6px;background:rgba(255,247,235,.02);transition:border-color .4s,background .4s}
.cg-door:hover{border-color:rgba(233,181,121,.55);background:rgba(233,181,121,.05)}
.cg-door__arch{width:min(300px,100%);aspect-ratio:3/4;margin-bottom:14px}
.cg-door__arch img{transition:transform 1.2s var(--ease)}
.cg-door:hover .cg-door__arch img{transform:scale(1.04)}
.cg-door__t{font:500 clamp(28px,3.2vw,42px)/1.1 var(--serif);color:var(--light)}
.cg-door__p{max-width:30ch;font:400 17px/1.5 var(--sans);color:var(--ink-70)}
.cg-door__go{margin-top:8px;font:500 11px var(--sans);letter-spacing:.3em;color:var(--gold)}
@media (max-width:640px){
  .cg-fork__doors{grid-template-columns:1fr;max-width:380px}
}

/* ---------------- the school: cream paper on the dark ---------------- */
.cg-school{--ink:#412612;--ink-70:rgba(65,38,18,.74);--ink-45:rgba(65,38,18,.5);--ink-20:rgba(65,38,18,.18);
  margin:0 clamp(0px,2vw,30px);padding:clamp(60px,9vh,110px) var(--pad);border-radius:6px;background:var(--light);color:var(--ink)}
.cg-school .cg-k{color:var(--gold-deep)}
.cg-school .cg-h{color:var(--ink)}
.cg-school .cg-h em{color:var(--gold-deep)}
.cg-school__head{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(36px,6vh,60px)}
/* the five bands: a cigar band each, gold once won */
.cg-bands{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:6px}
.cg-bands li{position:relative;display:grid;place-items:center;min-width:104px;height:34px;padding:0 14px;border-radius:3px;
  border:1px dashed rgba(65,38,18,.3);font:500 9.5px var(--sans);letter-spacing:.26em;color:var(--ink-45);transition:all .5s var(--ease)}
.cg-bands li.is-won{border:1px solid #b98a45;color:#3b2414;
  background:linear-gradient(180deg,#b98a45 0 3px,#f6dca8 3px calc(100% - 3px),#b98a45 calc(100% - 3px));box-shadow:0 6px 16px -8px rgba(150,100,40,.8)}
.cg-bands li.is-new{animation:cgWon 1s var(--ease)}
@keyframes cgWon{0%{transform:scale(.6) rotate(-6deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:none}}

.cg-school__grid{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.cg-chang .cg-chang__face{display:none}
.cg-chang{position:sticky;top:calc(var(--navh) + 72px);display:grid;gap:16px;min-width:0}
.cg-chang img{width:100%;height:auto;max-width:340px;mix-blend-mode:multiply}
.cg-chang__say{position:relative;max-width:340px;padding:18px 20px;border-radius:14px;background:#f2e4c9;
  font:400 18px/1.5 var(--sans);color:var(--ink)}
.cg-chang__say::before{content:'';position:absolute;left:46%;top:-9px;border:9px solid transparent;border-top:0;border-bottom-color:#f2e4c9}
.cg-chang__say.is-new{animation:cgSay .5s var(--ease)}
@keyframes cgSay{from{opacity:.2;transform:translateY(6px)}}

.cg-lessons{display:grid;gap:clamp(26px,4vh,40px)}
.cg-lesson{position:relative;padding:clamp(24px,3vw,38px);border:1px solid var(--ink-20);border-radius:6px;background:#fffaf1}
.cg-lesson.is-won{border-color:rgba(185,138,69,.6)}
.cg-lesson.is-won::after{content:'✦ WON';position:absolute;right:20px;top:20px;font:500 9.5px var(--sans);letter-spacing:.28em;color:var(--gold-deep)}
.cg-lesson[hidden]{display:none}
.cg-lesson__n{font:500 10px var(--sans);letter-spacing:.34em;color:var(--gold-deep);margin-bottom:8px}
.cg-lesson__t{font:500 clamp(24px,2.4vw,32px)/1.15 var(--serif);color:var(--ink);margin-bottom:10px}
.cg-lesson__t em{font-style:italic;color:var(--gold-deep)}
.cg-lesson__p{max-width:56ch;margin-bottom:22px;font:500 15.5px/1.65 var(--sans);color:var(--ink-70)}
.cg-lesson .btn{color:var(--ink);border-color:var(--ink-45)}
.cg-lesson .btn:hover{background:var(--ink);color:var(--light);border-color:var(--ink)}
.cg-lesson .btn--gold{color:#2a1a0e;border-color:var(--gold)}

/* I. the parts */
.cg-anat{position:relative;border-radius:4px;overflow:hidden}
.cg-anat img{width:100%;height:auto;mix-blend-mode:multiply}
.cg-spot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,250,241,.92);box-shadow:0 0 0 2px #b98a45,0 4px 12px rgba(65,38,18,.3)}
.cg-spot::before{content:'';position:absolute;inset:9px;border-radius:50%;background:#b98a45;animation:cgPulse 2.2s ease-in-out infinite}
.cg-spot.is-seen::before{animation:none;background:#412612}
.cg-spot span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:3px;
  background:#412612;color:var(--light);font:500 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
.cg-spot:hover span,.cg-spot:focus-visible span,.cg-spot.is-on span{opacity:1}
@keyframes cgPulse{50%{transform:scale(.6);opacity:.6}}
.cg-anat__say{min-height:3.3em;margin-top:16px;font:400 18px/1.55 var(--sans);color:var(--ink)}
.cg-anat__say b{font-style:normal;font-weight:500;color:var(--gold-deep)}

/* II. the cut */
.cg-cut{display:grid;gap:14px}
.cg-cut svg{width:100%;max-width:560px;overflow:visible}
.cg-cut__label{font:500 10px var(--sans);letter-spacing:.26em;color:var(--ink-45)}
.cg-cut__label b{color:var(--ink);letter-spacing:.1em}
.cg-cut .btn{justify-self:start}
.cg-range{-webkit-appearance:none;appearance:none;width:100%;max-width:560px;height:28px;background:transparent;cursor:pointer}
.cg-range::-webkit-slider-runnable-track{height:2px;background:currentColor;opacity:.35}
.cg-range::-moz-range-track{height:2px;background:currentColor;opacity:.35}
.cg-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--gold);border:2px solid #fffaf1;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cg-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:2px solid #fffaf1}
.cg-school .cg-range{color:var(--ink)}

/* III. the light */
.cg-light{display:flex;align-items:center;gap:clamp(20px,4vw,40px);flex-wrap:wrap}
.cg-foot{width:min(180px,42vw);filter:drop-shadow(0 8px 18px rgba(65,38,18,.3))}
.cg-foot__glow{transition:stroke .3s}
.cg-hold{touch-action:none;user-select:none;-webkit-user-select:none}
.cg-hold.is-down{transform:scale(.97)}

/* IV. the draw */
.cg-draw{display:grid;gap:18px}
.cg-ember{--e:1;position:relative;height:56px;max-width:520px;border-radius:28px;overflow:hidden;
  background:linear-gradient(90deg,#5e3a20 0 82%,#3b2414 82%)}
.cg-ember i{position:absolute;left:82%;top:0;bottom:0;width:18%;
  background:radial-gradient(60% 80% at 0% 50%,rgba(255,170,60,calc(var(--e) * 1)),rgba(255,90,20,calc(var(--e) * .8)) 45%,#2a1a0e 85%);
  box-shadow:0 0 calc(var(--e) * 30px) rgba(255,120,40,calc(var(--e) * .7))}
.cg-ember::after{content:'DRAW NOW';position:absolute;left:18px;top:50%;transform:translateY(-50%);font:500 10px var(--sans);letter-spacing:.3em;
  color:#f6dca8;opacity:0;transition:opacity .2s}
.cg-ember.is-ready::after{opacity:1}
.cg-draw__row{display:flex;align-items:center;gap:20px}
.cg-puffs{display:flex;gap:8px;list-style:none}
.cg-puffs li{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-45);transition:all .3s}
.cg-puffs li.is-on{background:var(--ember);border-color:var(--ember);box-shadow:0 0 10px rgba(255,138,42,.7)}

/* V. the quiz */
.cg-quiz{display:grid;gap:8px;margin-bottom:22px}
.cg-quiz__q{font:500 18px/1.4 var(--serif);color:var(--ink);margin-bottom:4px}
.cg-opt{padding:13px 16px;border:1px solid var(--ink-20);border-radius:6px;background:transparent;text-align:left;cursor:pointer;
  font:500 15px/1.4 var(--sans);color:var(--ink);transition:border-color .3s,background .3s}
.cg-opt:hover{border-color:var(--ink-45)}
.cg-opt.is-no{border-color:rgba(154,70,48,.5);background:rgba(154,70,48,.06);color:var(--ink-70)}
.cg-opt.is-yes{border-color:#b98a45;background:rgba(233,181,121,.2)}

/* the end: the first cigars */
.cg-first{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.cg-first .cg-card{background:#f2e4c9;border-color:transparent}
.cg-first .cg-card__t{color:var(--ink)}
.cg-first .cg-card__f b{color:#8a6430}
.cg-first .cg-plus{border-color:#8a6430;color:#8a6430}
.cg-first .cg-plus:hover,.cg-first .cg-plus.is-in{background:#8a6430;color:var(--light)}
@media (max-width:880px){
  .cg-school{margin:0;border-radius:0}
  .cg-school__grid{grid-template-columns:minmax(0,1fr)}
  .cg-lesson{padding:22px 18px}
  /* Chang rides at the top of the screen, small, beside his words */
  .cg-chang{z-index:5;top:calc(var(--navh) + 52px);grid-template-columns:68px minmax(0,1fr);align-items:center;gap:10px;margin:0 calc(var(--pad) * -1);padding:8px var(--pad);
    background:rgba(255,247,235,.96);box-shadow:0 8px 20px -14px rgba(65,38,18,.5)}
  /* on the phone only his face, close, so he is plainly the same Chang */
  .cg-chang .cg-chang__full{display:none}
  .cg-chang .cg-chang__face{display:block;width:68px;height:68px;max-width:none;border-radius:50%;border:2px solid var(--gold-deep)}
  .cg-chang__say{padding:8px 12px;border-radius:10px;font-size:15px;line-height:1.4}
  .cg-chang__say::before{left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-left:0;border-right-color:#f2e4c9}
  .cg-first{grid-template-columns:1fr}
}

/* ---------------- the humidor ---------------- */
.cg-hum{padding:clamp(80px,12vh,140px) var(--pad) clamp(60px,9vh,100px)}
.cg-hum__head{display:grid;gap:16px;margin-bottom:clamp(30px,5vh,56px)}
.cg-hum__grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.cg-ask{display:grid;gap:26px;position:sticky;top:calc(var(--navh) + 72px)}
.cg-q{border:0;display:grid;gap:12px}
.cg-q legend{margin-bottom:12px;font:500 10px var(--sans);letter-spacing:.3em;color:var(--ink-45)}
.cg-q legend b{color:var(--gold);letter-spacing:.14em;font-weight:500}
.cg-q legend span{letter-spacing:.1em}
.cg-q .cg-range{color:var(--gold)}
.cg-q__ends{display:flex;justify-content:space-between;max-width:560px;font:500 9px var(--sans);letter-spacing:.3em;color:var(--ink-45)}
.cg-chips{display:flex;flex-wrap:wrap;gap:8px}
.cg-chip{padding:9px 14px;border:1px solid var(--ink-20);border-radius:20px;background:transparent;cursor:pointer;
  font:500 13px/1.2 var(--sans);color:var(--ink);transition:border-color .3s,background .3s,color .3s}
.cg-chip:hover{border-color:var(--ink-45)}
.cg-chip[aria-pressed="true"]{border-color:var(--gold);background:rgba(233,181,121,.14);color:var(--light)}

/* the pick: one cigar laid out large */
.cg-pick{min-height:520px;padding:clamp(22px,3vw,40px);border:1px solid rgba(233,181,121,.2);border-radius:8px;
  background:radial-gradient(80% 60% at 80% 0%,rgba(233,181,121,.1),transparent 70%),var(--bg2)}
.cg-pick.is-new .cg-pick__in{animation:cgPick .7s var(--ease)}
@keyframes cgPick{from{opacity:0;transform:translateY(14px)}}
.cg-pick__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cg-pick__t{margin:10px 0 0;font:500 clamp(30px,3.6vw,50px)/1.06 var(--serif);color:var(--light)}
.cg-match{flex:none;display:grid;place-items:center;width:78px;height:78px;border:1px solid var(--gold);border-radius:50%;
  font:500 22px/1 var(--serif);color:var(--gold);text-align:center}
.cg-match small{display:block;margin-top:2px;font:500 7.5px var(--sans);letter-spacing:.24em;color:var(--ink-45)}
.cg-scale{margin:clamp(22px,4vh,36px) 0 8px}
.cg-scale svg{display:block;width:100%;height:auto;overflow:visible}
.cg-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0;padding:18px 0;border-block:1px solid var(--ink-20)}
.cg-facts div{display:grid;gap:6px}
.cg-facts span{font:500 9px var(--sans);letter-spacing:.28em;color:var(--ink-45)}
.cg-facts b{font:500 15px/1.35 var(--sans);color:var(--light)}
.cg-dots{display:flex;gap:5px}
.cg-dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--gold)}
.cg-dots i.on{background:var(--gold)}
.cg-pick__p{margin-bottom:16px;font:400 18px/1.55 var(--sans);color:var(--ink-70)}
.cg-notes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.cg-notes span{padding:5px 11px;border-radius:14px;border:1px solid var(--ink-20);font:500 11px var(--sans);letter-spacing:.08em;color:var(--ink-70)}
.cg-notes span.is-hit{border-color:var(--gold);color:var(--gold)}
.cg-pour{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;margin-bottom:24px;padding:16px 18px;border-radius:6px;background:rgba(233,181,121,.07)}
.cg-pour__k{grid-column:1/-1;font:500 9px var(--sans);letter-spacing:.3em;color:var(--gold)}
.cg-pour__t{font:500 16px/1.3 var(--sans);color:var(--light)}
.cg-pour__t small{display:block;margin-top:4px;font:400 15px/1.45 var(--sans);color:var(--ink-70)}
.cg-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cg-price{font:500 clamp(24px,2.4vw,30px)/1 var(--serif);color:var(--light)}
.cg-price small{margin-left:8px;font:500 9px var(--sans);letter-spacing:.26em;color:var(--ink-45)}
.cg-add.is-in{background:transparent;color:var(--gold)}

/* the shelf: the rest, drawn on the same scale */
.cg-shelf{margin-top:clamp(50px,8vh,90px)}
.cg-shelf__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:20px;list-style:none}
.cg-card{position:relative;display:grid;gap:8px;padding:18px 18px 16px;border:1px solid var(--ink-20);border-radius:6px;
  background:rgba(255,247,235,.02);cursor:pointer;text-align:left;transition:border-color .3s,background .3s}
.cg-card:hover{border-color:rgba(233,181,121,.5);background:rgba(233,181,121,.05)}
.cg-card svg{display:block;width:100%;height:auto;margin:4px 0 6px}
.cg-card__k{font:500 9px var(--sans);letter-spacing:.24em;color:var(--ink-45)}
.cg-card__t{font:500 19px/1.2 var(--serif);color:var(--light)}
.cg-card__f{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cg-card__f b{font:500 15px var(--sans);color:var(--gold)}
.cg-card__m{position:absolute;right:14px;top:14px;font:500 10px var(--sans);letter-spacing:.14em;color:var(--gold)}
.cg-plus{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);background:transparent;
  color:var(--gold);font:400 22px/1 var(--sans);cursor:pointer;transition:background .3s,color .3s}
.cg-plus:hover,.cg-plus.is-in{background:var(--gold);color:#2a1a0e}
.cg-note{max-width:60ch;margin-top:40px;font:400 15px/1.55 var(--sans);color:var(--ink-45)}

@media (max-width:880px){
  .cg-hum__grid{grid-template-columns:minmax(0,1fr)}
  .cg-ask{position:static;gap:20px}
  .cg-pick{min-height:0}
  .cg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-match{width:62px;height:62px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .cg-box__lines li,.cg-bands li,.cg-pick .cg-pick__in{transition:none;animation:none}
}

/* ---------------- the menu: the club's cigars, house by house ---------------- */
.cg-menu{position:relative;padding-bottom:clamp(60px,9vh,110px)}
.cg-menu__hero{position:relative;margin:0;height:clamp(300px,58vw,720px);overflow:hidden}
.cg-menu__hero img{width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.cg-menu__hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 62%,var(--bg) 100%)}
.cg-menu__head{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;max-width:1140px;margin:clamp(-90px,-8vw,-40px) auto 0;
  padding:0 var(--pad);text-align:center}
.cg-menu__lede{max-width:56ch;font:400 clamp(18px,1.6vw,22px)/1.55 var(--sans);color:var(--ink-70)}

/* a house's own seal, the gold logo from Habanos */
.cg-seal{display:grid;place-items:center;width:132px;height:96px;padding:10px;text-decoration:none;
  transition:transform .35s var(--ease),filter .35s}
.cg-seal img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
a.cg-seal{border-radius:8px}
a.cg-seal:hover{transform:translateY(-3px);filter:brightness(1.18)}
.cg-houses{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 16px;width:100%;margin-top:26px}

.cg-menu__list{list-style:none;display:grid;gap:clamp(70px,11vh,130px);margin-top:clamp(60px,10vh,120px);padding:0 var(--pad)}
.cg-house{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,90px);align-items:start;scroll-margin-top:calc(var(--navh) + 20px)}
.cg-house__head{position:sticky;top:calc(var(--navh) + 76px);display:grid;justify-items:start;gap:12px}
.cg-house__head .cg-seal{width:220px;height:160px;padding:0;margin-bottom:14px;place-items:center start}
.cg-house__t{font:500 clamp(34px,4.2vw,58px)/1.04 var(--serif);color:var(--light)}
.cg-house__story{max-width:46ch;font:400 17px/1.7 var(--sans);color:var(--ink-70)}
.cg-house__cigars{list-style:none;display:grid;gap:14px}

.cg-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,2.6vw,36px);align-items:center;
  padding:clamp(18px,2.2vw,28px);border:1px solid var(--ink-20);border-radius:8px;scroll-margin-top:calc(var(--navh) + 20px);
  background:radial-gradient(70% 90% at 25% 50%,rgba(233,181,121,.1),transparent 70%),rgba(255,247,235,.015)}
.cg-item__photo{display:flex;align-items:center;min-height:110px}
.cg-item__photo img{display:block;height:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.cg-item__photo .cg-item__pack{width:auto;max-height:170px;margin-left:12%}
.cg-item__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cg-item__t{font:500 clamp(24px,2.3vw,32px)/1.1 var(--serif);color:var(--light)}
.cg-item__price{flex:none;font:500 clamp(20px,1.8vw,24px)/1 var(--serif);color:var(--gold)}
.cg-item__spec{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 12px;font:500 10px var(--sans);letter-spacing:.24em;color:var(--ink-45)}
.cg-item__spec .cg-dots i{width:8px;height:8px}
.cg-item__taste{font:400 17px/1.55 var(--sans);color:var(--ink-70)}
.cg-item__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cg-item__acts .btn{padding:13px 18px 12px;font-size:10.5px}
.cg-item__acts .cg-add{min-width:200px}
.cg-item__lay{border-color:rgba(233,181,121,.55);color:var(--gold);background:transparent}
.cg-item__lay:hover{background:rgba(233,181,121,.12);border-color:var(--gold);color:var(--light)}

/* between the houses: the valley, the hands */
.cg-between{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,100px);align-items:center;
  max-width:1180px;margin:0 auto;width:100%}
.cg-between--flip .cg-between__img{order:2}
.cg-between__img{margin:0;aspect-ratio:4/5;overflow:hidden}
.cg-between__img img{width:100%;height:100%;object-fit:cover}
.cg-between__copy{display:grid;gap:16px;max-width:52ch}
.cg-between__t{font:500 clamp(30px,3.6vw,50px)/1.08 var(--serif);color:var(--light)}
.cg-between__t em{font-style:italic;color:var(--gold)}
.cg-between__copy p:not(.cg-k){font:400 17px/1.7 var(--sans);color:var(--ink-70)}
.cg-menu .cg-note{margin:clamp(50px,8vh,90px) auto 0;padding:0 var(--pad);text-align:center}

/* the photographs in the humidor: one scale on the shelf, a ruler under the pick */
.cg-pic{display:flex;align-items:center;min-height:44px;margin:4px 0 6px}
.cg-pic img{display:block;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.cg-pic--rule{min-height:0;margin:0}
.cg-pic--rule img{margin-left:calc(4 / 154 * 100%)}
.cg-scale .cg-rule{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}

/* the corner, under the lamp */
.cg-corner{margin:0 0 6px;max-width:420px;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 6px 6px}
.cg-corner img{width:100%;height:100%;object-fit:cover}

@media (max-width:880px){
  .cg-house{grid-template-columns:minmax(0,1fr);gap:24px}
  .cg-house__head{position:static}
  .cg-item{grid-template-columns:minmax(0,1fr);gap:14px}
  .cg-item__photo{min-height:0;width:86%;padding-top:4px}
  .cg-item__photo .cg-item__pack{max-height:140px;margin-left:0}
  .cg-between,.cg-between--flip{grid-template-columns:minmax(0,1fr)}
  .cg-between--flip .cg-between__img{order:0}
  .cg-between__img{max-width:420px}
  .cg-seal{width:96px;height:72px;padding:6px}
  .cg-house__head .cg-seal{width:170px;height:124px}
  .cg-houses{gap:8px 6px}
  .cg-item__acts .btn{flex:1 1 auto}

}

/* the bar: always at hand, under the navigation, once the hero is gone */
.cg-bar{position:fixed;left:50%;top:calc(var(--navh) + 8px);z-index:55;display:flex;gap:2px;padding:4px;
  border:1px solid rgba(233,181,121,.35);border-radius:30px;background:rgba(20,11,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);transform:translate(-50%,-14px);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cg-bar.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cg-bar a{padding:11px 18px 10px;border-radius:24px;white-space:nowrap;text-decoration:none;
  font:500 10px var(--sans);letter-spacing:.26em;color:var(--ink-70);transition:background .3s,color .3s}
.cg-bar a:hover{color:var(--light)}
.cg-bar a.is-here{background:var(--gold);color:var(--brown)}
@media (max-width:880px){
  .cg-bar{left:10px;right:10px;transform:translateY(-14px);top:calc(var(--navh) + 4px)}
  .cg-bar.is-on{transform:none}
  .cg-bar a{flex:1;padding:11px 4px 10px;text-align:center;font-size:9px;letter-spacing:.12em}
}