/* ============================================================
   THEME — this block is the brand. Change these values and the
   whole site changes with it. Everything below is structure and
   rarely needs touching.

   Swap the two font families and the six colors and you have a
   genuinely different-looking store, not a recolored copy.
   ============================================================ */
:root {
  /* Type — heavy collegiate slab for headings, formal script for flourishes */
  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-script: "Yesteryear", "Snell Roundhand", cursive;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-tracking: 0.01em;
  --display-transform: uppercase;  /* uppercase | none */

  /* Color — straight off the Uptown Cali palette card */
  --bg: #0b0b0b;                   /* page background */
  --bg-alt: #131313;               /* alternating band background */
  --ink: #f2f2e2;                  /* off white — body text */
  --muted: #9c978a;                /* secondary text */
  --accent: #b22222;               /* red — buttons, prices, highlights */
  --accent-ink: #f2f2e2;           /* text ON an accent background */
  --green: #1b3d34;                /* forest green — flag stripes, second seat */
  --card: #151515;
  --line: #2a2a26;                 /* borders and rules */

  /* Shape — sharp corners read heritage/athletic, not soft */
  --radius: 4px;
  --radius-pill: 999px;
  --max: 1180px;
}

/* The heritage flag stripe: red / off-white / forest green.
   Used as a rule under headings and as a nav and hero accent. */
.stripes {
  height: 10px;
  background: linear-gradient(
    var(--accent) 0 3px,
    transparent 3px 3.5px,
    var(--ink) 3.5px 6.5px,
    transparent 6.5px 7px,
    var(--green) 7px 10px
  );
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* The `hidden` attribute has to beat any `display` rule set further down.
   Without this, a full-screen overlay like .lightbox (display: flex) stays
   laid out while "hidden" and silently swallows every click on the page. */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  line-height: 1.05;
  font-weight: 400;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 70px; display: flex; align-items: center; gap: 24px;
}
.brand {
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 11px;
}
/* The real UTC crest. It's a transparent PNG, so it sits on the nav without
   a white box behind it. 42px rather than the old badge's 38px — the crest
   carries an outer ring of type that needs the extra room to read. */
.brand::before {
  content: "";
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: url("images/logo.png") center / contain no-repeat;
}
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav__links a { padding: 4px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--accent); }

.cart-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: var(--radius-pill); cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.cart-btn:hover { border-color: var(--accent); }
.cart-count {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
  min-width: 20px; padding: 1px 6px; text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block; border: none; cursor: pointer; text-align: center;
  font-weight: 600; font-size: 16px; padding: 14px 30px;
  border-radius: var(--radius-pill);
  transition: transform .15s ease, opacity .15s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 8px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; display: flex; align-items: center; min-height: 78vh; overflow: hidden; }
/* The lookbook shot, darkened hard from the left so the headline stays
   readable over it, with a red wash and the ghosted UTC monogram on top.
   To change the photo, swap images/hero.jpg — nothing else needs editing.
   The gradients are listed before the image, so they sit over it. */
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 12%, color-mix(in srgb, var(--bg) 72%, transparent) 52%, color-mix(in srgb, var(--bg) 40%, transparent) 100%),
    radial-gradient(70% 70% at 22% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%),
    url("images/hero.jpg") center 38% / cover no-repeat,
    linear-gradient(170deg, var(--bg-alt), var(--bg) 72%);
}
@media (max-width: 720px) {
  /* On a phone the headline sits over the middle of the frame, so the
     photo needs a flat scrim rather than a left-to-right one. */
  .hero__bg {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 62%, transparent)),
      radial-gradient(70% 55% at 30% 28%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 66%),
      url("images/hero.jpg") center / cover no-repeat,
      linear-gradient(170deg, var(--bg-alt), var(--bg) 72%);
  }
}
/* Flag stripes pinned to the bottom of the hero. */
.hero__bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(
    var(--accent) 0 3px, transparent 3px 3.5px,
    var(--ink) 3.5px 6.5px, transparent 6.5px 7px,
    var(--green) 7px 10px
  );
}
.hero__content { position: relative; max-width: var(--max); margin: 0 auto; padding: 96px 24px; width: 100%; }
.hero__kicker {
  text-transform: uppercase; letter-spacing: .22em; font-size: 12px;
  font-weight: 700; color: var(--accent); margin-bottom: 18px;
}
.hero__title {
  font-size: clamp(44px, 10.5vw, 124px); white-space: pre-line; margin-bottom: 20px;
  text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 rgba(0,0,0,.55);
}
.hero__sub { max-width: 470px; color: var(--muted); font-size: 18px; margin-bottom: 32px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { max-width: var(--max); margin: 0 auto; padding: 92px 24px; }
/* The nav is sticky and 70px tall, so anchor jumps have to stop short of it
   or the section heading lands underneath it. */
.section, #shop, #lookbook, #about, #contact { scroll-margin-top: 84px; }
.section--alt {
  max-width: none; background: var(--bg-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section--alt > * { max-width: var(--max); margin-inline: auto; }
.section__head { text-align: center; margin-bottom: 40px; }
.section__title { font-size: clamp(32px, 5vw, 54px); }
.section__lead { color: var(--muted); font-size: 17px; margin-top: 10px; }

/* Flag-stripe rule under every section heading — the motif that ties the
   page to the sleeve stripes and the hem label. */
.section__head::after,
.about__text .section__title::after {
  content: ""; display: block; width: 96px; height: 10px; margin: 16px auto 0;
  background: linear-gradient(
    var(--accent) 0 3px, transparent 3px 3.5px,
    var(--ink) 3.5px 6.5px, transparent 6.5px 7px,
    var(--green) 7px 10px
  );
}
.about__text .section__title::after { margin-left: 0; }

/* ============================================================
   FILTERS
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.filter {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-5px); border-color: var(--accent); }
.card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.ph { /* placeholder tile used until a real photo is added */
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  /* Set in the display face and knocked back, so the tile reads as a
     deliberate monogram watermark rather than a missing image. */
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 46px);
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  overflow: hidden;
}
/* Scale the glyph to the tile it sits in, so it doesn't look lost in the
   large product-detail image or oversized in a cart thumbnail. */
.pdp__main .ph { font-size: clamp(52px, 9vw, 88px); }
.pdp__thumb .ph { font-size: 15px; }
.line__media .ph { font-size: 14px; }
.lookbook .ph { font-size: clamp(30px, 5vw, 48px); }
.card__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.card__body { padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__cat { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.card__name { font-size: 17px; font-weight: 700; }
.card__row { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__price { font-size: 19px; font-weight: 700; color: var(--accent); }
.card__link { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { max-width: var(--max); margin: 0 auto; padding: 40px 24px 96px; }
.pdp__back { color: var(--muted); font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 26px; }
.pdp__back:hover { color: var(--accent); }
.pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.pdp__media { display: flex; flex-direction: column; gap: 14px; }
.pdp__main { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp__thumb {
  width: 68px; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-alt); cursor: pointer; padding: 0;
}
.pdp__thumb[aria-pressed="true"] { border-color: var(--accent); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__cat { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pdp__title { font-size: clamp(32px, 5vw, 52px); margin: 8px 0 14px; }
.pdp__price { font-size: 26px; font-weight: 700; color: var(--accent); margin-bottom: 20px; }
.pdp__desc { color: var(--muted); font-size: 17px; margin-bottom: 26px; }

.opt { margin-bottom: 22px; }
.opt__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.opt__row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  min-width: 52px; padding: 11px 16px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pdp__details { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.pdp__details h3 { font-size: 18px; margin-bottom: 12px; }
.pdp__details ul { list-style: none; color: var(--muted); font-size: 15px; }
.pdp__details li { padding: 5px 0 5px 18px; position: relative; }
.pdp__details li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.hint { color: var(--muted); font-size: 14px; margin-top: 10px; min-height: 21px; }
.hint--warn { color: var(--accent); font-weight: 600; }

/* ============================================================
   LOOKBOOK
   ============================================================ */
.lookbook { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.look {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); cursor: pointer; padding: 0;
  background: var(--bg-alt); display: block; width: 100%;
}
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.look:hover img { transform: scale(1.05); }
.look__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  font-size: 14px; font-weight: 600; text-align: left; color: #fff;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.about__text p { color: var(--muted); font-size: 17px; margin-top: 16px; }
/* The crest panel beside the story — UTC monogram ringed by the brand
   cities, drawn in CSS. Replace with a photo when the shoot lands. */
.about__art {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(65% 65% at 50% 42%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%),
    linear-gradient(150deg, var(--green), var(--bg) 78%);
}
.about__art::before {
  content: "UTC";
  /* Alfa Slab One is wide — this has to stay near a third of the ring
     diameter or the U and C ride over the border. */
  font-family: var(--font-display); font-size: clamp(38px, 7.5vw, 62px);
  color: var(--ink); letter-spacing: .02em;
  width: clamp(150px, 30vw, 230px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 7px var(--bg), inset 0 0 0 9px var(--ink);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.about__art::after {
  content: "Oakland ★ San Francisco ★ Sacramento";
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  font-size: clamp(9px, 1.5vw, 12px); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}

.stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; }
.stat__num { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 32px); color: var(--accent); display: block; }
.stat__label { color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align: center; }
.contact .section__title::after {
  content: ""; display: block; width: 96px; height: 10px; margin: 16px auto 0;
  background: linear-gradient(
    var(--accent) 0 3px, transparent 3px 3.5px,
    var(--ink) 3.5px 6.5px, transparent 6.5px 7px,
    var(--green) 7px 10px
  );
}
/* The brand line, set in the script face used across the garments. */
.contact__script {
  font-family: var(--font-script); font-size: clamp(28px, 5vw, 44px);
  color: var(--ink); margin-top: 26px; line-height: 1.3;
}
.contact__script span { color: var(--accent); }
.newsletter { display: flex; gap: 10px; max-width: 460px; margin: 26px auto 10px; }
.newsletter input {
  flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-pill); padding: 14px 20px; font-size: 16px; font-family: inherit;
}
.form-msg { color: var(--accent); font-weight: 600; min-height: 24px; }
.socials { display: flex; gap: 24px; justify-content: center; margin-top: 18px; }
.socials a { color: var(--muted); font-weight: 600; }
.socials a:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; text-align: center; padding: 48px 24px 44px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
/* Flag stripes across the top of the footer, mirroring the hero. */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(
    var(--accent) 0 3px, transparent 3px 3.5px,
    var(--ink) 3.5px 6.5px, transparent 6.5px 7px,
    var(--green) 7px 10px
  );
}
.footer__motto {
  font-family: var(--font-script); font-size: 22px; color: var(--ink);
  margin-bottom: 14px;
}
.footer__fine { font-size: 12px; opacity: .75; margin-top: 8px; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: fade .2s ease; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  background: var(--bg-alt); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; animation: slide .25s ease;
}
@keyframes fade { from { opacity: 0 } }
@keyframes slide { from { transform: translateX(100%) } }

.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer__foot { padding: 20px 22px; border-top: 1px solid var(--line); }
.drawer__total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.drawer__note { color: var(--muted); font-size: 12px; margin-bottom: 14px; min-height: 18px; }

.line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line__media { width: 62px; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg); }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__media .ph { font-size: 14px; }
.line__info { flex: 1; min-width: 0; }
.line__name { font-size: 14px; font-weight: 700; }
.line__variant { color: var(--muted); font-size: 12px; margin-top: 2px; }
.line__ctl { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.qty button { background: none; border: none; cursor: pointer; padding: 3px 10px; font-size: 15px; }
.qty span { font-size: 13px; min-width: 18px; text-align: center; }
.line__rm { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.line__price { font-weight: 700; color: var(--accent); font-size: 14px; }
.line__pay { font-size: 12px; }
.cart-empty { color: var(--muted); text-align: center; padding: 56px 0; }

/* ============================================================
   LIGHTBOX + TOAST
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.lightbox__close { position: absolute; top: 18px; right: 22px; font-size: 26px; color: #fff; }
.lightbox__inner { max-width: 780px; width: 100%; max-height: 90vh; }
.lightbox__inner img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; }
.lightbox__inner .ph { aspect-ratio: 3/4; border-radius: var(--radius); font-size: 64px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 130%);
  background: var(--accent); color: var(--accent-ink);
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; z-index: 130;
  /* visibility/opacity as well as the transform: an empty toast is short
     enough that sliding it down alone can leave a sliver on screen. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease, visibility .28s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .pdp__grid { grid-template-columns: 1fr; gap: 34px; }
  .about { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .nav__links { display: none; }
  /* Keep "Uptown Cali" on one line next to the monogram on a phone. */
  .brand { font-size: 16px; gap: 9px; white-space: nowrap; }
  .brand::before { width: 32px; height: 32px; font-size: 9px; }
  .nav__inner { gap: 12px; padding: 0 16px; }
  .section { padding: 64px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .newsletter { flex-direction: column; border-radius: var(--radius); }
}