:root{
  --ink:#0c0c0c; --bone:#ececec; --grey:#9a9a9a;
  --face:"Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
  --disp:"Syncopate", "Helvetica Neue", Arial, sans-serif;
  --small:1rem;
  --body:clamp(1rem,.96rem + .2vw,1.125rem);
  --lead:clamp(1.125rem,1rem + .6vw,1.5rem);
  --head:clamp(1.75rem,1rem + 3vw,3.5rem);
  --m:clamp(16px,4.6vw,72px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--face);font-size:var(--body);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2{font-family:var(--disp);font-weight:700;letter-spacing:.02em;line-height:1;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--bone);color:var(--ink);font-size:var(--small);font-weight:500;transition:transform .25s var(--ease),opacity .25s}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.97)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.seq{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
#fire{object-fit:contain;object-position:50% 100%;transform-origin:50% 92%;transform:scaleY(0) scaleX(.4);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .2s}
body.lit #fire{transform:none;opacity:1}
#man{object-position:50% 37%;clip-path:circle(var(--r,0px) at 50% 50%)}
.titles .stage{background:var(--ink)}
#pro{object-fit:contain;object-position:50% 100%}

/* fixed bar: it takes the colour of whatever is under it */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;height:68px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--m);color:var(--bone);background:var(--ink);transition:background .5s,color .5s}
body.paper .bar{background:var(--bone);color:var(--ink)}
body.paper .bar .btn{background:var(--ink);color:var(--bone)}
.bar .name{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.24em;transition:opacity .4s}
body.top .bar .name{opacity:0;pointer-events:none}
.bar .btn{min-height:42px;padding:0 18px}

/* 1. the strike */
.light{height:190vh;background:var(--ink)}
.word{position:absolute;z-index:2;left:0;right:0;top:calc(68px + 4vh);text-align:center;white-space:nowrap;line-height:.9;letter-spacing:.04em;opacity:.08;transition:opacity 2s var(--ease) .5s}
body.lit .word{opacity:1}
.strike{position:absolute;z-index:3;left:50%;bottom:9vh;transform:translateX(-50%);display:flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;background:var(--bone);color:var(--ink);transition:background .3s,color .3s,transform .2s var(--ease),bottom .4s var(--ease)}
.strike:active{transform:translateX(-50%) scale(.96)}
.strike .dot{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:pulse 1.6s infinite}
body.lit .strike{background:var(--ink);color:var(--grey);font-size:12px;min-height:44px;bottom:4vh}
body.lit .strike .dot{animation:none;background:var(--grey)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}

/* 2. the titles */
.titles{height:520vh}
.cards{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:difference;color:#fff}
.card{position:absolute;left:var(--m);right:var(--m);bottom:9vh;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.card:not(.on){visibility:hidden;transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.card.on{opacity:1;transform:none}
.card span{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(40px,8.4vw,150px);line-height:.95;letter-spacing:.02em}
.card b{font-weight:500;font-size:var(--lead)}
.c2,.c4{text-align:right;align-items:flex-end}

/* 3. the profile */
.profile{height:420vh;background:var(--bone);color:var(--ink)}
.profile .stage{background:var(--bone)}
.behind{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;white-space:nowrap;line-height:.85}
#pro{z-index:1}
.pnote{transition:opacity .5s var(--ease);position:absolute;z-index:2;right:var(--m);bottom:6vh;max-width:30ch;font-size:var(--body);background:var(--bone);padding:14px 16px}
@media (max-width:760px){.pnote{left:var(--m);right:var(--m);max-width:none}}

.lb{position:fixed;inset:0;z-index:60;background:rgba(12,12,12,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}
.lb.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s}
.lb img{max-width:94vw;max-height:88vh;object-fit:contain}
.lb button{position:absolute;top:14px;right:14px;min-height:48px;padding:0 14px;color:var(--bone)}

/* 4. the humidor */
.humidor{background:var(--bone);color:var(--ink);padding:12vh var(--m) 14vh}
.hhead{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.hhead h2{font-size:var(--head)}
.hint{font-size:var(--body);max-width:30ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:5vh}
.chips button{min-height:52px;padding:0 22px;font-size:var(--body);font-weight:500;color:var(--ink);border:2px solid var(--ink);transition:background .2s,color .2s,transform .2s var(--ease)} /* taste-skill-ignore: ink-drawn outline control */
.chips button:hover{background:#d8d8d8}
.chips button:active{transform:scale(.97)}
.chips button.on{background:var(--ink);color:var(--bone)}
.big{position:relative;margin:7vh calc(-1 * var(--m)) 0;overflow:hidden;height:calc(var(--bh,180px) + 40px);display:flex;align-items:center;transition:height .7s var(--ease)}
.bigcig{position:relative;flex:0 0 auto;margin-left:var(--m);width:var(--bw,900px);height:var(--bh,180px);background:var(--ink);border-radius:6px calc(var(--bh,180px)/2) calc(var(--bh,180px)/2) 6px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:width .7s var(--ease),height .7s var(--ease),clip-path .7s var(--ease)}
.bigcig.torpedo{clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%)}
.bigcig.in{animation:slidein .7s var(--ease)}
@keyframes slidein{from{transform:translateX(-18%);opacity:.2}to{transform:none;opacity:1}}
.bigcig img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.bigcig .band{position:absolute;top:0;bottom:0;left:74%;width:calc(var(--bh,180px) * .7);display:grid;place-items:center;background:var(--bone);box-shadow:inset 6px 0 0 var(--ink),inset -6px 0 0 var(--ink)} /* taste-skill-ignore: band edges drawn in ink */
.bigcig .band b{font-family:var(--disp);font-weight:700;letter-spacing:.14em;font-size:calc(var(--bh,180px) * .14);writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ink)}
.sizes{margin-top:10px;font-size:var(--small);color:#555}
.tray{position:relative;margin-top:5vh;height:calc(60px + var(--s,1) * 100px)}
.ruler{position:absolute;left:0;top:0;height:26px;width:calc(var(--s,1) * 200 * 3.7795px)}
.ruler i{position:absolute;top:0;width:1px;height:7px;background:var(--ink)}
.ruler i.cm{height:14px;width:2px}
.ruler span{position:absolute;top:16px;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums}
.cig{position:absolute;left:0;top:calc(30px + max(20px, var(--s,1) * 30px));height:var(--h,75px);width:var(--w,469px);background:var(--ink) url(../ink/leaf.webp) 0 50%/100% 100% no-repeat;border-radius:3px calc(var(--h,75px)/2) calc(var(--h,75px)/2) 3px;transition:width .7s var(--ease),height .7s var(--ease),clip-path .7s var(--ease);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cig .foot{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--bone);opacity:.35}
.cig.torpedo{clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}
.cig .band{position:absolute;top:0;bottom:0;left:76%;width:calc(var(--h,75px) * .62 + 6px);display:grid;place-items:center;overflow:hidden;background:var(--bone);box-shadow:inset 3px 0 0 var(--ink),inset -3px 0 0 var(--ink)} /* taste-skill-ignore: band edges drawn in ink */
.cig .band b{font-weight:500;font-size:max(6px,calc(var(--h,75px) * .17));letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg)}
.nums{display:flex;gap:clamp(24px,6vw,96px);margin-top:6vh;flex-wrap:wrap}
.nums p{display:flex;flex-direction:column;gap:6px}
.nums b{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.6vw,88px);line-height:1;font-variant-numeric:tabular-nums}
.nums span{font-size:var(--body)}
.desc{margin-top:4vh;font-size:var(--lead);max-width:44ch}
.desc #sz{font-size:var(--small);color:#555}
@media (max-width:760px){.chips button{min-height:48px;padding:0 16px}.nums{gap:22px}}

/* 5. the calling card */
.visit{background:var(--bone);padding:4vh var(--m) 14vh;scroll-margin-top:68px}
.calling{background:var(--ink);color:var(--bone);padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vh,44px);text-align:center;max-width:1100px;margin:0 auto}
.mail{display:block;white-space:nowrap;font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:1;transition:opacity .3s}
.mail:hover{opacity:.7}
#form{display:flex;flex-wrap:wrap;gap:10px;width:100%}
#form input{flex:1 1 200px;min-height:52px;background:#1d1d1d;border:0;padding:0 16px;font:inherit;font-size:var(--body);color:var(--bone);outline:0}
#form input::placeholder{color:#a5a5a5}
#form input:focus{background:#262626}
#sent{display:none;font-size:var(--lead)}
.visit.done #form{display:none}.visit.done #sent{display:block}
.cline{font-size:var(--small);letter-spacing:.18em;text-transform:uppercase;color:#bdbdbd}

/* footer */
.end{padding:14vh 0 28px;background:var(--ink)}
.endname{text-align:center;white-space:nowrap;font-family:var(--disp);font-weight:700;letter-spacing:.04em;line-height:.8}
.fine{display:flex;justify-content:space-between;gap:20px;padding:6vh var(--m) 0;font-size:var(--small);color:#bdbdbd}
.fine p{max-width:60ch}
.fine a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.bar{height:60px}.word{top:calc(60px + 3vh)}.fine{flex-direction:column;gap:8px}}

.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.card{opacity:1}}