@font-face{font-family:'Alfa Slab One';src:url(../assets/fonts/alfa-slab-one.ttf) format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Space Mono';src:url(../assets/fonts/space-mono-400.ttf) format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Space Mono';src:url(../assets/fonts/space-mono-700.ttf) format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'General Sans';src:url(../assets/fonts/general-sans-400.woff2) format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'General Sans';src:url(../assets/fonts/general-sans-500.woff2) format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'General Sans';src:url(../assets/fonts/general-sans-600.woff2) format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Permanent Marker';src:url(../assets/fonts/permanent-marker.ttf) format('truetype');font-weight:400;font-display:swap;}

:root{
  --ink:#0e0d0b;
  --ink-2:#17150f;
  --bone:#f2ecdd;
  --bone-2:#e9e1cc;
  --brass:#b4903f;
  --brass-bright:#d4af5f;
  --rail:#c1392b;
  --rail-glow:#ff5c3d;
  --concrete:#4a4844;       /* secondary text on bone: 7.7:1 */
  --concrete-2:#8f8b82;     /* secondary text on ink: 5.7:1 (AA) */
  --line-on-ink:rgba(242,236,221,.14);
  --line-on-bone:rgba(14,13,11,.14);
  --radius-tag:3px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{list-style:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}

.display{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:.96}
.eyebrow{font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.tag-mono{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.03em}

.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* wordmark (recreates the real OTRSC logo lockup in live type) */
.wordmark{display:inline-flex;flex-direction:column;font-family:'Alfa Slab One';line-height:.92;text-transform:uppercase}
.wordmark .cube{display:inline-block;border:2px solid currentColor;border-radius:5px;vertical-align:middle}
.wm-nav{font-size:19px;flex-direction:row;align-items:center;gap:2px;white-space:nowrap}
.wm-nav .cube{width:14px;height:14px;border-width:2px;margin:0 1px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:200;background:rgba(14,13,11,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-on-ink)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.navlinks{display:none;gap:30px;align-items:center}
.navlinks a{font-family:'Space Mono';font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bone-2);transition:color .2s}
.navlinks a:hover{color:var(--brass-bright)}
@media(min-width:840px){.navlinks{display:flex}}
.navtools{display:flex;align-items:center;gap:4px}
/* 44x44 minimum tap targets. The icons themselves stay 19px; the button box around them
   is padded out to 44 so these are actually hittable on a phone. box-sizing is border-box
   globally, so the burger's declared 44x44 minus its padding leaves the bars at 20x14. */
.navtools button{color:var(--bone);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.icon-btn{position:relative}
.cart-count{position:absolute;top:4px;right:4px;background:var(--rail);color:var(--bone);font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'General Sans'}
.burger{display:flex;flex-direction:column;gap:4px;width:44px;height:44px;padding:15px 12px;justify-content:center}
.burger span{height:2px;background:var(--bone);width:100%}
@media(min-width:840px){.navtools .burger{display:none}}

.mnav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--ink-2);z-index:300;transform:translateX(100%);transition:transform .35s var(--ease);padding:90px 28px 28px;border-left:1px solid var(--line-on-ink)}
.mnav.open{transform:translateX(0)}
.mnav a{display:block;font-family:'Alfa Slab One';font-size:26px;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--line-on-ink)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------- hero video banner: full-width, on top of everything, contained height ---------- */
.hero-video-section{width:100%;background:var(--ink);border-bottom:1px solid var(--line-on-ink)}
/* source clip is native 4:3 (1664x1248), match it exactly so no vertical crop ever
   happens through the sign. max-height only ever trims the symmetric decorative
   sides on wide desktop, never the top/bottom where the sign text sits. */
.hero-video-box{width:100%;aspect-ratio:4/3;max-height:46vh;overflow:hidden}
@media(min-width:900px){.hero-video-box{max-height:60vh}}
#hero-video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

/* ---------- hero ---------- */
.hero{position:relative;padding:56px 0 0;overflow:hidden}
@media(max-width:640px){.hero .wrap{padding-left:12px;padding-right:12px}}
.hero-eyebrow{color:var(--brass-bright);font-family:'Space Mono';font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-eyebrow span{white-space:normal}
@media(min-width:900px){.hero-eyebrow{font-size:12px}}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';flex:1;height:1px;background:var(--line-on-ink)}
.hero-copy{max-width:640px;margin:0 auto;text-align:center}
@media(min-width:900px){.hero-copy{max-width:900px}}
.hero-head{position:relative}
.hero-head.graffiti{
  font-family:'Permanent Marker',cursive;
  text-transform:none;
  /* width-driven size, not a guess: this exact 27-char string measures ~16.83px of width
     per 1px of font-size. .hero .wrap now runs 12px padding on mobile (not 20px), so the
     safe ceiling is (100vw-24)/16.83 = 5.94vw - 1.43px; 5.9vw - 1.4px stays just under it
     at any width down to 320px, verified by direct scrollWidth measurement, not assumed. */
  font-size:clamp(15px,calc(5.9vw - 1.4px),40px);
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--bone);
  white-space:nowrap;
}
/* Bumped ~1.8x per direction (a little less than double). At this size the string can no
   longer fit one line down to 320px, so nowrap is dropped here and it's allowed to wrap onto
   two lines instead; scaled from the same measured 16.83px-per-1px ratio as the base rule. */
@media(max-width:899px){.hero-head.graffiti{font-size:clamp(27px,calc(10.62vw - 2.52px),48px);white-space:normal;line-height:1.2}}
@media(min-width:900px){.hero-head.graffiti{font-size:clamp(48px,6vw,72px)}}
.hero-head.graffiti .flick{
  display:inline-block;
  text-shadow:
    2px 2px 0 rgba(193,57,43,.6),
    -1px 2px 10px rgba(255,92,61,.4),
    0 0 20px rgba(180,144,63,.25);
}
.hero-sub{max-width:38ch;margin:14px auto 0;color:var(--bone-2);font-size:14px;line-height:1.55}
@media(min-width:900px){.hero-sub{max-width:66ch;font-size:17px;margin-top:20px}}
.hero-shipping{
  font-family:'Space Mono';font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--brass-bright);font-size:13px;margin-top:20px;
  text-decoration:underline;text-decoration-color:var(--rail);text-underline-offset:5px;
  display:inline-block;
  animation:shipping-pulse 2.2s ease-in-out infinite;
}
@media(min-width:900px){.hero-shipping{font-size:16px;margin-top:18px}}
@keyframes shipping-pulse{
  0%,100%{text-shadow:0 0 0 rgba(212,175,95,0);transform:scale(1)}
  50%{text-shadow:0 0 14px rgba(212,175,95,.75);transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){.hero-shipping{animation:none}}
.hero-cta{display:flex;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{padding:14px 26px;font-family:'Space Mono';font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:2px;transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s}
.btn-solid{background:var(--bone);color:var(--ink)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(242,236,221,.35)}
.btn-line{border:1px solid var(--line-on-ink);color:var(--bone)}
.btn-line:hover{border-color:var(--brass-bright);color:var(--brass-bright);transform:translateY(-2px)}

@keyframes flicker{
  0%,100%{opacity:1}
  4%{opacity:.3}8%{opacity:1}9%{opacity:.4}11%{opacity:1}
  32%{opacity:1}33%{opacity:.25}35%{opacity:1}
  70%{opacity:1}71%{opacity:.5}72%{opacity:1}
}
.flick{animation:flicker 2.6s 1 both}
@media(prefers-reduced-motion:reduce){.flick{animation:none}}

.ticker-wrap{border-top:1px solid var(--line-on-ink);border-bottom:1px solid var(--line-on-ink);overflow:hidden;margin-top:40px;background:var(--ink-2)}
.ticker{display:flex;white-space:nowrap;width:max-content;animation:scroll 26s linear infinite}
.ticker:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ticker{animation-duration:70s}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{padding:13px 26px;font-family:'Space Mono';font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--brass-bright);border-right:1px solid var(--line-on-ink);text-transform:uppercase}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){[data-reveal]{transform:none;transition:opacity .4s}}

/* ---------- shift / editorial ---------- */
.shift{padding:56px 0 90px;border-top:1px solid var(--line-on-ink)}
.shift-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:900px){.shift-grid{grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px}}
.shift-tag{color:var(--rail);margin-bottom:10px;display:inline-block}
.shift h2{font-size:clamp(36px,7vw,68px);text-transform:uppercase}
/* "THE WELL COLLECTION." measures 13.39px of width per 1px of font-size in Alfa Slab
   One, measured directly, not assumed. At the 36px desktop-oriented minimum above,
   it can't fit one line below 900px, so it's kept to natural word-wrap there (lands on
   the same "THE WELL / COLLECTION." break the old forced <br> gave). On mobile it needs
   its own smaller ceiling to actually fit on one line, per the explicit ask. */
@media(max-width:899px){.shift h2.shift-h2{white-space:nowrap;font-size:clamp(16px,calc(7.4vw - 2.95px),36px)}}
.shift-graffiti.graffiti{
  font-family:'Permanent Marker',cursive;
  text-transform:none;
  color:var(--bone);
  line-height:1.2;
  letter-spacing:.01em;
  margin-top:18px;
  font-size:clamp(20px,5.5vw,34px);
}
/* "Merch Designed By Insiders." measures 13.77px of width per 1px of font-size in Permanent
   Marker, measured directly. The shift left column is .9fr of (wrap - 64px gap), so its
   width tracks the viewport up to the 1320px wrap cap; this formula stays just under the
   safe ceiling across that whole range, verified by scrollWidth at 900px and 1320px+. */
@media(min-width:900px){.shift-graffiti.graffiti{white-space:nowrap;font-size:clamp(25px,calc(3.2vw - 3.4px),39px)}}
.shift-graffiti .flick{
  display:inline-block;
  text-shadow:
    2px 2px 0 rgba(193,57,43,.6),
    -1px 2px 10px rgba(255,92,61,.4),
    0 0 20px rgba(180,144,63,.25);
}
.shift-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
@media(max-width:640px){.shift-stats{gap:8px;flex-wrap:nowrap;justify-content:space-between}}
.stat b{font-family:'Alfa Slab One';font-size:28px;letter-spacing:.03em;color:var(--brass-bright);display:block;white-space:nowrap}
.stat span{font-family:'Space Mono';font-size:10.5px;letter-spacing:.08em;color:var(--concrete-2);text-transform:uppercase;white-space:nowrap}
@media(max-width:640px){.stat b{font-size:19px}.stat span{font-size:8px;letter-spacing:.04em}}
.stat{color:var(--bone-2)}
.shift-media{position:relative;border-radius:2px;overflow:hidden}
.shift-media img{width:100%;height:auto;border:1px solid var(--line-on-ink);aspect-ratio:4/5;object-fit:cover;object-position:top}
@media(max-width:899px){.shift-media img{aspect-ratio:4/3}}
.shift-media .tag{position:absolute;bottom:14px;left:14px;background:var(--bone);color:var(--ink);font-family:'Space Mono';font-weight:700;font-size:11px;padding:8px 12px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 12px 24px -8px rgba(0,0,0,.5)}

/* ---------- shop ---------- */
.shop{background:var(--bone);color:var(--ink);padding:80px 0 100px;border-radius:22px 22px 0 0;position:relative}
.shop-head{margin-bottom:28px}
.shop-head h2{font-size:clamp(38px,7.5vw,58px);text-transform:uppercase}
.shop-body{display:grid;grid-template-columns:1fr;gap:30px;margin-top:36px}
.shop-products{min-width:0}
.shop-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:20px}
.sort-label{font-family:'Space Mono';font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete)}
.sort-select{
  font-family:'Space Mono';font-weight:700;font-size:12px;letter-spacing:.03em;
  color:var(--ink);background:var(--bone);border:1px solid var(--line-on-bone);border-radius:2px;
  padding:9px 32px 9px 12px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0d0b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
.sort-select:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}
@media(min-width:900px){.shop-body{grid-template-columns:220px 1fr}}
.filters{display:none}
@media(min-width:900px){
  .filters{display:block;position:sticky;top:84px;align-self:start}
  .filters h3{font-family:'Space Mono';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;color:var(--concrete)}
  .filters .grp{margin-bottom:26px}
  .filters button{display:block;width:100%;text-align:left;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line-on-bone);color:var(--concrete)}
  .filters button.active{color:var(--ink);font-weight:600}
}
.filter-fab{position:fixed;bottom:22px;right:20px;z-index:150;background:var(--ink);color:var(--bone);padding:13px 20px;border-radius:30px;font-family:'Space Mono';font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 14px 30px -8px rgba(0,0,0,.4);display:flex;gap:8px;align-items:center;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.filter-fab.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(min-width:900px){.filter-fab{display:none}}

.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:'Space Mono';font-size:10.5px;letter-spacing:.03em;color:var(--concrete);margin-top:26px;margin-bottom:18px;align-items:center}
.legend b{padding:2px 7px;border-radius:var(--radius-tag);font-weight:700;margin-right:5px}
.tag-open b,.lg-open{background:#1f5c3d;color:#eafff2}
.tag-new b,.lg-new{background:var(--brass);color:var(--ink)}
.tag-last b,.lg-last{background:var(--rail);color:var(--bone)}
.tag-86 b,.lg-86{background:var(--ink);color:var(--bone-2)}
.legend-note{font-family:'General Sans';font-size:12px;color:var(--concrete);margin-bottom:8px}
.legend-sustain{font-family:'General Sans';font-size:12px;color:var(--rail);font-weight:600;margin-bottom:32px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:26px 22px}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(4,1fr)}}

/* cards read as tacked-up bar-wall prints: brass push-pin + tactile tilt on hover */
@media(prefers-reduced-motion:no-preference){
  .card{animation:cardIn .4s var(--ease) both}
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.card{position:relative;cursor:pointer;transition:transform .3s var(--ease)}
.card:hover{transform:rotate(-1deg) translateY(-4px)}
.card::before{
  content:'';position:absolute;top:-6px;left:50%;width:13px;height:13px;margin-left:-6.5px;
  border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass) 55%, #6d551d 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}
.card-media{position:relative;aspect-ratio:4/5;background:var(--bone-2);overflow:hidden;border:1px solid var(--line-on-bone)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.card-tag{position:absolute;top:9px;left:9px;font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:4px 7px;border-radius:var(--radius-tag);text-transform:uppercase}
.wish{position:absolute;top:2px;right:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.wish::before{content:'';position:absolute;inset:9px;background:rgba(242,236,221,.85);border-radius:50%;transition:background .2s;z-index:-1}
.wish:hover::before{background:var(--bone)}
.card-info{padding-top:10px}
.card-info .cat{font-family:'Space Mono';font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--concrete)}
.card-info h3{font-size:14px;font-weight:600;margin-top:3px;line-height:1.25}
.card-info .price{font-family:'Alfa Slab One';font-size:16px;margin-top:5px}

.pdp-related{margin-top:70px;padding-top:46px;border-top:1px solid var(--line-on-bone)}
.pdp-related-title{font-family:'Alfa Slab One';font-size:clamp(22px,3.4vw,32px);text-transform:uppercase;margin:8px 0 26px}

/* ---------- pdp ---------- */
.pdp{background:var(--bone);color:var(--ink);padding:0 0 100px}
.pdp-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:900px){.pdp-grid{grid-template-columns:1fr 1fr;gap:70px}}
.pdp .eyebrow{display:block;margin-bottom:10px}
.crumb{font-family:'Space Mono';font-size:11.5px;color:var(--concrete);margin-bottom:20px;text-transform:uppercase}
.crumb a:hover{color:var(--rail)}
.pdp-media{position:relative;border:1px solid var(--line-on-bone);overflow:hidden}
.pdp-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
@media(max-width:899px){.pdp-media img{aspect-ratio:4/3}}
.pdp-thumbs{display:flex;gap:10px;margin-top:10px}
.pdp-thumbs button{width:64px;height:64px;border:1px solid var(--line-on-bone);overflow:hidden;padding:0;opacity:.6;transition:opacity .2s,border-color .2s}
.pdp-thumbs button.sel,.pdp-thumbs button:hover{opacity:1;border-color:var(--ink)}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info h2{font-family:'Alfa Slab One';font-size:clamp(30px,4.4vw,44px);text-transform:uppercase;line-height:1;max-width:15ch}
.pdp-subname{font-size:.62em}
.pdp-price{font-family:'Alfa Slab One';font-size:26px;margin-top:14px;color:var(--rail)}
.pdp-badge{display:inline-block;margin-top:10px;font-family:'Space Mono';font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:var(--radius-tag)}
@media(min-width:900px){
  .pdp-info{text-align:center;max-width:none}
  .pdp-info h2{max-width:none}
  .pdp-badge{margin-left:auto;margin-right:auto}
  .pdp-info > p{margin-left:auto;margin-right:auto}
  .sizes,.colors{justify-content:center}
  .pdp-cta{justify-content:center}
  .acc{text-align:left}
}
.sizes{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.sizes button{min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line-on-bone);border-radius:2px;font-family:'Space Mono';font-size:13px;font-weight:700}
.sizes button.sel,.sizes button:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.colors{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.colors button{min-width:44px;height:38px;padding:0 12px;border:1px solid var(--line-on-bone);border-radius:2px;font-family:'Space Mono';font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.colors button.sel,.colors button:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.pdp-thumbs[hidden],.colors[hidden],.sizes[hidden]{display:none}
.pdp-cta{display:flex;gap:12px;margin-top:26px}
.pdp-cta .btn-solid{flex:1;background:var(--ink);color:var(--bone)}
.pdp-cta .btn-line{flex:1;border:1px solid var(--ink);text-align:center;color:var(--ink)}
.pdp-cta .btn-line:hover{background:var(--ink);color:var(--bone)}
.acc{margin-top:34px;border-top:1px solid var(--line-on-bone)}
.acc-item{border-bottom:1px solid var(--line-on-bone)}
.acc-item button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:'Space Mono';font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.acc-item .plus{transition:transform .25s var(--ease);font-size:18px;color:var(--concrete)}
.acc-item.open .plus{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc-item.open .acc-body{max-height:320px}
.acc-body p{padding-bottom:16px;font-size:13.5px;color:var(--concrete);max-width:48ch;font-family:'General Sans'}
.note{margin-top:26px;font-size:11.5px;color:var(--concrete);border-left:2px solid var(--brass);padding-left:12px}

/* ---------- brand story ---------- */
.brand{padding:100px 0;position:relative;background:var(--ink);overflow:hidden}
.brand-grid{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.brand-grid{grid-template-columns:1.2fr .8fr}}
.brand .eyebrow{display:block;margin-bottom:10px}
.brand h2{font-size:clamp(30px,5.5vw,50px);text-transform:uppercase;margin-bottom:18px}
/* "Our Story" is a real <h2> so the section has a heading in the document outline (screen
   readers and SEO), but it stays styled as the small mono eyebrow it reads as visually.
   Needs (0,2,1) to outrank .brand h2 above, same specificity trap as .shift-h2 and .foot-nav. */
.brand h2.eyebrow{font-size:11px;line-height:1.4;font-weight:700}
.brand blockquote{font-family:'Alfa Slab One';font-size:clamp(24px,4.6vw,42px);line-height:1.1}
.brand cite{display:block;margin-top:22px;font-style:normal;font-family:'Space Mono';color:var(--brass-bright);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.brand p.lede{color:var(--bone-2);margin-top:22px;font-size:14.5px;line-height:1.55;max-width:56ch}
@media(max-width:640px){.brand p.lede{font-size:13.5px;max-width:40ch}}
.brand-media{border-radius:2px;overflow:hidden}
.brand-media img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media(max-width:900px){.brand-media{max-width:280px;margin:0 auto}}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-on-ink);padding:70px 0 30px}
.foot-top{display:grid;gap:40px;grid-template-columns:1fr;padding-bottom:50px}
.foot-logo{display:inline-block}
.foot-highlight{display:grid;gap:26px;grid-template-columns:1fr}
.foot-nav{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:760px){
  .foot-highlight{grid-template-columns:1fr 1fr;gap:60px;align-items:start;padding-top:30px;border-top:1px solid var(--line-on-ink)}
  .foot-nav{padding-top:36px;border-top:1px solid var(--line-on-ink);grid-template-columns:repeat(3,1fr);gap:40px}
}
.foot-brand p{color:var(--bone-2);font-size:14px;max-width:34ch;margin-top:14px}
.foot-sustain{color:var(--brass-bright)!important;font-weight:600;font-size:16px;line-height:1.5;max-width:40ch!important;border-left:3px solid var(--brass);padding:2px 0 2px 16px;margin-top:22px}
@media(min-width:760px){.foot-sustain{font-size:17px;margin-top:0}}
.foot-signup-graffiti.graffiti{
  font-family:'Permanent Marker',cursive;
  text-transform:none;
  color:var(--bone);
  line-height:1.15;
  letter-spacing:.01em;
  font-size:clamp(30px,8vw,42px);
  margin-top:26px;
}
@media(min-width:760px){.foot-signup-graffiti.graffiti{margin-top:0}}
.foot-signup-graffiti .flick{
  display:inline-block;
  text-shadow:
    2px 2px 0 rgba(193,57,43,.6),
    -1px 2px 10px rgba(255,92,61,.4),
    0 0 20px rgba(180,144,63,.25);
}
.foot-signup-sub{color:var(--bone-2);font-size:13.5px;max-width:32ch;margin-top:6px;margin-bottom:0}
.foot-col h3{font-family:'Space Mono';font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-2);margin-bottom:14px}
.foot-col a,.foot-col p{display:block;font-size:13.5px;color:var(--bone-2);padding:5px 0}
.foot-col a:hover{color:var(--brass-bright)}
.foot-form{display:flex;margin-top:14px;border:1px solid var(--line-on-ink);border-radius:2px;overflow:hidden;max-width:320px}
.foot-form input{flex:1;background:transparent;border:none;padding:12px;color:var(--bone);font-size:13px}
/* The input's own outline is suppressed because the ring belongs on the whole grouped
   control, not the inner field. Without the :focus-within rule this was a WCAG 2.4.7 fail:
   keyboard users got no visible focus indicator on the email field at all. */
.foot-form:focus-within{outline:2px solid var(--brass-bright);outline-offset:2px}
.foot-form input:focus{outline:none}
.foot-form button{padding:0 18px;background:var(--brass);color:var(--ink);font-weight:700;font-family:'Space Mono';font-size:11.5px;text-transform:uppercase}
.foot-bottom{border-top:1px solid var(--line-on-ink);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--concrete-2);font-family:'Space Mono'}

.cart-drawer{position:fixed;inset:0 0 0 auto;width:min(90vw,400px);background:var(--bone);color:var(--ink);z-index:400;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line-on-bone)}
.cart-head h2{font-family:'Alfa Slab One';font-size:19px;text-transform:uppercase}
.cart-items{flex:1;overflow-y:auto;padding:10px 24px}
.cart-empty{color:var(--concrete);font-size:13.5px;padding:30px 0;text-align:center}
.cart-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-on-bone)}
.cart-row .cimg{width:56px;height:56px;background:var(--bone-2);border-radius:2px;flex-shrink:0;overflow:hidden}
.cart-row .cimg img{width:100%;height:100%;object-fit:cover}
.cart-row .cinfo{flex:1;font-size:13px}
.cart-row .cinfo b{font-size:13.5px}
.cart-foot{padding:20px 24px;border-top:1px solid var(--line-on-bone)}
.cart-foot .row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:14px}
.cart-foot .row b{font-family:'Alfa Slab One';font-size:18px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}

.order-banner{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--bone);border:1px solid var(--brass);padding:14px 22px;border-radius:3px;font-size:13.5px;z-index:600;opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);max-width:min(90vw,420px);text-align:center}
.order-banner.show{opacity:1;transform:translate(-50%,0)}