/* Salvaged Stories — identity drawn from the project's own posters:
   charcoal hand-drawn logo, blue starbursts, red/white checkerboard,
   varsity numerals, wide blue "Reweaving the fashion industry" banner. */
@font-face{font-family:'Bebas Neue';src:url('/work/wrangler-x-infinita/assets/fonts/bebas-neue-400.ttf') format('truetype');font-weight:400;font-display:swap}
:root{
  --paper:#efeee9;--card:#fbfaf5;--ink:#151515;--muted:#5f5d58;--line:#d4d1c8;
  --blue:#2448d8;--blue-soft:#c9d6f2;--red:#d4262e;--yellow:#eef06b;--wash:#9fb7d6;
  --body:Archivo,Arial,sans-serif;--logo:'Cabin Sketch',Archivo,sans-serif;--hand:Caveat,cursive;--varsity:Graduate,Georgia,serif;
  --gutter:clamp(20px,5vw,72px);
  --burst:polygon(50% 0%,58.5% 13%,71.7% 5%,73.7% 20.3%,89.1% 18.8%,84.2% 33.5%,98.7% 38.9%,88% 50%,98.7% 61.1%,84.2% 66.5%,89.1% 81.2%,73.7% 79.7%,71.7% 95%,58.5% 87%,50% 100%,41.5% 87%,28.3% 95%,26.3% 79.7%,10.9% 81.2%,15.8% 66.5%,1.3% 61.1%,12% 50%,1.3% 38.9%,15.8% 33.5%,10.9% 18.8%,26.3% 20.3%,28.3% 5%,41.5% 13%);
  --tag-star:polygon(49% 5.5%,65% 33.2%,97.5% 39.1%,73.5% 62.6%,78.7% 94.2%,50.6% 79.7%,20% 94.7%,26.5% 63.1%,2.5% 38.1%,34.5% 33.9%);
  --star:polygon(50% 2%,62.3% 35%,97.6% 36.5%,70% 58.5%,79.4% 92.5%,50% 73%,20.6% 92.5%,30% 58.5%,2.4% 36.5%,37.7% 35%)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--body);font-stretch:100%;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:absolute;top:-100px;z-index:30;padding:10px;background:var(--paper)}.skip:focus{top:0}

/* Nav (shared site chrome) */
.nav{position:sticky;top:0;z-index:20;height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);background:var(--paper);border-bottom:1px solid var(--line)}
.nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.back{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.signature{font:400 22px 'Bebas Neue',sans-serif;letter-spacing:.08em;white-space:nowrap}
.chapter-nav{justify-self:end;display:flex;gap:20px;font-size:11px}
.chapter-nav a{color:var(--muted)}.chapter-nav a:hover{color:var(--blue)}

/* Shared type */
.logo{font:700 clamp(40px,5vw,72px)/.95 var(--logo);letter-spacing:.01em}
.logo::first-letter{font-size:1.18em}
.hand{font:600 1.35em/1 var(--hand);color:var(--blue)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(22px,3vw,36px)}
.sec-head p{max-width:440px;color:var(--muted)}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(36px,5vw,72px) var(--gutter) clamp(40px,5vw,72px)}
.kicker{font:500 11px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.logo-mark{width:min(100%,640px);margin:2px 0 0 -6px}
.logo-mark img{width:100%}
.script{font:600 clamp(26px,2.6vw,38px)/1 var(--hand);color:var(--blue);margin:10px 0 24px 4px;transform:rotate(-2deg);transform-origin:left}
.lede{font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:560px}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 32px;margin-top:24px;padding-top:16px;border-top:2px solid var(--ink)}
.facts dt{font:500 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts dd{font:600 15px/1.3 var(--body);margin-top:3px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--ink);border-radius:999px;font:800 12px var(--body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .15s,background .15s,color .15s}
.btn:hover{transform:translateY(-2px);background:var(--ink);color:var(--paper)}
.btn-blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-blue:hover{background:var(--ink);border-color:var(--ink)}

.hero-photo{position:relative;justify-self:center;width:min(100%,460px)}
.tape-photo{display:block;width:100%;padding:10px 10px 44px;border:0;background:#fff;box-shadow:0 18px 40px #15151524;transform:rotate(2deg);transition:transform .3s}
.tape-photo:hover{transform:rotate(0)}
.tape-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 35%}
.tape-photo::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(-3deg);background:#e9e4c9cc;box-shadow:0 1px 2px #0002}
.burst{position:absolute;display:grid;place-items:center;text-align:center;clip-path:var(--burst);font:800 clamp(11px,1vw,14px)/1.1 var(--body);font-stretch:125%;letter-spacing:.04em;text-transform:uppercase}
.burst-blue{width:clamp(110px,11vw,150px);aspect-ratio:1;left:clamp(-60px,-4vw,-20px);bottom:clamp(30px,6vw,80px);background:var(--blue);color:var(--yellow);transform:rotate(-10deg);animation:spin 26s linear infinite}
.star{position:absolute;clip-path:var(--star)}
.star-red{width:clamp(70px,7vw,100px);aspect-ratio:1;right:clamp(-30px,-2vw,-12px);top:-26px;background:var(--red);transform:rotate(14deg)}
@keyframes spin{to{transform:rotate(350deg)}}

/* Checkerboard divider */
.checker{height:28px;background:repeating-conic-gradient(var(--red) 0 25%,#fff 0 50%) 0 0/28px 28px;border-block:2px solid var(--ink)}

/* ── The pieces: hang tags that flip to history cards ── */
.pieces,.promise,.brand,.lookbook{padding:clamp(48px,6vw,96px) var(--gutter)}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);perspective:1600px}
.card-inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.card.flipped .card-inner{transform:rotateY(180deg)}
.face{grid-area:1/1;display:flex;flex-direction:column;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--ink);border-radius:6px;background:var(--card);text-align:left;padding:0;overflow:hidden}
.front{transition:box-shadow .2s,transform .2s}
.card:not(.flipped) .front:hover{box-shadow:0 14px 30px #15151526}
.tag-photo{display:block;aspect-ratio:4/5;overflow:hidden;border-bottom:2px solid var(--ink)}
.tag-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.front:hover .tag-photo img{transform:scale(1.04)}
.tag-label{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;padding:14px 14px 14px;flex:1}
.tag-no{grid-column:1/-1;font:400 clamp(20px,1.8vw,26px)/1 var(--varsity);color:var(--red)}
.tag-name{font:800 13px/1.2 var(--body);font-stretch:125%;text-transform:uppercase;letter-spacing:.03em}
.tag-price{font:600 14px/1 var(--body);align-self:end}
.tag-hint{grid-column:1/-1;font:600 18px/1 var(--hand);color:var(--blue);white-space:nowrap;margin-top:4px}
.tag-label::before{content:"";position:absolute;top:14px;right:14px;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}

/* back: the bag's star-shaped denim tag, hung from a D-ring, written in marker */
.face.hc{transform:rotateY(180deg);align-items:center;padding:12px 14px 14px;background:var(--card);cursor:pointer}
.hang{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.ring{width:22px;height:16px;border:3px solid #9a9a9a;border-bottom-color:#bdbdbd;border-radius:0 0 12px 12px;border-top:0}
.chain{width:2px;height:22px;margin-top:-2px;background:repeating-linear-gradient(#a8a8a8 0 3px,#d6d6d6 3px 5px)}
.star-tag{position:relative;width:min(100%,320px);aspect-ratio:1;margin-top:-6%;container-type:inline-size;transform-origin:50% 6%;filter:drop-shadow(0 6px 8px #15151533)}
.card.flipped .star-tag{animation:swing 1.4s .35s cubic-bezier(.3,.6,.3,1) both}
@keyframes swing{0%{transform:rotate(9deg)}35%{transform:rotate(-5deg)}65%{transform:rotate(2.5deg)}100%{transform:rotate(-1deg)}}
.star-tag::before,.star-body{position:absolute;inset:0;clip-path:var(--tag-star)}
/* frayed raw edge */
.star-tag::before{content:"";background:#a9bcd3}
.star-body{inset:2.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:29% 22% 16%;text-align:center;color:#18233f;
  background-color:#55779e;
  background-image:repeating-linear-gradient(45deg,#ffffff12 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,#0d1d3a1c 0 1px,transparent 1px 4px),radial-gradient(circle at 40% 45%,#7393b8,#4a6a90 75%)}
.st-no{font:400 4.4cqw/1 var(--varsity);opacity:.85}
.st-name{font:600 8cqw/.95 var(--hand);margin-bottom:1cqw}
.st-line{font:600 5.7cqw/1.02 var(--hand)}
.st-line b{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.hc-foot{margin:8px 0 10px;font:600 9px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.hc-actions{display:flex;justify-content:space-between;gap:8px;width:100%;padding-top:10px;border-top:1px solid var(--line)}
.hc-actions button{min-height:40px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:transparent;font:800 10px var(--body);font-stretch:125%;letter-spacing:.06em;text-transform:uppercase}
.hc-worn{background:var(--ink)!important;color:var(--paper)}
.hc-actions button:hover{background:var(--blue)!important;border-color:var(--blue);color:#fff}

/* ── The promise: letter-flip pillars ── */
.promise{background:var(--ink);color:var(--paper)}
.promise .logo{color:var(--paper)}
.pillars{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.pillar-list{display:flex;flex-direction:column;justify-content:space-between;gap:10px;counter-reset:p}
.pillar-list li{display:flex;align-items:flex-start;gap:16px;counter-increment:p}
.pillar-list li::before{content:counter(p,decimal-leading-zero);flex:0 0 auto;margin-top:.5em;font:400 14px var(--varsity);color:var(--yellow)}
.pillar{display:block;padding:0;border:0;background:none;text-align:left;font:900 clamp(26px,3vw,46px)/1.06 var(--body);font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:inherit}
.word{display:inline-block;white-space:nowrap}
.ch{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.ch-a,.ch-b{display:inline-block;transition:transform .32s cubic-bezier(.25,.46,.45,.94)}
.ch-a{opacity:.22}
.ch-b{position:absolute;left:0;top:0;transform:translateY(110%);color:var(--paper)}
.pillar.active .ch-a{transform:translateY(-110%)}
.pillar.active .ch-b{transform:translateY(0)}
.pillar-photos{position:relative;min-height:clamp(360px,34vw,560px);border:2px solid var(--paper);border-radius:6px;overflow:hidden;background:#222}
.pillar-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s,transform .9s}
.pillar-photos img.on{opacity:1;transform:none}


/* ── Lookbook: taped zine spread ── */
.zine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(240px,25vw,400px);grid-auto-flow:dense;gap:clamp(12px,1.6vw,22px)}
.zine-item{position:relative;padding:8px;border:0;background:#fff;box-shadow:0 10px 24px #15151522;transition:transform .25s,box-shadow .25s}
.zine-item img{width:100%;height:100%;object-fit:cover}
.zine-item.wide{grid-column:span 2}
.zine-item:nth-child(3n+1){transform:rotate(-1.4deg)}
.zine-item:nth-child(3n+2){transform:rotate(1.1deg)}
.zine-item:nth-child(4n)::before{content:"";position:absolute;z-index:1;top:-10px;left:18%;width:70px;height:22px;transform:rotate(-6deg);background:#e9e4c9cc}
.zine-item:hover{transform:rotate(0) translateY(-4px);box-shadow:0 18px 34px #15151533;z-index:2}

.team{margin-top:14px;font-size:12px;color:var(--muted)}

/* ── Real star tag (front / back from the deck) ── */
.tag-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:clamp(48px,6vw,88px)}
.tag-copy p{max-width:480px;margin-top:16px;font-size:clamp(15px,1.2vw,17px)}
.tag-copy p.hand{font-size:clamp(22px,2vw,28px);margin-top:18px}
.real-tag{justify-self:center;width:min(100%,440px);aspect-ratio:1;padding:0;border:0;background:none;perspective:1400px}
.rt-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1);animation:bob 5s ease-in-out infinite}
.real-tag.flipped .rt-inner{transform:rotateY(180deg)}
.rt-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 16px 22px #15151538)}
.rt-back{transform:rotateY(180deg)}
.real-tag:hover .rt-face{filter:drop-shadow(0 22px 28px #15151545)}
@keyframes bob{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -8px;rotate:2deg}}
.sec-head.sub{margin-bottom:22px}
.sec-head.sub .logo{font-size:clamp(30px,3.4vw,48px)}

/* ── Brand ── */
.brand{background:var(--blue);color:#fff}
.brand .logo{color:#fff}
.mission{font:600 clamp(24px,2.4vw,34px)/1.1 var(--hand)!important;color:var(--yellow)!important;max-width:520px!important}
.whw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px)}
.whw article{border-top:2px solid #fff;padding-top:14px}
.whw h3{font:900 clamp(26px,2.6vw,40px)/1 var(--body);font-stretch:125%;text-transform:uppercase;margin-bottom:10px}
.whw p{opacity:.9}
.stats{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stats li{background:#fff;color:var(--ink);border-radius:6px;padding:18px 18px 20px}
.stats b{display:block;font:900 clamp(26px,2.6vw,40px)/1 var(--body);font-stretch:125%;color:var(--blue)}
.stats span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted)}

/* Banner marquee */
.banner{overflow:hidden;background:var(--ink);padding:clamp(18px,2.4vw,30px) 0;border-top:2px solid var(--ink)}
.banner-track{display:flex;gap:.6em;width:max-content;animation:marquee 30s linear infinite;font:900 clamp(30px,4.6vw,72px)/1 var(--body);font-stretch:125%;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.banner-track span:nth-child(even){color:var(--red)}
@keyframes marquee{to{transform:translateX(-50%)}}

.credits{padding:18px var(--gutter) 0;font:500 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}
footer{display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);font-size:11px}
footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer span{font:400 19px 'Bebas Neue',sans-serif;letter-spacing:.05em}

/* Lightbox (matches main site) */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(17,17,17,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.open{opacity:1;pointer-events:all}
.lb-img-wrap img{max-width:84vw;max-height:85vh;object-fit:contain;display:block}
.lb-close{position:fixed;top:24px;right:32px;background:none;border:0;font:600 10px/1 var(--body);letter-spacing:.25em;color:rgba(245,243,239,.6);min-height:44px}
.lb-close:hover,.lb-nav-btn:hover{color:var(--yellow)}
.lb-nav-btn{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;font-size:28px;color:rgba(245,243,239,.7);padding:16px 20px}
.lb-nav-btn[hidden]{display:none}
#lb-prev{left:32px}#lb-next{right:32px}
.lb-counter{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:rgba(245,243,239,.4)}
.lb-info{position:fixed;bottom:24px;right:32px}
.lb-title{font:400 13px/1 'Bebas Neue',sans-serif;letter-spacing:.14em;color:rgba(245,243,239,.5)}

/* Tablet */
@media(max-width:1100px){
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 18px;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(42%,320px);scroll-snap-align:start}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .chapter-nav{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-photo{width:min(78%,420px)}
  .pillars,.tag-intro,.whw{grid-template-columns:minmax(0,1fr)}
  .real-tag{width:min(80%,380px)}
}
/* Phone */
@media(max-width:600px){
  .signature{font-size:19px}
  .hero{padding-top:28px}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .facts div:last-child{grid-column:1/-1}
  .ctas .btn{flex:1 1 100%}
  .hero-photo{width:86%}
  .burst-blue{left:-18px}
  .sec-head{flex-direction:column;gap:6px}
  .logo{font-size:clamp(36px,11vw,52px)}
  /* cards become a swipeable row */
  .card{flex:0 0 78%;scroll-snap-align:center}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats li{display:flex;align-items:baseline;gap:12px;padding:14px 16px}
  .stats span{margin-top:0}
  .pillar{font-size:clamp(24px,7.4vw,34px)}
  .pillar-list{gap:14px}
  .pillar-photos{min-height:0;aspect-ratio:4/5;order:-1}
  .pillars{gap:22px}
  .zine{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:56vw}
  footer{flex-wrap:wrap;gap:0 16px}
  #lb-prev{left:4px}#lb-next{right:4px}.lb-img-wrap img{max-width:92vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-inner,.ch-a,.ch-b{transition:none}
  .card.flipped .star-tag{animation:none}
  .burst-blue,.banner-track,.rt-inner{animation:none}
  .rt-inner{transition:none}
}
@media(max-width:600px){.hc-actions button{font-size:11px;min-height:44px}.hc-foot{font-size:10px}}