/* ============================================================
   Chewtoy's Dugout — home · "Night Pitch" (2026-09)
   index.php only. Layout for the hero grid, route cards, steps and the
   trust strip; components.css does the rest. Breakpoints: 1000px (2-up)
   and 640px (phone).

   The team tiles and the Standard-vs-Blitz compare pair left the page on
   2026-09-16 (owner) and their rules went with them. `.ctd-team*` stays in
   components.css and `--fx-boss(-edge)` in tokens.css — both are library
   pieces, and nothing on the site renders either one now.
   ============================================================ */

/* ---------- hero ---------- */
/* The moon: a violet bloom off the top-right, behind everything. It is the
   only ambient light in the design and it never falls on body copy - the
   gradient is transparent by 72%, well clear of the lede. */
/* overflow-hidden is load-bearing: ctd-breathe scales the bloom to 1.06, and
   on a full-bleed section that pushes ~3% of the viewport width past the
   right edge and gives the whole document a horizontal scrollbar. */
.ctd-home__hero { position: relative; padding-block: var(--s-12); isolation: isolate; overflow: hidden; }
.ctd-home__hero::before {
  content: ""; position: absolute; inset: calc(-1 * var(--s-12)) 0 0; z-index: -1;
  background: var(--fx-moon); pointer-events: none;
}
/* ---- alignment ----
   THE HERO HAD NO SHARED HORIZONTAL LINE IN IT. The panel is the tall thing in
   this row, so it sets the track height and `align-items: center` floated the
   copy in the middle of it: measured at 1440, the copy began 95px below the
   panel's top edge and ended 94px above its bottom. Two columns whose tops AND
   bottoms both disagree is what reads as off kilter — nothing in the
   composition is measuring against anything else, so every edge looks like a
   near miss.

   Stretch instead, and let the copy carry the alignment: the eyebrow sits on
   the panel's top edge, the price footnote on its bottom edge, and the slack
   goes to one place — between the lede and the buttons, where a hero wants it.
   That is also the composition: the statement at the top of the column, the
   action at the foot of it, air in between. */
/* THE COPY COLUMN IS THE BIGGER HALF NOW. `1fr 1.05fr` split the hero almost
   exactly down the middle, which is the one ratio that reads as indecisive:
   neither side leads, so the eye has no idea which of the two it is meant to
   start with. The headline leads. It also buys the h1 the width it needs to be
   a hero size at all — at 56px "BUILD YOUR TEAM." already ran to 488 of the
   old column's 531, so the type could not grow until the column did. */
.ctd-home__hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--s-12); align-items: stretch; }

/* ---- rhythm ----
   One --s-5 gap repeated five times gave every block in the column the same
   weight, so the eyebrow floated free of the headline it labels and the
   buttons read as another paragraph. Spelled out per block instead: an eyebrow
   BELONGS to its headline and sits tight to it, the lede is its own thought,
   and the action gets air on both sides. Margins rather than a flex gap,
   because `auto` on a margin is what does the bottom alignment. */
.ctd-home__hero-copy { gap: 0; }
.ctd-home__hero-copy > .ctd-eyebrow { margin: 0; }
/* Bigger than --fs-56, and only here: this is the one headline on the site
   that has a whole column to itself and nothing above it. The line-height goes
   under 1 with it — at 68px the default 1.05 opens a gap between the two lines
   that reads as two headings rather than one. */
.ctd-home__hero-copy > .ctd-h1 {
  margin: var(--s-3) 0 0;
  font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 0.97;
}
/* 46ch, and it is arithmetic rather than taste: at the column's own width the
   lede broke three lines with "5 days." alone on the third. */
.ctd-home__hero-copy > .ctd-lede { margin: var(--s-5) 0 0; max-width: 46ch; text-wrap: pretty; }
.ctd-home__cta { gap: var(--s-3); margin-top: auto; padding-top: var(--s-8); }
.ctd-home__hero-copy > .ctd-small { margin: var(--s-5) 0 0; }
.ctd-home__schematic { padding: var(--s-8); }

/* ---------- hero feature carousel ---------- */
/* The strip is a real scroll container with mandatory snap, so swipe, trackpad
   and js/hero-carousel.js's scrollTo all land on the same positions and the
   browser does the physics. Height is the thing that has to be nailed down:
   six slides of different art in one flex row would otherwise resize the hero
   every time it advanced. .ctd-hero-slide__art has a FIXED height and the
   drawings letterbox inside it (viewBox + preserveAspectRatio), so every slide
   is exactly as tall as every other one. */
/* min-width: 0 is load-bearing, not defensive. The panel is a GRID item, so
   its automatic minimum size is its min-content width — and the widest slide
   art reports ~530px of that. On a phone the single-column grid track then
   sized itself to 565px inside a 375px viewport and clipped the whole hero,
   headline and buttons included. Zero lets the column win. */
.ctd-hero-carousel { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.ctd-hero-carousel__track {
  display: flex; gap: var(--s-8); min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* contain: a swipe past the last slide must not chain into the page scroll
     (or, on a trackpad, into the browser's back gesture). */
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* the dots are the affordance */
  border-radius: var(--r-1);
}
.ctd-hero-carousel__track::-webkit-scrollbar { display: none; }
.ctd-hero-carousel__track:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--s-2); }

.ctd-hero-slide {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--s-4);
}
/* The art sets the panel's height, and the panel sets the hero's: at 300px the
   right column ran 566 tall against 350 of copy, and the 216px of slack had
   nowhere to go but a hole in the middle of the left column. Trimmed to the
   size the schematics are still fully legible at, which closes most of it. */
.ctd-hero-slide__art { height: clamp(210px, 18vw, 262px); display: flex; align-items: center; justify-content: center; }
.ctd-hero-slide__art > figure { margin: 0; width: 100%; height: 100%; }
/* width AND height at 100%: an SVG with a viewBox scales to fit and centres
   itself, which is what keeps a 200x120 cross-section and a 120x120 base plan
   the same height without a per-slide rule. */
.ctd-hero-slide__art svg { width: 100%; height: 100%; }
.ctd-hero-slide__photo { height: 100%; }
.ctd-hero-slide__copy { display: flex; flex-direction: column; gap: var(--s-2); }
.ctd-hero-slide__title { font-size: var(--fs-20); }
.ctd-hero-slide__text { color: var(--text-2); margin: 0; }
.ctd-hero-slide__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start; text-decoration: none; color: var(--link); font-weight: 600;
}
.ctd-hero-slide__cta:hover { color: var(--link-hover); text-decoration: underline; }
.ctd-hero-slide__cta .ctd-i { transition: transform var(--t-fast) var(--ease); }
.ctd-hero-slide__cta:hover .ctd-i { transform: translateX(3px); }

.ctd-home__exploded-plain { display: none; }

.ctd-hero-carousel__controls { display: flex; align-items: center; gap: var(--s-2); }
.ctd-hero-carousel__dots { display: flex; align-items: center; gap: var(--s-1); margin-inline: auto; }
/* The hit area is 32px; the mark inside it is 8px. Anything smaller than the
   former is a miss on a phone, anything bigger than the latter is a bullet. */
.ctd-hero-carousel__dot {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; background: none; border-radius: var(--r-1);
}
.ctd-hero-carousel__mark {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  border: var(--bw) solid var(--line-2); background: var(--surface-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ctd-hero-carousel__dot:hover .ctd-hero-carousel__mark { border-color: var(--bone-500); }
.ctd-hero-carousel__dot.is-current .ctd-hero-carousel__mark {
  background: var(--accent); border-color: var(--accent); transform: scale(1.25);
  box-shadow: var(--fx-glow-gold);
}
/* One button, two glyphs: which one shows is the carousel's state, so the
   control can never disagree with what the panel is doing. */
.ctd-hero-carousel__play { display: none; }
.ctd-hero-carousel.is-paused .ctd-hero-carousel__pause { display: none; }
.ctd-hero-carousel.is-paused .ctd-hero-carousel__play { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .ctd-hero-carousel__track { scroll-behavior: smooth; }
}

/* ---------- route cards ---------- */
.ctd-route__copy { color: var(--text-2); }
.ctd-route__schematic { display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: var(--fx-turf), var(--ink-900); }
.ctd-route__schematic svg { width: 62%; height: auto; }
.ctd-route .ctd-card__foot .ctd-btn { pointer-events: none; } /* the whole card is the link */
/* the card is the pointer target, so its hover lights the casting the way the casting's own would */
.ctd-route:hover .ctd-card__foot .ctd-btn::before { background: var(--fx-btn-rim-gold); }
.ctd-route:hover .ctd-card__foot .ctd-btn::after { filter: brightness(1.22); }
.ctd-route__schematic svg { transition: transform var(--t-base) var(--ease); }
.ctd-route:hover .ctd-route__schematic svg { transform: scale(1.04); }


/* ---------- the route cards are posters ----------
   Each one is a small medieval tactics board with a sheet nailed to it, drawn
   per card by js/ctd-poster.js (see the .ctd-poster block in components.css).
   Four cards in a grid used to be four of the same rectangle whatever was
   printed on them; four sheets are counted as objects, because no two are cut
   the same or hang at the same angle.

   Everything here is under .is-poster, which the module adds only once it has
   actually painted. Until then the card is a card — that is the resting state,
   not a bug, and it is the whole no-JS story for a generator that has no
   static tile to fall back to.

   THE STOCK IS SMOKE, and that is a decision rather than a palette pick: a
   light stock turns each card into a bright island and forces dark type on it,
   which is a whole-site typography change hiding inside a card design. The
   dark stock keeps the page's own colours. Changing concept or stock is the
   two data-poster-* attributes in index.php and nothing else. */
.ctd-route.is-poster {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.ctd-route.is-poster::before { content: none; }   /* the gold wipe has no job on paper */
.ctd-route.is-poster:hover { box-shadow: none; border-color: transparent; }
.ctd-route.is-poster > .ctd-poster__body { gap: var(--s-4); }
/* The photo is PRINTED on the sheet, so it gets the plate edge a print has and
   not the card's own ground and divider. */
.ctd-route.is-poster .ctd-card__media {
  background: none; border-bottom: 0; border-radius: 0;
  box-shadow: 0 0 0 var(--bw) var(--paper-ink);
}
.ctd-route.is-poster .ctd-route__schematic { background: none; }
.ctd-route.is-poster .ctd-card__body { padding: 0; }
.ctd-route.is-poster .ctd-card__foot {
  padding: var(--s-3) 0 0; border-top: var(--bw) solid var(--paper-ink);
}
/* ---------- how it works ---------- */
.ctd-home__steps { list-style: none; margin: 0; padding: 0; }
.ctd-step-card { gap: var(--s-3); }
.ctd-step-card__photo { aspect-ratio: 4 / 3; }
/* The step photos lift with their card even though they are not links. */
.ctd-step-card { transition: transform var(--t-base) var(--ease); }
.ctd-step-card:hover { transform: translateY(-2px); }
.ctd-step-card__photo { transition: box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease); }
.ctd-step-card:hover .ctd-step-card__photo { border-color: var(--line-2); box-shadow: var(--fx-rim-strong), var(--fx-lift); }
.ctd-step-card__copy { color: var(--text-2); }

/* ---------- trust ---------- */
/* 32px, not 24: the steel cross members are centred on both of this band's
   edges and reach 20px into it — at 24px the copy sat 4px off the steel. */
.ctd-home__trust { padding-block: var(--s-8); }
/* A band held between two steel cross members is a bolted panel, so it gets
   the rivets that hold it there — a tighter pitch than the footer's, because
   this strip is short and a 112px run would put two bolts in it. The green is
   in the holes, as everywhere else. */
.ctd-home__trust {
  background-image: var(--fx-seam-rivets), var(--fx-seam-rivets);
  background-repeat: repeat-x, repeat-x;
  /* background-position places the TILE's top-left, not its centre, so the
     bottom row is offset by the tile height plus the same 8px inset the top
     row uses — written as `100% - 8px` it hung 12px below the band and got
     clipped to a row of half-rivets. 28 = 20px tile + 8px inset. */
  background-position: 44px 8px, 44px calc(100% - 28px);
  background-size: 88px 20px, 88px 20px;
}
.ctd-trust__item .ctd-i { transition: color var(--t-fast) var(--ease); }

/* ---------- 2-up ---------- */
@media (max-width: 1000px) {
  .ctd-home__hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  /* Stacked hero: the copy runs full width, so the bloom is pulled back. */
  .ctd-home__hero::before { opacity: 0.55; }
  .ctd-home__schematic { max-width: 640px; }
  .ctd-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .ctd-home__hero { padding-block: var(--s-8); }
  .ctd-home__eyebrow-ext { display: none; }
  /* Fluid, not a flat 2.5rem: the h1 is Varsity, which sets ~15% wider than
     Oswald, and at a fixed 40px "Build your team." broke after "your" on a
     375px phone — a wrap in the middle of the sentence, not at the <br>. The
     ceiling keeps the old size where there is room for it. */
  .ctd-home__hero-copy .ctd-h1 { font-size: clamp(1.875rem, 9.2vw, 2.5rem); }
  .ctd-home__hero-copy .ctd-lede { font-size: var(--fs-17); }
  .ctd-home__cta { flex-direction: column; align-items: stretch; }
  .ctd-home__cta .ctd-btn { width: 100%; }
  .ctd-home__schematic { padding: var(--s-4); }
  .ctd-home__exploded { display: none; }
  .ctd-home__exploded-plain { display: block; }
  /* The plain rendition is portrait (300x420), so it needs more room than the
     landscape drawings to come out the same visual size. */
  .ctd-hero-slide__art { height: 280px; }
  .ctd-hero-carousel { gap: var(--s-4); }
  .ctd-hero-carousel__track { gap: var(--s-4); }
  .ctd-hero-slide__title { font-size: var(--fs-18); }

  /* route cards become rows: media left, copy right */
  .ctd-route { flex-direction: row; }
  .ctd-route .ctd-card__media { width: 104px; flex: none; aspect-ratio: auto; border-bottom: 0; border-right: var(--bw) solid var(--line-1); }
  .ctd-route .ctd-card__body { padding: var(--s-4); gap: var(--s-1); justify-content: center; }
  .ctd-route .ctd-h3 { font-size: var(--fs-18); }
  .ctd-route__copy { display: none; }
  .ctd-route .ctd-card__foot { display: none; }
  .ctd-route__schematic svg { width: 80%; }

  .ctd-home__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .ctd-step-card__photo { aspect-ratio: 1; }
  .ctd-step-card .ctd-h4 { font-size: var(--fs-14); }
  .ctd-step-card__copy { display: none; }

  .ctd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ctd-step-card:hover, .ctd-route:hover .ctd-route__schematic svg { transform: none; }
  .ctd-hero-slide__cta:hover .ctd-i { transform: none; }
  .ctd-hero-carousel__dot.is-current .ctd-hero-carousel__mark { transform: none; }
}

/* ============================================================
   ORNAMENT PLACEMENT (2026-09-03) — see css/v3/ornament.css
   ============================================================ */

/* Corner gussets bolt the hero panel into the frame at section scale, and it
   is the only thing left on this page carrying them — the compare pair took
   the card-scale placement with it on 2026-09-16. Nothing sets a colour: the
   gusset shades itself from --orn-metal* / --orn-bolt*, and ornament.css maps
   those to the girder's steel. A `color` here would be read by nothing. */