/* =====================================================================
   El Jefe Cigars · mockup 06 design system
   EDIT THE LOOK HERE: every colour, font, size and spacing token is in :root.
   Values come from brand-concept/build/v3.py + v6.py (the mockup-06 generator).
   ===================================================================== */
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/Cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantItalic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url(/fonts/OldStandardTT-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} /* OFL, fonts/OldStandardTT-OFL.txt; Journey heading only */
@font-face{font-family:"Manrope";src:url(/fonts/Manrope.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  /* palette (website brief 0.2 / mockup 06) */
  --obsidian:#100C09; --espresso:#21130E; --walnut:#352017; --oxblood:#681F1B; --oxblood-lt:#C45E4E;
  --brass:#B58A42; --gold:#D0A65A; --leaf:#47523A; --parchment:#E7D7B7; --ivory:#F3EBDD;
  --muted:rgba(231,215,183,.62); --nav-bg:#18110D; --panel:#311B0F;
  /* rusted aged gold (RUST_STOPS in v6.py) */
  --rust-1:#6E4622; --rust-2:#936633; --rust-3:#B58A42; --rust-4:#D0A65A; --rust-5:#E2C282;
  --rust-line:linear-gradient(90deg,var(--rust-2),var(--rust-3) 22%,var(--rust-4) 45%,var(--rust-5) 52%,var(--rust-3) 70%,var(--rust-2));
  --rust-line-v:linear-gradient(180deg,var(--rust-2),var(--rust-3) 22%,var(--rust-4) 45%,var(--rust-5) 52%,var(--rust-3) 70%,var(--rust-2));
  --rust-tex:url(/img/ui-rust.webp);
  /* textures (swap the files in /img to change them) */
  --tex-nav:url(/img/ui-linen-nav.webp); --tex-espresso:url(/img/ui-linen-espresso.webp); --tex-obsidian:url(/img/ui-linen-obsidian.webp);
  --tex-panel:url(/img/ui-linen-panel.webp); --tex-soon:url(/img/ui-linen-soon.webp); --tex-band:url(/img/ui-linen-band.webp);
  --tex-wood:url(/img/ui-wood-section.webp); --tex-wood-card:url(/img/ui-wood-card.webp);
  --tex-earth:url(/img/ui-earth.webp); --tex-leaf:url(/img/ui-leaf.webp);
  --leaf-opacity:.10;
  /* type */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-hero:104px; --fs-h2:54px; --fs-h2-lg:60px; --fs-h3:32px; --fs-body:17px; --fs-small:14px; --fs-kicker:14px;
  /* layout */
  --max-w:1200px; --gutter:120px; --sec-pad:110px; --radius:3px;
  --hh:150px;            /* header height at the top of the page */
  --hh-compact:88px;     /* header height once scrolled (the film pins under this) */
  --crest-w:206px; --crest-w-compact:128px;
  --corner:48px; --corner-lg:80px; --frame-inset:14px;
}
@media (max-width:760px){:root{--fs-hero:50px;--fs-h2:30px;--fs-h2-lg:36px;--fs-h3:24px;--fs-body:15px;--gutter:20px;--sec-pad:56px;--hh:84px;--hh-compact:84px;--crest-w:112px;--crest-w-compact:112px;--frame-inset:6px;--corner-lg:48px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--obsidian) var(--tex-obsidian);color:var(--parchment);font:400 var(--fs-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ivory);margin:0;line-height:1.08;letter-spacing:.005em}
p{margin:0 0 1em}
.wrap{max-width:calc(var(--max-w) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ivory);color:var(--obsidian);padding:.6rem 1rem}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.center{text-align:center;justify-content:center}
.fine{font-size:var(--fs-small);color:var(--muted)}
.kicker{font:600 var(--fs-kicker)/1.3 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin:0 0 .8em}
.tbd{display:inline-block;font:600 12px/1.35 var(--sans);letter-spacing:.02em;color:#1b1206;background:#E9C765;border-radius:3px;padding:.15em .5em;margin:0 .15em;white-space:nowrap;vertical-align:middle}
.d-only{display:inline}.m-only{display:none}

/* ---------- rusted gold ornaments ---------- */
/* .orn: ornate scrollwork frame (filigree corners + fine double line). Place inside a position:relative box. */
.orn{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    url(/img/ui-corner-tl.webp) left top/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-tr.webp) right top/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-bl.webp) left bottom/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-br.webp) right bottom/var(--corner) var(--corner) no-repeat,
    var(--rust-line) center top/calc(100% - 2*var(--corner) + 4px) 1.6px no-repeat,
    var(--rust-line) center bottom/calc(100% - 2*var(--corner) + 4px) 1.6px no-repeat,
    var(--rust-line-v) left center/1.6px calc(100% - 2*var(--corner) + 4px) no-repeat,
    var(--rust-line-v) right center/1.6px calc(100% - 2*var(--corner) + 4px) no-repeat,
    var(--rust-line) left calc(var(--corner) - 2px) top 5.4px/calc(100% - 2*var(--corner) + 4px) .9px no-repeat,
    var(--rust-line) left calc(var(--corner) - 2px) bottom 5.4px/calc(100% - 2*var(--corner) + 4px) .9px no-repeat,
    var(--rust-line-v) left 5.4px top calc(var(--corner) - 2px)/.9px calc(100% - 2*var(--corner) + 4px) no-repeat,
    var(--rust-line-v) right 5.4px top calc(var(--corner) - 2px)/.9px calc(100% - 2*var(--corner) + 4px) no-repeat}
.page-frame{position:absolute;inset:var(--frame-inset);pointer-events:none;z-index:60;--corner:var(--corner-lg);
  background:
    url(/img/ui-corner-lg-tl.webp) left top/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-lg-tr.webp) right top/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-lg-bl.webp) left bottom/var(--corner) var(--corner) no-repeat,
    url(/img/ui-corner-lg-br.webp) right bottom/var(--corner) var(--corner) no-repeat,
    var(--rust-line) center top/calc(100% - 2*var(--corner) + 4px) 1.6px no-repeat,
    var(--rust-line) center bottom/calc(100% - 2*var(--corner) + 4px) 1.6px no-repeat,
    var(--rust-line-v) left center/1.6px calc(100% - 2*var(--corner) + 4px) no-repeat,
    var(--rust-line-v) right center/1.6px calc(100% - 2*var(--corner) + 4px) no-repeat}
/* cigar-band ribbon */
.band{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:46px;padding:0 24px;
  background:linear-gradient(180deg,rgba(16,12,9,.35),transparent 30%,transparent 70%,rgba(16,12,9,.35)),var(--tex-band) #4c2019}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--rust-line)}
.band::before{top:0;box-shadow:0 5px 0 -1px rgba(181,138,66,.4)}
.band::after{bottom:0;box-shadow:0 -6px 0 -1px rgba(181,138,66,.4)}
.band-left{font:700 17px/1 var(--serif);letter-spacing:.28em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.band-right{display:inline-flex;align-items:center;gap:12px;font:600 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--parchment);text-transform:uppercase;white-space:nowrap}
.band-right i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
/* moniker: medallion between rules, above a band */
.moniker{width:min(620px,100%);margin:0 auto}
.moniker-left{margin:0}
.moniker-top{display:flex;align-items:center;justify-content:center;gap:30px;margin-bottom:12px}
.moniker-top .rule{flex:1;height:1.4px;background:var(--rust-line);position:relative;margin-top:14px}
.moniker-top .rule::before,.moniker-top .rule::after{content:"";position:absolute;top:50%;width:8px;height:8px;background:var(--rust-4);transform:translateY(-50%) rotate(45deg)}
.moniker-top .rule:first-child::before{left:-4px}.moniker-top .rule:first-child::after,.moniker-top .rule:last-child::before{display:none}
.moniker-top .rule:last-child::after{right:-4px}
.medal{height:170px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(208,166,90,.28))}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:var(--radius);
  font:600 17px/1 var(--sans);color:var(--ivory);cursor:pointer;border:1.6px solid transparent;white-space:nowrap;
  border-image:linear-gradient(120deg,var(--rust-2),var(--rust-4) 35%,var(--rust-5) 50%,var(--rust-3) 70%,var(--rust-2)) 1;
  transition:filter .25s,box-shadow .25s}
.btn::after{content:"";position:absolute;inset:3px;border:1px solid rgba(181,138,66,.45);pointer-events:none}
.btn-primary{background:linear-gradient(180deg,rgba(255,210,160,.07) 50%,transparent 50%),var(--oxblood)}
.btn-ghost{background:rgba(22,14,9,.78);color:var(--parchment)}
.btn:hover{filter:brightness(1.14);box-shadow:0 0 26px rgba(208,166,90,.18)}
.btn-block{width:100%}
.btn .ico-tg{width:20px;height:20px}
.btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hh);transition:height .35s ease;
  background:linear-gradient(180deg,rgba(0,0,0,.15),transparent),var(--tex-nav) var(--nav-bg);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:var(--rust-line);box-shadow:0 -4px 0 -.5px rgba(181,138,66,.45)}
.site-header .wrap{height:100%;display:flex;align-items:center;gap:44px}
.brand{margin-left:-10px;flex:none}
.brand img{width:var(--crest-w);height:auto;transition:width .35s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(208,166,90,.22))}
.nav{margin-left:auto}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav a{font:500 15px/1 var(--sans);color:var(--parchment);padding:8px 0;position:relative}
.nav a:hover,.nav a[aria-current]{color:var(--ivory)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1.5px;background:var(--rust-line)}
.nav-toggle{display:none}
body.scrolled .site-header{height:var(--hh-compact)}
body.scrolled .brand img{width:var(--crest-w-compact)}
main{padding-top:var(--hh-compact)}
.page-inner main{padding-top:var(--hh)}
.preview-flag{position:relative;z-index:61;margin:0;padding:8px 20px 22px;background:var(--obsidian);font:500 11px/1.3 var(--sans);color:var(--muted);text-align:center}

/* ---------- 1 · hero: the Journey film (pinned + scroll-scrubbed) ---------- */
.film{position:relative;background:var(--obsidian);height:calc(100vh - var(--hh-compact) + var(--scroll-vh, 200) * 1vh)}
.film-pin{position:sticky;top:var(--hh-compact);height:calc(100vh - var(--hh-compact));min-height:560px;overflow:hidden}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;background:#000 url(/video/poster.webp) center/cover}
.film-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 55% at 50% 40%,rgba(16,12,9,.72) 0%,rgba(16,12,9,.35) 60%,rgba(16,12,9,.12) 100%),
             linear-gradient(180deg,rgba(16,12,9,0) 70%,rgba(16,12,9,.8) 100%)} /* 2026-10-01 feedback-oct1: centred shade for the centred headline (was a left 90deg gradient) */
.film-copy{position:relative;z-index:2;padding-top:calc(var(--hh) - var(--hh-compact) + max(36px, 21vh - 70px));transition:opacity .2s linear}
/* 2026-09-28 v2: solid El Jefe logo gold = median of the "EL JEFE" lettering in img/ui-crest.png (#CF8D2B); original soft shadow kept */
.film h1{width:auto;min-width:0;font-size:var(--fs-hero);line-height:1.02;margin:18px 0 26px;font-weight:600;color:#CF8D2B;text-align:center;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.film.still{height:auto}.film.still .film-pin{position:relative;top:0;height:880px}

/* ---------- section shells ---------- */
.sec{position:relative;padding:var(--sec-pad) 0;isolation:isolate}
.sec::before,.sec::after{content:"";position:absolute;left:0;right:0;height:90px;pointer-events:none;z-index:-1}
.sec::before{top:0;background:linear-gradient(180deg,rgba(20,13,10,.9),transparent)}
.sec::after{bottom:0;background:linear-gradient(0deg,rgba(20,13,10,.9),transparent)}
.sec-head{text-align:center;margin-bottom:60px}
.sec .sec-head h2,.sec .sec-head h1{font-size:var(--fs-h2);margin:14px 0 0}
.sec-head .sub{margin:14px 0 0;font-size:17px}
.leaf{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--tex-leaf) center/cover;opacity:var(--leaf-opacity);mix-blend-mode:screen}

/* photo frame (rusted scrollwork, offset outside the photo) */
.photo-frame{position:relative;margin:10px;box-shadow:6px 14px 30px rgba(0,0,0,.6)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame .orn{inset:-10px;--corner:48px}

/* ---------- 2 · welcome ---------- */
.sec-welcome{background:var(--tex-espresso) var(--espresso)}
.sec-welcome::marker{display:none}
.sec-welcome .moniker{margin-bottom:64px}
.welcome-grid{display:grid;grid-template-columns:640px 1fr;gap:90px;align-items:start}
.welcome-grid .photo-frame{aspect-ratio:640/470;margin:10px 0 0 20px}
.welcome-copy{padding-top:30px}
.welcome-copy h2{font-size:56px;line-height:1.08}
.welcome-copy h2 em,.soon-card h3 em{display:block;font-style:italic;font-weight:500;color:var(--gold);font-size:40px;margin-top:10px}
.welcome-copy p{font-size:18px;margin-top:26px;line-height:1.6}
.welcome-copy .quote{font:italic 500 26px/1.3 var(--serif);color:var(--muted)}

/* ---------- 3 · choose your experience ---------- */
.sec-paths{background:var(--tex-earth) center top/cover var(--espresso)}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.path-card{position:relative;display:flex;flex-direction:column;background:var(--tex-espresso) var(--espresso);min-height:510px;transition:transform .3s,box-shadow .3s} /* 2026-10-01 Bobby: darker linen everywhere */
.path-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.path-photo{height:300px;overflow:hidden;border-bottom:1.2px solid var(--rust-3)}
.path-photo img{width:100%;height:100%;object-fit:cover}
.path-body{position:relative;flex:1;padding:26px 28px 50px}
.path-body h3{font-size:var(--fs-h3)}
.path-body p{margin:14px 0 0;font-size:16px;padding-right:40px}
.arrow{position:absolute;right:28px;bottom:26px;color:var(--gold);font:600 22px/1 var(--sans)}

/* ---------- 4 · our cigars ---------- */
.sec-cigars{background:var(--tex-espresso) var(--espresso)} /* 2026-10-01 Bobby: linen panel (same as Community) instead of ui-wood-section */ /* 2026-10-01 Bobby: darker linen everywhere */
.cigar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:stretch}
.cigar-card{position:relative;display:flex;flex-direction:column;background:var(--tex-espresso) var(--espresso);padding:14px 20px 0;min-height:880px;scroll-margin-top:120px} /* 2026-10-01 Bobby: darker linen everywhere */
/* cigar-card medallion: JR seal centred on the ribbon (crown above), fully inside the band strip — never overlaps the photo */
.cigar-band{position:relative;height:108px;display:flex;align-items:center;z-index:2;overflow:visible}
.cigar-band .band{width:100%;height:38px;padding:0 12px;position:relative;z-index:1}
.cigar-band .band-left{font-size:14px}
.cigar-band .band-right{font-size:8px;gap:8px}.cigar-band .band-right i{width:5px;height:5px}
.cigar-card .cigar-band .medal{margin:0;position:absolute;left:50%;top:50%;height:80px;width:auto;transform:translate(-50%,-71%);z-index:3;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(208,166,90,.22))}
.cigar-photo{margin-top:0;height:290px;border:1.2px solid var(--rust-3);overflow:hidden}
.cigar-photo img{width:100%;height:100%;object-fit:cover;object-position:45% 55%}
.cigar-body{flex:1;display:flex;flex-direction:column;padding:28px 12px 36px}
.cigar-body .kicker{font-size:12px;letter-spacing:.25em;color:var(--brass);margin-bottom:10px}
.cigar-card .cigar-body h3{font-size:38px;white-space:nowrap;margin:0}
.pill{align-self:flex-start;margin:14px 0 18px;padding:7px 13px;border-radius:14px;background:var(--oxblood);border:1px solid var(--rust-3);font:700 12px/1 var(--sans);color:var(--ivory);letter-spacing:.02em}
.cigar-body>p{font-size:16px}
.specs{margin:6px 0 24px}
.spec{display:flex;justify-content:space-between;border-top:1px solid rgba(181,138,66,.35);padding:10px 0 12px;font-size:14px}
.spec dt{color:var(--muted);font-weight:500}.spec dd{margin:0;font-weight:600;color:var(--ivory)}.spec dd.tbc{color:var(--muted);font-weight:500}
.cigar-body .btn{margin-top:auto;height:52px;font-size:16px}
.soon-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:130px 60px 40px;background:var(--tex-soon) #1c110c;
  outline:1.4px dashed var(--brass);outline-offset:-7px;min-height:880px}
.soon-card .medal{height:210px}
.sec .soon-card h3{font-size:40px;margin-top:60px}
.soon-card h3 em{font-size:36px;margin-top:6px}
.soon-card p{margin-top:24px;font-size:16px}
.soon-card .btn{margin-top:auto;height:52px;font-size:16px}
/* 2026-09-28 v3 (Bobby): cigar cards are full-width horizontal cards stacked vertically: copy column LEFT, photo RIGHT.
   Photos are never cropped (object-fit: contain), with a dark letterbox where the aspect differs. Ribbon + seal-in-ribbon unchanged. */
.cigar-grid{grid-template-columns:1fr;gap:40px}
.cigar-card{min-height:0;padding:14px 24px 24px}
.cigar-main{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:36px;align-items:stretch;flex:1}
.cigar-main .cigar-body{padding:22px 8px 12px}
.cigar-card .cigar-photo{position:relative;height:auto;min-height:440px;margin:0;background:radial-gradient(ellipse at center,#1a120c 0%,var(--obsidian) 75%)}
.cigar-card .cigar-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.soon-card{min-height:0;padding:44px 60px 40px}
.soon-card .medal{height:150px}
.sec .soon-card h3{margin-top:22px}
.soon-card .btn{margin-top:26px;width:auto;min-width:320px}
.sec-cigars .fine{margin:50px 0 0}

/* ---------- 6 · community ---------- */
.sec-community{background:var(--tex-espresso) var(--espresso);padding:96px 0 100px;min-height:720px} /* 2026-10-01 Bobby: darker linen everywhere */
.community-photo{position:absolute;top:1px;bottom:0;right:calc(var(--frame-inset) + 2px);width:calc(50% - var(--frame-inset) - 2px);z-index:-1;overflow:hidden} /* 2026-10-01 Bobby: photo kept inside the gold page border (frame inset + 1.6px line) and centered in the right half of the bordered area; top:1px leaves the section's gold top hairline visible */
.community-photo img{width:100%;height:100%;object-fit:cover}
.community-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#21130E 0,rgba(33,19,14,.6) 110px,transparent 220px);z-index:1} /* 2026-10-01 Bobby: fade #311B0F -> #21130E (section espresso) */
.community-photo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(181,138,66,.35);z-index:2}
.community-copy{width:540px;max-width:50%}
.community-copy .moniker{width:520px;max-width:100%;margin-left:-8px}
.community-copy h2{font-size:var(--fs-h2-lg);margin-top:26px}
.tg-line{display:flex;gap:14px;align-items:flex-start;margin:26px 0 18px;font-size:18px}
.tg-line .ico-tg{flex:none;width:26px;height:26px;color:var(--gold);margin-top:1px}
.dots{list-style:none;margin:0 0 30px;padding:0}
.dots li{position:relative;padding-left:22px;margin:6px 0;font-size:16px}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--oxblood-lt)}
.community-cta{display:flex;align-items:flex-end;gap:60px}
.cta-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:30px}
.qr{margin:0;text-align:center}
.qr-box{width:120px;height:120px;border:1px solid var(--brass);display:grid;grid-template-columns:repeat(4,16px);gap:8px;padding:14px}
.qr-box i{background:#a58f73}.qr-box i:nth-child(n+5):nth-child(-n+8){background:transparent}
.qr figcaption{font-size:11px;color:var(--muted);margin-top:8px}


/* ---------- footer ---------- */
.site-footer{position:relative;background:var(--tex-obsidian) var(--obsidian);padding:52px 0 60px}
.footer-top{display:grid;grid-template-columns:560px 300px 1fr;align-items:start}
.footer-brand .crest{width:250px;margin-left:-12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(208,166,90,.22))}
.slogan{font:italic 500 26px/1.3 var(--serif);color:var(--parchment);margin:18px 0 8px}.slogan em{color:var(--gold)}
.tagline{font-size:13px;color:var(--muted)}
.fcol{padding-top:18px}
.fcol h2{font:600 12px/1 var(--sans);letter-spacing:.25em;color:var(--brass);margin:0 0 20px}
.fcol ul{list-style:none;margin:0;padding:0}.fcol li{margin:0 0 9px;font-size:15px}.fcol a:hover{color:var(--ivory)}
.footer-legal{border-top:1px solid rgba(181,138,66,.55);margin-top:40px;padding-top:22px;font-size:13px;color:var(--muted)}
.footer-legal p{margin:0 0 10px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.legal-links{display:flex;gap:12px}
.legal-links a:hover{color:var(--ivory)}

/* ---------- age gate ---------- */
.age-gate{position:fixed;inset:0;z-index:2147483000;display:none;place-items:center;padding:20px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(10,7,5,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.age-pending,.age-pending body{overflow:hidden}
.age-pending .age-gate{display:grid}
.age-box .age-denied h2{outline:none}
.age-box .age-denied p{margin:14px 0 22px}
.age-box{position:relative;max-width:480px;width:100%;text-align:center;padding:44px 40px 36px;background:var(--tex-espresso) var(--espresso);box-shadow:0 30px 80px rgba(0,0,0,.6)} /* 2026-10-01 Bobby: darker linen everywhere */
.age-box img{width:230px;margin:0 auto 18px}
.age-box h2{font-size:34px;margin-bottom:10px}
.age-box .btns{justify-content:center;margin:24px 0 18px}
.age-box .btn{min-width:130px}
.age-box{margin:auto}.age-box .btn{touch-action:manipulation}
@media (max-height:600px){.age-box{padding:22px 28px 18px}.age-box img{width:120px;margin-bottom:8px}.age-box h2{font-size:26px}.age-box .btns{margin:12px 0 10px;gap:12px}.age-box .btn{height:44px}.age-box .fine{font-size:12px;margin:0}}
@media (max-height:400px){.age-box img{display:none}.age-box h2{font-size:24px}}

/* ---------- inner pages (journey, learn, community, legal …) restyled to the 06 system ---------- */
.crumbs{position:relative;z-index:5;font-size:13px;color:var(--muted);padding-top:22px;padding-bottom:0}
.crumbs a:hover{color:var(--gold)}
.page-inner main>section:not(.sec),.page-inner main>article{position:relative;padding:80px 0}
.page-inner main>section:not(.sec):first-child{padding-top:36px}
.sec-first{padding-top:40px}
.page-inner main>section:not(.sec){background:var(--tex-espresso) var(--espresso)}
.page-inner main>section.alt{background:var(--tex-earth) center/cover var(--espresso)}
.page-inner main>article{background:var(--tex-espresso) var(--espresso)}
.page-hero{background:var(--tex-espresso) var(--espresso)}
.page-inner main h1{font-size:clamp(40px,5vw,66px);margin:6px 0 20px}
.page-inner main h2{font-size:clamp(30px,3.4vw,44px);margin:0 0 16px}
.page-inner main h3{font-size:26px;margin:0 0 8px}
.eyebrow{display:inline-block;font:600 13px/1.3 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--gold);padding-bottom:12px;margin-bottom:6px;position:relative}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:120px;height:1.2px;background:var(--rust-line)}
.center .eyebrow::after{left:50%;transform:translateX(-50%)}
.lede{font-size:19px;color:var(--parchment)}
.text{max-width:760px}
.center .text,.text.center,.wrap.center .text{margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.frame{position:relative;margin:28px 0 0;border:1.2px solid var(--rust-3);box-shadow:6px 14px 30px rgba(0,0,0,.5);overflow:hidden;background:#000}
.grid-2 .frame{margin-top:0}
.frame img{width:100%;height:auto}
.page-hero .frame img{max-height:560px;object-fit:cover}
figure{margin:28px 0}figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.card,.chapter{position:relative;display:block;background:var(--tex-espresso) var(--espresso);border:1.2px solid rgba(181,138,66,.6);transition:transform .3s,box-shadow .3s} /* 2026-10-01 Bobby: darker linen everywhere */
.card .frame,.chapter .frame{margin:0;border:0;border-bottom:1.2px solid var(--rust-3);box-shadow:none}
.card .frame img,.chapter .frame img{aspect-ratio:4/3;object-fit:cover}
.card-body{padding:22px 24px 26px}.card-body p{font-size:15px;margin:0}
.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.chapter:hover,.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.chapter .numeral{display:block;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);padding:18px 18px 0}
.chapter h3{font-size:24px;padding:8px 18px 0}.chapter p{font-size:14px;padding:6px 18px 20px;margin:0}
.article .text h2{margin-top:44px}.article ul,.article ol{padding-left:1.2em}.article li{margin:.4em 0}
.article strong{color:var(--ivory)}
.fact{border-left:2px solid var(--gold);padding:10px 0 10px 18px;font:italic 500 23px/1.35 var(--serif);color:var(--ivory)}
.muted{color:var(--muted)}
.link-arrow{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(208,166,90,.5)}
.link-arrow::after{content:" →"}
.article a:not(.btn),.page-inner main p a:not(.btn){color:var(--gold)}
.next{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:22px;border-top:1px solid rgba(181,138,66,.4)}
.glossary dt{font:600 22px/1.2 var(--serif);color:var(--ivory);margin-top:20px}.glossary dd{margin:4px 0 0}
.medal-center,.page-inner .medal{height:150px;margin:0 auto 20px}
/* forms */
.stack{display:grid;gap:16px}
.stack label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--parchment)}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--ivory);background:rgba(16,12,9,.7);border:1px solid rgba(181,138,66,.55);border-radius:var(--radius);padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px;font-weight:500!important}
.check input{width:auto;margin-top:3px}
.form-note{font-size:13px;color:var(--muted)}
.inline-form{display:flex;gap:10px}

/* ---------- tablet ---------- */
@media (max-width:1240px){
  :root{--gutter:48px;--fs-hero:84px}
  .nav ul{gap:22px}.site-header .wrap{gap:28px}
  .welcome-grid{grid-template-columns:1fr 1fr;gap:56px}
  .cigar-grid,.path-grid{gap:24px}
  .cigar-card .cigar-body h3{font-size:32px;white-space:normal}
  .footer-top{grid-template-columns:1.5fr 1fr 1fr}
  .chapters{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1060px){
  .nav{display:none}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;margin-left:auto;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:9px}
  .nav-toggle span{display:block;height:1.6px;background:var(--rust-line);width:26px}
  .nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--tex-nav) var(--nav-bg);border-bottom:1.5px solid var(--rust-3);padding:12px var(--gutter) 22px}
  .nav.open ul{flex-direction:column;gap:0}.nav.open a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid rgba(181,138,66,.18)}
  .nav.open a[aria-current]::after{display:none}
  .cigar-grid,.path-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
/* ---------- mobile (mockup 06b, 390 wide) ---------- */
@media (max-width:760px){
  :root{--fs-hero:50px;--fs-h2:30px;--fs-h2-lg:36px;--fs-h3:24px;--fs-body:15px;--gutter:20px;--sec-pad:56px;--hh:84px;--hh-compact:84px;--crest-w:112px;--crest-w-compact:112px;--frame-inset:6px;--corner-lg:48px}
  .d-only{display:none}.m-only{display:inline}
  .brand{margin-left:-4px}
  .site-header::after{bottom:2px;height:1.2px;box-shadow:none}
  .film-pin{min-height:0}
  .film-shade{background:linear-gradient(180deg,rgba(16,12,9,0) 10%,rgba(16,12,9,.55) 42%,rgba(16,12,9,.92) 70%,rgba(16,12,9,.95) 100%)}
  .film-copy{position:absolute;left:0;right:0;top:auto;bottom:56px;padding-top:0}
  .film h1{width:auto;min-width:0;margin:10px 0 14px;line-height:1.04}
  .film.still .film-pin{height:760px}
  .sec::before,.sec::after{height:44px}
  .moniker-top{gap:18px;margin-bottom:8px}.medal{height:120px}
  .band{height:40px;padding:0 16px}.band-left{font-size:14px}.moniker .band-right{display:none}
  .cigar-band{height:94px}.cigar-band .band{height:34px}.cigar-card .cigar-band .medal{height:70px}
  .sec-head{margin-bottom:30px}
  .sec .sec-head h2,.sec .sec-head h1{font-size:26px;margin-top:12px}
  .sec.sec-cigars .sec-head h2,.sec.sec-cigars .sec-head h1{font-size:28px}
  .sec-head .sub{font-size:14px;margin-top:8px}
  .welcome-grid{grid-template-columns:1fr;gap:40px}
  .sec-welcome .wrap{display:flex;flex-direction:column}
  .sec-welcome .moniker{order:2;margin:0 0 16px}
  .sec-welcome .welcome-grid{display:contents}
  .welcome-grid .photo-frame{order:1;margin:10px 10px 50px}
  .welcome-copy{order:3;padding-top:0}
  .welcome-copy h2{font-size:34px}.welcome-copy h2 em{font-size:25px;margin-top:6px}
  .welcome-copy p{font-size:15px;margin-top:18px}.welcome-copy .quote{display:none}
  .path-grid,.cigar-grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .path-grid{gap:16px}
  .path-card{min-height:0}.path-photo{height:170px}
  .path-body{padding:14px 18px 34px}.path-body h3{font-size:24px}.path-body p{font-size:13px;margin-top:10px}
  .arrow{right:18px;bottom:16px;font-size:18px}
  .cigar-grid{gap:20px}
  .cigar-card{min-height:0}
  .cigar-card .cigar-body h3{font-size:32px}
  .soon-card{min-height:520px;padding:34px 30px 36px}.soon-card .medal{height:130px}
  .sec .soon-card h3{font-size:32px;margin-top:22px}.soon-card h3 em{font-size:28px}.soon-card p{font-size:14px}
  .soon-card .btn{height:48px;font-size:14px}
  .sec-cigars .fine{font-size:11px;margin-top:20px}
  .sec-community{padding:0 0 50px;min-height:0}
  .community-photo{position:relative;top:1px;right:auto;width:auto;height:260px;margin:0 calc(var(--frame-inset) + 2px);border-bottom:1px solid var(--rust-3)} /* 2026-10-01 Bobby: inside the 6px gold border on both sides; bottom line only as wide as the photo */
  .community-photo::before,.community-photo::after{display:none}
  .community-copy{width:auto;max-width:none;padding-top:34px}
  .community-copy .moniker{margin:0}
  .community-copy h2{font-size:36px;margin-top:4px}
  .tg-line{font-size:14px;gap:10px;margin:14px 0 16px}.tg-line .ico-tg{width:20px;height:20px}
  .dots{display:none}
  .community-cta{flex-direction:column;align-items:stretch;gap:24px}
  .cta-col{padding:0;align-items:stretch}.cta-col .btn{height:48px;font-size:15px}
  .qr{align-self:flex-start}
  .site-footer{padding:30px 0 34px}
  .footer-top{grid-template-columns:1fr 1fr;row-gap:10px}
  .footer-brand{grid-column:1/-1}
  .footer-brand .crest{width:170px;margin-left:-6px}
  .slogan{font-size:21px;margin:12px 0 6px}.slogan em{display:block}
  .tagline{font-size:11px}
  .fcol{padding-top:10px}.fcol h2{font-size:10px;margin-bottom:12px}.fcol li{font-size:13px;margin-bottom:6px}
  .footer-legal{font-size:10px;margin-top:24px}.legal-links{gap:6px;flex-wrap:wrap}
  .page-inner main>section:not(.sec),.page-inner main>article{padding:48px 0}
  .chapters{grid-template-columns:1fr 1fr}
  .inline-form{flex-direction:column}
  .preview-flag{font-size:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* v3 cigar cards: tablet + mobile */
@media (max-width:1060px){.cigar-grid{grid-template-columns:1fr}.cigar-main{grid-template-columns:1fr 1fr;gap:24px}.cigar-card .cigar-photo{min-height:360px}}
@media (max-width:760px){
  .cigar-main{grid-template-columns:1fr;gap:6px}
  .cigar-main .cigar-body{padding:18px 4px 14px}
  .cigar-card{padding:10px 14px 16px}
  .cigar-card .cigar-photo{min-height:0}
  .cigar-card .cigar-photo img{position:static;height:auto;object-fit:contain}
  .soon-card{padding:34px 24px 32px}.soon-card .btn{min-width:0;width:100%}
}
/* 2026-09-28 (Bobby): cigar-card photos = ONE image filling the frame edge to edge (object-fit:cover), replacing the blurred
   --photo-bg backdrop + vignette. Thin gold border kept; no padding, no backdrop, no strips. Per-card object-position keeps the key
   content (box, cigars, band/seal, ashtray) in view. Robusto = landscape 1600x884, Golden = portrait 900x1244. */
:is(#robusto,#golden-robusto) .cigar-photo{overflow:hidden;padding:0;background:none}
:is(#robusto,#golden-robusto) .cigar-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:none}
/* 2026-09-28 (Bobby) PRE-CROP: the files are now pre-cropped from the full-res originals to the EXACT frame ratio (tools/precrop_cards.py),
   so the browser does no cropping. ONE fixed ratio per card at every width: Robusto 3:2 (cigar-robusto-v4.webp 1320x880),
   Golden 1:1 (cigar-golden-robusto-v4.webp 1320x1320). object-fit:cover stays only as a safety net; object-position centred.
   The frame no longer stretches to the text column (align-self:start, height auto, no min-height); strength band follows directly. */
:is(#robusto,#golden-robusto) .cigar-photo img{object-position:50% 50%}
:is(#robusto,#golden-robusto) .cigar-photo{min-height:0;height:auto;align-self:start}
#robusto .cigar-photo{aspect-ratio:auto 3/2} /* "auto" = ratio applies to the content box (inside the 1px border), so the visible image area is exactly 3:2 */
#golden-robusto .cigar-photo{aspect-ratio:auto 1/1}
@media (min-width:761px){
  .cigar-main:has(.cigar-strength):is(#robusto *,#golden-robusto *){grid-template-rows:auto 1fr}
  :is(#robusto,#golden-robusto) .cigar-strength{align-self:start}
}
@media (max-width:760px){
  :is(#robusto,#golden-robusto) .cigar-photo img{position:absolute;height:100%;object-fit:cover}
}
/* 2026-09-28 (Bobby) v2: cigar-card STRENGTH band — refined, cigar-band style (replaces the v1 cartoon-cigar badge).
   Sits under the photo on the card's own wood (no box, no fill, no shadow). Fine double gold hairlines above and below that fade out at the
   ends; "STRENGTH" in small tracked Manrope caps (brass); five slim lozenges (filled = brushed gold gradient --rust-5 → --rust-4 → --rust-2,
   empty = --rust-3 outline only); level in Cormorant Garamond italic (--rust-5). Tones are the existing :root gold/brass tokens only. */
.cigar-main:has(.cigar-strength){grid-template-rows:1fr auto;row-gap:0}
.cigar-main:has(.cigar-strength) .cigar-body{grid-row:span 2}
.cigar-strength{grid-column:2;justify-self:center;width:min(100%,460px);position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;margin:18px 0 6px;padding:17px 0 15px;text-align:center}
.cigar-strength::before,.cigar-strength::after{content:"";position:absolute;left:0;right:0;height:4px;border-top:1px solid;border-bottom:1px solid;
  border-image:linear-gradient(90deg,transparent,var(--rust-2) 14%,var(--rust-4) 42%,var(--rust-5) 50%,var(--rust-4) 58%,var(--rust-2) 86%,transparent) 1;opacity:.85}
.cigar-strength::before{top:0}.cigar-strength::after{bottom:0}
.cigar-strength p{margin:0}
.st-kicker{font:600 10px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--brass);padding-left:.42em}
.st-marks{display:block;width:150px;height:10px;overflow:visible}
.st-mark{fill:none;stroke:var(--rust-3);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8}
.st-mark.on{fill:var(--st-fill);stroke:var(--rust-4);stroke-width:.6;opacity:1}
.st-level{font:italic 500 21px/1.1 var(--serif);letter-spacing:.05em;color:var(--rust-5)}
@media (max-width:760px){
  .cigar-main:has(.cigar-strength){grid-template-rows:none}
  .cigar-main:has(.cigar-strength) .cigar-body{grid-row:auto}
  .cigar-strength{grid-column:1;margin:16px 0 4px;padding:15px 0 13px;gap:8px}
  .st-marks{width:136px;height:9px}.st-level{font-size:19px}
}
/* 2026-09-28 (Bobby): cigar-card spec list, Bobby's word-for-word spec copy (7–8 rows with long values). Two-column rows:
   label in the card's gold small-caps kicker style (brass, tracked caps), value in body text, left-aligned so long values wrap cleanly. */
.cigar-card .specs{margin:4px 0 22px}
.cigar-card .spec{display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:baseline;justify-content:initial;padding:7px 0 8px;font-size:13.5px;line-height:1.45}
.cigar-card .spec dt{font:700 10.5px/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.cigar-card .spec dd{font-weight:500;color:var(--parchment);text-wrap:pretty}
.cigar-card .cigar-body>p{margin-bottom:4px}
@media (max-width:1060px){.cigar-card .spec{grid-template-columns:88px 1fr;column-gap:12px;font-size:13px}}
@media (max-width:760px){.cigar-card .spec{grid-template-columns:84px 1fr;column-gap:12px;font-size:13.5px;padding:8px 0 9px}}
/* 2026-09-28 (Bobby): "The Journey" heading as an engraved label plate (home film hero ONLY; cigar names untouched).
   Letterforms: Old Standard TT Bold (OFL, self-hosted), the closest free match to the crest's "EL JEFE" lettering (wide bold roman caps,
   bracketed serifs, moderate contrast, J sitting on the baseline with a ball terminal). Set in caps with open tracking (DOM text unchanged).
   Solid logo gold #CF8D2B; the only effects are a 1px dark "struck" edge and the original soft readability shadow. Frame = fine double
   hairlines in brass/gold that fade out at the ends + one small flourish (lozenge + two curls) above and below. No foil/gradient/shimmer. */
.plate-zone{width:100%;min-width:0;display:flex;justify-content:center} /* 2026-10-01 feedback-oct1: centred in the frame (was the left half) */
.film-plate{display:inline-flex;flex-direction:column;align-items:stretch;margin:18px 0 26px}
.film .film-plate h1{width:auto;min-width:0;margin:14px 0 12px;padding:0 .2em 0 .28em;font:700 var(--fs-plate,68px)/1 "Old Standard TT",var(--serif);
  text-transform:uppercase;letter-spacing:.08em;color:#CF8D2B;text-align:center;white-space:nowrap;
  text-shadow:0 1px 0 rgba(10,6,3,.55),0 2px 30px rgba(0,0,0,.35)}
.film .film-plate h1 .plate-sub{display:block;font-size:.42em;letter-spacing:.14em;margin-top:.4em;white-space:normal} /* 2026-10-01 feedback-oct1 */
.plate-rule{display:flex;align-items:center;gap:12px;color:#B58A42}
.plate-rule i{flex:1;height:4px;border-top:1px solid;border-bottom:1px solid;opacity:.9}
.plate-rule i:first-child{border-image:linear-gradient(90deg,transparent,var(--rust-3) 45%,#CF8D2B) 1}
.plate-rule i:last-child{border-image:linear-gradient(90deg,#CF8D2B,var(--rust-3) 55%,transparent) 1}
.plate-orn{flex:none;width:64px;height:12px;overflow:visible}
.plate-orn path{stroke:#CF8D2B;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plate-orn .fill{fill:#CF8D2B;stroke:none}
.plate-rule-b .plate-orn{transform:scaleY(-1)}
@media (max-width:1060px){.film-plate{--fs-plate:56px}}
@media (max-width:760px){
  .plate-zone{width:auto;min-width:0}
  .film-plate{--fs-plate:clamp(26px,8.2vw,40px);margin:10px 0 14px;max-width:100%}
  .film .film-plate h1{margin:10px 0 8px;letter-spacing:.06em}
  .plate-rule{gap:8px}.plate-orn{width:50px;height:10px}
}
/* 2026-09-28 (Bobby): welcome section = Bobby's "Two Words. One Standard." copy (word for word). Headline in the section serif caps,
   "EL JEFE." on its own line in logo gold #CF8D2B set in Old Standard TT Bold (same face as the Journey plate), body in the existing
   Manrope at a comfortable measure, sign-off in Cormorant italic, right-aligned after a short fine gold rule. Photo + moniker unchanged. */
.welcome-copy{padding-top:14px;max-width:34em}
.welcome-copy h2{font-size:44px;line-height:1.1;letter-spacing:.03em}
.welcome-copy h2 .welcome-mark{display:block;margin-top:14px;font:700 40px/1 "Old Standard TT",var(--serif);letter-spacing:.1em;color:#CF8D2B;
  text-shadow:0 1px 0 rgba(10,6,3,.55)}
.welcome-copy p{font-size:17px;line-height:1.65;margin-top:16px;color:var(--parchment)}
.welcome-copy h2+p{margin-top:28px}
.welcome-copy p.welcome-sign{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:30px;
  font:italic 500 26px/1.2 var(--serif);color:var(--gold);letter-spacing:.01em}
.welcome-sign .rule{flex:none;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--rust-3) 40%,#CF8D2B)}
@media (max-width:1060px){.welcome-copy h2{font-size:36px}.welcome-copy h2 .welcome-mark{font-size:32px}.welcome-copy p{font-size:16px}}
@media (max-width:760px){
  .welcome-copy{max-width:none}
  .welcome-copy h2{font-size:28px}.welcome-copy h2 .welcome-mark{font-size:28px;margin-top:10px}
  .welcome-copy p{font-size:15px;margin-top:14px}.welcome-copy h2+p{margin-top:20px}
  .welcome-copy p.welcome-sign{font-size:22px;margin-top:24px;gap:12px}
  .welcome-sign .rule{width:40px}
}
.welcome-copy h2 .nw{white-space:nowrap}
/* 2026-09-28 (Bobby): welcome photo back UP, top-aligned with the "TWO WORDS. ONE STANDARD." heading block (was vertically centred).
   margin-top = .welcome-copy padding-top (14px), so the frame top is level with the h2 box top. Mobile unchanged. */
@media (min-width:761px){.sec-welcome .welcome-grid{align-items:start}.sec-welcome .welcome-grid .photo-frame{align-self:start;margin-top:14px}}
/* 2026-09-28 (Bobby): strength band marks = five hand-drawn tobacco leaves (replace the lozenges). Everything else on the band unchanged.
   Filled: brushed-gold gradient (--rust-5 → --rust-4 → --rust-2), veins as fine dark lines (--rust-1). Empty: brass (--rust-3) outline only. */
.st-marks.st-leaves{width:150px;height:28px}
.st-leaf .st-blade{fill:none;stroke:var(--rust-3);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.st-leaf .st-vein{fill:none;stroke:var(--rust-3);stroke-width:.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.75}
.st-leaf.on .st-blade{fill:var(--st-fill);stroke:var(--rust-4);stroke-width:.6}
.st-leaf.on .st-vein{stroke:var(--rust-1);stroke-width:.7;opacity:.85}
@media (max-width:760px){.st-marks.st-leaves{width:140px;height:26px}}
@media (max-width:1060px) and (min-width:761px){.welcome-copy p.welcome-sign{font-size:21px;white-space:nowrap;gap:10px}.welcome-sign .rule{width:32px}}
.st-marks.st-leaves{width:164px;height:31px}
@media (max-width:760px){.st-marks.st-leaves{width:146px;height:27px}}
/* 2026-09-28 (Bobby): "No prices shown" small print removed (home + /cigars/). /cigars/ "Find a Retailer" button keeps the 50px (mobile 20px)
   gap the note used to give it, so it doesn't sit flush on the cards. */
.sec-cigars .cigar-grid+.btns{margin-top:50px}
@media (max-width:760px){.sec-cigars .cigar-grid+.btns{margin-top:20px}}

/* 2026-09-28 (Bobby, call): Learn page hero photo under a dark overlay (v2: fireplace-lounge photo replaces the rejected box-open-real) */
.page-inner main>section.page-hero.hero-photo{position:relative;padding:130px 0 120px;background:linear-gradient(180deg,rgba(18,11,7,.78) 0%,rgba(18,11,7,.56) 45%,rgba(18,11,7,.84) 100%),var(--hero-img) center 50%/cover no-repeat #120b07;border-bottom:1.2px solid var(--rust-3)}
.hero-learn{--hero-img:url(/img/learn-hero-fireplace-lounge.webp)}
.page-hero.hero-photo h1,.page-hero.hero-photo .lede{text-shadow:0 2px 14px rgba(0,0,0,.75)}
.page-hero.hero-photo .lede{color:#efe3cf}
@media (max-width:760px){.page-inner main>section.page-hero.hero-photo{padding:90px 0 80px;background-size:auto,auto 125%;background-position:0 0,44% 8%}}

/* 2026-09-28 (Bobby copy): /learn/storing-cigars/ "Caring for Your El Jefe Cigars" guide. Scoped to .guide / .guide-hero.
   Headings in logo gold #CF8D2B, thin brass rules only, no boxes or effects. */
.guide-hero h1{color:#CF8D2B}
.guide .text>.lede{margin:0 0 18px}
.guide .text h2{color:#CF8D2B;margin:56px 0 18px;padding-top:30px;border-top:1px solid rgba(181,138,66,.28)}
.guide .text h3{color:#CF8D2B;font-size:24px;line-height:1.2;margin:34px 0 10px}
.guide .text h2+h3{margin-top:22px}
.guide .text p{margin:0 0 16px}
.guide-spec{margin:10px 0 26px;padding:6px 0;max-width:460px;border-top:1px solid rgba(207,141,43,.55);border-bottom:1px solid rgba(207,141,43,.55)}
.guide-spec div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:10px 0}
.guide-spec div+div{border-top:1px solid rgba(181,138,66,.22)}
.guide-spec dt{font:600 12px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);align-self:center}
.guide-spec dd{margin:0;font-weight:600;color:var(--ivory)}
.article ol.guide-steps{margin:6px 0 24px;padding-left:1.6em}
.guide-steps li{padding-left:.3em;margin:.55em 0}
.guide-steps li::marker{color:#CF8D2B;font-weight:600}
@media (max-width:760px){
  .guide .text h2{margin-top:44px;padding-top:24px}
  .guide .text h3{font-size:21px;margin-top:28px}
  .guide-spec{max-width:none}
  .guide-spec div{grid-template-columns:1fr;gap:2px;padding:10px 0}
}

/* 2026-09-28 (Bobby copy): /learn/wrapper-shades-and-sizes/ "Cigar Sizes, Shapes & Occasions". Reuses the .guide / .guide-spec rules
   from the storing page. Adds: a wide spec variant, .guide-sub (## sub-sections), .vitola (### vitola names), .guide-label ("Ideal For:"), .guide-q. */
.guide-spec-wide{max-width:560px;margin:4px 0 20px}
.guide-spec-wide div{grid-template-columns:250px 1fr}
.guide .text h3.guide-sub{font-size:32px;font-style:italic;font-weight:500;line-height:1.15;margin:56px 0 16px;padding-top:26px;border-top:1px solid rgba(181,138,66,.2)}
.guide .text h3.vitola{font-size:27px;font-variant:small-caps;letter-spacing:.03em;margin:46px 0 10px;display:flex;align-items:center;gap:12px}
.guide .text h3.vitola::before{content:"";flex:none;width:7px;height:7px;background:#CF8D2B;transform:rotate(45deg);opacity:.85}
.guide .text h2+h3.vitola,.guide .text p+h3.vitola{margin-top:40px}
.guide .text h2+p+h3.vitola{margin-top:34px}
.guide-ideal{margin-top:4px}
.guide-label{display:block;font:600 12px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#CF8D2B;margin-bottom:2px}
.guide .text p.guide-q{margin:26px 0 4px}
.guide-q strong{color:var(--ivory);font-weight:600}
.guide .text p.guide-q+p{margin-bottom:0}
@media (max-width:760px){
  .guide .text h3.guide-sub{font-size:25px;margin-top:44px;padding-top:22px}
  .guide .text h3.vitola{font-size:23px;margin-top:38px}
  .guide-spec-wide div{grid-template-columns:1fr}
}

/* 2026-09-28 (Bobby): /learn/storing-cigars/ subtitle "Caring for Your El Jefe Cigars" under the H1, reusing the site's gold .kicker style */
.guide-hero h1+.guide-subtitle{margin:-6px 0 0}
@media (max-width:760px){.guide-hero h1+.guide-subtitle{font-size:12px;letter-spacing:.2em;margin-top:-8px}}

/* 2026-09-28 (Bobby): the storing + sizes guides no longer show an inline hero image. Their eyebrow/H1/subtitle now sit in a
   <header class="guide-head"> at the top of the single guide article (no separate hero section, so no linen-tile seam under the H1).
   Top padding matches the old hero (36px); the H1 block is followed by a calm gap before the intro. Only .guide-page (these two pages). */
.page-inner main>article.guide-page{padding-top:36px}
.guide-head{margin:0 0 44px}
.guide .guide-head h1{color:#CF8D2B}  /* gold only on the Bobby-copy guides (.guide); pairing + glossary keep their original ivory H1 */
.guide .text .guide-head h1+.guide-subtitle{margin:-6px 0 0}
@media (max-width:760px){
  .guide-head{margin-bottom:32px}
  .guide .text .guide-head h1+.guide-subtitle{font-size:12px;letter-spacing:.2em;margin-top:-8px}
}

/* 2026-09-28 (Bobby): cut & light guide — bold inline labels ("Best For:", "Why Choose It:", "How to Do It:", "Too tight:", ...) */
.guide-lead strong{color:var(--ivory);font-weight:600}
.guide .text p.guide-lead+ol.guide-steps{margin-top:-4px}

/* 2026-09-28 (Bobby): pairing guide — short rhythm lines (Sip. / Pause. / Draw. / Enjoy.) and the flavour questions (Wood? Coffee? ...)
   are kept as separate lines in a tight, quiet stack: serif italic, ivory, hairline gold rule on the left. */
.guide .text p.guide-beat{margin:0;padding:1px 0 1px 18px;border-left:1px solid rgba(207,141,43,.45);font:italic 500 21px/1.5 var(--serif);color:var(--ivory)}
.guide .text p:not(.guide-beat)+p.guide-beat{margin-top:4px;padding-top:6px}
.guide .text p.guide-beat+p:not(.guide-beat){margin-top:18px}
.guide .text p.guide-beat:has(+p:not(.guide-beat)){padding-bottom:6px}
.guide .text h3.guide-sub+h3.vitola{margin-top:22px}
@media (max-width:760px){.guide .text p.guide-beat{font-size:19px;padding-left:14px}}

/* 2026-09-28 (Bobby): tobacco-colors guide (/learn/glossary/). Restrained: hairline gold rules, serif italics, no fills. */
.guide .text p.guide-shade{margin:-4px 0 14px;font:italic 500 19px/1.4 var(--serif);color:#C9A36A;letter-spacing:.01em}
/* flavour words: every item gets a leading gold dot; the list is pulled left 1.4em inside an overflow:hidden block, so a dot that starts a (wrapped) line is clipped and dots only ever sit between words */
.guide-flavor-block{margin:6px 0 18px;overflow:hidden}
.article ul.guide-flavors{list-style:none;margin:0 0 0 -1.4em;padding:0;display:flex;flex-wrap:wrap;color:var(--ivory)}
.article .guide-flavors li{margin:0}
.guide-flavors li::before{content:"·";display:inline-block;width:1.4em;text-align:center;color:#CF8D2B;opacity:.9}
.guide .text p.guide-pull{margin:22px 0;padding:2px 0 2px 18px;border-left:1px solid rgba(207,141,43,.5);font:italic 500 23px/1.45 var(--serif);color:var(--ivory)}
.guide-label.guide-label-case{font:italic 500 20px/1.35 var(--serif);letter-spacing:0;text-transform:none;margin-bottom:2px}
.guide .text p.guide-choose{margin:0 0 18px}
.article ul.guide-colors{list-style:none;margin:10px 0 28px;padding:0;border-top:1px solid rgba(181,138,66,.22)}
.article .guide-colors li{display:grid;grid-template-columns:200px 30px 1fr;align-items:baseline;margin:0;padding:12px 0;border-bottom:1px solid rgba(181,138,66,.22)}
.guide-colors .gc-shade{font:500 22px/1.3 var(--serif);color:#CF8D2B}
.guide-colors .gc-arrow{color:rgba(207,141,43,.65)}
.guide-colors .gc-notes{color:var(--ivory);letter-spacing:.01em}
.guide .text p.guide-tagline{margin:40px 0 4px;padding-top:24px;border-top:1px solid rgba(181,138,66,.22);font:italic 500 26px/1.3 var(--serif);color:#CF8D2B}
@media (max-width:760px){
  .guide .text p.guide-shade{font-size:17px}
  .guide .text p.guide-pull{font-size:20px;padding-left:14px}
  .guide-label.guide-label-case{font-size:18px}
  .article .guide-colors li{grid-template-columns:22px 1fr;row-gap:2px;padding:11px 0}
  .guide-colors .gc-shade{grid-column:1/-1;grid-row:1;font-size:20px}
  .guide-colors .gc-arrow{grid-column:1;grid-row:2}
  .guide-colors .gc-notes{grid-column:2;grid-row:2}
  .guide .text p.guide-tagline{font-size:22px}
}

/* 2026-09-29 (Bobby): /learn/ tightened after the "New to cigars?" section was removed; hero-photo is only used by the Learn hero.
   Top padding trimmed, bottom = the standard section padding (80 desktop / 48 mobile). Was 130/120 and 90/80. */
.page-inner main>section.page-hero.hero-photo{padding:96px 0 80px}
@media (max-width:760px){.page-inner main>section.page-hero.hero-photo{padding:64px 0 48px}}
/* 2026-09-30 (Bobby): /legal/terms/ closing sign-off under section 9 = the site crest + slogan, centred.
   Same treatment as the homepage welcome sign-off (Cormorant italic 500, gold, fine gold rule) with the rule mirrored on both sides;
   crest shadow = the footer crest's. Used only by the Terms body (tools/render_terms.py). */
.article .terms-updated{margin-bottom:8px}
.page-signoff{margin:64px 0 8px;text-align:center}
.page-signoff .crest{display:block;width:220px;height:auto;margin:0 auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(208,166,90,.22))}
.page-signoff p.page-signoff-line{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 0;
  font:italic 500 26px/1.2 var(--serif);color:var(--gold);letter-spacing:.01em}
.page-signoff-line .rule{flex:none;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--rust-3) 40%,#CF8D2B)}
.page-signoff-line .rule:last-child{background:linear-gradient(270deg,transparent,var(--rust-3) 40%,#CF8D2B)}
@media (max-width:760px){
  .page-signoff{margin-top:48px}
  .page-signoff .crest{width:170px}
  .page-signoff p.page-signoff-line{font-size:22px;gap:10px;margin-top:18px;white-space:nowrap}
  .page-signoff-line .rule{width:24px}
}
@media (max-width:360px){.page-signoff p.page-signoff-line{font-size:20px}.page-signoff-line .rule{display:none}}
/* 2026-09-30 (Bobby): /contact/ form (tools/render_contact.py + site.js): inline field errors, send status, hidden honeypot. */
.contact-grid{align-items:start}
.page-inner main .contact-grid h2{margin:40px 0 14px}
.page-inner main>article.contact-more{padding-top:0}.article.contact-more .text h2:first-child{margin-top:0}
@media (max-width:760px){.page-inner main .contact-grid h2{margin-top:32px}.contact-grid{gap:40px}}
.contact-form .hp,.signup-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .field-error{margin:-8px 0 0;font:600 14px/1.4 var(--sans);color:#F2A58E}
.contact-form [aria-invalid="true"]{border-color:#E07A5F;outline-color:#E07A5F}
.contact-form .check input[aria-invalid="true"]{outline:2px solid #E07A5F;outline-offset:2px}
.contact-form button[disabled]{opacity:.65;cursor:progress}
.contact-form .form-status{margin:0;padding:12px 14px;border-radius:var(--radius);font:600 15px/1.45 var(--sans)}
.contact-form .form-status.ok{color:var(--ivory);background:rgba(208,166,90,.14);border:1px solid rgba(208,166,90,.6)}
.contact-form .form-status.err{color:#F2A58E;background:rgba(224,122,95,.1);border:1px solid rgba(224,122,95,.55)}
/* 2026-09-30 (Bobby): footer social icons (Telegram, Instagram) at the very bottom of the footer, right-aligned, every page; URLs = content.json site.telegram_url / site.instagram_url. */
.footer-social{display:flex;justify-content:flex-end;gap:22px;margin-top:22px}
.footer-social .social-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#CF8D2B;border:1px solid rgba(181,138,66,.4);transition:color .2s,border-color .2s,background-color .2s,transform .2s}
.footer-social .social-ico svg{width:24px;height:24px;display:block}
.footer-social .social-ico:hover,.footer-social .social-ico:focus-visible{color:var(--ivory);border-color:#CF8D2B;background:rgba(207,141,43,.12);transform:translateY(-1px)}
.footer-social .social-ico:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:760px){.footer-social{margin-top:16px;gap:18px}.footer-social .social-ico{width:42px;height:42px}.footer-social .social-ico svg{width:22px;height:22px}}
/* 2026-09-30 (Bobby): homepage Join the Community: QR placeholder removed, so the button no longer needs bottom padding to line up with it.
   /contact/#events (footer + concierge "Events" links) lands below the fixed header. */
.community-cta .cta-col{padding-bottom:0}
.contact-more{scroll-margin-top:calc(var(--hh-compact) + 24px)}
/* 2026-09-30 (Bobby, launch polish, "spaced out like a high luxury brand"): HOMEPAGE only (+ footer text wrapping). Visual only.
   - one generous section rhythm: every homepage section 120px top/bottom (was 110 / community 96-100 / closing 90); mobile 72px (was 56 / closing 90)
   - one section-heading size: --fs-h2 (54px desktop / 30px mobile) for paths, cigars, community, closing (were 54/54/60/50 and 26/28/36/32)
   - a fine gold hairline marks each section change; balanced headings + "pretty" paragraph wrapping to avoid orphaned single words */
.page-home{--sec-pad:120px}
.page-home .sec-community{padding:var(--sec-pad) 0}
.page-home main>.sec+.sec{box-shadow:inset 0 1px 0 rgba(181,138,66,.22)}
.page-home .community-copy h2{font-size:var(--fs-h2)}
.page-home main h2,.page-home main h3{text-wrap:balance}
.page-home main p,.page-home main li,.site-footer p{text-wrap:pretty}
@media (max-width:760px){
  .page-home{--sec-pad:72px}
  .page-home .sec .sec-head h2,.page-home .community-copy h2{font-size:var(--fs-h2)}
  .page-home .sec-community{padding:0 0 var(--sec-pad)}
}
/* launch polish: the stacked (single-column) "More Cigars · Coming Soon" card no longer keeps a 520px minimum, which left an empty band under its button */
@media (max-width:1060px){.page-home .soon-card{min-height:0}}
/* 2026-09-30 21:44-21:46 (Bobby): the homepage Concierge section and the "Your Moment Is Waiting." closing block were removed (with all CSS that only
   they used), so Our Cigars now meets Join the Community directly and Join the Community is the last section, sitting directly on the footer. The same single gold hairline used between homepage sections marks that join (homepage only). */
.page-home .site-footer{box-shadow:inset 0 1px 0 rgba(181,138,66,.22)}
/* 2026-09-30 (Bobby): /retailers/ "Find a Retailer" page (body: pages/retailers.html). Reuses .page-hero, .card, .card-body, .grid-3 and .btn; these rules only
   lay out the store fields inside each card and stop the hover lift (the cards are not links). */
.retailer-card:hover{transform:none;box-shadow:none}
.retailer-card h3{margin-bottom:16px}
.retailer-fields{margin:0;display:grid;gap:12px}
.retailer-fields dt{font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.retailer-fields dd{margin:3px 0 0;font-size:15px;color:var(--parchment)}
.retailer-fields a{color:var(--gold)}
.retailers-cta{margin-top:56px}.retailers-cta p{max-width:640px;margin:0 auto 22px}
@media (max-width:760px){.retailers-cta{margin-top:36px}}

/* 2026-09-30 (Bobby, voice): /legal/privacy/ heading sat ~180px above the first sentence (hero 20px h1 margin + 80px bottom padding + article 80px top).
   Now the same calm H1-to-intro gap as the guide pages (.guide-head: 44px desktop / 32px mobile). Only the privacy page uses .legal-hero/.legal-body (tools/render_privacy.py). */
.page-inner main>section.page-hero.legal-hero{padding-bottom:0}
.page-inner main>section.page-hero.legal-hero h1{margin-bottom:0}
.page-inner main>article.legal-body{padding-top:44px}
@media (max-width:760px){.page-inner main>article.legal-body{padding-top:32px}}

/* ---------- 2026-10-01 (Bobby, feedback-oct1): email signup block, right after the footer on every page ---------- */
.signup{position:relative;background:var(--tex-espresso) var(--espresso);border-top:1.5px solid var(--rust-3);padding:56px 0 64px;text-align:center}
.signup-inner{max-width:760px}
.signup h2{font:600 var(--fs-h2,34px)/1.15 var(--serif);color:var(--gold);margin:0 0 12px}
.signup-text{font:400 16px/1.6 var(--sans);color:var(--parchment);margin:0 auto 26px;max-width:620px}
.signup-form{position:relative;max-width:560px;margin:0 auto}
.signup-row{display:flex;gap:12px;align-items:stretch}
.signup-row input{flex:1;height:56px}
.signup-row .btn{flex:none}
.signup-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup-form input[aria-invalid="true"]{border-color:#E07A5F}
.signup-form .field-error{margin:10px 0 0;font:600 14px/1.4 var(--sans);color:#F2A58E;text-align:left}
.signup-form .form-status{margin:14px 0 0;padding:12px 14px;border-radius:var(--radius);font:600 15px/1.45 var(--sans)}
.signup-form .form-status.ok{color:var(--ivory);background:rgba(208,166,90,.14);border:1px solid rgba(208,166,90,.6)}
.signup-form .form-status.err{color:#F2A58E;background:rgba(224,122,95,.1);border:1px solid rgba(224,122,95,.55)}
@media (max-width:760px){
  .signup{padding:40px 0 48px}
  .signup-row{flex-direction:column}
  .signup-row .btn{width:100%}
}

/* ---------- 2026-10-02 (Bobby: the film plays too fast when scrolling on a phone): phones only ----------
   Longer scroll length (--scroll-vh-m, content.json film.scroll_vh_mobile) so a swipe moves the film less. The pin and the length use lvh
   (the large viewport, fixed while the address bar shows/hides), so the length never jumps mid-scroll; vh stays as the fallback. Desktop untouched. */
@media (max-width:760px){
  .film{height:calc(100vh - var(--hh-compact) + var(--scroll-vh-m, var(--scroll-vh, 200)) * 1vh);
        height:calc(100lvh - var(--hh-compact) + var(--scroll-vh-m, var(--scroll-vh, 200)) * 1lvh)}
  .film-pin{height:calc(100lvh - var(--hh-compact))}
  .film.still{height:auto}
}
/* 2026-10-03 (Bobby picked option C from the 2026-10-01 review page /_options/skip/): "Skip the Journey" control on the homepage film, a miniature of the
   headline plate (emblem img/ui-medallion.webp, the same double hairlines + diamond ornament, down arrow), in the headline lettering (Old Standard TT 700,
   uppercase, #CF8D2B). Markup: build.py skip_control(). site.js shows it (.on) only while the film is pinned and jumps to the first section after the film.
   Desktop: bottom-right of the film frame. Phone (<=760px): top-right, clear of the headline plate at the bottom. Rules copied from the review page (option C only). */
.sk{position:absolute;z-index:5;right:40px;bottom:calc(30px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;min-width:44px;min-height:44px;padding:8px 12px;margin:0;border:0;border-radius:6px;background:none;cursor:pointer;color:#CF8D2B;
  font:700 17px/1 "Old Standard TT",var(--serif);text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 0 rgba(10,6,3,.55),0 2px 18px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.sk.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.sk:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sk:hover .sk-lbl{color:#E0A64A}.sk:hover .sk-medal{filter:drop-shadow(0 0 10px rgba(207,141,43,.55))}
.sk-medal{display:block;width:auto;height:64px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:filter .2s}
.sk-lbl{white-space:nowrap;transition:color .2s}
.sk-chev{display:block;flex:none;color:#CF8D2B}
.sk-c{flex-direction:column;gap:6px;padding:10px 14px}
.sk-c .sk-medal{height:56px}
.sk-c .sk-plate{display:inline-flex;flex-direction:column;align-items:stretch;gap:6px}
.sk-c .plate-rule{gap:6px}.sk-c .plate-orn{width:40px;height:8px}
.sk-c .sk-lbl{font-size:15px;padding:0 .2em 0 .28em}
@media (max-width:760px){
  .sk{right:calc(12px + env(safe-area-inset-right));bottom:auto;top:14px;font-size:14px;letter-spacing:.06em}
  .sk-medal{height:48px}.sk-c .sk-lbl{font-size:12.5px}
  .sk-c .sk-medal{height:42px}.sk-c .plate-orn{width:30px;height:7px}
}
@media (prefers-reduced-motion:reduce){.sk,.sk.on{transition:none;transform:none}}
.sk-target:focus{outline:none} /* 2026-10-03: the section the skip control lands on (focused for keyboard/screen-reader users, no ring) */