/* ==========================================================================
   CCM Racing — design tokens
   Extracted from .design/Eric Caudell Racing.dc.html. Dark-only by design;
   the mockup commits to one look, so there is no light palette to swap in.
   ========================================================================== */

:root {
  /* Surfaces */
  --ccm-ground:    #0b0b0d;
  --ccm-panel:     #141418;
  --ccm-panel-alt: #131317;
  --ccm-rule:      #1e1e23;
  --ccm-rule-lift: #3a3a42;

  /* Type */
  --ccm-text:      #f2f1ef;
  --ccm-text-soft: #b4b3ae;
  --ccm-muted:     #8a8a93;
  --ccm-muted-dim: #5f5f68;

  /* Accent — taken from the logo vector, not picked by eye.
     The EPS fill is rgb(92.939758%, 10.978699%, 14.118958%) = #ED1C24, so the
     swoosh in the header and every accent mark on the page are now one red. */
  /* The literals are the fallback. The layout overrides --ccm-accent from the
     theme's Accent colour setting, and the hover shade is derived from it so a
     rebrand is one field rather than two that can drift apart. */
  --ccm-accent:       #ED1C24;
  --ccm-accent-hover: #EF333A;
  --ccm-accent-hover: color-mix(in srgb, var(--ccm-accent) 82%, #fff);

  /* Families */
  --ccm-display: 'Anton', 'Arial Black', sans-serif;
  --ccm-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --ccm-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Rhythm — the mockup is built on a 64px gutter */
  --ccm-gutter:  64px;
  --ccm-band:    88px;
  --ccm-header-h: 76px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ccm-ground);
  color: var(--ccm-text);
  font-family: var(--ccm-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ccm-accent); text-decoration: none; }
a:hover { color: var(--ccm-accent-hover); }
img { max-width: 100%; display: block; }
::selection { background: var(--ccm-accent); color: var(--ccm-ground); }

input, textarea, button, select { font-family: var(--ccm-body); }

/* --- Eyebrow: mono, wide-tracked, the design's recurring label ----------- */
.ccm-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ccm-mono);
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--ccm-muted); text-transform: uppercase;
}
.ccm-eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: var(--ccm-accent); flex: none;
}

/* --- Headings ------------------------------------------------------------ */
.ccm-h1, .ccm-h2 {
  margin: 0;
  font-family: var(--ccm-display);
  text-transform: uppercase;
  font-weight: 400;
}
.ccm-h1 { font-size: clamp(48px, 9vw, 104px); line-height: 0.86; letter-spacing: -0.01em; }
.ccm-h2 { font-size: clamp(30px, 4.5vw, 40px); line-height: 0.95; }

/* --- Bands: every section is a full-bleed row with a hairline ------------- */
.ccm-band {
  padding: var(--ccm-band) var(--ccm-gutter);
  border-bottom: 1px solid var(--ccm-rule);
}

/* --- Buttons ------------------------------------------------------------- */
.ccm-btn {
  display: inline-block;
  padding: 16px 28px;
  /* transparent border, not none — ghost buttons carry a real 1px border and
     without this the filled variants sit 2px shorter wherever they share a row */
  border: 1px solid transparent; cursor: pointer;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ccm-btn--solid   { background: var(--ccm-text); color: var(--ccm-ground); }
.ccm-btn--solid:hover { background: var(--ccm-accent-hover); color: #fff; }
.ccm-btn--accent  { background: var(--ccm-accent); color: #fff; }
.ccm-btn--accent:hover { background: var(--ccm-accent-hover); color: #fff; }
.ccm-btn--ghost   { background: transparent; color: var(--ccm-text); border: 1px solid var(--ccm-rule-lift); }
.ccm-btn--ghost:hover { border-color: var(--ccm-text); color: var(--ccm-text); }

/* --- Header -------------------------------------------------------------- */
.ccm-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding: 0 var(--ccm-gutter);
  height: var(--ccm-header-h);
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ccm-rule);
}
.ccm-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* The logo is the dark-theme knockout — its wordmark is white, so it only
   works on the dark ground. Do not reuse it on a light surface. */
.ccm-brand__logo { height: 46px; width: auto; flex: none; display: block; }

.ccm-nav { display: flex; align-items: center; gap: 4px; }
.ccm-nav__link {
  padding: 10px 11px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ccm-muted);
  border-bottom: 2px solid transparent;
}
.ccm-nav__link:hover { color: var(--ccm-text); }
.ccm-nav__link.is-active { color: var(--ccm-text); border-bottom-color: var(--ccm-accent); }

/* --- Hero ---------------------------------------------------------------- */
.ccm-hero {
  position: relative; min-height: 660px;
  display: grid; overflow: hidden;
  background: var(--ccm-ground);
  border-bottom: 1px solid var(--ccm-rule);
}
.ccm-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 80% 40%;
  /* Stacked and cross-faded. Hidden slides stay at 0 rather than display:none
     so the browser keeps them decoded and the swap has nothing to wait for. */
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}
.ccm-hero__img.is-active { opacity: 1; }
/* With JS off or one slide only, the first image must still be visible —
   without this the hero would render as an empty black band. */
.ccm-hero__img:first-of-type { opacity: 1; }
.ccm-hero.is-rotating .ccm-hero__img:first-of-type:not(.is-active) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ccm-hero__img { transition: none; }
}
/* At desktop widths the photo is exactly as wide as the hero — 2400x1600
   covers to 1440x960 — so there is no horizontal slack and object-position's
   X does nothing at all; only the Y crop is live. Nudge the image across
   instead. The strip this leaves on the left is the hero's own background,
   the same colour as the scrim sitting at 0.95 over it, so no seam shows.
   Narrow viewports crop horizontally and do have slack, so they keep
   object-position and must not get this. */
@media (min-width: 901px) {
  .ccm-hero__img { transform: translateX(7%); }
}
.ccm-hero__scrim {
  position: absolute; inset: 0;
  /* Holds ~0.88 across the left half, where the headline and lede sit, then
     falls to nothing by 80% so the car is genuinely visible rather than
     showing through a haze. The old ramp started fully opaque and never
     cleared, so the right side stayed veiled at 0.1 the whole way across. */
  background: linear-gradient(100deg,
    rgba(11,11,13,0.95) 0%,
    rgba(11,11,13,0.88) 30%,
    rgba(11,11,13,0.34) 56%,
    rgba(11,11,13,0) 80%);
}
.ccm-hero__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ccm-accent); }
.ccm-hero__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 28px; padding: var(--ccm-band) var(--ccm-gutter);
  max-width: 720px;
}
.ccm-hero__lede { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.55; color: var(--ccm-text-soft); }
.ccm-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Stat strip ---------------------------------------------------------- */

/* --- Stat strip ---------------------------------------------------------- */
/* Still in use on the Partners page ("39 races", "8 cars in the fleet") even
   though the home page no longer carries one. */
.ccm-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ccm-rule);
}
.ccm-stat {
  padding: 36px 40px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--ccm-rule);
}
.ccm-stat:last-child { border-right: none; }
.ccm-stat__value { font-family: var(--ccm-display); font-size: 44px; line-height: 1; }
.ccm-stat__label { font-family: var(--ccm-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ccm-muted); }

/* --- Driver roster + driver page ----------------------------------------- */
.ccm-roster {
  display: grid;
  /* auto-fit, not a fixed 3: with two drivers a fixed grid left a third,
     empty cell showing the container's rule colour, which read as a broken
     card. auto-fit collapses the empty track so the row is filled. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--ccm-rule); border: 1px solid var(--ccm-rule);
}
.ccm-driver {
  background: var(--ccm-ground); color: inherit; display: block;
  transition: background 140ms ease;
}
.ccm-driver:hover { background: var(--ccm-panel); }
.ccm-driver__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.ccm-driver__photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Portraits are taller than the 4:3 card, so ~40% of the frame is cropped.
     Centring that crop cuts through the subject's head — these are people
     photographed head-and-shoulders, so bias the kept band upwards. */
  object-position: center 10%;
}
.ccm-driver__photo--empty {
  background:
    repeating-linear-gradient(135deg,
      var(--ccm-panel) 0 12px, var(--ccm-panel-alt, #17171c) 12px 24px);
}
.ccm-driver__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.ccm-driver__name {
  font-family: var(--ccm-display); font-size: 24px; line-height: 1;
  text-transform: uppercase;
}
.ccm-driver__role {
  font-family: var(--ccm-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ccm-accent);
}
.ccm-driver__summary { font-size: 14px; line-height: 1.55; color: var(--ccm-muted); }

.ccm-socials--driver { margin-top: 24px; }

.ccm-driverstats {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ccm-rule);
}
.ccm-driverstat { display: flex; flex-direction: column; gap: 6px; }
.ccm-driverstat b { font-family: var(--ccm-display); font-size: 34px; line-height: 1; font-weight: 400; }
.ccm-driverstat span {
  font-family: var(--ccm-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ccm-muted);
}

/* --- Split band: sticky-ish label column + content ----------------------- */
.ccm-split {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 56px;
}
.ccm-split__label { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ccm-split__note  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ccm-muted); }

/* --- Schedule rows ------------------------------------------------------- */
.ccm-race {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.6fr) minmax(0, 1fr) 56px;
  align-items: baseline; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--ccm-rule);
}
.ccm-race__date   { font-family: var(--ccm-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ccm-accent); }
.ccm-race__track  { font-size: 19px; font-weight: 600; }
.ccm-race__event  { font-size: 14px; color: var(--ccm-muted); }
.ccm-race__result { font-family: var(--ccm-mono); font-size: 12px; color: var(--ccm-muted); text-align: right; }

/* --- Cards --------------------------------------------------------------- */
.ccm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ccm-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ccm-rule);
  transition: border-color .15s ease;
}
.ccm-card:hover { border-color: var(--ccm-rule-lift); }
.ccm-card__img { height: 180px; background-color: var(--ccm-panel); background-size: cover; background-position: 50% 50%; }
.ccm-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ccm-card__date { font-family: var(--ccm-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ccm-muted); }
.ccm-card__title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--ccm-text); }

.ccm-band__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 40px; flex-wrap: wrap;
}
.ccm-more {
  font-family: var(--ccm-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ccm-accent);
}

/* --- Footer -------------------------------------------------------------- */
.ccm-footer {
  padding: 56px var(--ccm-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--ccm-rule);
  font-size: 13px; color: var(--ccm-muted);
}
.ccm-footer__logo { height: 46px; width: auto; display: block; }

/* --- Responsive: the mockup is desktop-only, so these are my calls -------- */
@media (max-width: 900px) {
  :root { --ccm-gutter: 28px; --ccm-band: 56px; }
  .ccm-split  { grid-template-columns: 1fr; gap: 28px; }
  .ccm-cards  { grid-template-columns: 1fr; }
  .ccm-stats  { grid-template-columns: repeat(2, 1fr); }
  .ccm-stat:nth-child(2n) { border-right: none; }
  .ccm-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ccm-rule); }
  .ccm-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccm-hero   { min-height: 520px; }
  /* The desktop scrim runs left-to-right, which works because the copy sits in
     the left column. Narrow viewports give the copy the full width, so that
     same ramp leaves the lede sitting on the brightest part of the car. Swap
     to a vertical ramp: heavy through the text, easing off below the buttons
     so the car is still visible where nothing is written over it. */
  .ccm-hero__scrim {
    background: linear-gradient(180deg,
      rgba(11,11,13,0.94) 0%,
      rgba(11,11,13,0.90) 62%,
      rgba(11,11,13,0.48) 100%);
  }
  .ccm-race   { grid-template-columns: 64px 1fr; row-gap: 6px; }
  .ccm-race__event, .ccm-race__result { grid-column: 2; text-align: left; }
  .ccm-header { padding: 0 20px; gap: 16px; }
  .ccm-brand__logo { height: 36px; }
  .ccm-footer__logo { height: 38px; }
  .ccm-nav    { display: none; }
}

/* ==========================================================================
   Blog — News listing, post cards, article body
   ========================================================================== */

.ccm-card a { color: inherit; }
.ccm-card__excerpt {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ccm-muted);
}
.ccm-card__img--empty {
  background:
    repeating-linear-gradient(135deg,
      var(--ccm-panel) 0 12px, var(--ccm-panel-alt) 12px 24px);
}

/* Pagination ------------------------------------------------------------- */
.ccm-pager {
  display: flex; align-items: center; gap: 24px;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--ccm-rule);
}
.ccm-pager__link {
  font-family: var(--ccm-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ccm-accent);
}
.ccm-pager__count {
  font-family: var(--ccm-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--ccm-muted);
  margin-left: auto;
}

/* Single post ------------------------------------------------------------ */
.ccm-post-hero {
  height: clamp(240px, 42vh, 460px);
  background-size: cover; background-position: 50% 50%;
  background-color: var(--ccm-panel);
  border-bottom: 1px solid var(--ccm-rule);
}
.ccm-post { border-bottom: none; max-width: 1200px; }
.ccm-post__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ccm-tag {
  padding: 6px 12px;
  border: 1px solid var(--ccm-rule-lift);
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ccm-muted);
}
.ccm-tag:hover { border-color: var(--ccm-accent); color: var(--ccm-accent); }

/* Article body — the one place long-form prose lives ---------------------- */
.ccm-prose {
  margin-top: 40px;
  max-width: 68ch;
  font-size: 17px; line-height: 1.7; color: var(--ccm-text-soft);
}
.ccm-prose > * + * { margin-top: 1.2em; }
.ccm-prose h2, .ccm-prose h3 {
  font-family: var(--ccm-display); text-transform: uppercase;
  color: var(--ccm-text); font-weight: 400; line-height: 1.05;
  margin-top: 1.8em;
}
.ccm-prose h2 { font-size: 30px; }
.ccm-prose h3 { font-size: 22px; }
.ccm-prose a { color: var(--ccm-accent); text-decoration: underline; text-underline-offset: 3px; }
.ccm-prose img { border: 1px solid var(--ccm-rule); }
.ccm-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ccm-accent);
  color: var(--ccm-text); font-size: 19px;
}
.ccm-prose code {
  font-family: var(--ccm-mono); font-size: 0.88em;
  background: var(--ccm-panel); padding: 2px 6px;
}
.ccm-prose ul, .ccm-prose ol { padding-left: 1.3em; }
.ccm-prose li + li { margin-top: 0.4em; }

/* ==========================================================================
   Tailor content — team, partnership tiers, sponsors
   ========================================================================== */

/* Crew grid --------------------------------------------------------------- */
.ccm-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ccm-crew__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ccm-rule);
}
.ccm-crew__photo {
  height: 240px;
  background-color: var(--ccm-panel);
  background-size: cover; background-position: 50% 30%;
}
.ccm-crew__body { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ccm-crew__name { font-size: 19px; font-weight: 600; }
.ccm-crew__role {
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ccm-accent);
}
.ccm-crew__bio { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ccm-muted); }
.ccm-crew__bio p { margin: 0; }

/* Partnership tiers ------------------------------------------------------- */
.ccm-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ccm-tier {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px; border: 1px solid var(--ccm-rule);
  background: var(--ccm-panel-alt);
}
/* entry level reads as the quieter way in — no filled panel */
.ccm-tier--entry { background: transparent; }
/* benefit lists differ in length, so pin the button to the bottom of the card
   and the row of CTAs lines up across all four tiers */
.ccm-tier .ccm-btn { margin-top: auto; text-align: center; }
.ccm-tier__name {
  font-family: var(--ccm-display); font-size: 23px;
  text-transform: uppercase; line-height: 1;
}
.ccm-tier__price {
  font-family: var(--ccm-mono); font-size: 12px;
  letter-spacing: 0.16em; color: var(--ccm-accent);
}
.ccm-tier__list {
  margin: 8px 0 24px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.ccm-tier__list li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.5; color: var(--ccm-text-soft);
}
.ccm-tier__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 2px; background: var(--ccm-accent);
}

/* Sponsor wall ------------------------------------------------------------ */
.ccm-sponsors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ccm-rule);
  border-left: 1px solid var(--ccm-rule);
}
.ccm-sponsor {
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; padding: 24px;
  border-right: 1px solid var(--ccm-rule);
  border-bottom: 1px solid var(--ccm-rule);
  transition: background .15s ease;
}
a.ccm-sponsor:hover { background: var(--ccm-panel); }
.ccm-sponsor img { max-height: 64px; width: auto; object-fit: contain; }
.ccm-sponsor__name {
  font-family: var(--ccm-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ccm-muted); text-align: center;
}
a.ccm-sponsor:hover .ccm-sponsor__name { color: var(--ccm-text); }

@media (max-width: 900px) {
  .ccm-crew     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ccm-tiers    { grid-template-columns: 1fr; }
  .ccm-sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ccm-crew { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact — layout and form controls (SmallContactForm)
   ========================================================================== */

.ccm-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
  border-bottom: none;
}
.ccm-contact__rows { margin: 40px 0 0; display: flex; flex-direction: column; gap: 0; }
.ccm-contact__rows > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px; padding: 18px 0;
  border-top: 1px solid var(--ccm-rule);
}
.ccm-contact__rows dt {
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-contact__rows dd { margin: 0; font-size: 16px; color: var(--ccm-text); }
.ccm-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }

/* Form controls ----------------------------------------------------------- */
.ccm-form { padding: 36px; border: 1px solid var(--ccm-rule); background: var(--ccm-panel-alt); }
.ccm-form label {
  display: block; margin-bottom: 8px;
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-form input[type="text"],
.ccm-form input[type="email"],
.ccm-form input[type="tel"],
.ccm-form textarea,
.ccm-form select {
  width: 100%; padding: 14px 16px;
  background: var(--ccm-ground);
  border: 1px solid var(--ccm-rule);
  color: var(--ccm-text); font-size: 15px;
  transition: border-color .15s ease;
}
.ccm-form input:focus, .ccm-form textarea:focus, .ccm-form select:focus {
  outline: none; border-color: var(--ccm-accent);
}
.ccm-form input::placeholder, .ccm-form textarea::placeholder { color: var(--ccm-muted-dim); }
.ccm-form textarea { min-height: 150px; resize: vertical; }
.ccm-form > form > div,
.ccm-form .form-group { margin-bottom: 22px; }

.ccm-form button[type="submit"],
.ccm-form input[type="submit"] {
  padding: 16px 28px; border: none; cursor: pointer;
  background: var(--ccm-accent); color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .15s ease;
}
.ccm-form button[type="submit"]:hover { background: var(--ccm-accent-hover); }

/* Honeypot — the plugin already hides ._protect-wrapper inline, but pin it
   here too so a future CSS change can never expose the trap field. The field
   is named _protect-<alias>, not "antispam". */
.ccm-form ._protect-wrapper,
.ccm-form [name^="_protect-"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* Validation + status messages -------------------------------------------- */
.ccm-form .is-invalid input,
.ccm-form .is-invalid textarea { border-color: var(--ccm-accent); }
.ccm-form .text-danger, .ccm-form .help-block, .ccm-form .invalid-feedback {
  display: block; margin-top: 6px;
  font-family: var(--ccm-mono); font-size: 11px; color: var(--ccm-accent);
}
.ccm-form .alert, .ccm-form .scf-message {
  padding: 16px 20px; margin-bottom: 24px;
  border-left: 3px solid var(--ccm-accent);
  background: var(--ccm-panel); font-size: 15px; color: var(--ccm-text);
}

@media (max-width: 900px) {
  .ccm-contact { grid-template-columns: 1fr; gap: 40px; }
  .ccm-form { padding: 24px; }
}

/* ==========================================================================
   Gallery — 4:3 grid and lightbox
   ========================================================================== */

.ccm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.ccm-shot {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border: 1px solid var(--ccm-rule);
  background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: border-color .15s ease;
}
.ccm-shot:hover  { border-color: var(--ccm-rule-lift); }
.ccm-shot:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; }
.ccm-shot__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  background-color: var(--ccm-panel);
}
.ccm-shot__caption {
  padding: 14px 16px;
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-shot:hover .ccm-shot__caption { color: var(--ccm-text); }

/* Lightbox ---------------------------------------------------------------- */
.ccm-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 40px;
  background: rgba(11, 11, 13, 0.96);
}
.ccm-lightbox[hidden] { display: none; }
.ccm-lightbox__img {
  max-width: min(1100px, 82vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border: 1px solid var(--ccm-rule);
}
.ccm-lightbox__caption {
  position: absolute; bottom: 28px; left: 0; right: 0;
  margin: 0; text-align: center;
  font-family: var(--ccm-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-lightbox__close,
.ccm-lightbox__nav {
  flex: none; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ccm-rule-lift);
  color: var(--ccm-text); cursor: pointer;
  font-size: 26px; line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.ccm-lightbox__close:hover,
.ccm-lightbox__nav:hover { border-color: var(--ccm-accent); background: var(--ccm-accent); color: #fff; }
.ccm-lightbox__close:focus-visible,
.ccm-lightbox__nav:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; }
.ccm-lightbox__close { position: absolute; top: 28px; right: 28px; font-size: 30px; }

@media (max-width: 900px) {
  .ccm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ccm-lightbox { padding: 16px; gap: 6px; }
  .ccm-lightbox__img { max-width: 88vw; max-height: 70vh; }
  .ccm-lightbox__close, .ccm-lightbox__nav { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  .ccm-gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shop — catalog, product page, cart, checkout
   ========================================================================== */

.ccm-shopnav { display: flex; gap: 8px; flex-wrap: wrap; }
.ccm-tag.is-active { border-color: var(--ccm-accent); color: var(--ccm-accent); }

/* Product grid ------------------------------------------------------------ */
.ccm-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ccm-product { border: 1px solid var(--ccm-rule); transition: border-color .15s ease; }
.ccm-product:hover { border-color: var(--ccm-rule-lift); }
.ccm-product a { display: flex; flex-direction: column; color: inherit; }
.ccm-product__img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: 50% 50%;
  background-color: var(--ccm-panel);
}
/* The design shows a striped placeholder reading "Product photo" — keep it,
   so a product with no image still looks deliberate. */
.ccm-product__img--empty {
  background: repeating-linear-gradient(135deg,
    var(--ccm-panel) 0 14px, #1b1b21 14px 28px);
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ccm-muted-dim);
}
.ccm-product__body { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ccm-product__name  { font-size: 18px; font-weight: 600; }
.ccm-product__note  { font-size: 13px; color: var(--ccm-muted); }
.ccm-product__price { margin-top: 8px; font-family: var(--ccm-display); font-size: 26px; }

/* Product detail ---------------------------------------------------------- */
.ccm-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ccm-pdp__img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ccm-rule);
  background-size: cover; background-position: 50% 50%;
  background-color: var(--ccm-panel);
}
.ccm-pdp__price { font-family: var(--ccm-display); font-size: 40px; margin: 12px 0 20px; }
.ccm-pdp__form { display: flex; flex-direction: column; gap: 18px; max-width: 320px; margin-top: 28px; }
.ccm-field { display: flex; flex-direction: column; gap: 8px; }
.ccm-field > span {
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-field select, .ccm-field input {
  padding: 14px 16px;
  background: var(--ccm-ground); border: 1px solid var(--ccm-rule);
  color: var(--ccm-text); font-size: 15px;
}
.ccm-field select:focus, .ccm-field input:focus { outline: none; border-color: var(--ccm-accent); }

/* Cart -------------------------------------------------------------------- */
.ccm-cartlist { border-top: 1px solid var(--ccm-rule); }
.ccm-cartrow {
  display: grid; grid-template-columns: minmax(0,1fr) 110px 120px 48px;
  align-items: center; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--ccm-rule);
}
.ccm-cartrow__opts { display: block; margin-top: 4px; font-family: var(--ccm-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ccm-muted); }
.ccm-cartrow__qty input { width: 100%; padding: 10px 12px; background: var(--ccm-ground); border: 1px solid var(--ccm-rule); color: var(--ccm-text); }
.ccm-cartrow__price { text-align: right; font-family: var(--ccm-display); font-size: 20px; }
.ccm-cartrow__remove button {
  width: 36px; height: 36px; cursor: pointer;
  background: transparent; border: 1px solid var(--ccm-rule);
  color: var(--ccm-muted); font-size: 18px;
}
.ccm-cartrow__remove button:hover { border-color: var(--ccm-accent); color: var(--ccm-accent); }
.ccm-carttotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 0; font-size: 16px;
}
.ccm-carttotal strong { font-family: var(--ccm-display); font-size: 32px; }

/* Checkout ---------------------------------------------------------------- */
.ccm-checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ccm-summary { padding: 32px; border: 1px solid var(--ccm-rule); background: var(--ccm-panel-alt); }
.ccm-summary__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--ccm-rule);
  font-size: 14px; color: var(--ccm-text-soft);
}
.ccm-summary__row--total { border-bottom: none; padding-top: 18px; font-size: 16px; color: var(--ccm-text); }
.ccm-summary__row--total strong { font-family: var(--ccm-display); font-size: 26px; }

@media (max-width: 1100px) { .ccm-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ccm-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ccm-pdp, .ccm-checkout { grid-template-columns: 1fr; gap: 28px; }
  .ccm-cartrow { grid-template-columns: minmax(0,1fr) 84px 48px; row-gap: 8px; }
  .ccm-cartrow__price { grid-column: 2 / 4; text-align: left; }
}
@media (max-width: 560px) { .ccm-products { grid-template-columns: 1fr; } }

/* Checkout form ----------------------------------------------------------- */
.ccm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ccm-form .ccm-field { margin-bottom: 16px; }
.ccm-radio {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--ccm-rule); cursor: pointer;
  font-size: 15px; color: var(--ccm-text-soft);
}
.ccm-radio:hover { border-color: var(--ccm-rule-lift); }
.ccm-radio input { accent-color: var(--ccm-accent); }
.ccm-radio em { color: var(--ccm-muted); font-style: normal; font-size: 13px; }
.ccm-radio:has(input:checked) { border-color: var(--ccm-accent); color: var(--ccm-text); }
@media (max-width: 560px) { .ccm-grid2, .ccm-roster { grid-template-columns: 1fr; } }

/* ==========================================================================
   About — portrait split and career timeline
   ========================================================================== */

/* The About eyebrow is accent-coloured in the design, unlike the muted
   default used elsewhere. */
.ccm-eyebrow--accent { color: var(--ccm-accent); }
.ccm-eyebrow--accent::before { display: none; }

.ccm-about {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ccm-rule);
}
.ccm-about__photo { min-height: 520px; overflow: hidden; background: var(--ccm-panel); }
.ccm-about__photo img {
  width: 100%; height: 100%; min-height: 520px;
  object-fit: cover; object-position: 50% 25%;
}
.ccm-about__copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: 24px; padding: 80px var(--ccm-gutter);
}
.ccm-about__heading { font-size: clamp(40px, 6vw, 64px); line-height: 0.9; }
.ccm-about__bio { display: flex; flex-direction: column; gap: 20px; }
.ccm-about__bio p {
  margin: 0; font-size: 17px; line-height: 1.65;
  color: var(--ccm-text-soft); text-wrap: pretty;
}

/* Career timeline --------------------------------------------------------- */
.ccm-milestone {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: 28px; padding: 26px 0;
  border-top: 1px solid var(--ccm-rule);
}
.ccm-milestone__year {
  font-family: var(--ccm-display); font-size: 26px;
  color: var(--ccm-accent); line-height: 1;
}
.ccm-milestone__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ccm-milestone__title { font-size: 19px; font-weight: 600; }
.ccm-milestone__detail { font-size: 15px; line-height: 1.6; color: var(--ccm-muted); }

@media (max-width: 900px) {
  .ccm-about { grid-template-columns: 1fr; }
  .ccm-about__photo, .ccm-about__photo img { min-height: 340px; }
  .ccm-about__copy { padding: 48px var(--ccm-gutter); }
  .ccm-milestone { grid-template-columns: 60px minmax(0, 1fr); gap: 18px; }
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */

/* Hidden on desktop; the desktop nav handles that breakpoint. */
.ccm-burger { display: none; }

/* Above the breakpoint the panel is gone and the scroll lock does not apply,
   whatever state JS is in. This is deliberate: it means resizing to desktop
   with the menu open can never leave the page frozen with no way to unlock
   it, without depending on a resize or matchMedia event firing. */
.ccm-mobilenav { display: none; }
.ccm-mobilenav[hidden] { display: none; }

@media (max-width: 900px) {
  .ccm-burger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; flex: none;
    width: 44px; height: 44px;          /* 44px: comfortable touch target */
    padding: 0 10px; cursor: pointer;
    background: transparent; border: 1px solid var(--ccm-rule);
  }
  .ccm-burger:hover { border-color: var(--ccm-rule-lift); }
  .ccm-burger:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; }
  .ccm-burger__bar {
    display: block; height: 2px; width: 100%;
    background: var(--ccm-text);
    transition: transform .18s ease, opacity .18s ease;
  }
  /* burger morphs into a cross while the panel is open */
  .ccm-burger.is-open .ccm-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ccm-burger.is-open .ccm-burger__bar:nth-child(2) { opacity: 0; }
  .ccm-burger.is-open .ccm-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* scroll lock lives inside the media query on purpose — see above */
  body.ccm-navlock { overflow: hidden; }

  .ccm-mobilenav {
    display: flex;
    position: fixed; z-index: 49;
    top: var(--ccm-header-h); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: 24px var(--ccm-gutter) 40px;
    background: var(--ccm-ground);
    border-top: 1px solid var(--ccm-rule);
    overflow-y: auto;
  }
  .ccm-mobilenav__list { display: flex; flex-direction: column; }
  .ccm-mobilenav__link {
    padding: 20px 0;
    border-bottom: 1px solid var(--ccm-rule);
    font-family: var(--ccm-display); font-size: 30px;
    text-transform: uppercase; letter-spacing: 0.01em;
    color: var(--ccm-text);
  }
  .ccm-mobilenav__link.is-active { color: var(--ccm-accent); }
  .ccm-mobilenav__link:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: -2px; }
  .ccm-mobilenav__cta { margin-top: 32px; text-align: center; }
}

/* ==========================================================================
   Order confirmation
   ========================================================================== */

.ccm-cartrow--receipt { grid-template-columns: minmax(0, 1fr) 60px 120px; }
.ccm-cartrow--receipt .ccm-cartrow__qty {
  font-family: var(--ccm-mono); font-size: 13px; color: var(--ccm-muted);
}

.ccm-receipt-totals { margin-top: 28px; }
.ccm-receipt-totals > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0; font-size: 15px; color: var(--ccm-text-soft);
}
.ccm-receipt-totals__grand {
  border-top: 1px solid var(--ccm-rule);
  margin-top: 8px; padding-top: 20px !important;
  align-items: baseline; color: var(--ccm-text) !important;
}
.ccm-receipt-totals__grand strong { font-family: var(--ccm-display); font-size: 32px; }

.ccm-receipt-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--ccm-rule);
}
.ccm-receipt-meta h3 {
  margin: 0 0 12px;
  font-family: var(--ccm-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ccm-muted);
}
.ccm-receipt-meta p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ccm-text); }
.ccm-receipt-instructions {
  margin-top: 12px; padding: 14px 16px;
  border-left: 3px solid var(--ccm-accent);
  background: var(--ccm-panel);
  font-size: 14px; line-height: 1.6; color: var(--ccm-text-soft);
}
.ccm-receipt-instructions p { margin: 0; font-size: 14px; }

@media (max-width: 900px) {
  /* keep name and price on one row; the qty tucks under the name rather than
     orphaning the price onto its own line */
  .ccm-cartrow--receipt {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; row-gap: 4px;
  }
  .ccm-cartrow--receipt .ccm-cartrow__qty { grid-column: 1; grid-row: 2; }
  .ccm-cartrow--receipt .ccm-cartrow__price {
    grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 18px;
  }
  .ccm-receipt-meta { grid-template-columns: 1fr; gap: 28px; }
}


/* ==========================================================================
   Partner page — weekend inclusions and partner use-cases
   ========================================================================== */

/* 1px gap over a rule-coloured bed gives hairline dividers without borders
   doubling up between cells */
.ccm-weekend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--ccm-rule);
}
.ccm-wk {
  padding: 26px 28px; background: var(--ccm-ground);
  display: flex; flex-direction: column; gap: 10px;
}
.ccm-wk__label {
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ccm-accent);
}
.ccm-wk p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ccm-text-soft); }

.ccm-uses {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px;
}
.ccm-uses li {
  position: relative; padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--ccm-rule);
  font-size: 16px; line-height: 1.45; color: var(--ccm-text-soft);
}
.ccm-uses li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 8px; height: 2px; background: var(--ccm-accent);
}

@media (max-width: 1180px) { .ccm-tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .ccm-weekend, .ccm-uses { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .ccm-tiers { grid-template-columns: 1fr; } }

/* Social icons ------------------------------------------------------------
   Square hairline chips matching the burger button, so the set reads as one
   family. Icons are currentColor, so hover recolours the artwork with no
   second asset. */
.ccm-social {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ccm-rule);
  color: var(--ccm-muted);
  transition: color .15s ease, border-color .15s ease;
}
.ccm-social:hover { color: var(--ccm-text); border-color: var(--ccm-rule-lift); }
.ccm-social:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; }
.ccm-social svg { width: 19px; height: 19px; display: block; }
/* a network with no icon yet still gets a readable chip */
.ccm-social__text {
  padding: 0 12px;
  font-family: var(--ccm-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.ccm-social:has(.ccm-social__text) { width: auto; }

.ccm-socials--footer { margin: 0; }
@media (max-width: 900px) {
  .ccm-footer { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* shipping line before a method has been chosen */
.ccm-summary__pending { color: var(--ccm-muted); font-size: 13px; }