@font-face{font-family:"Alfa Slab One";src:url(fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url(fonts/libre-baskerville-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Work Sans";src:url(fonts/work-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(fonts/work-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --coal:#16110d;
  --tobacco:#2a1f17;
  --leather:#3b2a1d;
  --tan:#d9a35a;
  --paper:#f3e9d8;
  --paper2:#e6d7bd;
  --red:#d8322e;
  --text:#efe4d2;
  --muted:#b9a68b;
  --stitch:rgba(217,163,90,.55);
  --slab:"Alfa Slab One",Rockwell,Georgia,serif;
  --it:"Libre Baskerville",Georgia,serif;
  --sans:"Work Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--coal);color:var(--text);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--slab);font-weight:400;line-height:1;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,6vw,4.2rem);margin-bottom:1.2rem}
h2 i,h1 i,.lede i{font-family:var(--it);font-style:italic;color:var(--tan);font-size:.92em}
.tag{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);margin-bottom:1rem;padding:.35em .8em;border:1px dashed var(--stitch);border-radius:6px}

.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 1.5em;background:var(--red);color:#fff;font-weight:600;text-decoration:none;border-radius:10px;box-shadow:0 0 0 3px var(--coal),0 0 0 4px var(--red);transition:transform .2s var(--ease),background .2s}
.btn:hover{background:#ef4440}
.btn:active{transform:scale(.97)}
.btn.line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--stitch)}
.btn.line:hover{background:rgba(217,163,90,.12)}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px clamp(16px,4vw,44px);transition:background .35s,border-color .35s;border-bottom:1px dashed transparent}
.bar.solid{background:rgba(22,17,13,.94);border-color:var(--stitch)}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--slab);font-size:1.4rem}
.crown{width:30px;fill:var(--red)}
.nav{display:none;gap:1.6rem}
.nav a{text-decoration:none;font-size:.92rem;font-weight:600;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--tan)}
@media(min-width:920px){.nav{display:flex}}
.pill{text-decoration:none;font-weight:600;padding:.5em 1.1em;border-radius:8px;background:var(--paper);color:var(--coal);font-size:.92rem}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;gap:28px;padding:100px clamp(16px,5vw,64px) 90px;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,#3a2a1c,transparent 60%),var(--coal)}
@media(min-width:900px){.hero{grid-template-columns:1fr 1.15fr}}
.hero h1{font-size:clamp(3.6rem,11vw,8rem);text-transform:uppercase;margin-bottom:1.4rem}
.hero h1 .ln{display:block}
.hero h1 .red{color:var(--red)}
.js .hero h1 .ln{opacity:0;transform:translateX(-30px);animation:slide .9s var(--ease) forwards}
.js .hero h1 .ln:nth-child(2){animation-delay:.12s}
.js .hero h1 .ln:nth-child(3){animation-delay:.24s}
@keyframes slide{to{opacity:1;transform:none}}
.lede{max-width:36ch;color:var(--muted);font-size:1.1rem;margin-bottom:2rem}
.lede i{font-size:1em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.poster{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -25px #000;outline:1px dashed var(--stitch);outline-offset:8px;transform:rotate(1.5deg);order:-1}
@media(min-width:900px){.poster{order:0}}
.poster img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;animation:kb 18s ease-in-out infinite alternate}
@media(min-width:900px){.poster img{aspect-ratio:2/1}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,1%)}}
.track{position:absolute;left:0;right:0;bottom:26px;height:22px;border-top:3px solid #6b5845;border-bottom:3px solid #6b5845;overflow:hidden;opacity:.7}
.track span{position:absolute;inset:0 -60px;background:repeating-linear-gradient(90deg,#4a3a2b 0 12px,transparent 12px 60px);animation:rail 2.4s linear infinite}
@keyframes rail{to{transform:translateX(-60px)}}

/* marquee */
.marquee{background:var(--tan);color:var(--coal);overflow:hidden;border-block:3px solid var(--coal);transform:rotate(-1.2deg);margin:0 -10px}
.mq{display:flex;gap:1.4rem;width:max-content;padding:.8rem 0;animation:mq 34s linear infinite;font-family:var(--slab);font-size:1.25rem;text-transform:uppercase;white-space:nowrap}
.mq b{color:var(--red);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* story */
.story{padding:clamp(90px,14vh,150px) clamp(16px,5vw,64px);max-width:1200px;margin:0 auto}
.big{font-family:var(--slab);font-size:clamp(1.9rem,4.8vw,3.6rem);line-height:1.12;margin-bottom:clamp(50px,8vh,90px)}
.big .w{opacity:.15;transition:opacity .4s,color .4s}
.big .w.on{opacity:1}
.story-grid{display:grid;gap:clamp(30px,6vw,70px);align-items:start}
@media(min-width:860px){.story-grid{grid-template-columns:.8fr 1.2fr}}
.polaroid{background:var(--paper);padding:12px 12px 52px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 25px 50px -20px #000;max-width:420px;position:relative}
.polaroid img{aspect-ratio:4/5;object-fit:cover;width:100%}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:var(--coal);font-family:var(--it);font-style:italic;font-size:1.2rem}
.story-text p{margin-bottom:1.2rem;font-size:1.08rem}
.sig{font-family:var(--it);font-style:italic;color:var(--tan)}
.sig span{display:block;font-family:var(--sans);font-style:normal;color:var(--muted);font-size:.9rem;margin-top:.4rem}
.award{display:inline-flex;align-items:center;gap:.8rem;margin-top:1rem;padding:.8rem 1.1rem;border:1px dashed var(--stitch);border-radius:12px}
.award svg{width:34px;flex:0 0 34px;fill:none;stroke:var(--tan);stroke-width:2.4}
.award b{color:var(--tan)}

/* cobbler */
.cobbler{background:var(--paper);color:var(--coal);padding:clamp(90px,14vh,150px) clamp(16px,5vw,64px);border-radius:28px 28px 0 0}
.cobbler h2 i,.prices h2 i{color:#a5541f}
.cobbler .tag{color:#8a4b1c;border-color:rgba(138,75,28,.5)}
.cob-head{max-width:1200px;margin:0 auto 60px;display:grid;gap:clamp(28px,5vw,60px);align-items:center}
@media(min-width:860px){.cob-head{grid-template-columns:1fr 1fr}}
.cob-head p{margin-bottom:1rem}
.note{font-weight:600}
.sepia{border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.sepia img{width:100%;filter:sepia(calc(1 - var(--p,0))) contrast(1.05);transform:scale(calc(1.15 - var(--p,0) * .15))}

.calc{max-width:1200px;margin:0 auto;background:var(--coal);color:var(--text);border-radius:22px;padding:clamp(22px,4vw,44px);position:relative;outline:2px dashed var(--stitch);outline-offset:-10px}
.calc-top{margin-bottom:1.4rem}
.calc h3{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--tan);margin-bottom:.4rem}
.calc-top p{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.6rem}
.chip{font:600 .98rem var(--sans);color:var(--text);background:var(--leather);border:1px solid transparent;border-radius:10px;padding:.75em 1em;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;transition:transform .15s var(--ease),background .2s,border-color .2s}
.chip small{font-weight:400;color:var(--muted);font-size:.8rem}
.chip:hover{transform:translateY(-2px);border-color:var(--stitch)}
.chip[aria-pressed="true"]{background:var(--red);color:#fff}
.chip[aria-pressed="true"] small{color:#ffe1dc}
.calc-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;padding-top:1.2rem;border-top:1px dashed var(--stitch)}
.lbl{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sum{font-family:var(--slab);font-size:clamp(3rem,9vw,5rem);line-height:1;color:var(--paper)}
.sum.bump{animation:bump .35s var(--ease)}
@keyframes bump{50%{transform:scale(1.08);color:var(--tan)}}
.hint{flex-basis:100%;color:var(--muted);font-size:.95rem}
.fine{font-size:.86rem;color:var(--muted);margin-top:1rem}

/* prices */
.prices{background:var(--paper2);color:var(--coal);padding:clamp(70px,12vh,130px) clamp(16px,5vw,64px)}
.prices>*{max-width:1000px;margin-left:auto;margin-right:auto}
.prices .tag{color:#8a4b1c;border-color:rgba(138,75,28,.5)}
.prices h2{display:block}
.acc{margin-top:2rem}
.acc details{border-top:2px dashed rgba(42,31,23,.3)}
.acc details:last-child{border-bottom:2px dashed rgba(42,31,23,.3)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-family:var(--slab);font-size:clamp(1.25rem,3vw,1.6rem)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--coal);color:var(--tan);font-family:var(--sans);font-size:1.4rem;transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg);background:var(--red);color:#fff}
.acc dl{padding-bottom:1.2rem}
.acc dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(42,31,23,.12)}
.acc dt small,.acc dd small{display:block;color:#6d5a46;font-size:.82rem}
.acc dd{font-weight:600;white-space:nowrap;text-align:right}
.prices .fine{color:#5c4a38;margin-top:1.4rem}

/* shop */
.shop{padding:clamp(90px,14vh,150px) clamp(16px,5vw,64px);max-width:1240px;margin:0 auto}
.shop-head{max-width:760px;margin-bottom:2.6rem}
.shop-head p:last-child{color:var(--muted)}
.cards{display:grid;gap:16px}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}.card.photo{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;align-items:center}}
.card{background:var(--tobacco);border-radius:18px;padding:1.6rem;position:relative;overflow:hidden;outline:1px dashed var(--stitch);outline-offset:-8px;transition:transform .3s var(--ease),background .3s}
.card:hover{transform:translateY(-4px);background:var(--leather)}
.card h3{font-size:1.6rem;margin:.6rem 0 .6rem;color:var(--paper)}
.card p{color:var(--muted);font-size:.98rem}
.num{font-family:var(--slab);color:var(--red);font-size:1rem}
.card.photo{padding:0}
.card.photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.card.photo div{padding:1.6rem}

/* buy */
.buy{background:var(--tobacco);padding:clamp(90px,14vh,150px) clamp(16px,5vw,64px)}
.buy-head{max-width:820px;margin:0 auto 2.6rem;text-align:center}
.buy-head p:last-child{color:var(--muted)}
.sorter{max-width:1100px;margin:0 auto;display:grid;gap:16px}
@media(min-width:820px){.sorter{grid-template-columns:1fr 1fr}}
.pile{border-radius:18px;padding:1.6rem}
.pile.yes{background:var(--paper);color:var(--coal);transform:rotate(-.8deg)}
.pile.no{background:var(--coal);outline:1px dashed var(--stitch);outline-offset:-8px;transform:rotate(.8deg)}
.pile h3{font-size:1.35rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.pile h3 span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:1rem}
.yes h3 span{background:#3f7d3a;color:#fff}
.no h3 span{background:var(--red);color:#fff}
.pile li{list-style:none;padding:.45rem 0 .45rem 1.4rem;position:relative;border-bottom:1px dashed rgba(127,100,70,.35)}
.pile li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:2px;background:currentColor;opacity:.6}

/* visit */
.visit{display:grid;gap:clamp(36px,6vw,80px);align-items:start;padding:clamp(90px,14vh,150px) clamp(16px,5vw,64px);max-width:1200px;margin:0 auto}
@media(min-width:860px){.visit{grid-template-columns:.8fr 1.2fr}}
.sign{background:#1f4a8a;color:#fff;border-radius:14px;padding:1.4rem 1.6rem;box-shadow:inset 0 0 0 4px #1f4a8a,inset 0 0 0 6px #fff,0 20px 40px -20px #000;max-width:420px;width:100%}
.sign-top,.sign-bot{display:block;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.sign-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--slab);font-size:clamp(2rem,6vw,2.8rem);padding:.4rem 0;border-bottom:2px solid rgba(255,255,255,.25)}
.sign-row span{font-size:.6em}
.sign-bot{margin-top:.8rem}
.how{list-style:none;margin:1.4rem 0 2rem}
.how li{padding:1rem 0;border-bottom:1px dashed var(--stitch);color:var(--muted)}
.how b{display:block;font-family:var(--slab);font-weight:400;color:var(--tan);font-size:1.2rem;margin-bottom:.2rem}
.contacts{display:grid;gap:10px}
@media(min-width:600px){.contacts{grid-template-columns:1fr 1fr}}
.contacts a{display:block;text-decoration:none;padding:1rem 1.1rem;border-radius:12px;background:var(--tobacco);transition:background .2s,transform .2s var(--ease);overflow-wrap:anywhere}
.contacts a:hover{background:var(--leather);transform:translateY(-2px)}
.contacts span{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tan)}
.social{margin-top:1.4rem;color:var(--muted)}
.social a{color:var(--tan);font-weight:600}

.foot{text-align:center;padding:40px 16px 120px;border-top:1px dashed var(--stitch);color:var(--muted);font-size:.86rem}
.foot img{width:170px;margin:0 auto 1rem;border-radius:12px}

/* dock */
.dock{position:fixed;z-index:60;left:16px;right:16px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:translateY(150%);transition:transform .45s var(--ease)}
.dock.show{transform:none}
.dock a{min-height:52px;display:grid;place-items:center;border-radius:12px;text-decoration:none;font-weight:600;background:var(--paper);color:var(--coal);box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.dock a.hot{background:var(--red);color:#fff}
@media(min-width:900px){.dock{left:auto;right:24px;width:300px}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.in{opacity:1;transform:none}
.js .pile.yes.reveal.in{transform:rotate(-.8deg)}
.js .pile.no.reveal.in{transform:rotate(.8deg)}
.js .polaroid.reveal.in{transform:rotate(-3deg)}
:focus-visible{outline:3px solid var(--tan);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero h1 .ln{opacity:1;transform:none}
  .sepia img{filter:sepia(.3);transform:none}
}
.mq-wrap{overflow:hidden;padding:14px 0}