/* USM School of Construction & Design — Career Fair app
   Branding per PROJECT_SPEC.md: black #1A1A1A, gold #FFC72C, warm gray #F5F5F2. */

:root {
  --black: #1A1A1A;
  --gold: #FFD046;        /* usm.edu's yellow, matched from their header */
  --gold-soft: #FFD54F;
  --bg: #F5F5F2;
  --card: #ffffff;
  --line: #e8e8e8;
  --text: #333333;
  --muted: #6b6b6b;
  --danger: #c0392b;
  --font: "Body", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Type scale. The stylesheet had grown 14 different sizes (10, 11, 12, 12.5,
     13, 13.5, 14, 15, 16, 18, 19, 20, 21, 30) decided per component; these are
     the eight steps they collapse into. */
  --fs-2xs: 11px;   /* mono eyebrows, badges */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base: 14px;  /* form controls, card bodies */
  --fs-md:  15px;   /* page body */
  --fs-lg:  18px;
  --fs-xl:  21px;
  --fs-2xl: 30px;

  /* Spacing rhythm, 4px based. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --gold-ink: #8a6a00;   /* gold that passes contrast on white */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.boot {
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- fonts */

/* usm.edu sets headlines in Obviously and body text in Proxima Nova, both Adobe
   Typekit faces licensed to that domain, so neither can be loaded here.
   Archivo is the closest free stand-in: a variable grotesque with a width axis,
   so it can be pushed wide and heavy to sit near Obviously's proportions, and
   at normal width it reads close to Proxima Nova. OFL and self-hosted, so the
   app still works with no internet. */
@font-face {
  font-family: "Display";
  src: url("../../public/fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Display";
  src: url("../../public/fonts/archivo-roman.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Body";
  src: url("../../public/fonts/archivo-roman.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Body";
  src: url("../../public/fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- masthead */

/* usm.edu's header is a fixed 150px tall at every width from 1100 to 2560, with
   an inner container capped at 1440px. The gold logo block is 24.306% *of that
   container*, so it settles at 350px and stops growing -- which is why their bar
   never gets taller on a wide monitor. */
.masthead {
  /* usm.edu paints this bar pure black (their .menu), not the off-black used
     elsewhere in the app. */
  background: #000;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: visible;             /* the logo block hangs past the bar */
}
.masthead__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100px;                 /* usm.edu's bar is 100px... */
  display: flex;
  align-items: stretch;
}
.masthead__brand {
  /* Both bottom corners are rounded. The radius sits well outboard of the
     lockup (which stops at the 2rem/4rem padding), so it never crowds the
     mark. */
  --radius: 26px;
  background: var(--gold);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 24.306%;
  height: 120px;                 /* ...while the logo block stays taller and
                                    overhangs it by 20px, as in their header */
  align-self: flex-start;
  padding: 0 2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.masthead__brand img { width: 100%; height: auto; display: block; }

@media (min-width: 80em) {
  .masthead__brand { padding: 0 4rem; }
}

.masthead__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;                          /* the items' own padding does the spacing */
  padding: 0 var(--sp-6);
  min-width: 0;
}
.masthead__nav [role="tablist"] { display: flex; align-items: center; gap: 2px; }

/* The About link sits in the same row as the tabs and is set identically -- the
   transparent bottom border keeps its baseline on the tabs' baseline. */
.masthead__nav button,
.masthead__link {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #e2e2e2;
  font-family: var(--font-display);
  font-size: 17px;                 /* usm.edu's nav size */
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;               /* pinned: a button and an a default to
                                      different line boxes, which left the
                                      link sitting 2px above the tabs */
  padding: 12px 18px 9px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s;
}
.masthead__nav button:hover,
.masthead__link:hover { color: var(--gold); }
.masthead__nav button.active { color: var(--gold); border-bottom-color: var(--gold); }


@media (max-width: 1023px) {
  .masthead__inner { height: auto; flex-wrap: wrap; }
  .masthead { position: static; }
  .masthead__brand { --radius: 18px; width: 210px; padding: 10px 18px; }
  .masthead__nav { padding: 0 var(--sp-4) var(--sp-2); flex-wrap: wrap; gap: var(--sp-3); }
  .masthead__nav [role="tablist"] { flex-wrap: wrap; }
  .masthead__nav button,
  .masthead__link { padding: 12px 12px 9px; font-size: 15px; }
}

@media (max-width: 700px) {
  .masthead__inner { flex-direction: column; align-items: stretch; }
  .masthead__brand { --radius: 14px; align-self: flex-start; width: 180px; padding: 8px 16px; }
  .masthead__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--sp-3) var(--sp-2);
  }
  .masthead__nav [role="tablist"] { flex-wrap: wrap; gap: 0; }
  .masthead__nav button { padding: 10px 12px 7px; font-size: 15px; }
  .masthead__link { padding: 6px 12px 10px; font-size: var(--fs-sm); }
}

/* ---------------------------------------------------------------- banner */

/* usm.edu: 800px tall, video full-bleed underneath, and a textured panel of
   min(688px, 45%) pinned to one side with a 30% diagonal. Ours mirrors the side
   and adds the gold seam. The copy column is derived from the diagonal so it
   can never spill past it -- see --safe below. */
.banner {
  --panel-w: min(688px, 45%);
  --seam: 23px;                    /* half the original band */
  --copy-gutter: clamp(28px, 4vw, 64px);
  /* the diagonal is at its leftmost along the top edge, at 70% of the panel,
     so sizing the column to that keeps every line inside the grey */
  --safe: calc(0.7 * var(--panel-w) - var(--copy-gutter) - 26px);
  /* A percentage inside a font-size calc resolves against the parent's font
     size, not the width, so anything that feeds a font-size needs a vw twin.
     The banner spans the viewport, so 45% of it is 45vw; the extra slack
     absorbs the scrollbar difference. */
  --panel-vw: min(688px, 44vw);
  --safe-vw: calc(0.7 * var(--panel-vw) - var(--copy-gutter) - 26px);
  position: relative;
  overflow: hidden;
  background: var(--black);
  height: 50rem;                   /* 800px, exactly as theirs -- usm.edu does
                                      not cap this against viewport height */
}

.banner__media { position: absolute; inset: 0; }
.banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,16,16,0.45), rgba(16,16,16,0.04) 62%);
}
.banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.banner__video.ready { opacity: 1; }

.banner__panel,
.banner__gold {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--panel-w);
  /* mirror of usm.edu's polygon(30% 0, 100% 0, 100% 100%, 0 100%) */
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
.banner__panel {
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url("../../public/textures/dark-texture.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto;
  z-index: 2;
}
.banner__gold {
  background-color: var(--gold);
  background-image: url("../../public/textures/dark-texture.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto;
  background-blend-mode: soft-light;
  transform: translateX(var(--seam));
  z-index: 1;
}

.banner__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
}
.banner__copy {
  width: var(--safe);
  margin-left: var(--copy-gutter);
}

/* Sits UNDER the headline, so it carries the gap down to the date line. */
.banner__eyebrow {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(17px, calc(var(--safe-vw) / 16), 26px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.banner__h1 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  /* Obviously sets "READY FOR LIFE" at 8.888x its font-size. Archivo at
     weight 900 / width 100% measures 8.817x -- within 1%, and the closest the
     variable axis gets. An earlier 800/118% was 14% too wide. */
  font-weight: 900;
  font-style: italic;
  font-stretch: 100%;
  text-transform: uppercase;
  /* Sized off the safe column so the line never wraps at any width. */
  white-space: nowrap;
  font-size: min(48px, calc(var(--safe-vw) / 9.0));
  line-height: 1.05;
  color: #fff;
}
.banner__lead {
  margin: 0 0 var(--sp-5);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* The date sits above the buttons and carries more weight than the body copy. */
.banner__when {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.banner__when .sep { color: var(--gold); margin: 0 8px; }
.banner__when .nb { white-space: nowrap; }
/* The venue starts its own line rather than flowing on behind the time, so it
   is never split across the break. Its separator goes with it. */
.banner__when .venue { display: block; }
.banner__when .sep--venue { display: none; }

/* The two buttons stay side by side. Their row needs more than --safe (the
   copy column is sized to the diagonal's leftmost point, along the top edge),
   but the buttons sit far enough down the banner that the diagonal has already
   moved well to the right, so the row is allowed to run past the column and is
   measured against the diagonal at its own height instead. */
.banner__cta {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  width: max-content;
  max-width: none;
}
.banner__cta .cta { flex-shrink: 0; white-space: nowrap; }
.cta {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  padding: 15px 24px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cta--gold { background: var(--gold); color: var(--black); }
.cta--gold:hover { background: #fff; }
.cta--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.cta--ghost:hover { background: #fff; color: var(--black); border-color: #fff; }

/* Between the stacking breakpoint and ~1200px the panel is at its narrowest
   while the buttons still have to share one row inside the diagonal. Easing the
   type, the padding and the gap across that band buys the ~70px needed; it is
   still larger than the 14px these buttons used to be. The upper bound is where
   the full-size row starts fitting again -- measured, it crosses the diagonal by
   3px at 1201 and clears by 28px at 1280. */
@media (min-width: 1024px) and (max-width: 1259px) {
  .cta { font-size: 16px; padding: 13px 11px; }
  .banner__cta { gap: 9px; }
}

/* usm.edu drops the diagonal at its 64em breakpoint and stacks. */
@media (max-width: 1023px) {
  .banner { height: auto; max-height: none; display: flex; flex-direction: column; }
  .banner__media { position: relative; inset: auto; aspect-ratio: 16 / 9; max-height: 42vh; flex-shrink: 0; }
  .banner__media::after { background: linear-gradient(180deg, transparent 55%, rgba(16,16,16,0.35)); }
  .banner__gold {
    position: relative; inset: auto; width: 100%; height: 7px;
    clip-path: none; transform: none; flex-shrink: 0;
  }
  .banner__panel {
    position: absolute; inset: 0; top: auto; height: auto;
    width: 100%; clip-path: none;
  }
  .banner__content { position: relative; height: auto; padding: var(--sp-8) 0; }
  .banner__copy { width: auto; margin: 0; padding: 0 var(--sp-5); }
  .banner__when .sep { display: none; }
  .banner__when span { display: block; }
}

/* ------------------------------------------------------- compact pagehead */

.pagehead {
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url("../../public/textures/dark-texture.jpg");
  background-position: center top;
  background-size: cover;
  border-bottom: 5px solid var(--gold);
}
.pagehead__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--sp-6);
}
.pagehead h1 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 100%;
  text-transform: uppercase;
  font-size: clamp(26px, 0.9vw + 26px, 44px);
  line-height: 1.05;
  color: #fff;
}
.pagehead h1 .accent { color: var(--gold); }
.pagehead__lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

/* --------------------------------------------------------------- layout */

.container { max-width: 1080px; margin: 0 auto; padding: 30px 20px 56px; }
.container.narrow { max-width: 720px; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head { padding: 18px 22px 14px; border-bottom: 1px solid #f0f0f0; }
.panel-head h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--black); margin: 0 0 3px; }
.panel-head p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.panel-body { padding: 22px; }

/* Set exactly like the sponsors heading above it, and centred to match. */
.section-title {
  text-align: center;
  margin: 0 0 18px;
}
.section-title h2 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 100%;
  text-transform: uppercase;
  font-size: var(--fs-xl);
  color: var(--black);
}
.section-title p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.notice {
  font-size: var(--fs-sm);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.notice.warn { background: #fffaf0; border-color: #f5e3b3; color: #8a6a00; }
.notice.error { background: #fdf0ef; border-color: #f5c6cb; color: var(--danger); }
.notice.info { background: #f4f7fb; border-color: #d8e3f0; color: #3a5a80; }

/* --------------------------------------------------------------- controls */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}
.field .hint { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: #fff;
  padding: 10px 12px;
  /* Deliberately darker than the card and panel rules. A hairline that matches
     the surrounding greys leaves students unsure where the field actually is. */
  border: 1.5px solid #a9a9a3;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
textarea { line-height: 1.6; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: #8a8a84; }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.28);
}
input:disabled, textarea:disabled { background: #f8f8f8; color: #999; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.btn {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 11px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.btn.primary { background: var(--gold); color: var(--black); box-shadow: 0 2px 12px rgba(255,199,44,0.3); }
.btn.primary:hover:not(:disabled) { background: var(--gold-soft); }
.btn.dark { background: var(--black); color: #fff; }
.btn.dark:hover:not(:disabled) { background: #333; }
.btn.ghost { background: #fff; color: #666; border: 1px solid #ddd; font-weight: 600; }
.btn.ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--black); }
.btn.block { display: block; width: 100%; }
.btn:disabled { background: #e8e8e8; color: #999; cursor: not-allowed; box-shadow: none; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider span { font-family: var(--mono); font-size: var(--fs-2xs); color: #6b6b6b; letter-spacing: 1px; }

/* --------------------------------------------------------- company grid */

.chip {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.18s;
}
.chip:hover { border-color: var(--gold); }
.chip.on { background: var(--black); border-color: var(--black); color: var(--gold); }

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
}
.company-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 14px 14px;
  text-align: center;
  cursor: pointer;
  /* Fixed height so every tile is identical regardless of how many lines the
     company name takes; the longest on the roster runs to three. */
  height: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.company-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: #d8d8d8;
}
.company-card .logo {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
/* height (not max-height) so a logo smaller than the box scales UP to fill it --
   LEMOINE's mark is a 24x24 SVG and sat at 24px under max-height. object-fit
   keeps the aspect, and max-width still reins in wide wordmarks. */
.company-card .logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Reversed (white) logos need a dark ground or they vanish -- on the card, in
   the dialog, and in the marquee alike. */
.company-card .logo img.on-dark,
.marquee__item img.on-dark,
.modal .logo img.on-dark {
  background: var(--black);
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
}

/* Every tile in the directory is the same size; sponsors are recognised in
   the marquee above instead. */
.monogram {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--black);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.company-card .name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--black);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.company-card .tier {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: #6b6b6b;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
}
.modal {
  background: #fff;
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  border-top: 4px solid var(--gold);
  animation: rise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-body { padding: 28px 26px 26px; }
.modal h3 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 800; color: var(--black); }
.modal .meta { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.modal p.desc { font-size: var(--fs-base); line-height: 1.65; color: #555; margin: 14px 0 18px; }

/* ---------------------------------------------------------- match cards */

.match-list { display: flex; flex-direction: column; gap: 10px; }
.match-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 19px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.match-card.visible { opacity: 1; transform: translateY(0); }
.match-card.top3 { border-color: rgba(255, 199, 44, 0.45); }
.match-card .crest {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
.match-card .body { display: flex; align-items: flex-start; gap: 14px; }
.match-card .rank {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 700;
  background: #f0f0f0;
  color: #666;
}
.match-card.top3 .rank { background: var(--black); color: var(--gold); }
.match-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.match-card .company { font-size: var(--fs-md); font-weight: 700; color: var(--black); }
.match-card .score {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: #f0f0f0;
  color: #666;
  padding: 2px 10px;
  border-radius: 12px;
}
.match-card.top3 .score { background: var(--gold); color: var(--black); }
.match-card .bar { width: 100%; height: 4px; background: #f0f0f0; border-radius: 2px; margin-bottom: 8px; }
.match-card .fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #ccc;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.match-card.top3 .fill { background: linear-gradient(90deg, var(--black), #444); }
.match-card .reason { font-size: var(--fs-sm); color: #555; line-height: 1.55; margin: 0; }
.match-card .sponsor-tag {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a6a00;
  background: #fff6da;
  border-radius: 8px;
  padding: 2px 7px;
}

.tip {
  margin-top: 20px;
  padding: 17px 21px;
  background: var(--black);
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
}
.tip .label {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-bottom: 7px;
}
.tip p { font-size: var(--fs-base); color: rgba(255, 255, 255, 0.78); line-height: 1.65; margin: 0; }

/* -------------------------------------------------------------- uploader */

.dropzone {
  border: 2px dashed #d0d0d0;
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  background: #FAFAF8;
  transition: all 0.18s;
}
.dropzone:hover, .dropzone.dragging { border-color: var(--gold); background: #FFFDF5; }
.dropzone.loaded { border: 2px solid var(--gold); background: #FFFDF5; }
.dropzone .icon { font-size: var(--fs-2xl); margin-bottom: 6px; }
.dropzone .title { font-size: var(--fs-md); font-weight: 600; color: var(--black); }
.dropzone .sub { font-size: var(--fs-xs); color: #999; margin-top: 4px; }

/* ------------------------------------------------------------- cv builder */

.form-section { border-top: 1px solid #f0f0f0; padding-top: 18px; margin-top: 18px; }
.form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.form-section > h3 {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--black);
  margin: 0 0 12px;
}
.repeat-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 12px;
  background: #fcfcfb;
}
.repeat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.repeat-head span { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 1px; }
.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.link-btn:hover { color: var(--danger); }

.discipline-row { display: flex; gap: 10px; flex-wrap: wrap; }
.discipline-row button {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: all 0.18s;
}
.discipline-row button:hover { border-color: var(--gold); }
.discipline-row button.on { border-color: var(--gold); background: #FFFDF5; }
.discipline-row .d-name { font-size: var(--fs-base); font-weight: 700; color: var(--black); display: block; }
.discipline-row .d-sub { font-size: var(--fs-xs); color: var(--muted); }

.cv-preview {
  width: 100%;
  height: 780px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--black);
  /* usm.edu's footer is a deep 840px block; ours carries far less, so it gets
     generous vertical room rather than invented content. */
  padding: 64px 24px 72px;
  text-align: center;
  border-top: 5px solid var(--gold);
}
.footer img { width: 210px; height: auto; margin-bottom: 20px; }
.footer .lines { font-size: var(--fs-xs); color: #b4b4b4; line-height: 1.9; }
.footer .school { color: var(--gold); font-weight: 600; }
.footer .copyright { font-size: var(--fs-2xs); color: #9a9a9a; margin-top: 12px; }

.status-line {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: #9a9a9a;                 /* #555 on the black footer was 2.33:1 */
  margin-top: 10px;
  letter-spacing: 0.3px;
}
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.status-dot.up { background: #2ecc71; }
.status-dot.down { background: #e74c3c; }

/* =========================================================================
   Accessibility layer
   ========================================================================= */

/* Keyboard users had almost nothing to go on: the stylesheet carried a single
   :focus rule. :focus-visible keeps the ring off mouse clicks. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the black bars the gold ring needs a light halo to stay visible. */
.masthead :focus-visible,
.banner :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 199, 44, 0.55);
}
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.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;
}

/* The company cards and the upload dropzone became real <button>s, so the
   browser's button styling has to be undone. */
button.company-card,
button.dropzone {
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  -webkit-appearance: none;
  appearance: none;
}
button.dropzone .icon,
button.dropzone .title,
button.dropzone .sub { display: block; }
button.company-card .logo { display: flex; }
button.company-card .name,
button.company-card .tier { display: block; }
button.dropzone:disabled { cursor: default; }

/* Grouped inputs use a fieldset now; strip its default chrome. */
fieldset.field {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}
fieldset.field legend {
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}

/* The logo sits on its own line with the name beneath it, both centred, so
   neither can collide with the other or with the dialog's edges. */
.modal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.modal-head .logo {
  width: 100%;
  max-width: 240px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* This rule did not exist, so the dialog logo rendered at its natural size --
   Turner's file is 2308x773 and burst straight out of the panel. Both axes are
   capped, so every logo is letterboxed into the box above whatever its shape. */
.modal-head .logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.modal-head .modal-title { width: 100%; min-width: 0; }
.modal h2 {
  margin: 0 0 4px;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--black);
  overflow-wrap: anywhere;         /* long single-word names cannot push out */
}
.modal .meta { margin: 0; }
.modal .desc .muted { color: #6b6b6b; }

/* Company facts in the dialog, one per line. The label is its own block above
   the text rather than inline, so a long "Sectors" list wraps under its label
   instead of forming a ragged hanging indent. */
.modal-facts {
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  text-align: left;
}
.modal-facts li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.modal-facts li:first-child { border-top: none; padding-top: 0; }
.modal-facts__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}
.modal-facts__text {
  display: block;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #3f3f3f;
  overflow-wrap: anywhere;
}
.modal .btn { text-decoration: none; }

.btn-lg { margin-top: 18px; padding: 15px 24px; font-size: var(--fs-md); }

/* The single reduced-motion rule only hid the hero video; card entrances and
   score bars still animated. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Layout & state
   ========================================================================= */

/* The CV builder used to be one 720px panel adrift in a 1600px viewport. */
.builder-layout { max-width: 1120px; }
.form-rail { display: none; }

@media (min-width: 1040px) {
  .builder-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .form-rail {
    display: block;
    position: sticky;
    top: 76px;                 /* clears the sticky tab bar */
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px 16px;
  }
}

.rail-title {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--black);
}
.rail-meter {
  height: 6px;
  border-radius: 3px;
  background: #eee;
  overflow: hidden;
}
.rail-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width 0.35s ease;
}
.rail-count { margin: 7px 0 14px; font-size: var(--fs-xs); color: var(--muted); }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { margin-bottom: 1px; }
.rail-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 7px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: #555;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rail-list button:hover { background: #faf8f2; color: var(--black); }
.rail-list button.done { color: var(--black); font-weight: 600; }
.rail-list .tick {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: #c9c9c9;
  width: 12px;
  flex-shrink: 0;
}
.rail-list button.done .tick { color: #1f9d55; }
.rail-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--muted);
}

/* ---- skeletons ---------------------------------------------------------- */

@keyframes shimmer { to { background-position: -200% 0; } }

.sk {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eeeeee 25%, #f7f7f7 37%, #eeeeee 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.company-card.skeleton { cursor: default; pointer-events: none; }
.sk-logo { height: 64px; width: 100%; margin-bottom: 10px; border-radius: 8px; }
.sk-name { height: 12px; width: 72%; margin: 0 auto; }
.sk-rank { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.sk-line { height: 11px; width: 55%; margin-bottom: 9px; }
.sk-line.wide { width: 82%; height: 14px; }
.sk-bar { height: 4px; width: 100%; margin-bottom: 10px; }
.match-card.skeleton { opacity: 1; transform: none; }

/* ---- empty and error states -------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 52px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.empty-state .empty-icon { font-size: var(--fs-2xl); margin: 0 0 10px; }
.empty-state h2 {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--black);
}
.empty-state p { margin: 0 0 16px; font-size: var(--fs-base); color: var(--muted); }
.empty-state .btn { margin-top: 4px; }

/* =========================================================================
   Utilities that replace inline style={{...}} in the components
   ========================================================================= */

.btn { text-decoration: none; }          /* .btn is used on <a> as well */

.section-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: -6px 0 var(--sp-3);
}
.sponsor-hint {
  font-size: var(--fs-sm);
  color: var(--gold-ink);
  margin: 0;
}
.bullet-input { margin-bottom: 6px; }
.stack-sm { margin-top: var(--sp-3); }
.stack-md { margin-top: 14px; }
.btn-row.spaced { margin-bottom: var(--sp-4); }
.grow { flex: 1; min-width: 0; }
.match-card .reason.link-row { margin-top: var(--sp-1); }
.match-link { color: var(--gold-ink); font-size: var(--fs-xs); }
.visually-hidden-input { display: none; }

/* =========================================================================
   Sponsor marquee + logo hover
   ========================================================================= */

.sponsors { margin: 0 0 var(--sp-8); }
.sponsors__head {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
  text-align: center;
}
.sponsors__head h2 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 100%;
  text-transform: uppercase;
  font-size: var(--fs-xl);
  color: var(--black);
}
.sponsors__head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Four strips, one per tier, running in opposite directions. Each carries its
   own scale and speed; the durations are set so every strip travels at roughly
   the same speed despite very different pass widths, otherwise the short gold
   strip would visibly race the long platinum one. Each is 4/3 of its original
   value -- a quarter off the speed. */
.tier-row {
  --logo-h: 148px;
  --logo-w: 296px;
  --speed: 20s;
  display: flex;
  align-items: center;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.tier-row:last-of-type { border-bottom: 3px solid var(--gold); }

/* Each step down is a quarter off the one above it, except bronze which is an
   eighth off silver. 148 -> 111 -> 83 -> 73. */
.tier-row--platinum { --logo-h: 148px; --logo-w: 296px; --speed: 16s; }
.tier-row--gold     { --logo-h: 111px; --logo-w: 222px; --speed: 11.35s; }
.tier-row--silver   { --logo-h:  83px; --logo-w: 166px; --speed: 16.65s; }
.tier-row--bronze   { --logo-h:  73px; --logo-w: 146px; --speed: 12s; }

/* The tier plate sits outside the scrolling area entirely -- it is a sibling of
   .marquee, not a child, which is what keeps the fade off it. */
.tier-badge {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  /* One size for every tier, and sized to clear the shortest strip: the bronze
     row is 109px, so the plate stays at 96px. */
  margin: 0 clamp(14px, 1.6vw, 26px);
  width: 36px;
  height: 96px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Turned on its side, reading bottom-to-top. vertical-rl alone reads downward;
   the 180deg turn is what flips it to run upward. */
.tier-badge__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}

/* The plate is gone; the word now carries the metal itself. These are the
   deepest stop of each plate's old gradient, darkened until it clears 4.5:1 on
   the white strip -- as-is they measured 2.57 (platinum), 2.98 (silver) and
   3.63 (gold), which is unreadable once there is no plate behind them. Gold
   lands on the --gold-ink token the rest of the app already uses for gold on
   white. Bronze was dark enough to keep. */
.tier-badge--platinum { color: #5c6773; }   /* 5.76:1 */
.tier-badge--gold     { color: var(--gold-ink); }  /* #8a6a00, 5.07:1 */
.tier-badge--silver   { color: #63686e; }   /* 5.62:1 */
.tier-badge--bronze   { color: #8a4a17; }   /* 6.83:1 */

/* The scrolling window. The fade is an eighth of the viewport at each end, and
   because this element begins after the badge, the left fade starts past it. */
.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 9px 0;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 12.5vw, #000 calc(100% - 12.5vw), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 12.5vw, #000 calc(100% - 12.5vw), transparent 100%);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(26px, calc(var(--logo-h) * 0.45), 64px);
  width: max-content;
  animation: marquee-left var(--speed) linear infinite;
}
.marquee__track--reverse { animation-name: marquee-right; }
.tier-row:hover .marquee__track,
.tier-row:focus-within .marquee__track { animation-play-state: paused; }

/* --shift is one pass of the set, set inline as -100%/copies. Shifting by a
   whole pass is what makes the loop seamless; the old fixed -33.3333% only
   worked while the track happened to be exactly three passes long, which it no
   longer is now that each tier sizes its own track. */
@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--shift), 0, 0); }
}
@keyframes marquee-right {
  from { transform: translate3d(var(--shift), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--logo-h) + 14px);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.marquee__item img {
  max-height: var(--logo-h);
  max-width: var(--logo-w);
  object-fit: contain;
  display: block;
}
.marquee__item .monogram {
  width: calc(var(--logo-h) * 0.7);
  height: calc(var(--logo-h) * 0.7);
  font-size: var(--fs-2xl);
}
.marquee__item:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .tier-row { flex-wrap: wrap; }
}
}

/* Every card lifts slightly on hover, sponsors and everyone else alike. */
.company-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.company-card:hover,
.company-card:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* One modest size for every tile. */
.company-card .logo { height: 62px; flex-shrink: 0; transition: transform 0.2s ease; }
.company-card:hover .logo,
.company-card:focus-visible .logo { transform: scale(1.14); }

/* =========================================================================
   Announcements
   ========================================================================= */

.ann-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.ann-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  /* the gold edge ties these to the banner without shouting */
  border-left: 4px solid var(--gold);
}

.ann-card__logo {
  flex: 0 0 auto;
  width: 84px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Absolute caps, like the dialog: a percentage here resolves against a parent
   with no fixed height and the logo renders at its natural size. */
.ann-card__logo img {
  max-width: 84px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.ann-card__logo .monogram { width: 48px; height: 48px; font-size: var(--fs-md); }
.ann-card__crest {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--gold-ink);
  letter-spacing: 0.04em;
}

.ann-card__body { flex: 1; min-width: 0; }
.ann-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.ann-card__who {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--black);
}
.ann-card__date { font-size: var(--fs-xs); color: var(--muted); }

.ann-card__title {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--black);
  line-height: 1.3;
}
.ann-card__text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: #555;
  /* hand-written copy can carry a long URL; wrap it rather than overflow */
  overflow-wrap: anywhere;
}
.ann-card__link {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-ink);
  text-decoration: none;
}
.ann-card__link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .ann-card { flex-direction: column; gap: 12px; }
  .ann-card__logo { width: auto; }
}