/* Find your cigar v4: additions on top of fyc.css (paths, help drawers, review, photo cards, prices, country tags). */

/* Intro list in the sample card */
.fc-sample-list li b{font-size:15px}

/* Flow extras */
.fc-help{margin-top:18px;max-width:640px}
.fc-help details,.fc .more{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.fc-help summary,.fc .more summary{cursor:pointer;padding:12px 16px;font:600 14.5px var(--text);color:var(--gold);list-style:none;min-height:44px;display:flex;align-items:center}
.fc-help summary::-webkit-details-marker,.fc .more summary::-webkit-details-marker{display:none}
.fc-help summary::before,.fc .more summary::before{content:"+";display:inline-block;width:18px;font-weight:700}
.fc-help details[open] summary::before,.fc .more[open] summary::before{content:"–"}
.fc-help summary:focus-visible,.fc .more summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:12px}
.fc-help details>*:not(summary){margin:0 16px 14px}
.tip p{margin:0 0 4px;font-size:14.5px}
.tip .fine a{color:var(--gold);margin-right:6px}
.fc-switch{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.fc-switch .ghost{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font:500 14.5px var(--text);cursor:pointer;padding:10px 0;min-height:44px}
.fc-switch .ghost:hover{color:var(--ink)}
.fc .fc-status{margin:8px 0 0;color:var(--gold);font-size:14px;min-height:1.2em}
.fc-panel .told li{font-size:14px}
.fc-panel .told b{display:block;font:700 10.5px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
@media (max-width:1020px){.fc-panel{display:block}}

/* Swatches for wrapper colour answers: a colour cue beside the written label, never alone */
.opts-swatch .opt{flex-direction:row;align-items:center;gap:12px}
.opts-swatch .opt .h{display:none}
.sw{flex:none;width:34px;height:14px;border-radius:7px 3px 3px 7px;border:1px solid rgba(255,255,255,.18);background:#8a5a32}
.sw-light,.sw-claro{background:#c49a62}.sw-colorado-claro{background:#a8713e}.sw-reddish,.sw-colorado,.sw-rosado{background:#8b4a2b}
.sw-colorado-maduro{background:#5e3520}.sw-maduro{background:#3e2415}.sw-oscuro{background:#1e130c}.sw-candela{background:#6f8a3c}
.sw-none{background:linear-gradient(90deg,#c49a62 50%,#3e2415 50%)}

/* Picker additions */
.pk-confirm{margin-top:14px;max-width:640px;padding:14px;border:1px solid var(--gold-2);border-radius:14px}
.pk-confirm p{margin:0 0 10px;font-weight:600}
.pk-vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
#pk-list .pk-more{color:var(--gold);font-weight:600}
.pk-chosen .seg{flex-wrap:wrap}

/* Budget, origins, format */
.money-in{display:block}
.money-in input{width:100%}
.fc-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 6px}
.fc .opt-sm{min-height:48px;padding:10px 16px}
.fc-inline .ghost{background:none;border:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;font:600 14.5px var(--text);cursor:pointer;padding:10px 4px;min-height:44px}
.chips{border:0;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:720px}
.chips legend{font:700 12px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 14px var(--text);cursor:pointer;min-height:40px}
.chip[aria-pressed=true]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--card))}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fmt-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:820px}
@media (max-width:720px){.fmt-form{grid-template-columns:1fr}}

/* Review screen */
.rv-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:820px;border-top:1px solid var(--line)}
.rv-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rv-list .rq{color:var(--muted);font-size:14.5px}
.rv-list .ra{font-weight:600}
.rv-list .ghost{background:none;border:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;font:600 14px var(--text);cursor:pointer;min-height:44px;padding:0 4px}
@media (max-width:720px){.rv-list li{grid-template-columns:minmax(0,1fr) auto}.rv-list .rq{grid-column:1/-1}}

/* Visual help */
.vis{margin:6px 0 14px}
.vis-scales{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.vis-scales{grid-template-columns:1fr}}
.scale{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.scale-f{grid-template-columns:repeat(3,1fr)}
.scale li{font-size:11px;line-height:1.15;padding:8px 5px;border-radius:6px;background:color-mix(in srgb,var(--gold) calc(10% + var(--i,0) * 1%),transparent);border:1px solid var(--line)}
.vis-grid table{width:100%;border-collapse:collapse;font-size:13px}
.vis-grid caption{text-align:left;font-weight:700;margin-bottom:6px}
.vis-grid th,.vis-grid td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.vis-grid td b,.vis-grid td span{display:block}
.vis-grid td span{color:var(--muted);font-size:12px}
.vis-grid td a{color:var(--gold);font-size:12px}
.vis img{display:block;max-width:100%;height:auto;margin-top:10px;border-radius:8px}
.vis-leaf svg{width:100%;max-width:420px;height:auto}
.vis-leaf .w{fill:#7a4a28}.vis-leaf .b{fill:#a87a4a}.vis-leaf .f rect{fill:#c9a36a}
.vis-leaf text{fill:var(--ink);font:600 13px var(--text)}

/* Exit, education */
.fc-exit,.fc-edu{padding-block:56px 80px;max-width:820px}
.fc-exit h2,.fc-edu h2{font-size:clamp(28px,3.2vw,42px);margin:8px 0 12px;outline:none}
.edu-tips{display:grid;gap:12px;margin-top:18px}
.edu-tips .tip{border:1px solid var(--line);border-radius:14px;padding:14px 16px}

/* ===== Report cards ===== */
.rp-empty{text-align:center;padding:60px 16px;color:var(--muted)}
.ck{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.ck:first-child{grid-column:1/-1}
.cks{grid-template-columns:1fr}
.ck-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.ph-img{margin:0}
.ph-img img{width:100%;height:auto;border-radius:12px;display:block;background:#1a120b}
.ph-img figcaption{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.35}
.ph-img figcaption a{color:inherit}
.ph-none{display:grid;place-items:center;aspect-ratio:1;border:1px dashed var(--line);border-radius:12px;padding:12px;text-align:center}
.ph-none svg{width:100%;max-width:120px}
.ph-none svg rect{fill:#3a2818}.ph-none svg .band{fill:#6a5236}.ph-none svg .foot{fill:#2a1c10}
.ph-img.broken img{display:none}
.ph-img.broken::before{content:"Photo unavailable";display:block;padding:30px 8px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:12px}
.ck-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ctag{display:inline-flex;gap:4px;align-items:baseline;border-radius:999px;padding:4px 10px;font-size:12.5px;line-height:1.2;background:var(--cb,#e8e2d9);color:var(--cf,#17202a)}
.ctag b{font-weight:700}
.ctag-u{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.ck-spec{grid-template-columns:repeat(3,minmax(0,1fr))}
.ck-spec .fine{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.dots i.half{background:color-mix(in srgb,var(--gold) 45%,transparent)}
.ck-why{margin:0;padding-left:18px;font-size:14px;color:var(--ink);display:grid;gap:3px}
.pr,.rv{border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.035);font-size:13.5px}
.pr p,.rv p{margin:0 0 4px}
.pr a,.rv a,.more a,.where a{color:var(--gold)}
.pr .was{text-decoration:line-through;color:var(--muted)}
.pr-cond{margin:4px 0;padding-left:18px;font-size:13px}
.pr .cond{display:inline-block;font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:4px;color:var(--muted)}
.rv ul{margin:2px 0 8px;padding-left:18px;display:grid;gap:4px}
.rv .lbl{margin:0 0 2px}
.rv-note{display:block;color:var(--muted);font-size:12.5px}
.fc .fine,.rp .fine{font-size:12px;color:var(--muted)}
.more{font-size:13.5px}
.more>*:not(summary){margin:0 14px 10px}
.more .kv,.more .unk,.more .srcs{list-style:none;padding:0;display:grid;gap:4px}
.more .kv b{display:inline-block;min-width:96px;color:var(--muted);font-weight:600}
.more .assessments .fine{display:block;margin-top:4px}
.ck-rate{margin-top:2px}
.blk.empty h3{margin:0 0 8px}
.blk.first{grid-column:1/-1}
@media (max-width:720px){.ck-spec>div:nth-child(3){grid-column:1/-1}.ck{grid-template-columns:1fr}.ph-img:not(.ph-none){max-width:280px}.ph-none{aspect-ratio:auto;max-width:200px}.ck-spec{grid-template-columns:1fr 1fr}}

/* ===== Paged (PDF and print) ===== */
.rp.paged .ck{grid-template-columns:76px minmax(0,1fr);gap:10px;padding:8px 12px}
.rp.paged .cks{grid-template-columns:1fr;gap:6px}
.rp.paged .ck:last-child:nth-child(odd){grid-column:auto}
.rp.paged .ck-main{gap:4px}
.rp.paged .more,.rp.paged .ck-rate,.rp.paged .rv-note,.rp.paged .pr-cond,.rp.paged .pr .fine{display:none}
.rp.paged .ph-img figcaption{font-size:7.5px}
.rp.paged .ph-none{padding:6px}
.rp.paged .ph-none figcaption{font-size:8px}
.rp.paged .ck-why{font-size:10.5px;gap:1px}
.rp.paged .ck-why li:nth-child(n+3){display:none}
.rp.paged .ctag{font-size:9.5px;padding:2px 7px}
.rp.paged .pr,.rp.paged .rv{padding:4px 8px;font-size:10.5px}
.rp.paged .pr p,.rp.paged .rv p{margin:0 0 2px}
.rp.paged .rv ul{margin:0;gap:1px}
.rp.paged .rv li:nth-child(n+2){display:none}
.rp.paged .ck-spec dd{font-size:10.5px}
.rp.paged .ck-spec .fine{font-size:9px}
.rp.paged .ck-ask{font-size:11px}
.rp.paged .told li{font-size:11px}
.rp.paged .blk.first .note{font-size:10px}
.rp.paged .p1-grid{grid-template-columns:1fr 1fr}
@media print{.fc-help,.fc-switch{display:none!important}}
.rp.paged .ck-notes{display:flex}.rp.paged .ck-notes span{font-size:9.5px;padding:1px 7px}
/* Print density: two cards a row, no empty photo box, the essentials of price and review only */
.rp.paged .cks{grid-template-columns:1fr 1fr;gap:6px}
.rp.paged .ck{grid-template-columns:1fr;padding:7px 10px}
.rp.paged .ck:has(.ph-none){grid-template-columns:1fr}
.rp.paged .ck .ph-none{display:none}
.rp.paged .ck:not(:has(.ph-none)){grid-template-columns:64px minmax(0,1fr)}
.rp.paged .ck:first-child{grid-column:1/-1}
.rp.paged .ck h3{font-size:15px}
.rp.paged .ck-spec{grid-template-columns:repeat(3,minmax(0,1fr))}
.rp.paged .ck-spec .fine{display:none}
.rp.paged .ck-why li:nth-child(n+2){display:none}
.rp.paged .pr-h{display:none}
.rp.paged .rv .lbl{display:none}

/* =====================================================================================================================
   Redesign, 14 Oct 2026: the humidor cabinet. Questions sit in drawers; finished drawers close and show the answers;
   a live cigar takes its size, wrapper colour and strength from the answers. Site palette and type throughout.
   ===================================================================================================================== */
.fc{--cedar:#2c1f15;--cedar-lo:#21170f;--brass:var(--gold);--ember:#ff8a3d}
.fc ::selection{background:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--ink)}
.fc input{caret-color:var(--gold)}

/* ---------- The live cigar ---------- */
.spec{container-type:inline-size;position:relative;--len:5.5;--ring:50;--wrap:#8a5a32;--heat:.35}
.spec-stage{height:calc(66 * 100cqi / 470 + 24px);display:flex;align-items:center}
.cg{position:relative;width:calc(var(--len) / 7.5 * 100cqi);height:calc(var(--ring) * 100cqi / 470);border-radius:999px 5px 5px 999px/50% 5px 5px 50%;
  background-color:var(--wrap);
  background-image:linear-gradient(180deg,rgba(255,238,205,.30) 0,rgba(255,238,205,.08) 24%,rgba(0,0,0,0) 46%,rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(108deg,rgba(0,0,0,0) 0 26px,rgba(0,0,0,.11) 26px 27px,rgba(0,0,0,0) 27px 47px,rgba(255,230,190,.05) 47px 48px);
  box-shadow:0 22px 26px -18px rgba(0,0,0,.85),inset 0 -2px 0 rgba(0,0,0,.25);
  transition:width .8s cubic-bezier(.16,.84,.24,1),height .8s cubic-bezier(.16,.84,.24,1),background-color .7s ease}
.cg::after{content:"";position:absolute;right:-1px;top:4%;bottom:4%;width:clamp(6px,2.4cqi,12px);border-radius:2px 45% 45% 2px/2px 50% 50% 2px;
  background:radial-gradient(ellipse at 20% 50%,#ffd27a 0,var(--ember) 30%,#b33a12 58%,#3a1a0e 100%);
  opacity:calc(.12 + var(--heat) * .88);box-shadow:0 0 calc(var(--heat) * var(--heat) * 48px) calc(var(--heat) * 6px) rgba(255,120,40,calc(var(--heat) * .75));transition:opacity .6s,box-shadow .6s}
.cg-band{position:absolute;left:13%;top:-1px;bottom:-1px;width:clamp(26px,10cqi,62px);border-radius:3px;background:var(--brass);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(70,40,10,.35)}
.cg-band b{font:600 clamp(8px,2.3cqi,13px)/1 var(--display);color:#3a230e;letter-spacing:.08em}
.spec-rule{display:flex;margin-top:10px;border-top:1px solid var(--line);font:600 10px/1 var(--text);color:var(--muted);opacity:.75}
.spec-rule span{flex:none;width:calc(100cqi / 7.5);text-align:right;padding-top:6px;position:relative}
.spec-rule span::before{content:"";position:absolute;right:0;top:-5px;height:5px;border-left:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.cg,.cg::after{transition:none}}

/* ---------- Intro ---------- */
.fc-intro{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,6vw,88px);padding-block:clamp(36px,6vh,72px) 72px;min-height:0}
.fc-h1{font-size:clamp(40px,5.4vw,78px);line-height:1;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.fc-intro .lede{max-width:34em;margin:0 0 28px}
.fc-exp{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fc .dr-front{min-height:104px;padding:18px 64px 18px 20px;border-radius:16px;background:linear-gradient(180deg,#33241a,#271b12);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,235,200,.07),0 14px 24px -18px #000;justify-content:center}
.fc .dr-front::after{content:"";position:absolute;right:20px;top:50%;width:30px;height:7px;margin-top:-3px;border-radius:4px;background:var(--brass);box-shadow:0 2px 3px rgba(0,0,0,.55)}
.fc .dr-front .t{font-size:17.5px}
.fc .dr-front .m{position:absolute;right:18px;top:14px;font:700 11.5px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.fc .dr-front:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,235,200,.09),0 22px 30px -18px #000;border-color:var(--gold-2)}
.fc .dr-quiet{background:transparent;box-shadow:none;min-height:84px}
.fc .dr-quiet::after{opacity:.35}
.fc-sample{border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,36px);background:radial-gradient(120% 80% at 70% 0%,#3a281a 0,#22170f 62%)}
.spec-hero{margin:4px 0 18px}
.fc-sample-list{gap:0}
.fc-sample-list li{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0}
.fc-sample-list li b{font-size:15.5px}

/* ---------- Flow: the cabinet ---------- */
.fc-flow{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(24px,4vw,56px);padding-block:24px 96px}
.cab{display:grid;gap:10px;min-width:0}
.dw{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--cedar),var(--cedar-lo));box-shadow:inset 0 1px 0 rgba(255,235,200,.06),0 1px 0 rgba(0,0,0,.5)}
.dw-h{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 18px;background:none;border:0;color:inherit;font:inherit;text-align:left;border-radius:18px}
.dw-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--text);border:1px solid var(--line);color:var(--muted)}
.dw-t{flex:none;font:600 15px var(--text);letter-spacing:.01em}
.dw-step{margin-left:auto;font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dw-done .dw-h{cursor:pointer}
.dw-done .dw-h:hover .dw-edit{text-decoration:underline}
.dw-done .dw-n{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.dw-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:14px;display:none}
.dw-edit{margin-left:auto;flex:none;color:var(--gold);font:600 13.5px var(--text);text-underline-offset:3px}
.dw-as{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px 60px;margin-top:-4px}
.dw-a{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--ink);font:500 13.5px var(--text);padding:6px 12px;cursor:pointer;min-height:34px;text-align:left}
.dw-a span{color:var(--muted);margin-right:6px}
.dw-a:hover{border-color:var(--gold-2)}
.dw-a.skip{color:var(--muted);border-style:dashed}
.dw-next{background:transparent;box-shadow:none;opacity:.6}
.dw-next .dw-h{min-height:50px}
.dw-next .dw-h::after{content:"";margin-left:auto;width:28px;height:6px;border-radius:3px;background:var(--brass);opacity:.5}
.dw-open{border-color:var(--gold-2);background:linear-gradient(180deg,#34251a 0,#281c13 120px,#241910 100%);box-shadow:inset 0 1px 0 rgba(255,235,200,.09),0 34px 60px -34px #000}
.dw-open>.dw-h{border-bottom:1px solid var(--line);border-radius:18px 18px 0 0}
.dw-open .dw-n{border-color:var(--gold);color:var(--gold)}
.dw-body{padding:clamp(18px,2.4vw,30px)}
.dw-h:focus-visible,.dw-a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Stage inside the open drawer */
.fc-top{margin-bottom:8px}
.fc-back{display:inline-flex;align-items:center;gap:4px;min-height:44px}
.fc-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-count{font-size:11.5px}
.fc-q{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.fc-sub{margin-bottom:22px}
.fc-foot{margin-top:24px}
.fc-keys{font-size:12px;color:var(--muted);opacity:.7}
@media (hover:none){.fc-keys{display:none}}

/* Options */
.fc .opt{background:rgba(255,248,235,.035);border:1px solid var(--line);border-radius:14px;padding:16px 46px 16px 18px;min-height:66px;justify-content:center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,background-color .18s,box-shadow .18s}
.fc .opt:hover{transform:translateY(-2px);border-color:var(--gold-2);box-shadow:0 14px 22px -16px #000}
.fc .opt[aria-pressed=true]{outline:1px solid var(--gold);outline-offset:-2px;border-color:var(--gold);background:color-mix(in srgb,var(--gold) 15%,#2a1e14)}
.fc .opt .t{font-size:16.5px}
.fc .opt kbd{top:12px;right:14px;border:1px solid var(--line);border-radius:5px;padding:2px 5px;opacity:.75;font-size:11px}
.fc .opt .tick{position:absolute;top:11px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--gold);display:none}
.fc .opt .tick::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--on-gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fc .opt[aria-pressed=true] .tick{display:block}
.fc .opt[aria-pressed=true] kbd{display:none}
@media (hover:none){.fc .opt kbd{display:none}}
.fc-body.opts-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.fc-body.opts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mtr{display:inline-flex;gap:3px;margin-top:8px}
.mtr i{width:15px;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.mtr i.on{background:var(--gold)}
.mtr i.on:nth-child(4){background:#efa25a}.mtr i.on:nth-child(5){background:var(--ember)}
.fc .opt .sil{height:calc(var(--r,48) * .3px);min-height:10px;margin:2px 0 10px;border-radius:999px 3px 3px 999px;background:radial-gradient(circle at 100% 50%,#ff8a3d 0 3px,rgba(255,138,61,0) 6px),linear-gradient(180deg,#b07b47,#6a4322 75%);order:-1}
.opts-swatch .sw{width:44px;height:16px;border-radius:999px 4px 4px 999px}

/* Country shortcuts */
.cty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.fc .cty{min-height:76px;gap:2px}
.cty .cc{font:normal 28px/1.2 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;width:max-content;margin-bottom:6px}
.cty .h{font-size:12.5px;color:var(--gold-2)}
.cty .t,.cty .h{min-width:0;max-width:100%;overflow-wrap:anywhere}
.cty-more{max-width:440px}

/* Budget */
.bud-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fc .bud{min-height:84px;padding-right:18px}
.fc .bud .h{order:-1;font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase}
.fc .bud .t{font:var(--display-weight) 26px/1.1 var(--display)}
.bud-own{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin-top:20px}
.bud-own .field{margin:0;flex:1 1 260px}
.bud-own .fc-inline{margin:0}

/* Picker, chips */
.pk-field input{padding-left:50px;min-height:60px;font-size:17.5px}
.pk-ico{position:absolute;left:18px;top:20px;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.pk-x{display:grid;place-items:center}
.pk-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pk-pop{margin-top:20px}
.pk-pop .lbl,.fm-pop .lbl{margin-bottom:10px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chips-row .chip{font-weight:500}
.chips-row .chip b{font-weight:700;margin-right:3px}
.chip:hover{border-color:var(--gold-2)}

/* Format */
.fmt-tiles{display:grid;margin-bottom:16px}
.fmt-custom .fmt-form{padding:4px 0 6px}

/* Last drawer */
.rv-ready{max-width:46em}
.rv-big{font:var(--display-weight) clamp(26px,2.8vw,38px)/1.15 var(--display);margin:0 0 10px;text-wrap:balance}
.rv-ready .rv-note{color:var(--muted);margin:0}

/* Side panel */
.fc-panel{top:96px;padding:22px 22px 18px;border-radius:22px;background:radial-gradient(130% 70% at 80% 0%,#3a281a 0,#22170f 70%)}
.spec-read{display:grid;gap:0;margin:14px 0 0}
.spec-read div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.spec-read dt{font:700 11px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec-read dd{margin:0;text-align:right;font-size:14.5px;font-weight:600}
.spec-read dd span{color:var(--muted);font-weight:500}
.spec-read .mtr{margin:0 6px 0 0;vertical-align:middle}
#fc-pan .told{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}

/* Gate */
.fc-gate{grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(28px,5vw,72px);align-items:center;min-height:0;padding-block:clamp(32px,6vh,72px) 80px}
.fc-gate-form h2{text-wrap:balance}
.gate-peek{border:1px solid var(--gold-2);border-radius:24px;padding:24px;background:radial-gradient(130% 80% at 70% 0%,#3a281a 0,#22170f 70%)}
.gate-peek:empty{display:none}
.gate-peek .pk-n{font:var(--display-weight) 30px/1.1 var(--display);margin:0 0 14px}
.gate-peek .pk-n b{color:var(--gold);font-weight:inherit}
.pk-box{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px;margin-bottom:16px}
.pk-ph{aspect-ratio:1;border-radius:12px;background:var(--paper);display:grid;place-items:center;overflow:hidden;padding:6px}
.pk-ph img{mix-blend-mode:multiply;max-width:100%;max-height:100%;object-fit:contain}
.pk-ph-none{background:linear-gradient(180deg,var(--cedar),var(--cedar-lo));border:1px dashed var(--line)}

/* ---------- Report on screen ---------- */
.box{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:18px 0 28px}
.box-c{position:relative;display:grid;gap:2px;text-decoration:none;color:inherit;border-radius:16px}
.box-ph{aspect-ratio:4/3;border-radius:14px;background:var(--paper);display:grid;place-items:center;overflow:hidden;margin-bottom:8px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.box-ph img{mix-blend-mode:multiply;max-width:86%;max-height:86%;object-fit:contain}
.box-none{font:600 12.5px var(--text);color:var(--paper-muted)}
.box-c:hover .box-ph{transform:translateY(-3px)}
.box-n{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--gold);font:700 12px var(--text);display:grid;place-items:center}
.box-c b{font-size:14.5px;line-height:1.25}
.box-c>span:last-child{font-size:13px;color:var(--muted);line-height:1.3}
.ph-plinth{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--paper);overflow:hidden;padding:12px}
.ph-plinth img{mix-blend-mode:multiply;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:0;background:none}
.ph-img figcaption a{color:var(--muted);text-underline-offset:2px}
.ck{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;padding:22px;border-radius:22px;background:linear-gradient(180deg,#2a1d14,#21170f)}
.ck:first-child{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
.ck h3 a{text-decoration:none}
.ck h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ck-ask{display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(255,248,235,.05);border:1px solid var(--line)}
.pr{border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));background:color-mix(in srgb,var(--gold) 6%,transparent)}
.pr b{color:var(--gold)}
.rp.paged .box{display:none}
.rp.paged .ph-plinth{padding:4px;aspect-ratio:1}
@media print{.box{display:none!important}}

/* ---------- Phone and tablet ---------- */
@media (max-width:1020px){
  .fc-flow{grid-template-columns:1fr;gap:14px;padding-top:12px}
  .fc-panel{position:relative;top:0;order:-1;padding:14px 16px 12px;border-radius:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .fc-panel .spec-rule,#fc-pan{display:none}
  .fc-panel .spec-stage{height:calc(66 * 100cqi / 470 + 8px)}
  .spec-read{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
  .spec-read div{display:grid;justify-content:start;gap:2px;border:0;padding:0}
  .spec-read dd{text-align:left;font-size:13px}
  .spec-read dd span{display:block;font-size:12px}
  .fc-gate{grid-template-columns:1fr}
  .gate-peek{order:-1}
}
@media (max-width:720px){
  .fc-intro{padding-top:20px}
  .fc-exp{grid-template-columns:1fr;gap:10px}
  .fc .dr-front{min-height:84px}
  .dw-as{display:none}
  .dw-line{display:block}
  .dw-edit{display:none}
  .dw-h{padding:10px 14px;gap:12px;min-height:52px}
  .dw-next{display:inline-flex;border:0;opacity:.55}
  .dw-next .dw-h{min-height:32px;padding:4px 14px}
  .dw-next .dw-h::after{display:none}
  .dw-body{padding:16px 14px 18px}
  .fc-body.opts-list{grid-template-columns:1fr}
  .fc-body.opts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fc .opt{min-height:60px;padding:14px 40px 14px 14px}
  .fc .opt .t{font-size:15.5px}
  .cty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bud-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fc .bud .t{font-size:22px}
  .dw-body .fc-foot{position:sticky;bottom:0;z-index:5;margin:18px -14px -18px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(36,25,16,0),#241910 30%);border-radius:0 0 18px 18px}
  .dw-body .fc-foot .pill{flex:1;justify-content:center}
  .dw-body .fc-foot:has(#fc-next[hidden]){display:none}
  .box{grid-auto-flow:column;grid-auto-columns:44%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-4px}
  .box-c{scroll-snap-align:start}
  .ck,.ck:first-child{grid-template-columns:1fr;padding:16px}
  .ck .ph-img:not(.ph-none){max-width:none}
  .ck .ph-plinth{aspect-ratio:16/10}
}
@media (max-width:380px){.fc-body.opts-grid{grid-template-columns:1fr}.bud-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* On screen the report leads with the cigars: page 1's headline and photo box, the cards, then limits and next steps. */
@media screen{
  .rp.screen:not(.paged){display:flex;flex-direction:column}
  .rp.screen:not(.paged) .pg1{display:contents}
  .rp.screen:not(.paged) .pg1>.ph,.rp.screen:not(.paged) .pg1>.pf{display:none}
  .rp.screen:not(.paged) .pg1>.p1-grid{order:2;margin:0 0 24px}
  .rp.screen:not(.paged) .pg2{order:1}
  .rp.screen:not(.paged) .pg3{order:3}
  .rp.screen:not(.paged) .pg2>.ph{display:none}
}
.rv-step .fc-foot{margin-top:22px}
.cab{grid-template-columns:minmax(0,1fr)}
.dw,.dw-body,.fc-stage{min-width:0}
@media (max-width:1020px){.fc-flow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.fc-btns .ghost,.fc-btns .pill{padding:8px 14px;font-size:13.5px;min-height:40px}.fc-actions{margin-bottom:12px}}
@media (max-width:1020px){.fc-intro{grid-template-columns:minmax(0,1fr);gap:28px}.fc-sample{padding:20px}}
@media (max-width:720px){.fc-h1{font-size:clamp(36px,11vw,48px)}.fc-sample-list li{padding:10px 0}}

/* Finish review fixes, 14 Oct */
.fc-count[hidden]{display:none}
.is-review .fc-q{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.is-review .fc-top{display:none}
.fc-foot .pill.quiet{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.fc-foot .pill.quiet:hover{border-color:var(--gold-2)}
.dw-fresh .dw-body{animation:dwin .42s cubic-bezier(.16,.84,.24,1)}
@keyframes dwin{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.gate-peek{align-self:start}
.gate-peek .spec{margin:4px 0 6px}
.pk-size{margin:0 0 14px;font-size:14px;color:var(--muted)}
.pk-ph-none{font:600 11.5px/1.2 var(--text);color:var(--muted);text-align:center;padding:6px}
.cty-form{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:0 18px;align-items:end}
.cty-form .cty-grid{grid-column:1/-1;margin-bottom:12px}
.fc .cty{min-height:68px}
.cty-form .hint{margin:0 0 16px}
.fc-result .fc-actions>p:first-child{font:600 15px var(--text);letter-spacing:0;text-transform:none;color:var(--ink)}
@media screen{
  .rp.screen:not(.paged) .pg1>.lbl{display:none}
  .rp.screen:not(.paged) .ck-main>h3{order:-1}
  .rp.screen:not(.paged) .ck-slot{width:max-content;font:600 12.5px var(--text);letter-spacing:0;text-transform:none;color:var(--gold);border:1px solid var(--gold-2);border-radius:999px;padding:5px 11px}
  .rp.screen:not(.paged) .ck-slot>span{display:none}
}
@media (max-width:1020px){
  .fc-panel{position:sticky;top:calc(var(--hh,72px) + 6px);z-index:6;grid-template-columns:42% minmax(0,1fr);align-items:center;gap:14px;padding:8px 14px;border-radius:14px;background:rgba(36,25,16,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .fc-panel .spec-stage{height:calc(60 * 100cqi / 470 + 6px)}
  .spec-read{display:block;margin:0;line-height:1.35}
  .spec-read div{display:inline;padding:0;border:0}
  .spec-read dt{display:none}
  .spec-read dd,.spec-read dd span{display:inline;font-size:12.5px;font-weight:600}
  .spec-read div+div::before{content:" · ";color:var(--muted)}
  .spec-read .mtr{display:none}
  .cty-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){.fc-q{font-size:clamp(24px,8vw,30px)}.fc .opt{min-height:54px;padding-block:12px}}

/* Phone strip: solid, flush under the header, limits on one line */
@media (max-width:1020px){
  .fc-panel{top:var(--hh,72px);background:#241910;isolation:isolate;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0 0 14px 14px;border-top:0;box-shadow:0 12px 16px -8px rgba(0,0,0,.75)}
  .spec-read{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:380px){
  .fc-panel{grid-template-columns:34% minmax(0,1fr);gap:10px;padding:6px 10px}
  .fc-top{margin-bottom:2px}.fc-top .fc-back{min-height:36px}
  .fc-sub{margin-bottom:14px;font-size:14.5px}
  .dw-open>.dw-h{min-height:44px;padding-block:6px}
}
@media (max-width:1020px){.spec-read .long{display:none}}
/* Photo frames: any aspect ratio fits inside, tall single-cigar shots included */
.ph-plinth,.box-ph,.pk-ph{position:relative}
.ph-plinth img,.box-ph img,.pk-ph img{position:absolute;inset:8%;width:84%;height:84%;max-width:none;max-height:none;object-fit:contain}
@media (max-width:1020px){.fc-panel{grid-template-columns:28% minmax(0,1fr);gap:12px}.spec-read dd,.spec-read dd span{font-size:12px}}
@media (max-width:380px){.fc-panel{grid-template-columns:24% minmax(0,1fr)}.spec-read dd,.spec-read dd span{font-size:11.5px}}
.spec-read .short{display:none}
@media (max-width:1020px){.spec-read .short{display:inline}}

/* Local leads and nearby venues (city step, 14 Oct 2026) */
.lc{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.lc b{color:var(--ink);margin-right:4px}
.lc a{color:var(--gold)}
.lc .fine{display:block;margin-top:2px}
.near li{display:grid;gap:2px}
.near .vt{font-size:12.5px;color:var(--muted)}
.near .vl a{color:var(--gold)}
.city-form .field{margin-top:12px}
.rp.paged .lc{font-size:11px;margin-top:4px}
.rp.paged .lc .fine,.rp.paged .near .fine{display:none}
.city-form .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
/* Avoid list (14 Oct, BC - Guide session): the 7 reason chips sat in an auto column beside the name, squeezing a long
   name like "Padrón 1964 Anniversary Series (Natural)" to one word per line and running it under the chips.
   The chips now take their own row at every width (phones already did this in fyc.css). */
.pk-chosen li{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
.pk-chosen .seg{grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%}
.pk-chosen .pk-c{overflow-wrap:anywhere}
.pk-chosen .seg{border:0;padding:0;gap:6px}
.pk-chosen .seg button{border:1px solid var(--line);min-height:40px;padding:8px 14px}
.pk-chosen .seg button:hover{border-color:var(--gold-2);color:var(--ink)}
.pk-chosen .seg button[aria-pressed=true]{border-color:var(--gold)}

/* =====================================================================================================================
   UI pass, 14 Oct evening (BC - Guide session, Anatolie: "feels very vibecoded", cigars must be to scale):
   real SVG cigars (v4/cigar.js) everywhere, no keyboard badges, upcoming drawers folded into a progress line,
   quieter tiles, a proper help link, to-scale format tiles with millimetres.
   ===================================================================================================================== */
/* Cigar drawings */
.cg-svg{display:block;width:100%;height:auto;overflow:visible}
.spec-stage{height:auto!important;display:block;padding:4px 0 2px}
.cg,.fc .opt .sil{display:none}

/* Developer hints off: the number keys still work, they just aren't advertised */
.fc .opt kbd,.fc-keys{display:none!important}

/* Tiles: calm hover, clear selection, tick centred on the right */
.fc .opt{padding:16px 48px 16px 18px;transition:border-color .18s,background-color .18s}
.fc .opt:hover{transform:none;box-shadow:none;border-color:var(--gold-2);background-color:rgba(255,248,235,.06)}
.fc .opt .t{font-size:16.5px;font-weight:600;line-height:1.3}
.fc .opt .h{font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:3px}
.fc .opt .tick{top:50%;right:14px;margin-top:-11px}
.fc .opt[aria-pressed=true]{outline:0;border-color:var(--gold);background:color-mix(in srgb,var(--gold) 13%,#2a1e14);box-shadow:inset 0 0 0 1px var(--gold)}

/* Drawers: finished ones stay above, the open one shows the step and a progress line, upcoming ones are hidden */
.dw-next{display:none!important}
.dw-open>.dw-h{position:relative}
.dw-step{margin-left:auto;font:600 12.5px var(--text);letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap}
.dw-bar{position:absolute;left:18px;right:18px;bottom:-1px;height:2px;border-radius:2px;background:transparent;pointer-events:none}
.dw-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--gold);transition:width .5s cubic-bezier(.2,.7,.2,1)}

/* "What does this mean?" is a link that opens a panel, not another bordered box */
.fc-help details{border:0;background:none;border-radius:14px}
.fc-help details[open]{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:0 16px 4px}
.fc-help summary{padding:8px 0;gap:10px;font:600 14.5px var(--text)}
.fc-help summary::before{content:"?";flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font:700 11px/1 var(--text)}
.fc-help details[open] summary::before{content:"?"}
.fc-help details>*:not(summary){margin:0 0 14px}
.fc-help summary:hover{text-decoration:underline;text-underline-offset:3px}

/* Time tiles: a small cigar at the size that fits the time */
.fc .opt .opt-art{display:block;order:-1;width:100%;margin:-2px 0 10px}

/* Wrapper colour tiles: the colour on a cigar, beside the name */
.sw-cg{flex:none;width:112px;display:block}
.opts-swatch .opt{gap:14px}

/* Formats: two per row, every cigar on one 7.75-inch scale over faint inch lines */
.fc-body.fmt-wrap .fmt-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 8px}
.fc .opt.fmt{display:block;padding:14px 48px 16px 18px;min-height:0;text-align:left}
.fmt-art{display:block;margin:0 0 12px;padding-top:4px;border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,rgba(255,240,215,.07) 0 1px,transparent 1px calc(100% / 7.75));background-position:0 0}
.fmt .t,.fmt .h,.fmt-mm{display:block}
.fmt-mm{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.fmt .tick{top:auto!important;bottom:16px;margin-top:0!important}
.fmt-note{font-size:13.5px;color:var(--muted);margin:6px 0 16px}

/* Side panel and intro: the ruler under the drawing */
.spec-rule{margin-top:6px}
.fc-panel .spec{margin-bottom:2px}

@media (max-width:720px){
  .fc-body.fmt-wrap .fmt-tiles{grid-template-columns:minmax(0,1fr)}
  .fc .opt{padding:14px 44px 14px 14px}
  .opts-swatch .opt{flex-direction:column;align-items:flex-start;gap:8px}
  .sw-cg{width:100%;max-width:150px}
  .dw-bar{left:14px;right:14px}
}

/* v5 (15 Oct, Cigar Test session): enjoyed / disliked key word. Bold, underlined, ✓ or ✕, so the two questions can't be mixed up. */
.fc-q .kw{font-style:normal;font-weight:700;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.14em;white-space:nowrap}
.fc-q .kw span{font-family:system-ui,sans-serif;font-size:.62em;font-weight:700;vertical-align:.22em;margin-right:.18em}
.fc-q .kw-yes{color:var(--gold);text-decoration-color:var(--gold)}
.fc-q .kw-no{color:#f08a7a;text-decoration-color:#f08a7a}

/* v5: the cigar photo stands upright in a tall column on wide screens (cap at the top). Landscape shots only; boxes stay as shot.
   Phones and the PDF keep the wide plinth. Transparent cutouts replace the cream plinth once they exist. */
@media (min-width:721px){
  .rp:not(.paged) .ck{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px}
  .rp:not(.paged) .ph-img.land .ph-plinth{aspect-ratio:9/20;container-type:inline-size;background:radial-gradient(120% 70% at 50% 40%,#f6ecd9,var(--paper))}
  .rp:not(.paged) .ph-img.land .ph-plinth img{inset:auto;top:50%;left:50%;width:204cqw;height:80cqw;transform:translate(-50%,-50%) rotate(90deg)}
}

/* v5: Cigar Wrapped story viewer (share.js). Full screen, slides scale to fit, tap left/right like a story. */
body.wr-open{overflow:hidden}
.wr{position:fixed;inset:0;z-index:1000;background:rgba(8,5,3,.96);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
.wr-bars{display:flex;gap:6px;width:min(420px,100%);padding:4px 40px 10px 0}
.wr-bars i{flex:1;height:4px;border-radius:2px;background:rgba(255,248,235,.2)}
.wr-bars i.done,.wr-bars i.on{background:var(--gold)}
.wr-x{position:absolute;top:8px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,248,235,.08);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.wr-stage{position:relative;display:grid;place-items:center;min-height:0;width:100%}
.wr-stage canvas{max-height:100%;max-width:100%;height:calc(100dvh - 170px);width:auto;aspect-ratio:9/16;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.wr-wait{color:var(--muted)}
.wr-nav{position:absolute;inset:60px 0 90px;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.wr-nav button{pointer-events:auto;background:none;border:0;cursor:pointer}
.wr-prev{cursor:w-resize!important}.wr-next{cursor:e-resize!important}
.wr-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:12px;position:relative;z-index:2}
.fc-btns .wr-cta{background:linear-gradient(135deg,#f3d9a4,#c2a067);color:#1b120a}
@media print{.wr,.fc-btns{display:none!important}}

/* v5: transparent cutouts. A single cigar stands tall on a dark stage with a soft spotlight; on phones it lies across a wide stage. */
.ph-stage{position:relative;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:radial-gradient(60% 45% at 50% 42%,rgba(255,226,170,.16),transparent 70%),linear-gradient(180deg,#24180f,#160f0a)}
.ph-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.ph-single .ph-stage{aspect-ratio:9/20;padding:18px 0}
.ph-single .ph-stage img{height:100%;max-height:none}
.ph-other .ph-stage{aspect-ratio:1;padding:16px}
.box-cut{background:radial-gradient(60% 50% at 50% 45%,rgba(255,226,170,.16),transparent 70%),#1d140d!important}
@media (max-width:720px){
  .ph-single .ph-stage{aspect-ratio:16/7;padding:0 12px;container-type:size}
  .ph-single .ph-stage img{position:absolute;top:50%;left:50%;height:92cqw;width:auto;max-width:none;transform:translate(-50%,-50%) rotate(-90deg)}
}
.rp.paged .ph-single .ph-stage{aspect-ratio:16/9;container-type:size}
.rp.paged .ph-single .ph-stage img{position:absolute;top:50%;left:50%;height:92cqw;width:auto;max-width:none;transform:translate(-50%,-50%) rotate(-90deg)}
.wsw{display:inline-block;width:26px;height:12px;border-radius:6px;vertical-align:-1px;background:linear-gradient(180deg,color-mix(in srgb,var(--w) 80%,#fff),var(--w) 55%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.ck-wc .fine{display:block}
.rp:not(.paged) .ck-spec{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rp:not(.paged) .ck-spec>div{grid-column:auto!important}
.rp.paged .ck-wc .fine{display:none}

/* v5: trading cards. The screen shows the make, the price and a big photo; the full evidence card opens on tap. */
.tcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px;margin:8px 0 22px}
.tc{--r:#ecc988;position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 12px 14px;text-align:left;color:var(--ink);font:inherit;cursor:pointer;
  aspect-ratio:5/7.6;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--r) 75%,transparent);overflow:hidden;
  background:radial-gradient(120% 60% at 50% 30%,color-mix(in srgb,var(--r) 14%,transparent),transparent 70%),linear-gradient(180deg,#2a1d13,#150e09);
  box-shadow:0 0 0 4px #120c08,0 0 0 5px color-mix(in srgb,var(--r) 35%,transparent),0 14px 34px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
.tc[data-slot=match]{--r:#d39a5c}.tc[data-slot=explore]{--r:#a98be0}
.tc::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:linear-gradient(115deg,transparent 30%,rgba(255,240,200,.18) 45%,rgba(200,170,255,.12) 52%,transparent 65%);background-size:250% 100%;background-position:100% 0}
.tc:hover,.tc:focus-visible{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 0 0 4px #120c08,0 0 0 5px var(--r),0 24px 50px rgba(0,0,0,.55)}
.tc:hover::after,.tc:focus-visible::after{opacity:1;animation:tc-sheen 1.1s ease forwards}
@keyframes tc-sheen{to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.tc,.tc::after{transition:none;animation:none!important}.tc:hover{transform:none}}
.tc-top{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--r)}
.tc-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--r);font-family:var(--display);font-size:12px;letter-spacing:0}
.tc-art{position:relative;flex:1;min-height:0;display:grid;place-items:center;border-radius:12px;overflow:hidden;
  background:radial-gradient(55% 45% at 50% 45%,rgba(255,226,170,.18),transparent 72%),#1a110b}
.tc-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.tc-art.is-single img{height:96%;width:auto}
.tc-art.is-photo{background:var(--paper)}.tc-art.is-photo img{mix-blend-mode:multiply;filter:none;padding:8px}
.tc-svg svg{width:150%;transform:rotate(-90deg)}
.tc-make{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tc-name{font-family:var(--display);font-size:22px;line-height:1.05;color:var(--ink)}
.tc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tc-meta .ctag{font-size:11px}
.tc-price{display:flex;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--r) 30%,transparent)}
.tc-price b{font-family:var(--display);font-size:28px;color:var(--r)}.tc-price span{font-size:12px;color:var(--muted)}
.tc-np{font-size:13px!important}
.tc-more{font-size:11px;color:var(--muted);opacity:.8}
/* Full cards live in the PDF and in the dialog; on screen the grid replaces them. */
.rp:not(.paged) .cks{display:none}
.rp.paged .tcs,.rp.paged .rp-more,.rp.paged .tc-dlg,.rp.paged .tp-open{display:none}
.rp:not(.paged) nav.box{display:none}
.tc-dlg{width:min(880px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:22px;background:#150e09;color:var(--ink)}
.tc-dlg::backdrop{background:rgba(5,3,2,.78);backdrop-filter:blur(3px)}
.tc-body .ck{margin:0;border:0;border-radius:0}
.tc-x{position:sticky;top:10px;float:right;margin:10px 10px 0 0;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,248,235,.1);color:var(--ink);font-size:26px;cursor:pointer}
/* Folded on screen until asked for: limits/answers, next steps, the long type profile. */
.rp:not(.paged):not(.full) .p1-grid,.rp:not(.paged):not(.full) .pg3{display:none}
.rp-more{display:block;margin:0 auto 30px}
.rp:not(.paged) .dna:not(.open) .tp-read,.rp:not(.paged) .dna:not(.open) .tp-more{display:none}
.rp:not(.paged) .dna:not(.open) .tp-sky{grid-template-columns:minmax(0,320px);justify-content:center}
.tp-open{display:block;margin:14px auto 0}
.tc-art{min-height:170px}
/* Phones: a swipeable hand of full-size cards. */
@media (max-width:620px){.tcs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 18px;margin:8px -16px 18px;scrollbar-width:none}
  .tcs::-webkit-scrollbar{display:none}.tc{flex:0 0 78%;scroll-snap-align:center}.tc:hover{transform:none}}
@media print{.tcs,.rp-more,.tc-dlg,.tp-open{display:none!important}}
.tc{aspect-ratio:auto}
.tc-art{flex:none;aspect-ratio:4/4.7;min-height:0}
.rp-more,.tp-open{appearance:none;font:inherit;font-size:14px;font-weight:600;color:var(--gold);background:transparent;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:12px 22px;cursor:pointer;max-width:100%}
.rp-more:hover,.tp-open:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.tc-price{margin-top:auto}
/* v5: three actions up front, the rest under More. */
.fc-moremenu{position:relative;display:inline-block}
.fc-moremenu summary{list-style:none;cursor:pointer}.fc-moremenu summary::-webkit-details-marker{display:none}
.fc-moremenu summary::after{content:" ▾"}
.fc-moremenu>div{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:220px;display:grid;padding:6px;border-radius:14px;border:1px solid var(--line);background:#1b120b;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.fc-moremenu>div>*{display:block;text-align:left;padding:11px 12px;border-radius:9px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.fc-moremenu>div>*:hover{background:rgba(255,248,235,.07)}
@media (max-width:620px){.fc-moremenu>div{left:0;right:auto}}
.tc-art img{position:absolute;inset:5% 6%;width:88%;height:90%;max-width:none;max-height:none;object-fit:contain}
.tc-art.is-photo img{inset:4%;width:92%;height:92%;padding:0}
/* v5: cutouts sit on a light studio backdrop so dark maduro wrappers read clearly (15 Oct feedback). */
.tc-art.is-single,.tc-art.is-cut,.ph-cut .ph-stage{background:radial-gradient(70% 55% at 50% 42%,#fffaf0,#efe3cc 62%,#dccab0)}
.tc-art.is-single img,.tc-art.is-cut img,.ph-stage img{filter:drop-shadow(0 10px 14px rgba(60,35,15,.35))}
/* v5: finished card pictures fill the photo window edge to edge (tools/card_art.py). */
.tc-art.is-card{background:#efe3cc}
.tc-art.is-card img{inset:0;width:100%;height:100%;object-fit:cover;filter:none;padding:0}
.tc-art.is-svg{background:radial-gradient(70% 55% at 50% 42%,#fffaf0,#efe3cc 62%,#dccab0)}
.tc-art.is-svg .tc-svg svg{width:135%;transform:rotate(-52deg);filter:drop-shadow(0 10px 14px rgba(60,35,15,.35))}

/* City choices advance on selection. Keep Skip below long lists. */
.city-form .field input{width:100%;min-width:0}
@media(max-width:720px){
  .dw-body:has(.city-form) .fc-foot{position:static}
  .dw-h{flex-wrap:wrap}
  .dw-t{flex:1;min-width:0}
}
/* v5: the band (label) seal, a close-up of the real band in a gold ring on the card picture's corner. */
.tc-seal{position:absolute;right:8px;bottom:8px;width:31%;max-width:76px;aspect-ratio:1;height:auto!important;inset:auto 8px 8px auto!important;border-radius:50%;
  box-shadow:0 0 0 3px #1b120b,0 0 0 5px var(--r),0 8px 18px rgba(0,0,0,.45);object-fit:cover!important;filter:none!important;z-index:2}
.tc:hover .tc-seal{transform:rotate(-8deg) scale(1.06);transition:transform .3s}
.tc-art img.tc-seal{position:absolute;inset:auto 8px 8px auto;width:32%;max-width:78px;height:auto;aspect-ratio:1;object-fit:cover;padding:0}
.tc-art img.tc-seal{width:38%;max-width:96px}
.tc-art.is-research,.ph-research .ph-plinth{background:#fff;container-type:size}
.tc-art.is-research>img:not(.tc-seal),.ph-research .ph-plinth img{mix-blend-mode:normal;filter:none}
.tc-art.is-research.is-landscape>img:not(.tc-seal),.ph-research[style*="90deg"] .ph-plinth img{
  inset:auto;top:50%;left:50%;width:90cqh;height:90cqw;max-width:none;max-height:none;object-fit:contain;
  transform:translate(-50%,-50%) rotate(var(--photo-rotation))}
.tc-art img.tc-seal-source{object-fit:contain;aspect-ratio:auto;border-radius:6px;max-height:76px;background:#fff}
.box-ph.box-research{container-type:size}
.box-ph.box-research img{inset:auto;top:50%;left:50%;width:90cqh;height:90cqw;transform:translate(-50%,-50%) rotate(var(--photo-rotation))}

/* v5 (15 Oct night): opening screen. Short words, radio choices, a "Start here" pop-up, real cigar cards on the right. */
.fc-kicker{margin:0 0 10px;font:700 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fc-intro .fc-h1{margin-bottom:10px}
.fc-intro .lede{font-size:clamp(18px,1.6vw,22px);margin:0 0 22px;color:var(--ink)}
.fc-start{position:relative}
.fc .fc-exp .dr-front{min-height:96px;padding:18px 18px 18px 58px}
.fc .fc-exp .dr-front::after{display:none}
.fc .fc-exp .dr-front .m{right:16px;top:16px}
.fc-exp .rdot{position:absolute;left:20px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--gold) 60%,transparent);transition:border-color .2s,background-color .2s,transform .2s}
.fc .fc-exp .dr-front:hover .rdot{border-color:var(--gold);transform:scale(1.08)}
.fc .fc-exp .dr-front[aria-checked=true]{border-color:var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 22%,#33241a),#271b12);box-shadow:0 0 0 2px var(--gold),0 20px 34px -18px #000}
.fc-exp .dr-front[aria-checked=true] .rdot{background:var(--gold);border-color:var(--gold)}
.fc-exp .dr-front[aria-checked=true] .rdot::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #1b120a;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fc-exp.picked .dr-front:not([aria-checked=true]){opacity:.45}
/* the nudge: a soft gold pulse on every choice, one after another */
@keyframes fc-pulse{0%{box-shadow:0 0 0 0 rgba(236,201,136,.55)}70%{box-shadow:0 0 0 12px rgba(236,201,136,0)}100%{box-shadow:0 0 0 0 rgba(236,201,136,0)}}
.fc-exp.nudge .dr-front{animation:fc-pulse 1.6s ease-out 2}
.fc-exp.nudge .dr-front:nth-child(2){animation-delay:.15s}.fc-exp.nudge .dr-front:nth-child(3){animation-delay:.3s}.fc-exp.nudge .dr-front:nth-child(4){animation-delay:.45s}
/* the pop-up bubble, pointing down at the choices */
.fc-ping{position:absolute;left:0;bottom:calc(100% + 14px);z-index:5;margin:0;padding:10px 16px;border-radius:12px;background:var(--gold);color:#1b120a;font-size:14px;font-weight:600;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.fc-ping b{margin-right:6px;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.fc-ping::after{content:"";position:absolute;left:34px;top:100%;border:9px solid transparent;border-top-color:var(--gold)}
.fc-ping.show{opacity:1;transform:none;animation:fc-bob 1.4s ease-in-out .4s 3}
@keyframes fc-bob{50%{transform:translateY(-5px)}}
.fc-intro .fc-start{margin-top:58px}
@media (prefers-reduced-motion:reduce){.fc-exp.nudge .dr-front,.fc-ping.show{animation:none}}
/* right side: three real cigar cards, fanned like a hand */
.fc-sample{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mt-fan{position:relative;width:min(460px,100%);height:340px}
.mt{position:absolute;top:10px;left:50%;width:180px;margin:0 0 0 -90px;padding:8px 8px 10px;border-radius:14px;background:linear-gradient(180deg,#2a1d13,#150e09);border:1.5px solid var(--gold);
  box-shadow:0 0 0 3px #120c08,0 22px 40px -14px rgba(0,0,0,.7);transform:translateX(calc(var(--r) * 13px)) rotate(calc(var(--r) * 1deg)) translateY(calc(var(--r) * var(--r) * .35px));transition:transform .4s}
.mt:nth-child(2){z-index:2;top:0}
.fc-sample:hover .mt{transform:translateX(calc(var(--r) * 17px)) rotate(calc(var(--r) * 1.3deg)) translateY(calc(var(--r) * var(--r) * .45px))}
.mt-art{position:relative;display:block;border-radius:9px;overflow:hidden;aspect-ratio:4/4.7}
.mt-art img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.mt-seal{position:absolute;right:6px;bottom:6px;width:38%;height:auto;border-radius:50%;box-shadow:0 0 0 2px #1b120b,0 0 0 3px var(--gold)}
.mt figcaption{padding:8px 4px 0;font-family:var(--display);font-size:16px;line-height:1.1;color:var(--ink)}
.mt figcaption b{display:block;font:700 10.5px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mt-cap{margin:6px 0 0;text-align:center;color:var(--muted);font-size:15px;max-width:24em}
/* how it works: three steps; the questions open on tap */
.fc-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fc-steps li{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;font-weight:600}
.fc-steps b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1b120a;font-family:var(--display);font-size:17px}
.fc-about-grid details{border:1px solid var(--line);border-radius:14px;padding:4px 18px;background:rgba(255,248,235,.025)}
.fc-about-grid summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}
.fc-about-grid summary::-webkit-details-marker{display:none}
.fc-about-grid summary::after{content:"+";font-size:22px;color:var(--gold);transition:transform .2s}
.fc-about-grid details[open] summary::after{transform:rotate(45deg)}
.fc-about-grid summary h3{margin:0;font-size:18px}
.fc-about-grid details p{margin:0 0 14px}
@media (max-width:720px){.fc-steps{grid-template-columns:minmax(0,1fr)}.mt-fan{height:290px}.mt{width:150px;margin-left:-75px}.fc-intro .fc-start{margin-top:56px}}

/* v5: every question shows what is tappable: an empty circle (one answer) or square (several), filled with a check when picked. */
.fc-body.opts .opt::before{content:"";position:absolute;top:50%;right:14px;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--gold) 50%,transparent);transition:border-color .18s}
.fc-body.opts-multi .opt::before{border-radius:6px}
.fc-body.opts .opt:hover::before{border-color:var(--gold)}
.fc-body.opts .opt[aria-pressed=true]::before{opacity:0}
.fc-body.opts .opt .tick{top:50%;margin-top:-11px;right:13px}
.fc-body.opts-multi .opt .tick{border-radius:6px}
.fc-body.opts .opt{padding-right:48px}
.fc-body.opts.opts-swatch .opt::before{top:16px;margin-top:0}
.fc-body.opts{margin-top:6px}
.fc-sample{overflow-x:clip;max-width:100%}
@media (max-width:720px){.mt{transform:translateX(calc(var(--r) * 8px)) rotate(calc(var(--r) * .8deg)) translateY(calc(var(--r) * var(--r) * .3px))}.fc-sample:hover .mt{transform:translateX(calc(var(--r) * 8px)) rotate(calc(var(--r) * .8deg))}.mt{width:136px;margin-left:-68px}.mt-fan{height:260px}}
.rp:not(.paged) .dna:not(.open) .tp-sky{grid-template-columns:minmax(0,320px) minmax(0,1fr);justify-content:stretch}
@media (max-width:720px){.rp:not(.paged) .dna:not(.open) .tp-sky{grid-template-columns:minmax(0,1fr)}}

/* v7 audit fixes (16 Oct 2026) */
/* Wrapper-colour tiles: a smaller cigar beside the name on desktop; on a phone the circle sits by the name, below the drawing. */
.opts-swatch .sw-cg{width:76px}
.fc-body.opts.opts-swatch .opt::before{top:50%;margin-top:-10px}
.fc .bud .h{letter-spacing:.04em;text-transform:none;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 2px}
.rv-ready .rv-note{font-size:15px}
.ph-alt{display:none}
@media (max-width:720px){
  /* The bottom bar only floats when Next has something to send; a Skip or a greyed Next sits in the flow, so it never covers options. */
  .dw-body .fc-foot{background:#241910;border-top:1px solid var(--line);box-shadow:0 -14px 22px -14px #000}
  .dw-body .fc-foot:has(#fc-next.quiet),.dw-body .fc-foot:has(#fc-next:disabled){position:static;background:none;border-top:0;box-shadow:none;margin:18px 0 0;padding:0}
  .fc-body.opts-long{grid-template-columns:minmax(0,1fr)}
  .fc-body.opts.opts-swatch .opt::before{top:auto;bottom:16px;margin-top:0}
  .fc-body.opts.opts-swatch .opt .tick{top:auto;bottom:15px;margin-top:0}
  .opts-swatch .sw-cg{width:100%}
  /* Price tiles: "Up to" small above the amount, two per row, Unlimited across the bottom. */
  .bud-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fc .opt.bud{min-height:64px;padding:10px 14px}
  .fc .opt.bud[data-v=any]{grid-column:1/-1}
  .bud-own{margin-top:14px}
  /* Review: a compact card. */
  .rv-big{font-size:clamp(24px,7vw,30px)}
  .rv-step .fc-foot{margin-top:16px}
  /* Card dialog: the upright card picture replaces the sideways cutout. */
  .rp:not(.paged) .ph-single:has(.ph-alt) .ph-stage{display:none}
  .rp:not(.paged) .ph-alt{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:640/752;margin:0 auto;border-radius:16px}
}
@media (max-width:380px){.bud-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Intro: the "Start here" bubble has its own row between the headline and the choices. */
.fc-intro .fc-start{margin-top:78px}
@media (max-width:720px){.fc-intro .fc-start{margin-top:74px}}
/* City question (16 Oct): the box comes first, six cities under it. */
.city-form .field{margin-top:0}
.city-form .city-or{margin:18px 0 10px}

/* Cigar Wrapped viewer fixes (16 Oct 2026): solid backdrop (the site header showed through on phones), styled secondary buttons */
.wr{background:#0c0805}
.wr-act .ghost{background:none;border:1px solid rgba(236,201,136,.45);color:var(--ink);border-radius:999px;padding:10px 18px;font:600 14px var(--text);cursor:pointer;min-height:44px}
.wr-act .pill{min-height:44px}
/* Paged report: a spec whose only value is fine print (e.g. Body "Not published") lost its value to the rule above and showed a bare label */
.rp.paged .ck-spec > div:has(> dd > .fine:only-child){display:none}
.rp.paged .pf > :first-child{white-space:nowrap}

/* ---------- The deck (17 Oct): promise header, CigarDNA chips, five cards dealt face down, a box to fill ---------- */
.rh { margin: 0 0 clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 36px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  background: radial-gradient(70% 60% at 15% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%), linear-gradient(180deg, #1c130c, #130c08) }
.rh-h { font: var(--display-weight) clamp(36px, 5.4vw, 64px)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 12px; max-width: 18ch; text-wrap: balance }
.rh-h:focus { outline: none }
.rh-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); margin: 0 0 18px; max-width: 46em }
.rh-dna { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px, 3vw, 30px) }
.rh-chip { --house: var(--gold); display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--house) 55%, var(--line)); background: color-mix(in srgb, var(--house) 8%, #150e09); transition: border-color .2s, transform .25s cubic-bezier(.16, 1, .3, 1) }
.rh-chip:hover { border-color: var(--house); transform: translateY(-1px) }
.rh-chip img, .rh-en, .rh-q { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; overflow: hidden; display: grid; place-items: center; background: #120c08; border: 1px solid color-mix(in srgb, var(--house) 50%, transparent) }
.rh-en svg { width: 120%; height: auto }
.rh-q { font: 400 28px/1 var(--display); color: var(--gold) }
.rh-chip small { display: block; font: 700 10px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--house) }
.rh-chip b { font: var(--display-weight) 17px/1.2 var(--display) }
.rh-take { border-style: dashed }
.rh-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; perspective: 1600px }
.tcw { display: grid; gap: 10px; align-content: start }
.tcw-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.16, 1, .3, 1) }
.tc-face { display: grid; backface-visibility: hidden; transform: rotateY(180deg) }
.tc-face > .tc { width: 100%; flex: none }
.tc-back { position: absolute; inset: 0; backface-visibility: hidden; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 16px; cursor: pointer;
  border-radius: 18px; border: 1px solid var(--gold); outline: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline-offset: -8px; color: var(--gold); font: inherit;
  background: radial-gradient(60% 40% at 50% 45%, rgba(236, 201, 136, .16), transparent 70%), repeating-linear-gradient(45deg, rgba(236, 201, 136, .06) 0 2px, transparent 2px 14px), #160f09;
  box-shadow: 0 22px 40px -24px #000; transition: transform .25s cubic-bezier(.16, 1, .3, 1) }
.tc-back:hover { transform: translateY(-4px) }
.tc-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.tc-back-n { font: 700 11px var(--text); letter-spacing: .16em; color: var(--muted) }
.tc-back-q { font: 400 clamp(84px, 9vw, 120px)/1 var(--display) }
.tc-back-s { font: italic var(--display-weight) 17px/1.2 var(--display); color: var(--ink); text-align: center }
.rh.up .tcw-in { transform: rotateY(180deg) }
.rh.dealing .tcw-in { transition-delay: calc(var(--i) * 160ms) }
.tc-tried { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: 600 13px var(--text); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, border-color .2s, background-color .2s, color .2s }
.rh.up .tc-tried { opacity: 1; pointer-events: auto; transition-delay: .9s }
.tc-tried svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .35 }
.tc-tried[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #1b120a) }
.tc-tried[aria-pressed=true] svg { opacity: 1 }
.tc-tried:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.rh-bar { display: flex; justify-content: center; margin-top: 22px; min-height: 56px; align-items: center }
.rh.up .rh-flip { display: none }
.rh-box { display: none; width: min(560px, 100%); text-align: center }
.rh.up .rh-box { display: block }
.rh-meter { display: block; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; margin-bottom: 10px }
.rh-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5a2a, var(--gold)); transition: width .5s cubic-bezier(.16, 1, .3, 1) }
.rh-boxt { margin: 0; color: var(--muted) } .rh-boxt b { color: var(--ink) }
/* The deck replaces page 1's heading and the page-2 card row on screen; the PDF keeps its pages. */
.rp:not(.paged) .rh ~ .pg1 > h1, .rp:not(.paged) .rh ~ .pg1 > .lede, .rp:not(.paged) .rh ~ .pg1 > .lbl, .rp:not(.paged) .rh ~ .pg1 > .box, .rp:not(.paged) .rh ~ .pg2 .tcs { display: none }
.rp.paged .rh { display: none }
@media print { .rh { display: none !important } }
@media (max-width: 620px) {
  .rh-deck { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 6px 16px 14px; margin: 0 -16px; scrollbar-width: none }
  .rh-deck::-webkit-scrollbar { display: none }
  .tcw { flex: 0 0 74%; scroll-snap-align: center }
  .rh-chip { width: 100% }
}
@media (prefers-reduced-motion: reduce) { .tcw-in, .tc-tried, .rh-meter i { transition: none !important } }

/* ---------- Intro hero (17 Oct): same build as Smoke Signature: the promise, then a wall of real cigar cards ---------- */
.fc-h1 em { font-style: italic; color: var(--gold) }
.fc-lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); max-width: 34em; margin: 0 0 26px }
.fc-wall { position: relative; align-self: center }
.fw-deck { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px);
  transform: perspective(1600px) rotateY(-16deg) rotateX(7deg) rotateZ(-2deg); transform-style: preserve-3d;
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(80% 78% at 50% 50%, #000 62%, transparent 100%) }
.fw-tile { position: relative; margin: 0; aspect-ratio: 300 / 352; border-radius: 10px; overflow: hidden; background: #f3ead8; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 14px 28px -16px #000; filter: brightness(.9) sepia(.12) }
.fw-tile img { display: block; width: 100%; height: 100%; object-fit: cover }
.fw-tile figcaption { position: absolute; inset: auto 0 0; padding: 14px 6px 5px; font: 700 9px var(--text); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(18, 12, 8, .85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fw-q { position: absolute; left: 50%; top: 50%; width: min(46%, 230px); aspect-ratio: 3 / 4; transform: translate(-50%, -50%) rotateY(16deg) rotateX(-7deg) rotateZ(2deg) translateZ(60px);
  display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 18px; border-radius: 14px;
  background: radial-gradient(60% 40% at 50% 40%, rgba(236, 201, 136, .14), transparent 70%), repeating-linear-gradient(45deg, rgba(236, 201, 136, .05) 0 2px, transparent 2px 14px), #160f09;
  border: 1px solid var(--gold); outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 5px; box-shadow: 0 30px 60px -20px #000 }
.fw-qm { font: 400 clamp(96px, 11vw, 150px)/.9 var(--display); color: var(--gold) }
.fw-q span:last-child { font: italic var(--display-weight) 19px/1.2 var(--display); color: var(--ink) }
@media (max-width: 900px) {
  .fc-wall { order: -1; max-width: 520px; width: 100%; margin: 0 auto -16px }
  .fw-deck { transform: perspective(1200px) rotateX(10deg) rotateZ(-2deg) }
  .fw-q { transform: translate(-50%, -50%) rotateX(-10deg) rotateZ(2deg) translateZ(50px) }
}

/* Drawer icons + why-lines (17 Oct): the Palate test's answer to Smoke Signature's chapter headings */
.dw-n .dw-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.dw-done .dw-n, .dw-next .dw-n { background: transparent; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)) }
.dw-why { margin: 0 0 6px; padding: 0 2px; font: italic var(--display-weight, 500) 17px/1.35 var(--display); color: var(--gold) }

/* The Palate reveal (17 Oct): chart draws, three slots turn over, then the deck */
.pr { display: grid; justify-items: center; gap: 18px; padding: clamp(32px, 6vw, 72px) 0; text-align: center }
.pr-k { margin: 0; font: italic var(--display-weight, 500) clamp(24px, 3vw, 32px) var(--display); color: var(--gold) }
.pr-en { margin: 0; width: min(300px, 70vw) }
.pr-en svg { width: 100%; height: auto }
.pr-en line:not(.en-grow), .pr-en > svg > circle { stroke-dasharray: 800; stroke-dashoffset: 800; animation: pr-draw 1.3s cubic-bezier(.16, 1, .3, 1) forwards }
.pr-en .en-p { opacity: 0; animation: pr-in .5s ease forwards; animation-delay: .5s }
.pr-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; perspective: 800px }
.pr-slot { display: grid; justify-items: center; min-width: 120px; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--gold); background: #160f09;
  animation: pr-flip .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(1s + var(--i) * .35s) }
.pr-slot b { font: 400 clamp(30px, 4vw, 40px)/1 var(--display); color: var(--gold) }
.pr-slot small { margin-top: 6px; font: 700 10px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
@keyframes pr-draw { to { stroke-dashoffset: 0 } }
@keyframes pr-in { to { opacity: 1 } }
@keyframes pr-flip { from { transform: rotateX(90deg); opacity: 0 } to { transform: none; opacity: 1 } }

/* How it works, drawn (17 Oct) */
.fc-vsteps li { display: grid; gap: 14px; align-content: start; padding: 0 0 16px; overflow: hidden; border-radius: 18px; background: var(--surface) }
.vs-vis { position: relative; display: grid; place-items: center; height: 150px; padding: 16px; background: radial-gradient(80% 90% at 50% 0%, rgba(236, 201, 136, .1), transparent 70%), #150e09; border-bottom: 1px solid var(--line) }
.vs-t { display: flex; align-items: center; gap: 12px; padding: 0 16px; font-weight: 600 }
.vs-lvl { gap: 6px; align-content: center }
.vs-lvl i, .vs-chips i { font-style: normal; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap }
.vs-lvl i.on, .vs-chips i.on { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, transparent) }
.vs-ans { gap: 12px; align-content: center }
.vs-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted) } .vs-row em { font-style: normal }
.vs-dots { display: flex; gap: 5px } .vs-dots i { width: 18px; height: 6px; border-radius: 3px; background: var(--line) } .vs-dots i.on { background: var(--gold) }
.vs-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center }
.vs-deal img, .vs-back { position: absolute; width: 74px; height: 88px; border-radius: 8px; object-fit: cover; box-shadow: 0 12px 22px -12px #000 }
.vs-deal img:nth-of-type(1) { transform: translateX(-4px) rotate(-4deg); border: 1px solid var(--gold) }
.vs-deal img:nth-of-type(2) { transform: translateX(62px) rotate(8deg); border: 1px solid var(--gold) }
.vs-back { display: grid; place-items: center; transform: translateX(-70px) rotate(-12deg); font: 400 40px/1 var(--display); color: var(--gold); border: 1px solid var(--gold);
  background: repeating-linear-gradient(45deg, rgba(236, 201, 136, .07) 0 2px, transparent 2px 10px), #160f09 }

/* Save to try (19 Oct): each dealt cigar can be saved to the humidor's To try shelf or ticked as smoked. Cards in a row
   share one height so the buttons line up whether or not a price was found. */
.tcw { grid-template-rows: 1fr auto auto; align-content: stretch }
.tc-face > .tc { height: 100% }
.tc-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px }
.tc-save { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--ink); font: 600 13px var(--text); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, border-color .2s, background-color .2s, color .2s }
.tc-tried { min-height: 44px; color: var(--ink) }
.rh.up .tc-save { opacity: 1; pointer-events: auto; transition-delay: .9s }
.tc-save svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round }
.tc-save:hover, .tc-tried:hover { border-color: var(--gold) }
.tc-save[aria-pressed=true] { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent) }
.tc-save[aria-pressed=true] svg { fill: currentColor }
.tc-save:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.tcw.is-smoked .tc-save { display: none }
.tc-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted) }
.tc-note:empty { display: none }
.tc-note a { color: var(--gold); text-underline-offset: 3px }
.rh-bar { gap: 12px; flex-wrap: wrap }
.rh.up .rh-bar { flex-direction: column }
@media (prefers-reduced-motion: reduce) { .tc-save { transition: none !important } }
/* 19 Oct UX audit: the wall holds its final size before livewall.js turns it into drifting columns (it used to start as
   the full tile grid, then shrink, pushing the intro copy up: CLS 0.26). */
.fc-wall .fw-deck { aspect-ratio: 1 / 1.06; max-height: 80svh; overflow: hidden }
.rh-all { min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); background: none; color: var(--ink); font: 600 14px var(--text); cursor: pointer }
.rh-all:hover { border-color: var(--gold); color: var(--gold) }
.rh-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.rh-all[hidden] { display: none }