:root{--bk:#0b0707;--bk2:#150c0c;--red:#a3151f;--red2:#7d0f17;--gold:#c8a24a;--gold2:#e6c978;--cream:#efe4cf;--mut:#a89a86;--disp:"Big Shoulders Display","Arial Narrow",sans-serif;--ser:"Instrument Serif",Georgia,serif;--hand:"Caveat",cursive;--body:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--bk);color:var(--cream);font:400 16px/1.6 var(--body);overflow-x:hidden;
background-image:repeating-linear-gradient(0deg,rgba(200,162,74,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(200,162,74,.03) 0 1px,transparent 1px 4px)}
body.loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 40px);margin:0 auto;position:relative}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
#thread{position:fixed;inset:0;z-index:80;pointer-events:none}
/* loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--bk);display:grid;place-items:center;transition:transform 1s cubic-bezier(.77,0,.18,1)}
#loader.done{transform:translateY(-101%)}
#lc{position:absolute;inset:0;width:100%;height:100%}
.lv{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(ellipse 62% 34% at 50% 50%,rgba(8,4,4,.9) 0,rgba(8,4,4,.78) 38%,rgba(8,4,4,.35) 70%,rgba(8,4,4,0) 100%)}
.lv.on{opacity:1}
.lt{position:relative;text-align:center;opacity:0;transition:opacity 1.2s ease;display:flex;flex-direction:column;align-items:center;padding:0 20px}
.lt.on{opacity:1}
.lt .orn{width:22px;height:22px;background:url(motif.svg) center/contain no-repeat;margin-bottom:22px;opacity:0;transform:scale(.6);transition:all 1.2s .2s cubic-bezier(.2,.8,.2,1)}
.lt.on .orn{opacity:.95;transform:none}
.lt span{display:block;font:400 clamp(52px,13.5vw,148px)/1 var(--ser);letter-spacing:.015em;color:#f3e9d4;text-transform:uppercase;text-shadow:0 2px 40px rgba(0,0,0,.6);filter:blur(10px);transform:translateY(10px);letter-spacing:.12em;transition:filter 1.4s .1s ease,transform 1.4s .1s cubic-bezier(.2,.8,.2,1),letter-spacing 1.8s .1s cubic-bezier(.2,.8,.2,1)}
.lt.on span{filter:none;transform:none;letter-spacing:.03em}
.lt em{display:flex;align-items:center;gap:16px;margin-top:22px;font:500 clamp(11px,2.8vw,14px)/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--gold2);font-style:normal;opacity:0;transition:opacity 1.2s .7s}
.lt.on em{opacity:.95}
.lt em u{display:block;width:clamp(28px,8vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.lt em u:last-child{transform:scaleX(-1)}
/* nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:28px;padding:12px max(20px,calc((100% - 1180px)/2));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);background:rgba(11,7,7,.45);border-bottom:1px solid rgba(200,162,74,.18)}
.brand{display:flex;align-items:center;gap:10px;font:800 24px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;margin-right:auto}
.brand img{border-radius:3px}
#nav nav{display:flex;gap:26px;font-size:14px;color:var(--mut)}
#nav nav a:hover{color:var(--gold2)}
.pill{border:1px solid var(--gold);color:var(--gold2);padding:8px 18px;border-radius:99px;font-size:14px;font-weight:500;transition:.3s}
.pill:hover{background:var(--gold);color:var(--bk)}
#burger{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer}
#burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--cream);transition:.4s}
#burger i:first-child{top:18px}#burger i:last-child{top:26px;right:18px}
body.mo #burger i:first-child{transform:translateY(4px) rotate(45deg)}body.mo #burger i:last-child{transform:translateY(-4px) rotate(-45deg);right:10px}
#menu{position:fixed;inset:0;z-index:99;background:var(--bk);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px 28px 40px;clip-path:circle(0 at calc(100% - 40px) 34px);transition:clip-path .8s cubic-bezier(.77,0,.18,1);background-image:radial-gradient(circle at 80% 90%,rgba(163,21,31,.35),transparent 60%)}
body.mo #menu{clip-path:circle(150% at calc(100% - 40px) 34px)}
#menu a{font:900 clamp(48px,14vw,84px)/1 var(--disp);text-transform:uppercase;opacity:0;transform:translateY(30px);transition:.6s}
body.mo #menu a{opacity:1;transform:none}
#menu a:nth-child(2){transition-delay:.1s}#menu a:nth-child(3){transition-delay:.15s}#menu a:nth-child(4){transition-delay:.2s}#menu a:nth-child(5){transition-delay:.25s}#menu .m-cta{transition-delay:.35s;color:var(--gold2);font-size:clamp(30px,9vw,48px);margin-top:18px}
#menu small{color:var(--mut);margin-top:24px;font:italic 20px var(--ser)}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 80px}
.hero-img{position:absolute;inset:0;left:28%;z-index:0}
.hero-img img{width:100%;height:112%;object-fit:cover;object-position:50% 40%;transform:scale(1.08);animation:kb 24s ease-in-out infinite alternate;filter:saturate(1.1) contrast(1.05)}
@keyframes kb{to{transform:scale(1.18) translateY(-3%)}}
.hero-fade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bk) 22%,rgba(11,7,7,.8) 46%,rgba(11,7,7,.1) 80%),linear-gradient(0deg,var(--bk) 0,transparent 25%),radial-gradient(circle at 20% 30%,rgba(163,21,31,.35),transparent 55%)}
.hero-in{z-index:2}
.kicker{font:500 13px var(--body);text-transform:uppercase;letter-spacing:.22em;color:var(--gold2);margin-bottom:22px}
h1{font:900 clamp(64px,11vw,176px)/.9 var(--disp);text-transform:uppercase;letter-spacing:-.005em}
h1 .ln{display:block;overflow:hidden;padding:.08em 0 .06em;margin-bottom:-.06em}
h1 .ln>*{display:inline-block;transform:translateY(110%) rotate(2deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
body.go h1 .ln>*{transform:none}
body.go h1 .ln:nth-child(2)>*{transition-delay:.1s}body.go h1 .ln:nth-child(3)>*{transition-delay:.2s}body.go h1 .ln:nth-child(4)>*{transition-delay:.3s}
h1 i{font:italic 400 .52em/1 var(--ser);text-transform:none;color:var(--gold2);letter-spacing:0;padding-left:.1em}
h1 .gold{color:var(--gold);background:linear-gradient(100deg,var(--gold2),var(--gold) 40%,#8a6a22 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:.62em}
.lede{max-width:430px;margin:28px 0;color:#d6c9b3;font-size:17px}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.btn{position:relative;display:inline-block;background:var(--red);color:var(--cream);padding:16px 30px;font-weight:700;letter-spacing:.04em;overflow:hidden;border:1px solid rgba(230,201,120,.5);transition:transform .3s;border-radius:3px;filter:url(#rough)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before{transform:none}.btn span{position:relative;transition:color .3s}.btn:hover span{color:var(--bk)}
.btn{filter:none}
.lnk{border-bottom:1px solid var(--gold);padding-bottom:3px;color:var(--gold2)}
.note{position:absolute;font:700 24px/1.05 var(--hand);color:var(--gold2);z-index:2;transform:rotate(-6deg)}
.n1{right:6%;bottom:16%;text-align:center}
.n1::after{content:"";display:block;width:40px;height:40px;margin:6px auto 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23e6c978' stroke-width='2' stroke-linecap='round'><path d='M30 4C14 6 6 18 12 34M12 34l-6-8M12 34l8-5'/></svg>") center/contain no-repeat;transform:scaleX(-1) rotate(20deg)}
.scrollcue{position:absolute;left:50%;bottom:22px;width:1px;height:46px;background:rgba(230,201,120,.25);z-index:2;overflow:hidden}
.scrollcue i{position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--gold2);animation:sc 2s infinite}
@keyframes sc{to{top:110%}}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
body.go .hero .rv{opacity:1;transform:none;transition-delay:.5s}
/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(200,162,74,.25);background:var(--red2);padding:14px 0;position:relative;z-index:3;transform:rotate(-1deg) scale(1.02);margin:-26px 0 0}
.marquee div{display:flex;width:max-content;animation:mq 34s linear infinite;align-items:center}
.marquee span{font:800 34px/1 var(--disp);text-transform:uppercase;color:var(--cream);padding:0 26px;letter-spacing:.04em}
.marquee s{width:18px;height:18px;flex:none;background:url(motif.svg) center/contain no-repeat}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.sec{padding:clamp(80px,12vw,170px) 0;position:relative}
.eyebrow{font:500 13px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.big{font:900 clamp(54px,10vw,148px)/.88 var(--disp);text-transform:uppercase}
.big i,.huge i{font:italic 400 1.02em var(--ser);text-transform:none;color:var(--gold2)}
.big.sm{font-size:clamp(44px,7vw,96px)}
.huge{font:900 clamp(64px,14vw,210px)/.85 var(--disp);text-transform:uppercase}
.sub,.small{color:var(--mut);max-width:520px;margin-top:22px}
.small{font-size:14px}
/* story */
.manifesto{font:400 clamp(30px,5.4vw,76px)/1.08 var(--ser);max-width:1000px;color:#4a3d36}
.manifesto .w{transition:color .5s}.manifesto .w.lit{color:var(--cream)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:90px}
.story-txt p{font-size:18px;color:#cfc2ac;margin-bottom:18px;max-width:440px}
.story-txt em{font:italic 26px var(--ser);color:var(--gold2)}
.hand{font:700 28px/1.15 var(--hand);color:var(--gold2);display:block;margin-top:16px;transform:rotate(-1.5deg)}
.pol{background:#e9dcc0;padding:12px 12px 14px;position:relative;box-shadow:0 30px 60px -20px #000,0 0 0 1px rgba(0,0,0,.3);transform:rotate(var(--r,-2deg))}
.pol img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(1.08)}
.pol figcaption{font:700 22px var(--hand);color:#3b2a22;text-align:center;padding-top:8px}
.p1{--r:-2.4deg;max-width:420px}.p2{--r:1.8deg}.p3{--r:-1.6deg}.p4{--r:2deg;max-width:380px}
.tape{position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(230,201,120,.55);transform:rotate(-3deg);z-index:2;clip-path:polygon(0 8%,4% 0,8% 10%,100% 0,97% 50%,100% 100%,6% 92%,0 100%,3% 50%)}
/* craft */
.craft{background:linear-gradient(180deg,var(--bk) 0,#1a0b0c 40%,var(--bk) 100%)}
.steps{margin-top:90px;display:grid;gap:100px}
.step{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.step.rev .ph{order:2}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.tilt-a{transform:rotate(-1.8deg)}.tilt-b{transform:rotate(1.5deg)}
.step .ph{box-shadow:0 30px 60px -25px #000;outline:1.5px dashed rgba(230,201,120,.55);outline-offset:10px}
.num{font:italic 70px/1 var(--ser);color:var(--red)}
.step h3{font:900 clamp(54px,8vw,110px)/.9 var(--disp);text-transform:uppercase}
.step p{max-width:380px;color:#cfc2ac;margin-top:12px;font-size:18px}
.allw{margin-top:110px;display:flex;align-items:center;gap:36px;max-width:680px;margin-left:auto}
.seal{flex:none;width:124px;height:124px;border-radius:50%;border:2px dashed var(--gold);display:grid;place-items:center;text-align:center;font:800 22px/1 var(--disp);text-transform:uppercase;color:var(--gold2);transform:rotate(-8deg);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(352deg)}}
.allw p{color:#d6c9b3;font-size:18px}
/* fringe */
.fringe{height:52px;background:url(fringe.svg) repeat-x top left/1200px 52px;margin-top:-1px;position:relative;z-index:2}
.f2{background-color:transparent;margin-bottom:-8px}
/* strip */
.strip{overflow:hidden;padding:30px 0 60px;background:var(--bk2)}
.row{overflow:hidden;margin-bottom:14px}
.row>div{display:flex;gap:14px;width:max-content}
.row img{height:clamp(150px,22vw,260px);width:auto;border:6px solid #0b0707;outline:1px solid rgba(200,162,74,.3)}
.r1>div{animation:mq 90s linear infinite}.r2>div{animation:mq 110s linear infinite reverse}
.row img:nth-child(odd){transform:translateY(5px)}.row img:nth-child(3n){transform:translateY(-6px) rotate(.4deg)}
/* collection */
.coll{padding-bottom:70px}
.head{margin-bottom:60px}
.rail{overflow-x:auto;cursor:grab;scrollbar-width:none;padding:40px 0 70px;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail-in{display:flex;gap:34px;padding:0 max(20px,calc((100vw - 1180px)/2));width:max-content;align-items:flex-start}
.card{display:block;width:clamp(240px,70vw,330px);flex:none;background:#e9dcc0;color:#2c1d17;padding:12px 12px 18px;position:relative;transform:rotate(var(--r));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 26px 50px -22px #000;scroll-snap-align:center;-webkit-user-drag:none}
.card:nth-child(even){margin-top:46px}
.card:hover{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:0 40px 70px -20px #000}
.card .ph img{aspect-ratio:4/5;object-position:50% 35%;pointer-events:none;-webkit-user-drag:none}
.card h4{font:800 25px/1.05 var(--disp);text-transform:uppercase;margin:14px 2px 2px;letter-spacing:.02em}
.card p{font:italic 17px/1.2 var(--ser);color:#6a4a3b;margin:0 2px}
.card .no{position:absolute;right:16px;bottom:14px;font:700 20px var(--hand);color:var(--red)}
.endcard{flex:none;width:260px;align-self:center;padding:0 20px;text-align:center}
.endcard p{font:italic 36px/1.1 var(--ser);color:var(--gold2);margin-bottom:22px}
.disc{color:var(--mut);font-size:13px;font-style:italic}
/* people */
.people{background:radial-gradient(ellipse at 80% 20%,rgba(163,21,31,.25),transparent 60%)}
.pgrid{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center;margin-top:40px}
.pgrid.g2{grid-template-columns:6fr 5fr;margin-top:130px}
.pgrid .pol{max-width:440px}
.ptxt p{color:#cfc2ac;font-size:18px;margin-top:22px;max-width:460px}
.q{font:italic 400 clamp(30px,4.4vw,56px)/1.1 var(--ser)!important;color:var(--cream)!important;max-width:560px!important;margin-top:0!important}
/* colours */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px}
.sw{padding:70px 26px 40px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.sw::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(45deg,rgba(0,0,0,.35) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.3) 0 1px,transparent 1px 5px)}
.sw b{font:900 clamp(40px,6vw,80px)/.9 var(--disp);text-transform:uppercase;position:relative}
.sw p{position:relative;margin-top:8px;max-width:240px}
.sw.gold{background:var(--gold);color:var(--bk)}.sw.red{background:var(--red);transform:translateY(-14px) rotate(-.6deg)}.sw.blk{background:#000;border:1px solid rgba(200,162,74,.3)}
.colours .small{margin-top:40px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid rgba(200,162,74,.3);padding-top:50px}
.facts b{display:block;font:800 34px/1 var(--disp);text-transform:uppercase;color:var(--gold2);margin-bottom:8px}
.facts span{color:#cfc2ac;font-size:15px}
.rec{padding-block:30px 60px}
/* outlets */
.olist{margin:60px 0 80px;border-top:1px solid rgba(200,162,74,.3)}
.out{display:flex;align-items:baseline;gap:26px;padding:26px 0;border-bottom:1px solid rgba(200,162,74,.3);position:relative;transition:padding .5s,background .5s}
.out:hover{padding-left:24px;background:linear-gradient(90deg,rgba(163,21,31,.3),transparent)}
.out .n{font:italic 30px var(--ser);color:var(--gold);width:50px}
.out h3{font:900 clamp(44px,9vw,120px)/.95 var(--disp);text-transform:uppercase}
.out p{font:italic 28px var(--ser);color:var(--mut);margin-left:auto}
.badge{position:absolute;right:0;top:12px;background:var(--gold);color:var(--bk);font:700 22px var(--hand);padding:0 14px;transform:rotate(5deg);font-style:normal}
.out.new h3{color:var(--gold2)}
.opening{display:flex;gap:60px;align-items:center}
.opening p{max-width:420px;color:#cfc2ac;font-size:18px}
.opening .pol img{aspect-ratio:3/4}
/* final */
.final{text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(163,21,31,.5),transparent 65%);padding-bottom:200px}
.final .sub{margin-inline:auto}
.big-btn{margin-top:40px;padding:22px 44px;font-size:18px}
footer{background:#000;padding:34px 0 40px;font-size:13px;color:var(--mut)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--gold2);border-bottom:1px solid var(--gold)}
.fringe.f2{transform:translateY(0);background-color:transparent;margin-top:-52px;position:relative;z-index:3;transform:scaleY(-1);}
@media(max-width:820px){
 .dl{display:none!important}#burger{display:block}
 .hero{padding:96px 0 70px;align-items:flex-end}
 .hero-img{left:0}.hero-img img{object-position:60% 30%}
 .hero-fade{background:linear-gradient(0deg,var(--bk) 8%,rgba(11,7,7,.82) 42%,rgba(11,7,7,.1) 85%),radial-gradient(circle at 10% 20%,rgba(163,21,31,.3),transparent 60%)}
 h1{font-size:clamp(62px,21vw,120px)}
 .lede{font-size:16px;margin:20px 0}
 .note{display:none}
 .story-grid,.step,.pgrid,.pgrid.g2{grid-template-columns:1fr;gap:44px}
 .step.rev .ph{order:0}
 .story-grid{margin-top:60px}.steps{gap:80px;margin-top:60px}
 .p1,.pgrid .pol,.p4{max-width:none}
 .pgrid.g2{margin-top:80px}.pgrid.g2 .pol{order:2}
 .three{grid-template-columns:1fr}.sw{min-height:170px;padding-top:40px}.sw.red{transform:none}
 .facts{grid-template-columns:1fr;gap:34px}
 .allw{flex-direction:column;align-items:flex-start;margin-top:80px}
 .out{flex-wrap:wrap;gap:6px 16px}.out p{margin-left:66px;width:100%;font-size:22px}.out .n{width:34px}.badge{top:-4px;font-size:20px}
 .opening{flex-direction:column;gap:34px}
 .marquee span{font-size:26px}
 .sec{padding:80px 0}
 .card:nth-child(even){margin-top:26px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,h1 .ln>*{opacity:1!important;transform:none!important}#loader{display:none}}
.qa .hero{min-height:820px}
.qa h1 .ln>*{transition:none!important;transform:none!important}.qa .hero .rv{opacity:1;transform:none}
@media(max-width:820px){.scrollcue{display:none}}