/* Golden Bear brand tokens: defined once, sourced from the Figma artwork */
:root {
  --kelly: #22934D;
  --deep-green: #167239;
  --forest: #113A23;
  --gold: #FFBD00;
  --yellow: #FFD147;
  --cream: #F9F8F3;
  --eggshell: #F1ECD5;
  --ink: #111111;
  --tan: #C5A880;
  --grey: #6E6C66;

  /* Instrument Serif ships a single 400 weight: never set a heavier weight on it */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, monospace;

  --wrap: 1440px;
  --gutter: clamp(20px, 5.6vw, 80px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: auto; }

/* Holds the <symbol> definitions the marks are drawn from. Kept in flow but
   zero-sized: display:none on a sprite container breaks <use> in some browsers */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Available to screen readers and crawlers, not painted */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Nav ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(20px, 4vw, 56px);
}
.nav-burger {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px;
}
.nav-burger span {
  display: block; width: 22px; height: 2px; background: #fff;
}
.nav-logo { color: #fff; }
.nav-logo svg { height: 30px; width: auto; display: block; }
.nav-contact {
  font-family: var(--sans);
  font-size: 14.86px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  background: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 9px 18px;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.nav-contact:hover, .nav-contact:focus-visible {
  background: #fff;
  color: var(--forest);
}
.nav a:focus-visible, .nav button:focus-visible,
.menu a:focus-visible, .menu button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--kelly);
  display: flex; align-items: center;
  padding: clamp(88px, 12vh, 140px) var(--gutter);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; }
.menu a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.28em;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(38.86px, 6.4vw, 86.86px);
  line-height: 1.24;
  color: var(--cream);
  text-decoration: none;
}
.menu-num {
  font-family: var(--mono);
  font-size: clamp(10.29px, 0.17em, 14.86px);
  letter-spacing: 0.08em;
  line-height: 1;
  padding-top: 1.9em;
  color: rgba(249, 248, 243, 0.55);
}
.menu a:hover { color: var(--gold); }
.menu-close {
  position: absolute; top: 30px; right: clamp(20px, 4vw, 56px);
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono);
  font-size: 12.57px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cream);
}
body.menu-open, body.modal-open { overflow: hidden; }

/* ---------- Contact modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(17, 58, 35, 0.88);
}
.modal-card {
  position: relative;
  width: min(100%, 760px);
  max-height: 100%;
  overflow-y: auto;
  background: var(--cream);
  border-radius: 2px;
  padding: clamp(28px, 4vw, 52px);
  animation: modal-rise 0.28s ease both;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.modal-head .label { margin-bottom: 0; }
.modal-close {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono);
  font-size: 12.57px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  padding: 0;
}
.modal-close:hover { color: var(--kelly); }
.modal-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(34.29px, 4.57vw, 52.57px);
  line-height: 1.05;
  margin-bottom: 14px;
}
.modal-intro {
  font-size: 17.14px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46em;
  margin-bottom: clamp(24px, 3.4vw, 36px);
}

/* Honeypot: hidden from people, reachable by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 24px);
}
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 12.57px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 9px;
}
.field-opt {
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--grey);
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 17.14px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--kelly);
  box-shadow: 0 0 0 2px rgba(34, 147, 77, 0.22);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
}
.select-wrap { position: relative; }
.field select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.field-err {
  font-family: var(--mono);
  font-size: 12.57px;
  line-height: 1.4;
  color: #A5301F;
  margin-top: 7px;
}
.field-err[hidden] { display: none; }
.field.invalid input, .field.invalid textarea { border-color: #A5301F; }

.form-foot {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(24px, 3.4vw, 36px);
}
.btn-send {
  font-family: var(--mono);
  font-size: 13.71px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--kelly);
  border: 0;
  border-radius: 2px;
  padding: 17px 28px;
  cursor: pointer;
  flex: none;
  transition: background 0.2s;
}
.btn-send:hover { background: var(--deep-green); }
.btn-send[disabled] { opacity: 0.6; cursor: default; }
.form-note {
  font-family: var(--mono);
  font-size: 13.71px;
  line-height: 1.5;
  color: var(--grey);
  max-width: 30em;
}
.form-status {
  font-family: var(--mono);
  font-size: 13.71px;
  line-height: 1.5;
  color: #A5301F;
  margin-top: 18px;
}
.form-status:empty { display: none; }

.modal-card.is-done .modal-intro { display: none; }
.form-done { padding: clamp(8px, 2vw, 20px) 0; }
.form-done[hidden] { display: none; }
.form-done-mark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(38.86px, 5.71vw, 64px);
  line-height: 1;
  color: var(--kelly);
  margin-bottom: 18px;
}
.form-done-copy {
  font-size: 17.14px;
  line-height: 1.6;
  max-width: 40em;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.modal a:focus-visible, .modal button:focus-visible {
  outline: 2px solid var(--kelly);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn-send { width: 100%; }
}

/* ---------- Hero ---------- */
/* Full-bleed at the artwork's own proportions, as drawn in Figma */
.hero { width: 100%; aspect-ratio: 2000 / 2495; min-height: 100svh; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Bands ---------- */
.band-yellow { background: var(--yellow); }
.band-cream { background: var(--cream); }
.band-eggshell { background: var(--eggshell); }
.band-green { background: var(--kelly); color: var(--cream); }

/* ---------- Labels ---------- */
/* Figma Label / Caption: Geist Mono 11px / 500 / 130% / 0.5px */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.045em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}
.tick {
  width: 7px; height: 7px; background: var(--kelly); flex: none;
}
.tick-gold { background: var(--gold); }
.label-green { color: var(--deep-green); }
.label-cream { color: var(--cream); }

/* ---------- 01 Manifesto ---------- */
.band-yellow { padding: clamp(64px, 9vw, 130px) 0; }
.manifesto {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(32px, 5.03vw, 73.14px);
  line-height: 1.1;
  color: var(--deep-green);
  max-width: 21em;
}

/* ---------- Full-bleed figures ---------- */
.bleed img { width: 100%; }

/* ---------- 02 Evolution ---------- */
#evolution { padding: clamp(56px, 7vw, 100px) 0; }
.evolution {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(25.14px, 3.43vw, 50.29px);
  line-height: 1.14;
  color: var(--kelly);
  max-width: 27em;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  max-width: 1180px;
}
.cols p { font-size: 17.14px; line-height: 1.6; color: var(--ink); }
.cols strong { font-weight: 600; }
@media (max-width: 700px) {
  .cols { grid-template-columns: 1fr; }
}

/* ---------- Identity codes ---------- */
.identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.id-panel {
  position: relative;
  aspect-ratio: 720 / 850;
  display: flex;
  align-items: center;
  justify-content: center;
}
.id-green { background: var(--kelly); }
.id-yellow { background: var(--yellow); }
.id-label {
  position: absolute;
  top: 30px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.045em;
}
.id-green .id-label { color: var(--tan); }
.id-yellow .id-label { color: var(--forest); }
.id-bear { width: 43%; height: auto; color: var(--gold); }
.id-logotype { width: 74%; height: auto; color: var(--kelly); }
@media (max-width: 700px) {
  .identity { grid-template-columns: 1fr; }
}

/* ---------- Editorial sections ---------- */
.section { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); }
.section h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(38.86px, 4.46vw, 64px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.section .intro {
  font-size: 17.14px;
  line-height: 1.6;
  max-width: 76em;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section figure { margin-bottom: clamp(36px, 5vw, 64px); }
.section figure:last-child, .section .pair:last-child { margin-bottom: 0; }
/* Figures that butt together as one block, per the Figma: no gap between them,
   the group carrying the spacing a single figure would have */
.stack { margin-bottom: clamp(36px, 5vw, 64px); }
.stack figure { margin-bottom: 0; }
.stack:last-child { margin-bottom: 0; }
figcaption {
  font-family: var(--mono);
  font-size: 13.71px;
  line-height: 1.45;
  color: var(--grey);
  margin-top: 12px;
}
/* Figma crops the jogger to a wide band on the patch, not a full-length shot */
.crop-wide { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 8%; }
/* Figma crops the tote to a landscape band on the bag, below the crossed arms */
.crop-bag { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.pair figure { margin-bottom: 0; }
/* Side-by-side images share one ratio so their tops, bottoms and captions line up.
   Each pair sets --pair-ar to the geometric mean of its two images' own ratios, which
   spreads the crop evenly and keeps it as small as that pairing allows. Pairs whose
   images already match are left on `auto` and are never cropped. */
.pair figure img { aspect-ratio: var(--pair-ar, auto); object-fit: cover; }
@media (max-width: 700px) {
  .pair { grid-template-columns: 1fr; gap: 36px; }
}

/* Sized by the photograph rather than a fixed box: the figure shrink-wraps the
   image, which renders at its own pixel width and only scales down to fit */
.centered { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.centered img { width: auto; max-width: 100%; }
.cap-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Go Big, Bear ---------- */
.band-green .label { margin-bottom: 8px; }
/* Needs to outrank `.section h2`, which otherwise wins on specificity
   and drops this back to the ordinary heading size */
.section h2.giant {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(59.43px, 12.57vw, 182.86px);
  line-height: 1;
  color: var(--gold);
  text-align: center;
  margin: clamp(24px, 3vw, 48px) 0 clamp(40px, 5vw, 72px);
}
.band-green figcaption { color: var(--eggshell); opacity: 0.85; }
.band-green h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(36.57px, 5.03vw, 73.14px);
  line-height: 1.05;
  color: var(--gold);
  margin-bottom: 18px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: stretch;
  margin-bottom: clamp(48px, 6vw, 90px);
}
.split figure { margin-bottom: 0; }
/* The outer image sets the row height */
.split > figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.split-copy { display: flex; flex-direction: column; justify-content: center; }
/* An image below the copy absorbs the leftover height, so both columns
   finish level with each other at the bottom */
.split-copy > figure { flex: 1 1 0; min-height: 0; margin-top: 10px; }
.split-copy > figure img { height: 100%; object-fit: cover; }
.split-copy p {
  font-size: 17.14px;
  line-height: 1.6;
  color: var(--cream);
  max-width: 36em;
  margin-bottom: 26px;
}
.kicker-line { font-weight: 600; }
/* Stacks earlier than the other grids: below this the copy leaves too little
   height for the image beside it, which crops the garment to a thin band */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-flip .split-copy { order: -1; }
  /* Single column: nothing to fill against, so the image reverts to its own ratio */
  .split-copy > figure { flex: none; }
  .split-copy > figure img { height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--kelly);
  padding: clamp(72px, 10vw, 140px) clamp(24px, 6vw, 96px) 44px;
  text-align: center;
}
.footer-mark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(54.86px, 10.29vw, 137.14px);
  line-height: 1;
  color: var(--gold);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.footer-address {
  font-family: var(--mono);
  font-style: normal;
  font-size: 13.71px;
  line-height: 1.6;
  letter-spacing: 0.045em;
  color: var(--cream);
  margin-bottom: 8px;
}
.footer-email {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.71px;
  line-height: 1.6;
  letter-spacing: 0.045em;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-email:hover { color: var(--cream); }
.footer-contact {
  display: block;
  width: fit-content;
  margin: clamp(28px, 4vw, 44px) auto 0;
  font-family: var(--mono);
  font-size: 13.71px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(249, 248, 243, 0.55);
  border-radius: 2px;
  padding: 17px 28px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-contact:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--kelly);
}
.footer a:focus-visible, .footer button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.footer-rule {
  height: 1px;
  background: rgba(249, 248, 243, 0.4);
  max-width: 1280px;
  margin: clamp(48px, 7vw, 88px) auto 22px;
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 13.71px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-est { color: var(--gold); }
@media (max-width: 560px) {
  .footer-meta { flex-direction: column; align-items: center; gap: 8px; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}