/* The Rack */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}
/* Unit 05 — the discount clothing store.
   Image-first. Photography carries the room; code is the frame, the hierarchy
   and the things you can touch. No illustrated retail objects. */

.rack{
  --paper:#FBFAF7;
  --ink:#15130F;
  --ink-2:#5B564D;
  --ink-3:#8B857A;
  --rule:#DDD8CE;
  --accent:#1B4FA8;
  --sale:#C8202B;
  --ease:cubic-bezier(.22,1,.36,1);
}

body.rack{background:var(--paper);color:var(--ink)}

/* ---------- placeholders (delete once stills land) ---------- */
.shot{position:relative;display:block;width:100%;background:#E6E2D9;overflow:hidden}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot__ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;
  background:repeating-linear-gradient(45deg,#E6E2D9 0 14px,#DFDACF 14px 28px)}
.shot__ph b{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2)}
.shot__ph span{font-size:.6rem;color:var(--ink-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- storefront: the approach from the hallway ---------- */
.approach{position:relative;height:78vh;min-height:460px;max-height:760px}
.approach .shot{height:100%}
.approach__band{position:absolute;left:0;right:0;bottom:0;
  padding:80px 20px 24px;
  background:linear-gradient(180deg,transparent,rgba(8,8,7,.86) 60%)}
.approach__eyebrow{margin:0;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.approach__name{margin:10px 0 0;color:#fff;font-weight:600;line-height:.96;
  font-size:clamp(2.3rem,11vw,5rem);letter-spacing:-.025em}
.approach__enter{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:11px 20px;border:1px solid rgba(255,255,255,.42);
  color:#fff;text-decoration:none;font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;transition:background 200ms var(--ease),color 200ms var(--ease)}
.approach__enter:hover,.approach__enter:focus-visible{background:#fff;color:var(--ink)}
.approach__enter svg{width:13px;height:13px}

/* ---------- hero ---------- */
.hero{position:relative;height:60vh;min-height:380px;max-height:620px}
.hero .shot{height:100%}
.hero__band{position:absolute;left:0;right:0;bottom:0;padding:64px 20px 26px;
  background:linear-gradient(180deg,transparent,rgba(10,9,7,.82) 62%)}
.hero__eyebrow{margin:0;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.68)}
.hero__name{margin:8px 0 0;color:#fff;font-weight:600;line-height:1.02;
  font-size:clamp(1.1rem,4.4vw,1.7rem);letter-spacing:.01em}

.lede{max-width:640px;margin:0;padding:26px 20px 0;font-size:1rem;
  line-height:1.6;color:var(--ink-2)}

/* ---------- section rhythm ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.block{padding:46px 0 0}
.block--pause{padding-top:64px}
.label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.label h2{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase}
.label span{font-size:.72rem;color:var(--ink-3)}

/* ---------- abundance strip ---------- */
.strip{display:flex;gap:14px;overflow-x:auto;padding:0 20px 6px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 -20px;scroll-padding-left:20px}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-thumb{background:var(--rule)}
.strip .cell{flex:0 0 min(84vw,340px);scroll-snap-align:start}
.strip::after{content:"";flex:0 0 6px}
@media (min-width:760px){.strip .cell{flex:0 0 300px}}
.cell .shot{aspect-ratio:4/5}
.cell__meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:10px 2px 0;border-top:1px solid var(--rule);margin-top:0}
.cell__meta b{font-size:.86rem;font-weight:600;white-space:nowrap}
.cell__meta span{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.cell__meta .now{color:var(--sale);font-weight:600;margin-left:6px}

/* ---------- two-up detail ---------- */
.pair{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.pair .shot{aspect-ratio:1/1}
.pair figcaption{padding-top:9px;font-size:.72rem;color:var(--ink-3)}

/* ---------- fitting rooms: reserved interactive zone ---------- */
.rooms{border:1px solid var(--rule);background:#fff}
.rooms__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:16px 18px;border-bottom:1px solid var(--rule)}
.rooms__head h2{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase}
.rooms__head span{font-size:.72rem;color:var(--ink-3)}
.rooms__stage{position:relative}
.rooms__stage .shot{aspect-ratio:4/5}
@media (min-width:760px){.rooms__stage .shot{aspect-ratio:16/9}}
.rooms__inside{position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--ease)}
.rooms__inside.is-on{opacity:1}
.rooms__inside .shot{height:100%}
.rooms__pick{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule)}
.rooms__pick button{appearance:none;background:#fff;border:0;
  border-right:1px solid var(--rule);padding:16px 6px 14px;cursor:pointer;
  font:inherit;color:var(--ink);transition:background 180ms var(--ease)}
.rooms__pick button:last-child{border-right:0}
.rooms__pick button:hover{background:#F4F1EA}
.rooms__pick button[aria-pressed="true"]{background:var(--accent);color:#fff}
.rooms__pick b{display:block;font-size:1rem;font-weight:600;line-height:1}
.rooms__pick small{display:block;margin-top:5px;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}
.rooms__say{padding:16px 18px;border-top:1px solid var(--rule);
  font-size:.86rem;color:var(--ink-2);min-height:3.4em}

/* ---------- desk ---------- */
.desk{display:grid;gap:0;border:1px solid var(--rule);background:#fff}
@media (min-width:760px){.desk{grid-template-columns:1.15fr 1fr}}
.desk .shot{aspect-ratio:4/5}
@media (min-width:760px){.desk .shot{height:100%;aspect-ratio:auto;min-height:340px}}
.desk__say{padding:26px 22px}
.desk__say b{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.desk__say p{margin:0 0 12px;font-size:1rem;line-height:1.55}
.desk__say p:last-child{margin:0}

.fine{padding:44px 20px 70px;text-align:center;font-size:.74rem;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}