/* OFFSIDES ORIGINALS — "The Terrace", polish pass (2026-09-28).
   Tracksmith / '47 / Ebbets trust: Newsreader serif heads, Archivo UI, one label style,
   clean product photography (no film look), 8-pt spacing scale. Colors locked. */
:root{
  --cream:#f5f0e2; --paper:#faf6ec; --green:#1e3d34; --deep:#132720; --sage:#5c7566;
  --line:#e2dac6; --brick:#b33a32;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --g:40px; --max:1440px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}
@media(max-width:700px){:root{--g:20px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{background:var(--cream);color:var(--green);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type — serif heads, one label style */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic}
.lbl{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.h-hero{font-size:64px}
.h-sec{font-size:40px}
@media(max-width:700px){.h-hero{font-size:38px}.h-sec{font-size:28px}}
.lede{font-size:17px;line-height:1.6;max-width:56ch}
.tlink{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--sans)}
.tlink span{border-bottom:1px solid currentColor;padding-bottom:3px}
.tlink:hover{color:var(--brick)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s4);
  background:var(--green);color:var(--cream);border:0;cursor:pointer;transition:background .2s,color .2s;
  font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.btn:hover{background:var(--brick)}
.btn:disabled{opacity:.45;cursor:not-allowed;background:var(--green)}
.btn.light{background:var(--cream);color:var(--green)}
.btn.light:hover{background:var(--brick);color:var(--cream)}

/* editorial grain (≤0.12) — editorial photos only, never product shots */
.grain::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* announce + nav */
.announce{background:var(--green);color:var(--cream);text-align:center;padding:10px var(--g)}
.nav{position:sticky;top:0;z-index:50;background:rgba(245,240,226,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--g);height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav .grp{display:flex;gap:var(--s4)}
.nav .grp a{display:inline-flex;align-items:center;min-height:44px}
.nav .grp a:hover,.nav .grp a[aria-current]{color:var(--brick)}
.nav .r{justify-self:end}
.nav .logo{display:flex;align-items:center;min-height:44px}
.nav .logo img{height:36px;width:auto}
.menu{display:none}
.menu summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu .panel{position:absolute;left:0;right:0;top:72px;background:var(--cream);border-bottom:1px solid var(--line);padding:var(--s1) var(--g) var(--s3)}
.menu .panel a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font:400 24px/1 var(--serif)}
@media(max-width:820px){.nav .grp.l{display:none}.menu{display:block}.nav .logo img{height:30px}}

/* hero — full-bleed, text bottom-left, bottom gradient */
.hero{position:relative;height:82vh;min-height:520px;max-height:900px;overflow:hidden;background:var(--deep);color:var(--cream)}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero img{object-position:50% 22%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(19,39,32,.82) 0%,rgba(19,39,32,.45) 30%,rgba(19,39,32,0) 58%)}
.hero .copy{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--max);margin:0 auto;padding:0 var(--g) var(--s6)}
.hero .lbl{opacity:.85;margin-bottom:var(--s2)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:var(--s2);color:rgba(245,240,226,.9)}
.hero .ctas{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap}
.hero.short{height:60vh;min-height:420px}
@media(max-width:700px){
  .hero{height:82svh;min-height:480px}
  .hero img{object-position:50% 20%}
  .hero .copy{padding-bottom:var(--s5)}
  .hero .ctas{gap:var(--s3)}
}

/* sections */
.sec{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--g) 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-h .lbl{display:block;margin-bottom:var(--s1)}
.sec-h p{font-size:15px;max-width:48ch;margin-top:var(--s1)}
@media(max-width:700px){.sec{padding-top:var(--s6)}}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s3)}
.grid.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.grid,.grid.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid,.grid.five{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s2)}}
.card{display:block}
.card .media{position:relative;aspect-ratio:4/5;background:var(--line);overflow:hidden;margin-bottom:var(--s2)}
.card .media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .media .alt{opacity:0;transition:opacity .25s ease}
.card:hover .media .alt,.card:focus-visible .media .alt{opacity:1}
@media(hover:none){.card .media .alt{display:none}}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font:500 15px/1.35 var(--sans)}
.card .row .pr{font-variant-numeric:tabular-nums;white-space:nowrap}
.card:hover .row .nm{text-decoration:underline;text-underline-offset:3px}
.card .meta{font-size:14px;line-height:1.4;color:var(--sage);margin-top:4px}
.card .sw{display:flex;gap:6px;margin-top:var(--s1)}
.card .sw span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(30,61,52,.25)}


/* collection split (editorial) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.split a{position:relative;display:block;aspect-ratio:5/6;overflow:hidden;background:var(--deep);color:var(--cream)}
.split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.split a:hover img{transform:scale(1.02)}
.split a::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(19,39,32,.7),rgba(19,39,32,0) 50%)}
.split .copy{position:absolute;z-index:2;left:var(--s4);right:var(--s4);bottom:var(--s4)}
.split .lbl{opacity:.85;margin-bottom:var(--s1)}
.split .tlink{margin-top:var(--s1)}
@media(max-width:700px){.split{grid-template-columns:1fr;gap:var(--s2)}.split .copy{left:var(--s3);bottom:var(--s3)}}

/* story band */
.band{background:var(--green);color:var(--cream);margin-top:var(--s7)}
.band .in{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--g);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:end}
.band .lbl{margin-bottom:var(--s2);opacity:.85}
.band p{font-size:17px;line-height:1.7;max-width:52ch;color:rgba(245,240,226,.9)}
.band .tlink{margin-top:var(--s2)}
@media(max-width:820px){.band .in{grid-template-columns:1fr;gap:var(--s3);padding:var(--s6) var(--g)}}

/* signup */
.signup{max-width:640px;margin:0 auto;padding:var(--s7) var(--g) 0;text-align:center}
.signup .lbl{margin-bottom:var(--s2)}
.signup p{font-size:15px;margin-top:var(--s2)}
.nform{display:flex;margin-top:var(--s3);border:1px solid var(--green);background:var(--paper)}
.nform:focus-within{outline:2px solid var(--brick);outline-offset:3px}
.nform input[type=email]{flex:1;min-width:0;min-height:52px;padding:0 var(--s2);background:transparent;border:0;outline:none;font-size:16px}
.nform input::placeholder{color:var(--sage)}
.nform .btn{flex:none}
.notify-msg{margin-top:var(--s2);font-size:15px}
@media(max-width:420px){.nform .btn{padding:0 var(--s2)}}

/* page title */
.ptitle{max-width:var(--max);margin:0 auto;padding:var(--s6) var(--g) 0}
.ptitle .lbl{margin-bottom:var(--s2)}
.ptitle .lede{margin-top:var(--s2)}

/* filter chips */
.chips{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s4)}
.chips button{min-height:44px;padding:0 var(--s2);background:transparent;border:1px solid var(--line);cursor:pointer;transition:border-color .2s;
  font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.chips button:hover{border-color:var(--green)}
.chips button[aria-pressed=true]{background:var(--green);color:var(--cream);border-color:var(--green)}

/* product page */
.pdp{max-width:var(--max);margin:0 auto;padding:var(--s4) var(--g) 0;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--s6);align-items:start}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.gallery .shot{position:relative;aspect-ratio:4/5;background:var(--line);overflow:hidden}
.gallery .shot>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery.odd .shot:first-child{grid-column:1/-1}
.gallery .shot:only-child{max-width:680px}
.info{position:sticky;top:96px}
.crumb a:hover{color:var(--brick)}
.info h1{font-size:44px;margin-top:var(--s2)}
.info .price{font:500 20px/1 var(--sans);font-variant-numeric:tabular-nums;margin-top:var(--s2)}
.info .pitch{font-size:17px;line-height:1.6;margin-top:var(--s3)}
.cwl{margin:var(--s4) 0 var(--s1)}
.cwrap{display:flex;gap:var(--s1);flex-wrap:wrap}
.cw{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 14px 0 10px;background:transparent;border:1px solid var(--line);cursor:pointer;font:500 14px/1 var(--sans)}
.cw:hover{border-color:var(--green)}
.cw[aria-pressed=true]{border:2px solid var(--green);padding:0 13px 0 9px}
.cw .dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(30,61,52,.25)}
.info .buy{width:100%;margin-top:var(--s4)}
#buy.wait{min-height:200px}
.cw.opt{padding:0 var(--s2);min-width:52px;justify-content:center}
.cw.opt[aria-pressed=true]{padding:0 calc(var(--s2) - 1px)}
.cw:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.cw:disabled:hover{border-color:var(--line)}
.alt-buy{text-align:center;margin-top:var(--s1)}
.buy-err{color:var(--brick);font-size:14px;margin-top:12px}
.info .trust{font-size:14px;line-height:1.5;color:var(--sage);text-align:center;margin-top:12px}
.info .fit{font-size:15px;margin-top:var(--s3)}
.info .links{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s1)}
.soon-box{margin-top:var(--s4);padding:var(--s3);background:var(--paper);border:1px solid var(--line)}
.soon-box p{font-size:15px;margin-top:var(--s1)}
.soon-box .nform{margin-top:var(--s2)}
.block{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3)}
.block ul{list-style:none;margin-top:12px;font-size:15px;line-height:1.9}
.block .hist{font:400 19px/1.55 var(--serif);font-style:italic;margin-top:12px}
@media(max-width:1000px){
  .pdp{grid-template-columns:1fr;gap:var(--s4);padding-top:var(--s2)}
  .info{position:static}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s1);margin:0 calc(var(--g) * -1);padding:0 var(--g);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery .shot{flex:0 0 86%;scroll-snap-align:center}
  .info h1{font-size:34px}
}

/* prose pages — story, shipping, size guide, faq */
.prose{max-width:760px;margin:0 auto;padding:var(--s6) var(--g) 0}
.prose .lbl{margin-bottom:var(--s2)}
.prose h1{margin-bottom:var(--s4)}
.prose h2{font-size:28px;margin:var(--s5) 0 var(--s2)}
.prose p,.prose li{font-size:17px;line-height:1.7}
.prose p+p{margin-top:var(--s2)}
.prose ul{padding-left:1.2em;margin-top:var(--s1)}
.prose li+li{margin-top:var(--s1)}
.prose a:not(.btn){border-bottom:1px solid currentColor}
.prose a:not(.btn):hover{color:var(--brick)}
.prose table{width:100%;border-collapse:collapse;margin-top:var(--s2);font-size:15px}
.prose th,.prose td{text-align:left;padding:12px var(--s1) 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.prose .note{background:var(--paper);border:1px solid var(--line);padding:var(--s3);margin-top:var(--s4)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:64px;cursor:pointer;font:400 22px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--sans);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s3)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:var(--s7)}
footer .in{max-width:var(--max);margin:0 auto;padding:var(--s6) var(--g) var(--s4);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s4)}
footer .brand img{height:40px;width:auto}
footer .brand p{font-size:15px;max-width:34ch;margin-top:var(--s2)}
footer h2{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s1)}
footer ul{list-style:none}
footer li a{display:inline-flex;align-items:center;min-height:40px;font-size:15px}
footer li a:hover{color:var(--brick)}
footer .legal{max-width:var(--max);margin:0 auto;padding:var(--s3) var(--g) var(--s4);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:14px}
@media(max-width:820px){footer .in{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1}}

/* bag button + slide-in drawer (native <dialog>) */
.bag{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer}
.bag:hover{color:var(--brick)}
body:has(.drawer[open]){overflow:hidden}
.drawer{margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:0;background:var(--cream);color:var(--green)}
.drawer[open]{display:flex;flex-direction:column;animation:slidein .25s ease}
.drawer::backdrop{background:rgba(19,39,32,.45)}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;flex:none;height:72px;padding:0 var(--s2) 0 var(--s3);border-bottom:1px solid var(--line)}
.drawer .x{width:44px;height:44px;background:none;border:0;cursor:pointer;font-size:18px}
.drawer .x:hover{color:var(--brick)}
.drawer .lines{flex:1;overflow-y:auto;padding:0 var(--s3)}
.drawer[aria-busy] .lines{opacity:.5;pointer-events:none}
.drawer .empty{font:400 24px/1.3 var(--serif);margin:var(--s5) 0 var(--s1)}
.line{display:grid;grid-template-columns:80px 1fr;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.line img,.line .noimg{width:80px;height:100px;object-fit:cover;background:var(--line)}
.line .tr{display:flex;justify-content:space-between;gap:var(--s1);font:500 15px/1.35 var(--sans)}
.line .t:hover{color:var(--brick)}
.line .lp{font-variant-numeric:tabular-nums;white-space:nowrap}
.line .v{font-size:14px;color:var(--sage);margin-top:2px}
.qty{display:flex;align-items:center;margin-top:var(--s1)}
.qty button{min-width:44px;min-height:44px;background:none;border:1px solid var(--line);cursor:pointer;font-size:17px}
.qty button:hover{border-color:var(--green)}
.qty span{min-width:36px;text-align:center;font-variant-numeric:tabular-nums}
.qty .rm{border:0;margin-left:var(--s1);padding:0 var(--s1);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.qty .rm:hover{color:var(--brick)}
.drawer .df{flex:none;padding:var(--s3);border-top:1px solid var(--line)}
.drawer .df:empty{display:none}
.drawer .sub{display:flex;justify-content:space-between;font:500 17px/1 var(--sans);font-variant-numeric:tabular-nums}
.drawer .note{font-size:14px;color:var(--sage);margin:12px 0 var(--s2)}
.drawer .df .btn{width:100%}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.drawer[open]{animation:none}}