/* ============================================================
   Team Koalafied — site stylesheet
   Same token system as the season technical binder (see
   ../eh/assets/css/binder.css and ../koalafied-design-system) —
   edit tokens in :root, everything else derives from them.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */

:root {
  --paper:    #fafaf8;
  --panel:    #ffffff;
  --ink:      #20222f;
  --ink-2:    #4a4e63;
  --ink-3:    #5f6278;
  --rule:     #e6e6e2;
  --rule-2:   #eeeeeb;
  --accent:   #0a7770;          /* team teal — swap to re-theme the whole site */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-2: #204a72;          /* team navy — secondary accent, used sparingly */
  --accent-3: #b8420e;          /* team orange — metadata/tag labels only */
  --pop:      #f0b90b;          /* team gold — decorative fills only, not text */
  --pop-ink:  #3a2c05;
  --warn:     #b73528;

  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 58px;

  color-scheme: light;
}

/* ---- 2. Reset -------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--pop); color: var(--pop-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.muted { color: var(--ink-2); }
code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--rule-2); padding: 0.1em 0.36em; border-radius: 3px;
}

/* ---- 3. Navigation ----------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; flex: none; }
.wordmark-mark { width: 26px; height: 26px; align-self: center; flex: none; }
.wordmark-a { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: 0.06em; }
.wordmark-b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.02em; }

.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: 13px; text-decoration: none; color: var(--ink-2);
  padding: 6px 11px; border-radius: 4px; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--rule-2); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
  content: ""; display: block; height: 1.5px; background: var(--accent);
  margin-top: 3px; border-radius: 2px;
}

/* Resources (a separate page) and any external link (like the current
   binder) aren't scroll-to anchors like their siblings, so they get no
   ::after underline. A rule before the first of them groups the anchors
   apart — nav-group-start, not repeated per item so two in a row don't
   get a double rule. External links also get a small corner-arrow, same
   idea as the binder site's external CAD link, to show they leave the site;
   Resources is an internal page jump, so it carries no icon. */
.nav-links a.nav-page {
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-links a.nav-page svg { width: 12px; height: 12px; flex: none; }
.nav-links a.nav-group-start {
  /* A border-left glued to this element's own box can only ever hug one
     side of the gap (border sits right against padding in the box
     model), which put the rule hard against Resources rather than
     centered between it and Gallery. Drawing it as an absolutely
     positioned line at the midpoint of margin-left splits the gap evenly
     instead, while this button's own padding stays the same 11px/11px as
     every other nav link (so its hover highlight is symmetric too). */
  position: relative;
  margin-left: 26px;
}
.nav-links a.nav-group-start::before {
  content: "";
  position: absolute; top: 50%; left: -13px;
  width: 1px; height: 16px;
  background: var(--rule);
  transform: translateY(-50%);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--rule-2); }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .nav-links {
    margin-left: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height .2s ease, opacity .15s ease;
  }
  .nav-links.is-open { max-height: 60vh; opacity: 1; overflow-y: auto; }
  .nav-links a {
    padding: 14px var(--gutter);
    border-radius: 0;
    border-bottom: 1px solid var(--rule-2);
  }
  .nav-links a.is-active::after { display: none; }
  .nav-links a.nav-group-start { margin-left: 0; }
  .nav-links a.nav-group-start::before { display: none; }
}

/* ---- 4. Hero ------------------------------------------------ */

/* Full-bleed photo behind the title, scrimmed for legibility — the one
   deliberately dark, photo-led moment on an otherwise light, typographic
   site. Text colors here are hardcoded against the photo rather than
   pulled from the light-mode ink tokens, since they're never meant to
   apply anywhere else. */
.hero { position: relative; padding: 0; overflow: hidden; }
.hero-bg { position: relative; width: 100%; height: clamp(480px, 64vw, 660px); }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  display: block;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6,8,12,.96) 0%, rgba(6,8,12,.82) 28%, rgba(6,8,12,.42) 58%, rgba(6,8,12,.14) 100%),
    linear-gradient(to right, rgba(6,8,12,.4) 0%, rgba(6,8,12,0) 60%);
}
.hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(28px, 5vw, 56px);
}
.hero-meta { max-width: 640px; }
.hero-content .eyebrow { color: #8fe0d6; }
.hero-title {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 0.96;
  margin: 14px 0 0; font-style: italic; color: #fff;
}
.hero-sub {
  max-width: 52ch; margin: 20px 0 0;
  color: rgba(255,255,255,.86); font-size: clamp(15px, 1.6vw, 18px);
}
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 12px 20px; border-radius: 4px; border: 1px solid transparent;
  transition: opacity .15s, border-color .15s, background .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .88; }
.hero-content .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hero-content .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-ghost { border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- 5. Sections --------------------------------------------- */

.sec { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--rule); }
.sec-title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 0; }
.sec-thesis { margin-top: 14px; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-2); max-width: var(--measure); }
.block-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}

.sec-cols { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 780px) { .sec-cols.two { grid-template-columns: 1fr 1fr; } }
/* About and Join open with a two-column row (intro text + photo) instead
   of the usual full-width title/thesis — no extra top margin needed since
   it's the section's first element, not a follow-up row. */
.wrap > .sec-cols:first-child { margin-top: 0; }

/* Accent photo beside a section's intro text (About, Join). A fixed,
   fairly wide aspect ratio keeps group/action shots readable — letting it
   stretch to match the text column's (variable, often taller) height
   forced a much narrower effective crop and cut people out of frame.
   align-self keeps it pinned to its own height instead of stretching.
   Distinct from the Gallery carousel's .carousel-frame, which is for
   browsing many photos, not a single accent. */
.section-photo {
  margin: 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--rule-2); align-self: start;
}
.section-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 6. Cards (About stats / Join areas) ----------------------- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 2.4vw, 24px); margin-top: clamp(20px, 3vw, 32px);
}
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: 18px 20px; transition: border-color .15s, transform .15s;
}
a.card { text-decoration: none; display: block; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h4 { font-size: 16px; font-weight: 600; }
.card p { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.card .card-robot { font-style: italic; color: var(--ink-2); font-weight: 500; }
.card-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.card-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: #fff;
  padding: 7px 12px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent); transition: opacity .15s;
}
.card-go:hover { opacity: .88; }

/* Code link (Resources page) — one repo, so it's a single line under the
   thesis rather than its own section. */
.resources-code-line {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: 14px; color: var(--ink-2);
}

/* CAD seasons (Resources page) — a row per season rather than a card grid:
   the entries are too sparse (one line + 1-2 links) to justify cards, and
   an odd count of them left a ragged, gappy last grid row. */
.cad-list { margin-top: 0; }
.cad-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 32px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.cad-row-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cad-row-info h4 { font-size: 16px; font-weight: 600; }
.cad-row-links.card-links { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 0; }
@media (max-width: 640px) {
  .cad-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Events (About section) — a card per competition, results as icon tags,
   left edge colored by series so the grid reads at a glance. */
.event-card { border-left-width: 3px; }
.event-card--ausc { border-left-color: var(--accent); }
.event-card--mrt { border-left-color: var(--accent-2); }
.event-card--champs { border-left-color: var(--pop); }
.event-sub {
  margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}
.event-tags { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.event-tag {
  display: flex; align-items: center; gap: 6px;
  background: var(--rule-2); color: var(--ink-2); border-radius: 4px;
  padding: 5px 10px 5px 8px; font-size: 12px; line-height: 1.2;
}
.event-tag svg { width: 13px; height: 13px; flex: none; color: var(--accent); }

/* Events ride the same horizontal carousel as the photo Gallery (see
   section 7 below) — reverse chronological, newest card first. Cards vary
   in height (2 vs 3 result tags), so the nav arrows center on the track
   itself (50%) rather than the fixed photo-frame height the base
   .carousel-nav rule assumes. */
/* Higher specificity than the base .carousel-item rule below (which sets
   the same `flex` shorthand for photos) so this basis actually wins
   regardless of source order. */
.carousel-item.carousel-item--events { flex: 0 0 clamp(180px, 20vw, 210px); }
.carousel--events .carousel-nav { top: 50%; }
/* Cards vary a lot in height (1 vs 4 result tags) — without this, flex's
   default stretch pads every shorter card with blank space below it to
   match the tallest one in the row. */
.carousel--events .carousel-track { align-items: flex-start; }

/* ---- 6.5 Robots page ---------------------------------------------- */

/* One entry per robot: name + photo gallery on the left, a stack of
   info "boxes" on the right (competed-in, function, official results,
   offseason results) — see renderRobots() in site.js. Media column goes
   sticky on wider screens so it stays in view while the results column
   (which can run long — several event cards) scrolls past it. */
.robot-list { margin-top: clamp(28px, 4vw, 44px); }
.robot-entry {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px);
  padding: clamp(28px, 4vw, 44px) 0;
}
.robot-entry:first-child { padding-top: 0; }
.robot-entry + .robot-entry { border-top: 1px solid var(--rule); }
@media (min-width: 860px) {
  .robot-entry { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr); align-items: start; }
  .robot-media { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.robot-name { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.robot-media .carousel { margin-top: 14px; }
/* Robot shots vary from the Gallery's more panoramic frame — these are
   near-square (sometimes portrait) full-robot photos, so the frame needs
   to be close to square too or object-fit: cover crops the top/bottom of
   the robot off. Arrows center on the track itself (like the Events
   carousel) rather than a fixed frame height, since single-image robots
   render no frame at all. */
.robot-media .carousel-frame { height: clamp(230px, 32vw, 360px); }
.carousel--robot .carousel-nav { top: 50%; }

.robot-info { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 28px); }
.robot-block .block-label { margin-bottom: 12px; }
.robot-season { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.robot-summary { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: var(--measure); }

/* Alliance partners sit inside the same event-card used elsewhere, set
   off from the result tags by a light dashed rule rather than a new card. */
.event-alliance {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
}
.event-alliance strong { color: var(--ink-2); font-weight: 600; }

/* ---- 7. Carousel (photos) — same component as the binder site -- */

.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 clamp(220px, 30vw, 340px); scroll-snap-align: start; min-width: 0; }
.carousel-frame {
  height: clamp(190px, 20vw, 260px); border-radius: 3px; overflow: hidden;
  display: grid; place-items: center; background: var(--rule-2);
}
.carousel-frame img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: opacity .15s ease; }
.carousel-frame img:hover { opacity: .9; }
.carousel-cap { margin-top: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.carousel-nav {
  position: absolute; top: calc(clamp(190px, 20vw, 260px) / 2); z-index: 2; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(4px);
  border: 1px solid var(--rule); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s, opacity .15s;
}
.carousel-nav:hover { color: var(--accent-2); border-color: var(--accent-2); }
.carousel-nav:disabled { opacity: 0; pointer-events: none; }
.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }
@media (max-width: 640px) { .carousel-prev { left: 4px; } .carousel-next { right: 4px; } }

/* ---- 8. Sponsors ------------------------------------------------ */

/* Two sponsor moments: a quiet banner strip right under the hero (small
   logos, small label), and the fuller "thank you" section further down the
   page (bigger logos, labelled). Both share .sponsor-logo for filter/
   hover behavior; size is set per-container below. */
.sponsor-banner { border-top: 1px solid var(--rule); padding: 24px 0; }
.sponsor-banner-label { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 12px; }
.sponsor-banner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; }

.sponsors { border-top: 1px solid var(--rule); padding-top: 40px; padding-bottom: 32px; text-align: left; }
.sponsors .sec-title { margin-top: 10px; }
.sponsors-thesis { max-width: var(--measure); margin: 12px 0 0; color: var(--ink-2); font-size: clamp(15px, 1.6vw, 17px); }
.sponsors-points { max-width: var(--measure); margin: 16px 0 0; padding: 0; list-style: none; }
.sponsors-points li { position: relative; padding-left: 20px; color: var(--ink-2); line-height: 1.55; }
.sponsors-points li + li { margin-top: 10px; }
.sponsors-points li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.sponsor-tier { margin-top: 32px; text-align: center; }
.sponsors-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.sponsors-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 48px; }

.sponsor-logo { width: auto; object-fit: contain; }
.sponsor-banner-row .sponsor-logo { height: 26px; max-width: 104px; filter: grayscale(1) opacity(.7); transition: filter .15s; }
.sponsor-banner-row .sponsor-logo:hover { filter: none; }
.sponsors-row .sponsor-logo { height: 80px; max-width: 240px; }
.tier-platinum .sponsors-row .sponsor-logo { height: 100px; max-width: 280px; }
.tier-silver .sponsors-row .sponsor-logo { height: 64px; max-width: 200px; }

/* ---- 9. Lightbox — same component as the binder site ------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: clamp(20px, 5vw, 64px);
  background: rgba(8, 8, 9, .86); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease; cursor: zoom-out; pointer-events: none;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; transform: scale(.97); transition: transform .18s ease; }
.lightbox.is-open figure { transform: scale(1); }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 64px rgba(0,0,0,.45); cursor: default; }
.lightbox figcaption { margin-top: 16px; max-width: 62ch; text-align: center; font-size: 14px; line-height: 1.5; color: #e8e7e3; }
.lightbox figcaption:empty { display: none; }
.lightbox-close {
  position: fixed; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }

/* ---- 10. Footer -------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule); padding-block: 40px 56px;
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---- 11. Error banner --------------------------------------------- */

.boom {
  margin: 40px auto; max-width: 640px; padding: 20px 24px;
  border: 1px solid var(--warn); border-left-width: 3px;
  background: var(--panel); font-family: var(--font-mono); font-size: 13px;
}
.boom h2 { font-family: var(--font-mono); font-size: 13px; margin-bottom: 8px; color: var(--warn); }