/* ============================================================
   OS & UW — warm editorial boutique
   ============================================================ */
:root{
  /* warm neutrals, tinted toward the brand's oatmeal hue (~85) */
  --paper:      oklch(0.958 0.012 84);
  --paper-2:    oklch(0.930 0.015 82);
  --paper-3:    oklch(0.892 0.018 80);
  --ink:        oklch(0.245 0.014 66);
  --ink-2:      oklch(0.415 0.016 68);
  --line:       oklch(0.845 0.016 82);
  --accent:     oklch(0.640 0.118 58);   /* burnt ochre, used sparingly */
  --accent-ink: oklch(0.400 0.110 55);   /* darkened accent — meets 4.5:1 on paper, for accent-colored TEXT */
  --error:      oklch(0.420 0.140 30);   /* deep brick red, warm-tinted, 4.5:1+ on paper */
  --char:       oklch(0.230 0.012 64);
  /* dark band */
  --dark:       oklch(0.238 0.014 70);
  --dark-2:     oklch(0.300 0.014 72);
  --cream:      oklch(0.946 0.014 84);

  /* the brand's hand-lettered voice, used for all display type */
  --ff-display: "Shantell Sans", "Comic Sans MS", cursive;
  --ff-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-hand:    "Shantell Sans", "Comic Sans MS", cursive;

  --space-2xs: .375rem;
  --space-xs:  .625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;

  --edge: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.04;letter-spacing:-.005em}
em{font-style:italic}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- shared ---------- */
.eyebrow{font-family:var(--ff-hand);font-size:1.15rem;color:var(--accent-ink);letter-spacing:.01em}
.section-tag{
  font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-2);
}
.hand{font-family:var(--ff-hand);font-weight:600;font-style:italic;letter-spacing:0;color:var(--accent)}

.btn{
  --pad:.85em 1.35em;
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-body);font-weight:600;font-size:.98rem;
  padding:var(--pad);border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn--sm{font-size:.85rem;padding:.55em 1.05em}
.btn--block{width:100%;justify-content:center;padding:1em}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--light{color:var(--cream);border-color:oklch(0.5 0.02 74)}
.btn--light:hover{border-color:var(--cream);background:transparent;transform:translateY(-2px)}
.btn__bag{opacity:.6;font-weight:500}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* eye blink */
.guy-eye{transform-box:fill-box;transform-origin:center;animation:blink 5.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion: reduce){.guy-eye{animation:none}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);
  padding:clamp(.75rem,1.5vw,1.15rem) var(--edge);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.solid{background:color-mix(in oklch, var(--paper) 88%, transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-hand);font-weight:700;font-size:1.4rem;letter-spacing:.01em}
.nav__mark{width:34px;height:30px;color:var(--ink)}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2.2rem);font-weight:500;font-size:.95rem}
.nav__links a{position:relative;padding:.2em 0;color:var(--ink-2);transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:.75rem}
.nav__menu{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav__menu span{width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(7rem,14vh,10rem) var(--edge) var(--space-2xl);max-width:var(--maxw);margin-inline:auto}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero__title{font-size:clamp(2.9rem,8vw,6.6rem);font-weight:700;margin:.24em 0 .38em;letter-spacing:-.01em;line-height:1.02}
.hero__title span{display:block}
.hero__title span:last-child{color:var(--ink-2)}
.hero__sub{font-size:clamp(1.05rem,1vw + .8rem,1.3rem);color:var(--ink-2);max-width:34ch;line-height:1.5}
.hero__sub em{color:var(--ink);font-family:var(--ff-hand);font-style:italic;font-weight:600}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:var(--space-lg) 0 var(--space-lg)}
.hero__facts{display:flex;gap:clamp(1.25rem,3vw,2.75rem)}
.hero__facts dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.25em}
.hero__facts dd{font-family:var(--ff-display);font-weight:600;font-size:1.15rem}

.hero__media{position:relative}
.reel{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--paper-3);
  box-shadow:0 30px 60px -30px oklch(0.4 0.03 70 / .45);aspect-ratio:9/13;max-width:400px;margin-inline:auto}
.reel__vid,.reel__img{width:100%;height:100%;object-fit:cover}
.reel__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;
  font-size:.82rem;color:var(--cream);
  text-shadow:0 1px 3px oklch(0.15 0.02 70 / .6);
  background:linear-gradient(to top, oklch(0.16 0.02 70 / .92) 0%, oklch(0.16 0.02 70 / .78) 100%)}
.reel__cap span{font-family:var(--ff-hand);font-weight:600}
.hero__guy{position:absolute;width:88px;bottom:-14px;left:-8px;color:var(--char);
  filter:drop-shadow(0 8px 12px oklch(0.4 0.02 70 /.25))}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{border-block:1.5px solid var(--ink);background:var(--paper-2);padding:.9rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent)}
.marquee__row{display:flex;width:max-content;gap:0;animation:scroll 34s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__track{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
.marquee__track span{font-family:var(--ff-hand);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.4rem);white-space:nowrap;font-style:italic}
.marquee__track .dot{color:var(--accent);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee__row{animation:none}}

/* ============================================================
   STORY
   ============================================================ */
.story{max-width:var(--maxw);margin-inline:auto;padding:var(--space-3xl) var(--edge)}
.story__inner{max-width:1000px}
.story__lead{font-size:clamp(2rem,5.2vw,4.3rem);font-weight:700;margin:var(--space-md) 0 var(--space-xl);max-width:16ch}
.story__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);max-width:900px;margin-left:auto}
.story__cols p{font-size:1.15rem;color:var(--ink-2);max-width:42ch}
.story__cols strong{color:var(--ink);font-weight:600}

/* ============================================================
   UNIVERSE
   ============================================================ */
.universe{background:var(--ink);color:var(--cream);padding:var(--space-2xl) var(--edge) var(--space-3xl)}
.universe__head{max-width:var(--maxw);margin:0 auto var(--space-xl)}
.universe__head h2{font-size:clamp(2rem,5vw,4rem);max-width:16ch;margin-top:var(--space-sm)}
.universe__head .hand{color:oklch(0.8 0.11 70)}
.universe__head .section-tag{color:oklch(0.68 0.02 80)}
.universe__grid{max-width:var(--maxw);margin-inline:auto;list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:oklch(0.36 0.014 72);
  border:1px solid oklch(0.36 0.014 72)}
.mood{background:var(--ink);padding:clamp(1.5rem,2.5vw,2.4rem) clamp(1.25rem,2vw,1.8rem);
  min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;gap:.15rem;
  transition:background .35s var(--ease)}
.mood:hover{background:var(--dark-2)}
.mood b{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.mood span:last-child{color:oklch(0.72 0.02 80);font-size:1rem}

/* varied mosaic rhythm — feature cells carry a doodle vignette */
.mood__art{width:58px;height:auto;color:var(--cream);opacity:.94;margin-bottom:.9rem}
.mood--feature{grid-column:span 2;min-height:260px}
.mood--feature .mood__art{width:74px}

/* quiet full-width interlude */
.mood--divider{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:center;
  gap:.55rem;min-height:120px;text-align:center}
.mood--divider b{font-size:clamp(1.35rem,2.3vw,1.85rem)}
.mood--divider span:last-child{font-size:1.05rem}

/* full-width closing banner — the character shows up in its own universe */
.mood--banner{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;
  gap:1.75rem;min-height:230px}
.mood--banner:hover{background:var(--dark-2)}
.mood__icons{display:flex;align-items:center;gap:1.4rem}
.mood__icons .mood__art{margin-bottom:0}
.mood__art--guy{width:56px}
.mood__text{display:flex;flex-direction:column;gap:.15rem;text-align:left}
.mood--banner b{font-size:clamp(2rem,4vw,2.75rem)}
.mood--banner span:last-child{font-size:1.15rem}

/* ============================================================
   HOODIE / SHOP
   ============================================================ */
.hoodie{max-width:var(--maxw);margin-inline:auto;padding:var(--space-3xl) var(--edge);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4.5rem);align-items:center}
.hoodie__media{position:relative}
.hoodie__media img{width:100%;border-radius:16px;background:var(--paper-2);transition:opacity .35s var(--ease)}
.soon-overlay{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;text-align:center;
  background:color-mix(in oklch, var(--soon-tint, var(--paper-3)) 78%, transparent);
  backdrop-filter:blur(2px)}
.soon-overlay[hidden]{display:none}
.soon-overlay__tag{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--soon-ink,var(--ink))}
.soon-overlay__link{font-size:.95rem;font-weight:600;color:var(--soon-ink,var(--ink));
  border-bottom:1.5px solid currentColor;padding-bottom:2px}
.cw-status{font-family:var(--ff-body);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.2em .6em;border-radius:999px;margin-left:.4em;vertical-align:middle;
  background:color-mix(in oklch,var(--accent) 18%, var(--paper));color:var(--accent-ink)}
.cw-status.is-soon{background:var(--paper-3);color:var(--ink-2)}
.swatch.is-soon{opacity:.55}
.swatch.is-soon::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in oklch,var(--paper) 70%,transparent) 4px 5px)}
.actions--soon .btn--block{background:var(--paper-3);color:var(--ink-2);pointer-events:none}
.hoodie__name{font-size:clamp(2.2rem,4vw,3.5rem);margin:.2em 0 .35em}
.hoodie__desc{color:var(--ink-2);font-size:1.12rem;max-width:44ch;margin-bottom:var(--space-lg)}
.price{font-family:var(--ff-display);font-weight:700;font-size:3rem;line-height:1;display:flex;align-items:flex-start;gap:.1em}
.price__cur{font-size:1.3rem;margin-top:.4em;color:var(--ink-2)}
.swatch__label{margin:var(--space-md) 0 .7rem;font-size:.92rem;color:var(--ink-2)}
.swatch__label strong{color:var(--ink);font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:.6rem}
.swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;position:relative;
  border:1.5px solid var(--line);padding:0;background:none;transition:transform .25s var(--ease)}
.swatch i{position:absolute;inset:4px;border-radius:50%;display:block}
.swatch::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ink);
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s var(--ease)}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-selected="true"]::after{opacity:1;transform:scale(1)}
.hoodie__actions{display:flex;gap:.7rem;align-items:center;margin:var(--space-lg) 0 var(--space-md);flex-wrap:wrap}
.hoodie__actions .btn--block{flex:1;min-width:180px}
.spec{list-style:none;padding:var(--space-md) 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem}
.spec li{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;color:var(--ink-2)}
.spec li span{color:var(--ink);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.hoodie__link{margin-top:var(--space-md);font-size:.95rem;color:var(--ink-2)}
.hoodie__link a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--line);padding-bottom:1px;transition:border-color .25s}
.hoodie__link a:hover{border-color:var(--ink)}

/* ============================================================
   SPECIAL EDITIONS (Nurse & Teacher)
   ============================================================ */
.special{max-width:var(--maxw);margin-inline:auto;padding:var(--space-3xl) var(--edge);
  background:var(--paper-2);border-radius:28px}
.special__head{max-width:760px;margin-bottom:var(--space-xl)}
.special__head h2{font-size:clamp(2rem,5vw,3.6rem);margin:var(--space-sm) 0}
.special__note{color:var(--ink-2);font-size:1.12rem;max-width:52ch}

.special__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
.special__card{margin:0;background:var(--paper);border-radius:20px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column}
.special__media{position:relative}
.special__media img{width:100%;display:block;transition:opacity .35s var(--ease)}

.special__info{padding:1.4rem clamp(1.2rem,3vw,1.8rem) 1.6rem;display:flex;flex-direction:column;gap:.4rem}
.special__badge{font-family:var(--ff-hand);font-weight:700;font-size:1.4rem}
.special__price{font-family:var(--ff-display);font-weight:700;font-size:1.6rem;display:flex;gap:.1em}
.special__desc{color:var(--ink-2);font-size:.98rem;max-width:42ch;margin-bottom:.4rem}
.special__swatches{margin:.2rem 0 .3rem}
.special__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}

/* ============================================================
   BUILD YOUR OWN (customizer)
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.build{max-width:var(--maxw);margin-inline:auto;padding:var(--space-3xl) var(--edge)}
.build__head{max-width:760px;margin-bottom:var(--space-xl)}
.build__head h2{font-size:clamp(2rem,5vw,4rem);margin:var(--space-sm) 0}
.build__note{color:var(--ink-2);font-size:1.12rem;max-width:52ch}
.build__stage{display:grid;grid-template-columns:1.86fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}

/* ---- five-panel gallery ---- */
.build__gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,auto);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  position:sticky;top:calc(var(--nav-h, 76px) + 1.25rem);
  --hoodie-fabric:#e6e0d3;--hoodie-highlight:#f3efe6;--hoodie-shadow:#c9c0ac;
  --hoodie-ribbing:#d9d0bd;--hoodie-drawstring:#b8ac93;--hoodie-stitch:#cfc5b0;
  --embroidery-color:#000000}
.build__panel{margin:0;background:radial-gradient(120% 100% at 50% 30%, oklch(0.955 0.008 84) 0%, oklch(0.918 0.014 82) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.9rem}
.build__panelMedia{width:100%;position:relative}
.build__panel svg{width:100%;height:auto;filter:drop-shadow(0 14px 22px oklch(0.45 0.03 70 / .22))}
.build__panel img{width:100%;height:auto;display:block;border-radius:4px}
.build__panel img[hidden]{display:none}
.build__panel figcaption{margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.build__panel--front{grid-column:1 / 3;grid-row:1 / 3}
.build__panel--close1{grid-column:3 / 5;grid-row:1}
.build__panel--back{grid-column:3 / 4;grid-row:2}
.build__panel--close2{grid-column:4 / 5;grid-row:2}
.build__panel--label{grid-column:1 / 5;grid-row:3;flex-direction:row;gap:.75rem}
.build__panel--label svg{width:180px}
/* colour on the hoodie/embroidery symbols is set as inline style="" in the SVG markup
   itself, not here — CSS descendant selectors don't reliably match content rendered
   through a <use> instance boundary, inline var() references resolve by inheritance instead */
.build__gallery.is-pop .build__panel{animation:panelPop .35s var(--ease)}
@keyframes panelPop{0%{opacity:.55;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.build__gallery.is-pop .build__panel{animation:none}}

.build__combo{margin-top:1rem;font-family:var(--ff-hand);font-size:1.15rem;color:var(--ink-2);text-align:center}
.build__combo strong{color:var(--ink);font-weight:700}
.build__status{margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--error);text-align:center;min-height:1.2em}

/* ---- controls ---- */
.build__group{margin-bottom:var(--space-lg)}
.build__label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--ink-2);margin-bottom:.85rem}
.build__step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:700;font-family:var(--ff-body)}

/* labelled swatch buttons — colour chip + written name, never a bare circle */
.build__swatches{display:flex;flex-wrap:wrap;gap:.6rem}
/* plain ring swatch — matches the colourway circles in The Hoodie shop section */
.build__swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;position:relative;
  border:1.5px solid var(--line);padding:0;background:none;transition:transform .25s var(--ease)}
.build__swatch i{position:absolute;inset:4px;border-radius:50%;display:block}
.build__swatch::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ink);
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s var(--ease)}
.build__swatch:hover{transform:translateY(-2px)}
.build__swatch[aria-pressed="true"]::after{opacity:1;transform:scale(1)}
.build__swatch[disabled]{opacity:.35;cursor:not-allowed}
.build__swatch[disabled]:hover{transform:none}

/* legacy labelled pill (still used by Special Editions' Teacher colourway picker) */
.build__sw{display:inline-flex;align-items:center;gap:.5rem;padding:.4em .85em .4em .4em;border-radius:999px;
  cursor:pointer;border:1.5px solid var(--line);background:var(--paper);font-family:var(--ff-body);
  font-size:.85rem;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.build__sw i{width:22px;height:22px;border-radius:50%;display:block;border:1px solid oklch(0 0 0 / .12)}
.build__sw:hover{transform:translateY(-2px)}
.build__sw[aria-pressed="true"]{border-color:var(--ink);background:var(--paper-2);font-weight:600}
.build__sw[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.build__sw[disabled]:hover{transform:none}

.build__mascots{display:flex;gap:.65rem;flex-wrap:wrap}
.build__ms{width:64px;border-radius:14px;cursor:pointer;padding:.5rem .3rem .4rem;position:relative;
  border:1.5px solid var(--line);background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--ink);transition:transform .2s var(--ease),border-color .2s}
.build__ms svg{width:34px;height:34px}
.build__ms span{font-size:.68rem;color:var(--ink-2);white-space:nowrap}
.build__ms:hover{transform:translateY(-2px)}
.build__ms[aria-pressed="true"]{border-color:var(--ink);background:var(--paper-2)}
.build__ms[aria-pressed="true"] span{color:var(--ink);font-weight:600}

.build__presets{display:flex;flex-wrap:wrap;gap:.5rem}
.build__pre{display:inline-flex;align-items:center;gap:.5rem;padding:.35em .85em .35em .35em;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper);cursor:pointer;font-family:var(--ff-body);
  font-size:.8rem;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.build__pre:hover{transform:translateY(-2px);border-color:var(--ink)}
.build__pre i{width:20px;height:20px;border-radius:50%;display:block;border:1px solid oklch(0 0 0 / .12)}

.build__sizes{display:flex;flex-wrap:wrap;gap:.5rem}
.build__size{min-width:44px;padding:.55em .3em;border-radius:8px;border:1.5px solid var(--line);
  background:var(--paper);cursor:pointer;font-family:var(--ff-body);font-size:.85rem;font-weight:600;color:var(--ink);
  transition:border-color .2s,background .2s}
.build__size[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.build__error{margin-top:.6rem;font-size:.85rem;font-weight:600;color:var(--error)}

.build__qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.build__qtybtn{width:38px;height:38px;border:none;background:var(--paper);cursor:pointer;font-size:1.1rem;color:var(--ink);
  line-height:1;transition:background .2s}
.build__qtybtn:hover{background:var(--paper-2)}
.build__qtyval{min-width:2.5em;text-align:center;font-weight:700;font-family:var(--ff-body)}

.build__summary{font-family:var(--ff-body);font-size:.92rem;line-height:1.6;color:var(--ink);
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--paper-2)}

.build__price{font-family:var(--ff-display);font-weight:700;font-size:2.6rem;line-height:1;display:flex;align-items:flex-start;gap:.12em;margin:var(--space-md) 0 var(--space-md)}
.build__mto{font-family:var(--ff-body);font-size:.9rem;font-weight:500;color:var(--ink-2);align-self:flex-end;margin-bottom:.35em}
.build__actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.build__actions .btn--block{flex:1;min-width:200px}

.build__share{display:block;margin:.85rem auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--ff-body);font-size:.85rem;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px}
.build__share:hover{color:var(--ink)}

/* ============================================================
   LOOKBOOK (dark)
   ============================================================ */
.look{background:var(--dark);color:var(--cream);padding:var(--space-3xl) var(--edge)}
.look__head{max-width:var(--maxw);margin:0 auto var(--space-xl);display:grid;gap:var(--space-sm)}
.look__head h2{font-size:clamp(2.4rem,6vw,5rem)}
.look__head .hand{color:oklch(0.82 0.1 68)}
.look__note{color:oklch(0.74 0.02 80);max-width:40ch;font-size:1.1rem}
.look__gallery{max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.5vw,1.4rem)}
.look__fig{margin:0;overflow:hidden;border-radius:14px;background:var(--dark-2)}
.look__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.look__fig:hover img{transform:scale(1.04)}
.look__fig--tall{grid-column:span 6;grid-row:span 2;aspect-ratio:4/5}
.look__fig:not(.look__fig--tall){grid-column:span 6;aspect-ratio:16/10}
.look__cta{margin:var(--space-xl) auto 0;display:inline-flex}
.look .look__cta{margin-top:var(--space-xl)}

/* ============================================================
   DROP LIST
   ============================================================ */
.drop{background:var(--paper-2);padding:var(--space-3xl) var(--edge);border-top:1px solid var(--line)}
.drop__inner{max-width:640px;margin-inline:auto;text-align:center}
.drop__guy{width:76px;height:66px;color:var(--ink);margin:0 auto var(--space-md)}
.drop h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.drop p{color:var(--ink-2);max-width:42ch;margin:var(--space-sm) auto var(--space-lg)}
.drop__form{display:flex;gap:.6rem;max-width:460px;margin-inline:auto}
.drop__form input{flex:1;padding:1em 1.25em;border-radius:999px;border:1.5px solid var(--line);
  background:var(--paper);font-family:var(--ff-body);font-size:1rem;color:var(--ink);transition:border-color .25s}
.drop__form input:focus{outline:none;border-color:var(--ink)}
.drop__form input::placeholder{color:oklch(0.62 0.02 78)}
.drop__form input.is-invalid{border-color:var(--error)}
.drop__error{margin-top:.85rem;font-size:.9rem;font-weight:600;color:var(--error)}
.drop__ok{margin-top:var(--space-md);font-family:var(--ff-hand);font-weight:600;color:var(--accent-ink);font-size:1.15rem}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--cream);padding:var(--space-2xl) var(--edge) var(--space-lg)}
.foot__top{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--space-lg);
  justify-content:space-between;align-items:flex-start;padding-bottom:var(--space-xl);
  border-bottom:1px solid oklch(0.36 0.014 72)}
.foot__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-hand);font-weight:700;font-size:1.6rem}
.foot__mark{width:38px;height:33px;color:var(--cream)}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.95rem;color:oklch(0.74 0.02 80)}
.foot__nav a:hover{color:var(--cream)}
.foot__social{display:flex;gap:1.25rem;font-size:.95rem;color:oklch(0.74 0.02 80)}
.foot__social a:hover{color:var(--cream)}
.foot__base{max-width:var(--maxw);margin:var(--space-md) auto 0;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:.5rem;font-size:.82rem;color:oklch(0.64 0.02 78)}
.foot__tag{font-family:var(--ff-hand);font-style:italic}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .hero__media{order:-1;max-width:360px}
  .hoodie{grid-template-columns:1fr;gap:var(--space-xl)}
  .special__grid{grid-template-columns:1fr}
  .build__stage{grid-template-columns:1fr;gap:var(--space-xl)}
  .build__gallery{order:-1;max-width:520px;margin-inline:auto;width:100%;position:static;top:auto}
  .universe__grid{grid-template-columns:repeat(2,1fr)}
  .look__fig--tall{grid-column:span 12;grid-row:auto;aspect-ratio:16/10}
  .look__fig:not(.look__fig--tall){grid-column:span 6}
}
@media (max-width:640px){
  .build__gallery{grid-template-columns:1fr 1fr}
  .build__panel--front{grid-column:1 / 3;grid-row:1}
  .build__panel--close1{grid-column:1 / 2;grid-row:2}
  .build__panel--back{grid-column:2 / 3;grid-row:2}
  .build__panel--close2{grid-column:1 / 2;grid-row:3}
  .build__panel--label{grid-column:2 / 3;grid-row:3;flex-direction:column}
  .build__panel--label svg{width:100%}
  .nav__links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-top:1px solid var(--line);
    padding:var(--space-sm) var(--edge) var(--space-lg);
    box-shadow:0 16px 28px -18px oklch(0.4 0.03 70 / .35);
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.08rem}
  .nav__links a:last-child{border-bottom:none}
  .nav__menu{display:flex}
  .nav__menu[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav__menu[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .story__cols{grid-template-columns:1fr;gap:var(--space-md)}
  .hero__facts{gap:1.5rem}
  .universe__grid{grid-template-columns:1fr 1fr;gap:1px}
  .mood{min-height:160px}
  .mood--feature{min-height:220px}
  .mood--banner{flex-direction:column;text-align:center;gap:1rem;min-height:240px}
  .mood--banner .mood__text{text-align:center;align-items:center}
  .mood--divider{flex-direction:column;gap:.2rem}
  .look__fig:not(.look__fig--tall){grid-column:span 12}
  .drop__form{flex-direction:column}
  .foot__top{flex-direction:column;gap:var(--space-md)}
}