/* Torch Outlet. One family (Archivo) at two widths. White shop floor, yellow price tickets, one night section. */
:root{
  --paper:#fff; --shelf:#eef1f3; --ink:#101418; --soft:#56616b; --line:#d9dee2;
  --ticket:#ffe100; --ticket-deep:#f2c800; --strike:#d7261e; --night:#0b1622; --night-soft:#9fb0c2; --ok:#1e7b4b;
  --wrap:1240px; --r:6px;
  --cond:"wdth" 64; --wide:"wdth" 108;
}
@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(archivo.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.02rem/1.55 Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 100}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.02;font-weight:800;font-variation-settings:var(--cond);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.2vw,5.6rem);font-weight:900}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.22rem;line-height:1.15}
p{margin:0;text-wrap:pretty}
.wrap{width:min(var(--wrap),100% - 2*clamp(16px,4vw,40px));margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:1rem}
.muted{color:var(--soft)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--soft);max-width:60ch}
.small{font-size:.88rem}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.night :focus-visible,footer.site :focus-visible{outline-color:var(--ticket)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.4rem;border:2px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;font:700 1rem/1 Archivo,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.small{min-height:40px;padding:.45rem .95rem;font-size:.92rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.night .btn.ghost{border-color:#fff;color:#fff}

/* top strip + header */
.topbar{background:var(--ticket);font-weight:600;font-size:.9rem}
.topbar .wrap{display:flex;gap:.4rem 1.6rem;flex-wrap:wrap;justify-content:space-between;padding-block:.42rem}
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:1.2rem;min-height:66px}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:900;font-size:1.55rem;font-variation-settings:var(--cond);line-height:1;white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none}
.logo b{background:var(--ticket);padding:.08em .28em .04em;margin-left:.12em;font-weight:900}
nav.main{display:flex;gap:.2rem;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav.main a{padding:.5rem .7rem;text-decoration:none;font-weight:600;font-size:.96rem;white-space:nowrap;border-radius:var(--r)}
nav.main a:hover{background:var(--shelf)}
nav.main a[aria-current]{box-shadow:inset 0 -3px 0 var(--ticket-deep)}
.cartbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:2px solid var(--ink);border-radius:var(--r);text-decoration:none;font-weight:700;white-space:nowrap}
.cartbtn span{background:var(--ink);color:#fff;border-radius:99px;min-width:1.5rem;text-align:center;padding:0 .4rem;font-size:.85rem}
@media(max-width:860px){header.site .wrap{flex-wrap:wrap;padding-block:.5rem;gap:.4rem 1rem}nav.main{order:3;width:100%;margin-left:0}.cartbtn{margin-left:auto}}

/* the ticket: the one loud thing on the page */
.tag{display:inline-flex;align-items:baseline;gap:.55rem;background:var(--ticket);padding:.3rem .7rem .26rem 1.5rem;line-height:1;position:relative;
  clip-path:polygon(.85rem 0,100% 0,100% 100%,.85rem 100%,0 50%)}
.tag::before{content:"";position:absolute;left:.62rem;top:50%;width:.42rem;height:.42rem;margin-top:-.21rem;border-radius:50%;background:#fff}
.tag b{font-weight:900;font-size:1.7rem;font-variation-settings:var(--cond)}
.tag s{color:var(--strike);text-decoration-thickness:2px;font-weight:600;font-size:.95rem}
.tag small{font-size:.74rem;font-weight:600}
.tag.big{padding:.7rem 1.2rem .6rem 2.4rem;gap:.9rem}
.tag.big b{font-size:3rem}
.tag.big s{font-size:1.25rem}
.tag.big::before{left:1rem;width:.6rem;height:.6rem;margin-top:-.3rem}
.save{font-weight:700;color:var(--strike);font-size:.92rem}

/* hero */
.hero{border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(28px,5vw,64px)}
.hero .copy{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.hero h1 span{display:block}
.hero h1 .half{background:var(--ticket);display:inline-block;padding:.02em .16em 0;margin-left:-.16em}
.hero figure{margin:0;position:relative;display:grid;place-items:center;min-width:0}
.hero figure img{width:min(100%,520px);mix-blend-mode:multiply}
.hang{position:absolute;right:4%;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swing 1.5s cubic-bezier(.3,1.4,.5,1) .15s both}
.hang i{width:2px;height:clamp(40px,7vw,86px);background:var(--ink)}
.hang .card{background:var(--ticket);padding:1.1rem 1.2rem .9rem;text-align:center;line-height:1;border-radius:3px;box-shadow:0 10px 0 -6px rgba(16,20,24,.18);position:relative;min-width:150px}
.hang .card::before{content:"";position:absolute;left:50%;top:.4rem;width:.6rem;height:.6rem;margin-left:-.3rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.hang .card small{display:block;margin-top:.6rem;font-weight:600;font-size:.86rem}
.hang .card s{color:var(--strike);font-weight:700;font-size:1.2rem;text-decoration-thickness:2px}
.hang .card b{display:block;font-size:clamp(3rem,6vw,4.4rem);font-weight:900;font-variation-settings:var(--cond);margin:.15rem 0 .1rem}
.hang .card em{font-style:normal;font-weight:700;font-size:.9rem}
@keyframes swing{0%{transform:rotate(16deg)}100%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.hang{animation:none;transform:rotate(-4deg)}html{scroll-behavior:auto}}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero figure{order:-1;max-width:420px;margin-inline:auto}.hang{right:0}}

/* proof: three plain columns */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.proof>div{padding:clamp(18px,2.6vw,34px) clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:.5rem}
.proof>div+div{border-left:1px solid var(--line)}
.proof h3{font-size:1.45rem}
.proof p{color:var(--soft)}
.proof a{font-weight:700}
@media(max-width:820px){.proof{grid-template-columns:1fr}.proof>div+div{border-left:0;border-top:1px solid var(--line)}}

/* sections */
.band{padding-block:clamp(36px,6vw,80px)}
.band.shelf-bg{background:var(--shelf)}
.band.tight{padding-top:clamp(20px,3vw,36px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(18px,2.6vw,32px)}
.head>div{display:flex;flex-direction:column;gap:.6rem;max-width:64ch}
.night{background:var(--night);color:#fff}
.night .lede,.night .muted{color:var(--night-soft)}

/* product grid: no boxes, white product shots sit on the white floor */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff}
.pgrid.three{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1rem 1rem 1.1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;background:#fff}
.pcard .pic{aspect-ratio:1;display:grid;place-items:center;padding:6%}
.pcard .pic img{max-height:100%;width:auto;object-fit:contain}
.pcard h3{font-size:1.16rem}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard h3 a:hover{text-decoration:underline}
.pcard .facts{color:var(--soft);font-size:.9rem;font-weight:500}
.pcard .facts b{color:var(--ink)}
.pcard .blurb{color:var(--soft);font-size:.93rem}
.pcard .buy{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:.3rem}
.pcard .buy .btn{position:relative;z-index:1}
.flag{position:absolute;left:.7rem;top:.7rem;z-index:1;font-size:.76rem;font-weight:700;padding:.2rem .5rem;border-radius:3px;background:var(--ink);color:#fff}
.flag.haz{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pgrid,.pgrid.three{grid-template-columns:repeat(2,1fr)}.pcard{padding:.7rem}.tag b{font-size:1.4rem}.pcard .buy .btn{width:100%}}

/* range tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:grid;grid-template-columns:1fr 38%;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.1rem 1.1rem 1.3rem;text-decoration:none;min-height:150px}
.tile:hover{border-color:var(--ink)}
.tile h3{font-size:1.5rem}
.tile span{color:var(--soft);font-size:.92rem;font-weight:500}
.tile div{display:flex;flex-direction:column;gap:.45rem}
.tile img{mix-blend-mode:multiply}
@media(max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}

/* finder */
.finder{display:grid;grid-template-columns:260px 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.finder>*{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.finder .chips{flex-direction:column;align-items:stretch}
.chip{display:inline-flex;align-items:center;min-height:42px;padding:.4rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font:600 .95rem/1.1 Archivo,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.chip:hover{border-color:var(--ink)}
.chip[aria-selected=true],.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.why{color:var(--soft);margin-bottom:1rem}
@media(max-width:860px){.finder{grid-template-columns:1fr}.finder .chips{flex-direction:row}}

/* beam chart, the night section */
.throw{display:flex;flex-direction:column;gap:6px}
.throw .axis{display:grid;grid-template-columns:86px 1fr;font-size:.8rem;color:var(--night-soft);height:1.4rem}
.throw .axis div{position:relative}
.throw .axis span{position:absolute;transform:translateX(-50%)}
.throw .axis span:first-child{transform:none}
.throw .row{display:grid;grid-template-columns:86px 1fr;align-items:center}
.throw .row a{font-weight:700;text-decoration:none;font-size:.95rem}
.throw .row a:hover{text-decoration:underline}
.throw .track{position:relative;height:20px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px calc(100%/9))}
.throw .bar{height:100%;background:linear-gradient(90deg,var(--ticket),rgba(255,225,0,.22));clip-path:polygon(0 38%,100% 0,100% 100%,0 62%)}
.throw .val{position:absolute;top:50%;transform:translateY(-50%);padding-left:.5rem;font-size:.82rem;font-weight:600;white-space:nowrap}
.marks{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-top:1.2rem;color:var(--night-soft);font-size:.9rem}
.marks b{color:#fff}
@media(max-width:600px){.throw .axis,.throw .row{grid-template-columns:64px 1fr}}

/* shelf photo + genuine block */
.shelf{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.shelf figure{margin:0}
.shelf img{border-radius:var(--r);width:100%}
.shelf figcaption{font-size:.85rem;color:var(--soft);margin-top:.5rem}
@media(max-width:860px){.shelf{grid-template-columns:1fr}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--ink)}
.checks li{display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem .8rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.checks li b{grid-column:2;font-size:1.08rem}
.checks li span{grid-column:2;color:var(--soft)}
.checks li::before{content:counter(step);counter-increment:step;grid-row:1/3;font-weight:900;font-size:1.7rem;line-height:1;font-variation-settings:var(--cond)}
.checks{counter-reset:step}

/* guides */
.glist{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
.gcard{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem 0;margin-right:1.2rem;text-decoration:none;border-bottom:1px solid var(--line)}
.gcard:hover h3{text-decoration:underline}
.gcard p{color:var(--soft);font-size:.94rem}
@media(max-width:980px){.glist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.glist{grid-template-columns:1fr}}

/* listing + page heads */
.phead{background:var(--shelf);padding-block:clamp(22px,4vw,48px)}
.phead .wrap{display:flex;flex-direction:column;gap:.9rem}
.phead h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.crumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.88rem;color:var(--soft)}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;font-weight:600}
select,input[type=number]{font:inherit;padding:.5rem .6rem;border:1px solid var(--ink);border-radius:var(--r);background:#fff;color:var(--ink);min-height:44px}
label{display:inline-flex;align-items:center;gap:.6rem;font-weight:600}

/* price list table */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
table.spec th,table.spec td{text-align:left;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:42%;font-weight:600;color:var(--soft)}
table.plist{min-width:640px}
table.plist th,table.plist td{padding:.62rem .8rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.plist thead th{font-size:.86rem;color:var(--soft);font-weight:600;border-bottom:2px solid var(--ink)}
table.plist td.n,table.plist th.n{text-align:right;font-variant-numeric:tabular-nums}
table.plist td.out{font-weight:900;font-size:1.15rem;font-variation-settings:var(--cond);background:var(--ticket)}
table.plist s{color:var(--strike)}
table.plist a{font-weight:700}

/* product page */
.pp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.pp>*{min-width:0}
.gal{position:sticky;top:84px}
.gal .main{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);padding:5%}
.gal .main img{max-height:100%;width:auto;object-fit:contain}
.thumbs{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.thumbs button{width:72px;height:72px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.thumbs button[aria-current=true]{border:2px solid var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.det{display:flex;flex-direction:column;gap:1.1rem}
.det h1{font-size:clamp(2rem,4.2vw,3.2rem)}
.kind{font-weight:600;color:var(--soft)}
.pricebox{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.stock{font-weight:700;color:var(--ok)}
.stock.out{color:var(--strike)}
.fl1{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.fl1 div{padding:.8rem .8rem .8rem 0;display:flex;flex-direction:column;gap:.2rem}
.fl1 div+div{padding-left:.8rem;border-left:1px solid var(--line)}
.fl1 b{font-size:1.7rem;font-weight:900;line-height:1;font-variation-settings:var(--cond)}
.fl1 span{font-size:.85rem;color:var(--soft)}
.buybox{display:flex;flex-direction:column;gap:.7rem;background:var(--shelf);padding:1.1rem;border-radius:var(--r)}
.buybox .row{display:flex;gap:.7rem;align-items:center}
.buybox .row .btn{flex:1}
.buybox input[type=number]{width:74px}
.fine{font-size:.85rem;color:var(--soft)}
.genuine{border:2px solid var(--ink);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.genuine b{font-size:1.05rem}
.note{background:var(--shelf);border-left:4px solid var(--ink);padding:.8rem 1rem;border-radius:0 var(--r) var(--r) 0;font-size:.95rem}
.note.haz{background:#fff8c2;border-color:var(--ticket-deep)}
@media(max-width:860px){.pp{grid-template-columns:1fr}.gal{position:static}}

/* prose */
.prose{max-width:70ch;display:flex;flex-direction:column;gap:.9rem}
.prose h2{font-size:1.7rem;margin-top:.9rem}
.prose h3{margin-top:.5rem}
.prose ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.prose a{font-weight:600}
.faq{max-width:76ch;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{font-weight:700;font-size:1.08rem;cursor:pointer}
.faq p{margin-top:.6rem;color:var(--soft)}

/* cart */
.cart{display:grid;grid-template-columns:1fr 340px;gap:clamp(18px,3vw,40px);align-items:start}
.lines{border-top:2px solid var(--ink)}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.line img{width:84px;height:84px;object-fit:contain}
.line .t{font-weight:700;text-decoration:none}
.line .q{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.line .q button{min-width:36px;min-height:36px;border:1px solid var(--ink);background:#fff;border-radius:var(--r);font:inherit;cursor:pointer}
.line .q .rm{border:0;text-decoration:underline;color:var(--soft)}
.price{font-weight:900;font-size:1.3rem;font-variation-settings:var(--cond)}
.sum{background:var(--shelf);padding:1.2rem;border-radius:var(--r);display:flex;flex-direction:column;gap:.8rem}
.sum .tot{display:flex;justify-content:space-between;align-items:baseline}
.empty{text-align:center;padding:3rem 1rem;display:flex;flex-direction:column;gap:.8rem;align-items:center}
@media(max-width:860px){.cart{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.8rem 1.1rem;border-radius:var(--r);display:flex;gap:1rem;align-items:center;z-index:50;max-width:calc(100% - 24px);font-weight:600}
.toast a{color:var(--ticket)}
.toast[hidden]{display:none}

/* footer */
footer.site{background:var(--night);color:#fff;padding-block:clamp(32px,5vw,60px) 1.6rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
footer.site h4{font-size:1rem;margin-bottom:.7rem;font-variation-settings:"wdth" 100;font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
footer.site a{color:var(--night-soft);text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .logo{color:#fff}.footer-logo b,footer.site .logo b{color:var(--ink)}
footer.site p{color:var(--night-soft);max-width:44ch}
footer.site .tel{font-weight:900;font-size:1.7rem;font-variation-settings:var(--cond)}
footer.site .fine{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);max-width:none;font-size:.84rem;color:var(--night-soft)}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.topbar .wrap{justify-content:center}.topbar span:nth-child(n+2){display:none}}