/* ============================================================
   ReWear — Northwestern's Shared Closet
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy:      #1A237E;
  --navy-deep: #141B5E;
  --cream:     #FCFEF1;
  --sky:       #D6EBFF;
  --butter:    #FFF3C2;
  --slate:     #384168;
  --link:      #138EFF;
  --ink:       #0E1330;

  --bubble-them: #DCE3F5;
  --bubble-me:   #5B8DEF;

  /* Canva design uses Garet (geometric sans) + Gilker (serif).
     Neither is licensed for web embedding, so these are the closest free
     Google Fonts stand-ins. If you buy web licences for the real ones,
     drop the .woff2 files in assets/fonts/ and put "Garet" / "Gilker"
     first in these stacks — nothing else needs to change. */
  --font-mark:  "Outfit", "Helvetica Neue", Arial, sans-serif;     /* Garet — REWEAR wordmark + UI */
  --font-serif: "Newsreader", "Times New Roman", serif;            /* Gilker — display headings */
  --font-sans:  "Outfit", "Helvetica Neue", Arial, sans-serif;     /* Garet — body */
  --font-mono:  "Courier Prime", "Courier New", monospace;         /* receipt */

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--cream); color:var(--navy); padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ---------- Type ---------- */
.display{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(2.4rem, 6.2vw, 5.2rem);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.display--dark{ color:var(--ink); }

.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  line-height:1.5;
  max-width:46ch;
  margin:0;
}

.src{
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--link);
  margin:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mark);
  font-weight:700;
  border:0; cursor:pointer;
  border-radius:999px;
  padding:.72em 1.5em;
  line-height:1.1;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn span{ transition:transform .3s var(--ease); }
.btn:hover span{ transform:translateX(4px); }
.btn:focus-visible{ outline:3px solid var(--link); outline-offset:3px; }

.btn--pill{
  background:transparent; color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(252,254,241,.55);
  font-size:clamp(.85rem,1.1vw,1rem);
}
.btn--pill:hover{ background:var(--cream); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--cream); }

.btn--solid{ background:var(--cream); color:var(--navy); font-size:clamp(1rem,1.2vw,1.1rem); }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25); }

.btn--cream{ background:var(--butter); color:var(--ink); font-size:clamp(1rem,1.2vw,1.15rem); }
.btn--cream:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:clamp(10px,1.4vw,18px) var(--gut);
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease);
}
.nav--stuck{
  background:rgba(26,35,126,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(252,254,241,.14);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.nav__year{
  font-size:clamp(.8rem,1vw,.95rem);
  letter-spacing:-.02em;
  color:var(--cream);
  opacity:.9;
}
.nav__mark{
  font-family:var(--font-mark);
  font-weight:800;
  letter-spacing:-.04em;
  font-size:1.1rem;
  color:var(--cream);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.nav--stuck .nav__mark{ opacity:1; transform:none; }
@media (max-width:600px){ .nav__mark{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(70px,10vh,116px) var(--gut) clamp(72px,10vw,140px);
}

/* REWEAR is set in SVG so it sits flush to the container edges at every width */
.wordmark{
  margin:0 0 clamp(14px,1.8vw,26px);
  line-height:0;
}
.wordmark svg{
  display:block; width:100%; height:auto; overflow:visible;
}
.wordmark text{
  font-family:var(--font-mark);
  font-weight:800;
  font-size:200px;
  fill:var(--cream);
}
.wordmark{
  opacity:0; transform:translateY(24px);
  animation:markIn 1s .1s var(--ease) forwards;
}
@keyframes markIn{ to{ transform:none; opacity:1; } }

.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,22px);
}
.hero__fig{ margin:0; border-radius:var(--r); overflow:hidden; }
.hero__fig img{
  width:100%; height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.4s var(--ease);
}
.hero__fig.is-in img{ transform:scale(1); }

.hero__copy{
  margin-top:clamp(40px,6vw,86px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,3vw,56px);
  align-items:end;
}
.hero__copy .display{ max-width:14ch; margin:0; grid-row:1 / span 2; }
.hero__copy > :not(.display){ grid-column:2; justify-self:start; }
.hero__copy .lede{ margin-bottom:clamp(14px,2vw,22px); }

@media (max-width:820px){
  .hero__copy{ grid-template-columns:1fr; align-items:start; gap:clamp(16px,3vw,24px); }
  .hero__copy .display{ grid-row:auto; max-width:16ch; }
  .hero__copy > :not(.display){ grid-column:1; }
}
@media (max-width:640px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__fig img{ aspect-ratio:16/10; }
}

/* ---------- Section colour blocks ---------- */
.compare{ background:var(--sky); color:var(--ink); padding:clamp(64px,9vw,128px) 0; }
.how{ background:var(--butter); color:var(--ink); padding:clamp(64px,9vw,128px) 0; }
.stats{ background:var(--cream); color:var(--ink); padding:clamp(56px,8vw,110px) 0; }
.cta{ background:var(--navy); color:var(--cream); padding:clamp(80px,12vw,170px) 0; }

/* ---------- Chains ---------- */
.chain-block + .chain-block{ margin-top:clamp(56px,8vw,104px); }
.chain-block .display{ margin-bottom:clamp(26px,3.4vw,44px); }

.chain{
  list-style:none; margin:0; padding:0;
  display:grid; align-items:center;
  gap:clamp(10px,1.4vw,22px);
}
.chain--long{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.chain--short{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width:860px; }

.step{
  position:relative;
  width:100%;
  display:grid;
  isolation:isolate;
  transition:transform .5s var(--ease);
}
.step img{
  grid-area:1/1;
  width:100%; height:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:10px;
  z-index:-1;
}
.chain--short .step img{ aspect-ratio:4/5; }
.step::after{
  content:""; grid-area:1/1;
  background:linear-gradient(180deg, rgba(14,19,48,.30), rgba(14,19,48,.15) 38%, rgba(14,19,48,.66));
  border-radius:10px;
  z-index:-1;
}
.step span{
  grid-area:1/1;
  align-self:center; justify-self:center;
  padding:8px;
  text-align:center;
  font-family:var(--font-serif);
  font-weight:300;
  color:#fff;
  font-size:clamp(.95rem, 1.55vw, 1.6rem);
  line-height:1.05;
  letter-spacing:-.015em;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.5);
}
.chain--short .step span{ font-size:clamp(1.1rem, 2.1vw, 2.1rem); }
.step:hover{ transform:translateY(-5px); }

/* connector line between tiles */
.step + .step::before{
  content:"";
  position:absolute; z-index:2;
  left:calc(-1 * clamp(10px,1.4vw,22px)); top:50%;
  width:clamp(10px,1.4vw,22px); height:1.5px;
  background:var(--ink);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .45s var(--ease);
}
.step.is-in + .step::before,
.step.is-in::before{ transform:scaleX(1); }

/* Mobile: chains become a snap rail so the "long journey" still reads */
@media (max-width:760px){
  .chain{
    display:flex; align-items:center;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-block:4px;
    padding-inline:var(--gut);
    margin-inline:calc(-1 * var(--gut));
    scrollbar-width:none;
  }
  .chain::-webkit-scrollbar{ display:none; }
  .step{ scroll-snap-align:center; flex:0 0 46vw; width:46vw; }
  .chain--short .step{ flex:0 0 58vw; width:58vw; }
}

/* ---------- How it works ---------- */
.how__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
@media (max-width:860px){ .how__grid{ grid-template-columns:1fr; } }

.how__left .display{ margin-bottom:clamp(28px,3.6vw,48px); }

.chat{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px,1.3vw,16px); }
.bubble{
  width:fit-content; max-width:min(100%, 32ch);
  padding:.68em 1.15em;
  border-radius:20px;
  font-size:clamp(.95rem,1.25vw,1.12rem);
  line-height:1.35;
  position:relative;
}
.bubble--them{ background:var(--bubble-them); color:var(--ink); border-bottom-left-radius:6px; }
.bubble--me{ background:var(--bubble-me); color:#fff; margin-left:auto; border-bottom-right-radius:6px; }
@media (max-width:860px){ .bubble{ max-width:80%; } }

/* Receipt */
.receipt{
  position:relative;
  width:min(100%, 480px);
  margin-inline:auto;
  transform:rotate(1.6deg);
  filter:drop-shadow(0 16px 34px rgba(20,27,94,.16));
  transition:transform .6s var(--ease);
}
.receipt:hover{ transform:rotate(0deg); }
.receipt__paper{ width:100%; }
.receipt__tape{
  position:absolute; z-index:2;
  width:36%; top:-4%; left:50%;
  transform:translateX(-46%) rotate(-2deg);
}
.receipt__text{
  position:absolute; inset:9% 8% 6% 8%;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--font-mono);
  color:var(--ink);
  letter-spacing:.06em;
}
.receipt__title{
  margin:0 0 .8em;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(.82rem, 2vw, 1.28rem);
}
.receipt__text dl{
  margin:0; flex:1;
  display:flex; flex-direction:column; justify-content:space-between;
}
.receipt__text dl > div{
  display:flex; align-items:baseline; gap:.5em;
  padding-bottom:.5em;
  border-bottom:1.5px dashed rgba(14,19,48,.45);
  font-size:clamp(.7rem, 1.6vw, 1.04rem);
}
.receipt__text dt{ text-transform:uppercase; flex:0 0 auto; }
.receipt__text dd{ margin:0 0 0 auto; color:var(--slate); text-align:right; }
.receipt__text .is-total{ border-bottom:0; }
.receipt__text .is-total dt,
.receipt__text .is-total dd{ font-weight:700; }

/* ---------- Stats ---------- */
.stat{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);
  align-items:center;
  padding-block:clamp(36px,5.5vw,72px);
}
.stat--flip .stat__text{ order:2; }
@media (max-width:820px){
  .stat{ grid-template-columns:1fr; gap:22px; }
  .stat--flip .stat__text{ order:0; }
}

.stat__text{ display:grid; gap:clamp(12px,1.6vw,20px); align-content:center; }
.stat__num{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(3.2rem, 8.2vw, 6.6rem);
  line-height:.9;
  letter-spacing:-.03em;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.stat__num em{ font-style:normal; font-size:.6em; }
.stat__num .tilde{ font-size:.7em; }
.stat__text .display{ font-size:clamp(2rem, 4.6vw, 3.6rem); max-width:14ch; }

.stat__fig{ margin:0; border-radius:var(--r); overflow:hidden; }
.stat__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:820px){ .stat__fig img{ aspect-ratio:4/3; } }

/* ---------- CTA ---------- */
.cta__inner{ display:grid; gap:clamp(18px,2.6vw,30px); justify-items:center; text-align:center; }
.cta__inner .lede{ max-width:42ch; }

/* ---------- Footer ---------- */
.foot{
  background:var(--navy-deep);
  color:rgba(252,254,241,.7);
  font-size:.85rem;
  padding:22px 0;
}
.foot__inner{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; }
.foot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.foot a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.foot a:hover{ border-color:currentColor; }

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal, .hero__media img, .step, .receipt, .btn, .btn span{ transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .wordmark span{ animation:none; opacity:1; transform:none; }
  .hero__scroll span{ animation:none; }
  .step + .step::before{ transform:scaleX(1); }
}