/* 047 v5, Home: the sections under the approved hero and bar. Built ON theme.css, chrome.css, plate.css and site.css (all untouched
   here). The drawings' own timelines are GENERATED into home-ink.css by _rig_home/draw.py.

   Each section, one clear motion, played for the reader when it arrives (motion.js adds .is-on once; see site.css):
     What we build   the three drawings play in turn, left to right (on a phone each plays as its column arrives)
     Why Us          WE TAKE THE HILL (the Captain, 2026-10-12; the pack is retired): a topographic map of one hill draws in,
                     contour by contour from the foot up, a lit route climbs it in switchbacks, the mini Blackwolf flag (the
                     mark as the cloth, the Captain 2026-10-13) plants at the summit and a soft light settles there, 3.25 s
                     (_rig_home/hill.py generates the drawing and every keyframe into home-ink.css); the words beside it
                     (under it on phones) rise as the flag flies
     Case Study      a trail is drawn across the field, station by station, to the one point that lights
     The closer      the hero's light, once more */

/* ------------------------------------------------------------------ the ink: shared by the drawings */
/* the shared ink (.ink, .ink-base, .ink-lit, .ink-edge, .ink-steel) lives in site.css */

/* 01 people */
.pg-p circle, .pg-p path { stroke: none; }
.pg-p--a { fill: var(--bw-silver); }
.pg-p--b { fill: var(--bw-gun-300); }
.pg-badge rect { fill: var(--bw-white); }
.pg-badge path { fill: none; stroke: var(--bw-oxblood); stroke-width: 2; }
.pg-badge { transform-box: fill-box; transform-origin: center; }
/* 02 process */
.pr-rule { transform-box: view-box; transform-origin: 0 0; }
.pr-sheet { fill: #161718; stroke: var(--bw-gun-400); stroke-width: 1.2; }
.pr-lines { fill: none; stroke: var(--bw-gun-350); stroke-width: 1.6; }
.pr-box { fill: none; stroke: var(--bw-gun-300); stroke-width: 1.2; }
.pr-tick { fill: none; stroke: var(--bw-white); stroke-width: 1.8; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pr-work { fill: var(--bw-white); }
/* 03 the call */
.ca-star { fill: var(--bw-white); opacity: .32; }
.ca-star--1, .ca-star--4 { opacity: .5; }
.ca-phone { fill: var(--bw-union-raised); stroke: var(--bw-union-line); stroke-width: 1; }
.ca-hand { fill: var(--bw-white); }
.ca-ring { fill: none; stroke: var(--bw-silver); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.ca-clock circle { fill: none; stroke: var(--bw-gun-300); stroke-width: 1.5; }
.ca-clock path { fill: none; stroke: var(--bw-white); stroke-width: 2; stroke-linecap: round; }
.ca-team { fill: #111213; stroke: var(--bw-gun-600); stroke-width: 1; }
.ca-team--lit { fill: #1c2a55; stroke: var(--bw-union-line); }
.ca-core, .ca-fork { fill: var(--bw-white); }
.ca-answer { fill: none; stroke: var(--bw-white); stroke-width: 1.2; opacity: 0; }
.ca-core, .ca-fork, .ca-answer { transform-box: fill-box; transform-origin: center; }
/* the field */
.fi-contour { fill: none; stroke: var(--bw-gun-600); stroke-width: 1; opacity: .55; }
.fi-trail-base { stroke: var(--bw-gun-500); }
.fi-st { fill: var(--bw-white); stroke: var(--bw-silver); stroke-width: 1.2; }
.fi-ring { fill: none; stroke: var(--bw-white); stroke-width: 1.2; }
.fi-pulse { fill: none; stroke: var(--bw-eye); stroke-width: 1.5; opacity: 0; }
.fi-point { fill: var(--bw-eye); }
.fi-ring, .fi-pulse, .fi-point { transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------------ What we build: three columns, one drawing each */
.wb__cols { --c: 0s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.wb__col { --c: 0s; display: grid; align-content: start; }
.wb__fig { margin: 0 0 30px; }
.wb__t { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.wb__n { font: 400 .8125rem/1 var(--mono); letter-spacing: .08em; color: var(--bw-gun-300); font-variant-numeric: tabular-nums slashed-zero; }
.wb__name { font: 600 1.25rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--bw-white); font-feature-settings: "case"; }
.wb__line { font: 400 1.0625rem/1.6 var(--sans); color: var(--bw-silver); max-width: 30ch; }
.wb .more { margin-top: 44px; }
.sec__foot { display: flex; justify-content: flex-end; }
@media (min-width: 900px) {
  .wb__col--2 { --c: .5s; }
  .wb__col--3 { --c: 1s; }
}
/* the words of a column come up as its drawing begins (the drawing is the motion; the words follow it) */
@media (prefers-reduced-motion: no-preference) {
  .motion .wb__col:not(.is-on) .wb__t, .motion .wb__col:not(.is-on) .wb__line { opacity: .14; }
  .wb__col.is-on .wb__t, .wb__col.is-on .wb__line { animation: home-words .6s var(--ease-light) calc(var(--c) + .2s) both; }
  @keyframes home-words { from { opacity: .14; } to { opacity: 1; } }
}

/* ------------------------------------------------------------------ Why Us: two balanced columns (the Captain, 2026-10-13: "this looks
   terrible": the words under a full-width band left half the screen black and the link hanging alone). Desktop: the words in the left
   5 of 12, one stack (the label, the heading, the lead, the body, SEE OUR PROCESS) centred against the map; the hill in the right 7,
   its column rounded down to a whole pixel (729 at 1440: hill.py's wide composition draws 1:1 there, so the flag's plate lands pixel for
   pixel). Phones: the label and the heading, the map, then the words and the link. One grid, three children (build.py why()). */
.wu__course { display: grid; column-gap: var(--gap);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-columns: minmax(0, 1fr) round(down, calc((100% - var(--gap)) * 7 / 12), 1px);
  grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". map" "head map" "words map" ". map"; }
.wu__head { grid-area: head; margin-bottom: 36px; }
.wu .hill { grid-area: map; align-self: center; }
.wu__block { --c: 0s; grid-area: words; display: grid; gap: 14px; justify-items: start; }
.wu__lead { font: 500 clamp(1.1875rem, 1rem + .45vw, 1.4375rem)/1.38 var(--sans); color: var(--bw-white); max-width: 26em; text-wrap: balance; }
.wu__copy { font: 400 1.0625rem/1.6 var(--sans); color: var(--bw-silver); max-width: 34em; text-wrap: pretty; }
.wu .more { margin-top: 12px; }
@media (min-width: 900px) {
  /* the words follow the HILL's clock here (they stand beside it): the pole plants at 2.2 s, the flag unfurls 2.42 to 2.97; the lead
     rises at 2.4, the body at 2.58, the link at 2.76 */
  .wu__block { --c: 1.9s; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes words-up { from { opacity: .14; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .motion .hill:not(.is-on) ~ .wu__block > * { opacity: .14; transform: translateY(12px); }
  .hill.is-on ~ .wu__block > .wu__lead { animation: words-up .6s var(--ease-light) calc(var(--c) + .5s) both; }
  .hill.is-on ~ .wu__block > .wu__copy { animation: words-up .6s var(--ease-light) calc(var(--c) + .68s) both; }
  .hill.is-on ~ .wu__block > .more { animation: words-up .6s var(--ease-light) calc(var(--c) + .86s) both; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  /* phones: the words sit under the map and rise when they arrive (their own arm) */
  .motion .wu__block:not(.is-on) > * { opacity: .14; transform: translateY(12px); }
  .wu__block.is-on > .wu__lead { animation: words-up .6s var(--ease-light) calc(var(--c) + .5s) both; }
  .wu__block.is-on > .wu__copy { animation: words-up .6s var(--ease-light) calc(var(--c) + .68s) both; }
  .wu__block.is-on > .more { animation: words-up .6s var(--ease-light) calc(var(--c) + .86s) both; }
}

/* ------------------------------------------------------------------ Case Study: one line, one button, the field */
.cs__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: center; }
.cs__words { display: grid; gap: 24px; justify-items: start; }
.cs__words .line { max-width: 24em; }
.cs__words .btn { margin-top: 10px; }
.cs__fig { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion .cs__in:not(.is-on) .cs__words > :not(.label) { opacity: .14; }
  .cs__in.is-on .cs__words > :not(.label) { animation: home-words .6s var(--ease-light) both; }
  .cs__in.is-on .cs__words > .h2 { animation-delay: .05s; }
  .cs__in.is-on .cs__words > .line { animation-delay: .2s; }
  .cs__in.is-on .cs__words > .btn { animation-delay: 1.5s; }
}

/* ------------------------------------------------------------------ phones and narrow windows */
@media (max-width: 899.98px) {
  .wb__cols { grid-template-columns: minmax(0, 1fr); }
  .wu__course { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "map" "words"; row-gap: 32px; }
  .wu__head { margin-bottom: 0; }
  .wu .hill { align-self: auto; }
  .wb__col { max-width: 520px; }
  .wb__fig { margin-bottom: 22px; }
  .sec__foot { justify-content: flex-start; }
  .wb .more { margin-top: 36px; }
  .wu .more { margin-top: 10px; }
  .cs__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cs__fig { margin-inline: calc(-1 * var(--gutter) / 2); }
}