/* INDEPENDENTco — black cotton, white ink, one bone band. */
:root{
  --ink:#0b0b0b; --cotton:#141414; --seam:#2a2a2a; --white:#f4f1ea; --bone:#e6e0d2; --bone-2:#d9d2c1;
  --mute:#9a958b; --moss:#8fb339;
  --disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --black:'Pirata One',Georgia,serif;
  --body:'Work Sans',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.ch{font-family:var(--black);font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(22px,3vw,34px);color:var(--bone);line-height:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit;cursor:pointer}
.btn{display:inline-block;border:2px solid var(--white);background:var(--white);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em;padding:12px 22px 10px;text-decoration:none;line-height:1}
.btn:hover{background:var(--ink);color:var(--white)}
.btn.ghost{background:transparent;color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* header: a stitched hem, not a bar */
.top{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px dashed var(--seam);display:flex;align-items:center;gap:18px;padding:12px var(--gutter)}
.top .mark img{height:22px;width:auto}
.top nav{display:flex;gap:18px;margin-left:auto;font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.06em}
.top nav a{text-decoration:none;color:var(--bone)}
.top nav a:hover{color:var(--white);text-decoration:underline;text-underline-offset:5px}
.cartbtn{position:relative;background:none;border:0;color:var(--bone);font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.06em;padding:0}
.cartbtn b{display:inline-block;min-width:22px;text-align:center;margin-left:6px;background:var(--moss);color:var(--ink);border-radius:2px;padding:1px 4px 0;font-size:14px}

/* hero: photo on the white cyc, wordmark laid across it like a back print */
.hero{position:relative;background:var(--bone);color:var(--ink);overflow:hidden}
.hero .shot{aspect-ratio:3/2;width:100%;object-fit:cover;object-position:50% 12%;filter:contrast(1.04)}
.hero .print{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 18px;pointer-events:none}
.hero .print img{width:100%;height:auto;filter:invert(1);opacity:.96}
.hero .tag{position:absolute;top:18px;left:var(--gutter);font-family:var(--disp);font-weight:800;font-size:clamp(14px,1.6vw,20px);text-transform:uppercase;letter-spacing:.12em;background:var(--ink);color:var(--bone);padding:6px 10px 4px}
.strap{display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:end;padding:26px var(--gutter);border-bottom:1px dashed var(--seam)}
.strap h1{font-size:clamp(40px,7.5vw,112px)}
.strap p{margin:0;max-width:34ch;color:var(--bone);font-size:17px}
.strap .btn{white-space:nowrap}
@media (max-width:700px){.strap{grid-template-columns:1fr}.hero .shot{aspect-ratio:4/5;object-position:50% 30%}}

/* running stitch marquee of print names */
.stitch{overflow:hidden;border-bottom:1px dashed var(--seam);padding:10px 0;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.stitch span{display:inline-block;padding-right:3em;animation:run 40s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.stitch span{animation:none}}

/* shop grid: 2 up, big, photo and artwork alternate */
.wrap{padding:0 var(--gutter)}
.sect{padding:56px 0 24px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.sect h2{font-size:clamp(40px,6vw,84px)}
.sect .ch{margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:var(--cotton);text-decoration:none;color:var(--white);display:block;overflow:hidden}
.card .pic{aspect-ratio:4/5;overflow:hidden;background:var(--bone)}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .5s ease}
.card:hover .pic img{transform:scale(1.03)}
.card .art{position:absolute;inset:0;background:var(--ink);display:grid;place-items:center;opacity:0;transition:opacity .25s}
.card .art img{max-height:82%;width:auto;max-width:70%;object-fit:contain}
.card:hover .art,.card:focus-visible .art{opacity:1}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px 14px;border-top:1px dashed var(--seam)}
.card .meta b{font-family:var(--disp);font-weight:900;font-size:30px;text-transform:uppercase;line-height:1}
.card .meta small{display:block;font-family:var(--body);font-weight:500;font-size:13px;color:var(--mute);text-transform:none;letter-spacing:0;margin-top:2px}
.card .meta .p{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--bone)}

/* care label: the brand's own printed wash label becomes the spec block */
.label{border:1px solid var(--bone);padding:18px 20px 16px;max-width:520px;background:var(--ink);position:relative}
.label:before,.label:after{content:"";position:absolute;top:-1px;bottom:-1px;width:6px;background:#1e88e5;opacity:.0}
.label h3{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;margin-bottom:12px;color:var(--bone)}
.label ul{list-style:none;margin:0;padding:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.label li{padding:5px 0;border-bottom:1px dashed var(--seam)}
.label li:last-child{border:0}
.label li span{color:var(--mute);margin-right:8px}

/* product page */
.pd{display:grid;grid-template-columns:1.2fr 1fr;gap:2px;padding-top:2px}
@media (max-width:820px){.pd{grid-template-columns:1fr}}
.pd .pics{display:grid;gap:2px}
.pd .lead img,.pd .rest img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;background:var(--bone)}
.pd .rest .artframe{aspect-ratio:4/5;background:var(--ink);display:grid;place-items:center;border:1px dashed var(--seam)}
.pd .rest .artframe img{max-height:80%;width:auto;max-width:70%;object-fit:contain;aspect-ratio:auto;background:none}
.pd .buy{position:sticky;top:64px;align-self:start;padding:28px clamp(16px,3vw,40px) 40px}
.pd .buy h1{font-size:clamp(56px,9vw,120px)}
.pd .buy .line{font-family:var(--disp);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-top:4px}
.pd .buy .price{font-family:var(--disp);font-weight:900;font-size:40px;margin:14px 0 6px}
.pd .buy p{color:var(--bone);max-width:44ch}
.sizes{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sizes span{display:block;min-width:56px;text-align:center;border:1px solid var(--seam);padding:10px 12px 8px;font-family:var(--disp);font-weight:800;font-size:20px;color:var(--bone)}
.sizes input:checked+span{background:var(--white);color:var(--ink);border-color:var(--white)}
.sizes input:focus-visible+span{outline:2px solid var(--moss);outline-offset:2px}
.ship{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.ship i{font-style:normal;color:var(--moss)}
.msg{font-size:14px;color:var(--moss);min-height:1.5em;margin-top:8px}

/* crew band: white cyc again, a chapter word and two photos */
.crew{background:var(--bone);color:var(--ink);padding:40px var(--gutter) 48px;margin-top:64px}
.crew .row{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:20px}
@media (max-width:700px){.crew .row{grid-template-columns:1fr}}
.crew .row img{width:100%;aspect-ratio:3/2;object-fit:cover}
.crew h2{font-size:clamp(40px,7vw,96px)}
.crew p{max-width:52ch;font-size:17px;margin:12px 0 0}
.crew .ch{color:var(--ink)}
.crew .btn{border-color:var(--ink);background:var(--ink);color:var(--bone);margin-top:22px}
.crew .btn:hover{background:transparent;color:var(--ink)}

/* footer as a care label */
footer{padding:56px var(--gutter) 40px;display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px dashed var(--seam);margin-top:64px}
@media (max-width:700px){footer{grid-template-columns:1fr}}
footer .mark img{height:28px;width:auto;margin-bottom:18px}
footer p,footer li{font-size:14px;color:var(--mute)}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:4px 0}
footer a{color:var(--bone);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
footer .cath{position:relative}
footer .cath img{width:100%;max-width:520px;border:1px solid var(--seam)}

/* cart drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,100%);background:var(--ink);border-left:1px dashed var(--seam);z-index:40;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);border-bottom:1px dashed var(--seam)}
.drawer header h2{font-size:40px}
.drawer .x{background:none;border:0;color:var(--bone);font-family:var(--disp);font-size:20px;font-weight:700;text-transform:uppercase}
.drawer .items{flex:1;overflow:auto;padding:8px var(--gutter)}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--seam)}
.ci img{width:64px;aspect-ratio:4/5;object-fit:cover;background:var(--bone)}
.ci b{font-family:var(--disp);font-weight:900;font-size:22px;text-transform:uppercase;display:block;line-height:1}
.ci small{color:var(--mute);font-size:13px}
.ci .q{display:flex;align-items:center;gap:6px}
.ci .q button{background:none;border:1px solid var(--seam);color:var(--bone);width:28px;height:28px}
.drawer .sum{padding:16px var(--gutter) 24px;border-top:1px dashed var(--seam)}
.drawer .sum .row{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.04em;padding:4px 0}
.drawer .sum .btn{width:100%;text-align:center;margin-top:12px}
.shade{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.shade.on{opacity:1;pointer-events:auto}
.empty{color:var(--mute);padding:24px 0}

/* plain pages */
.prose{max-width:64ch;padding:40px 0 20px}
.prose h1{font-size:clamp(48px,8vw,104px);margin-bottom:16px}
.prose h2{font-size:32px;margin:32px 0 8px}
.prose p,.prose li{color:var(--bone);font-size:17px}
.prose a{color:var(--white)}

/* mobile nav: three words and the cart, never wraps */
@media (max-width:700px){
  .top{gap:12px;padding:10px 16px}
  .top .mark img{height:18px}
  .top nav{gap:12px;font-size:15px;letter-spacing:.04em}
  .top nav a.hidem{display:none}
  .cartbtn{font-size:15px}
}
/* product page: lead photo, then the buy panel, then the rest */
.pd{grid-template-areas:"lead buy" "rest buy";grid-template-columns:1.2fr 1fr}
.pd .lead{grid-area:lead}.pd .rest{grid-area:rest}.pd .buy{grid-area:buy}
.pd .rest,.pd .lead{display:grid;gap:2px}
@media (max-width:820px){.pd{grid-template-areas:"lead" "buy" "rest";grid-template-columns:1fr}.pd .buy{position:static}}
html{overflow-x:clip}
.drawer:not(.open){visibility:hidden;transition:transform .3s,visibility 0s .3s}