/* BECOMING. — LANDING PAGE. v3, THE SCHOOL VISUAL SYSTEM.

   WHAT CHANGED, AND WHY IT GOT SMALLER. v2 carried a complete bespoke field system - .bl-field,
   .bl-field alt, .bl-field crimson, its own grids, its own door - and held the visitor inside a
   black box for the whole page. The ruling: after BECOMING., the page enters the House. From the
   role field down it uses the same components The School uses - hero, prose, band, grid2, card,
   quote, gate, header, footer - from styles.css, unchanged.

   So this file is no longer a design system. It is four things styles.css does not already
   provide:

     1  the black opening screen, ported exactly from becoming.css
     2  a DARK band, for the three places the argument has to get heavier
     3  a three-across grid, which the shared sheet does not have
     4  a handful of emphasis treatments the copy specifically calls for

   THE DESIGN TEST: after the black BECOMING. screen the visitor should not feel they are inside
   another experimental storytelling device. They should feel "now I am inside The Arena."

   THE GROUND IS THE HOUSE GROUND. body carries no .becoming class any more, so styles.css governs
   from the first pixel below the opening: oxblood, parchment, brass, the House type scale. The
   opening screen paints its own black over that, which is exactly the transition the directive
   asks for - BECOMING. in black, and the institution opening underneath it.
   ======================================================================== */

/* ==========================================================================
   1. THE OPENING SCREEN — PRESERVED, NOT REBUILT.
   Ported verbatim from becoming.css: same min-height, same centring, same padding, same clamp,
   same line-height, same letter-spacing, same ground and the same warm white. Nothing about the
   word's typography, scale, position or impact is changed. It is rescoped from .becoming to
   .open-screen only because the body class went with the old field system.
   ======================================================================== */
.open-screen {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  background: #0B0B0C;
}
.open-word {
  font-family: var(--serif); font-weight: 400; margin: 0; color: #F4F1E8;
  font-size: clamp(40px, 27.1px + 3.29vw, 64px); line-height: 1.0; letter-spacing: -.025em;
}
/* The scroll cue. A hairline, no words - section 1 allows nothing else on this screen. It
   retires the moment the visitor moves, which is the "intentional downward movement" the
   opening is waiting for. */
.open-hint {
  position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%);
  width: 2px; height: 72px; z-index: 30; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,241,232,0), rgba(244,241,232,.85));
  opacity: 0; transition: opacity 1s ease;
}
body.waiting  .open-hint { opacity: 1; }
body.revealed .open-hint { opacity: 0; }

/* ==========================================================================
   2. THE DARK BAND. The House ground is oxblood; three moments in this argument have to sit
   heavier than the sections around them - the collision, the Formation Gap, and BECOMING to
   FORMED - plus the two closing statements that answer them.

   It is the SAME band component, on a darker ground. Not a second visual vocabulary.
   ======================================================================== */
.band.dark, .prose.dark {
  background: linear-gradient(180deg, #121216, #0B0B0C);
  border-top: 1px solid rgba(210,172,102,.16);
  border-bottom: 1px solid rgba(210,172,102,.16);
}
.band.dark h2, .prose.dark h2 { color: var(--cream); }
.band.dark .card, .prose.dark .card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-color: rgba(210,172,102,.22);
}

/* ==========================================================================
   3. THREE ACROSS. styles.css has .grid2 and .grid4 and nothing between them. The role trio and
   the six-step method both want three, and forcing them into two reads as a mistake.
   ======================================================================== */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
         max-width: 1000px; margin: 20px auto 0; }

/* ==========================================================================
   4. THE FEW EMPHASIS TREATMENTS THE COPY ASKS FOR.
   ======================================================================== */

/* THE ROLE FIELD. Eight roles, 4 x 2, equal weight, no icons, no photographs, no cards and no
   black void around the words - just the House band and restrained editorial type. */
/* minmax(0, 1fr), NOT 1fr. A plain 1fr carries an `auto` minimum, so a track refuses to go
   narrower than its longest word - "ENTREPRENEUR." plus its arrow forced the two phone
   columns to 204px each against a 375px viewport and the page scrolled sideways by 11px.
   minmax(0, ...) lets the track take its share and the word fit inside it. */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
         max-width: 1000px; margin: 0 auto; list-style: none; padding: 0; }
/* NO RULES UNDER THE ROLES. They carried a hairline top and bottom as cell separators when
   they were plain words in a grid. The moment they became links those hairlines read as
   underlines - which is the one thing the affordance brief ruled out. The words carry
   themselves; the arrow and the colour shift do the signalling. */
.roles li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 34px 10px; font-family: var(--serif); color: var(--parchment);
  font-size: clamp(17px, 13px + .9vw, 26px);
}

/* ==========================================================================
   ROLE-BASED ENTRY. The eight role names are doors into the passage that recognizes each
   one, in this same page. Plain anchors, no script.
   ======================================================================== */

/* THE LANDING. The header is position:sticky at top:0 and 80px tall on desktop, so an
   anchor target would otherwise arrive underneath it. scroll-margin-top holds each role
   passage clear of the header AND gives it room to breathe - "comfortably within the
   viewport", not jammed against the top edge.

   It applies to a direct hit on thekwyll.com/#pastor exactly as it does to a click, which
   is what makes the deep links usable rather than merely functional.

   ON THE CARDS THEMSELVES, NOT ON :target. It was written as `:target { scroll-margin-top }`
   first, and that computes to 0 whenever the hash does not match - it happened to work for
   a hash click, purely because the browser sets :target before it scrolls, and it silently
   did nothing for scrollIntoView or for anything added later. Measured at 0 on all seven
   cards with no hash set. A property this load-bearing does not get to depend on a state
   that is true for one instant.

   THE OFFSET IS MEASURED, NOT ASSUMED. It was a fixed 112px, on the basis that the sticky
   header is 80px. The header is not 80px: its nav wraps, so it stands at 80px on a wide
   desktop and 157px on a phone, with everything in between as the window narrows. Wherever
   it is taller than the offset, the card's TITLE lands underneath it - the reader arrives
   already past the name of the thing they clicked.

   --hdr is written by the page from the header's real height and rewritten on resize, so
   the title always clears it by 28px and never by less. */
#executive, #pastor, #parent, #student,
#leader, #entrepreneur, #athlete { scroll-margin-top: calc(var(--hdr, 80px) + 28px); }

/* Smooth only where motion is welcome. A reader who has asked for reduced motion gets the
   immediate jump, which is the correct behaviour and not a lesser one. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* THE AFFORDANCE. These are links and they are allowed to behave like links - not blue, not
   underlined, but not disguised either. Aesthetics do not get to hide interactivity: the
   fault this fixes was a reader trying to click a word that looked like a door and finding
   it inert.

   The arrow is always in the layout at zero opacity, so nothing shifts when it appears. */
.roles a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 34px 10px;
  color: inherit; text-decoration: none;
  transition: color .22s ease;
}
.roles li { padding: 0; }              /* the padding moved onto the anchor: full tap target */
.roles a::after {
  content: "\2192"; margin-left: .4em; color: var(--brass-lit);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .22s ease, transform .22s ease;
}
.roles a:hover, .roles a:focus-visible { color: var(--brass-lit); }
.roles a:hover::after, .roles a:focus-visible::after { opacity: 1; transform: none; }
/* Keyboard focus must be visible, and it is not left to the browser's default ring on a
   dark ground where it is nearly invisible. */
.roles a:focus-visible { outline: 1px solid var(--brass-lit); outline-offset: -8px; }
/* On touch there is no hover to reveal anything, so the arrow rests visible. Without this
   the affordance simply does not exist on a phone - which is where it is needed most. */
@media (hover: none) {
  .roles a::after { opacity: .6; transform: none; }
}

/* A RUN. Short positions flow and wrap instead of stacking - the compact editorial list the
   directive asks for in the role list, the process sequence and the closing rhythm. */
.run { list-style: none; padding: 0; margin: 18px 0 0;
       display: flex; flex-wrap: wrap; column-gap: 2em; row-gap: .5em;
       font-family: var(--sans); font-size: 14px; color: var(--muted); }
.run.serif { font-family: var(--serif); font-size: 17px; color: var(--cream); }
.run li { margin: 0; }

/* THE GAP. The relationship is the visual; no diagram is invented. Restrained crimson becomes
   materially visible here, which is one of the few places the directive allows it. */
.gap-side { font-family: var(--serif); color: var(--cream);
            font-size: clamp(20px, 16px + 1.1vw, 30px); line-height: 1.25;
            max-width: 20ch; margin: 0 auto; }
.gap-stem { display: block; height: 12vh; position: relative; }
.gap-stem::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
                    background: linear-gradient(180deg, rgba(210,172,102,.10), #8E2436, rgba(210,172,102,.10)); }
.gap-term { font-family: var(--serif); color: #E0808E; letter-spacing: .01em;
            font-size: clamp(26px, 20px + 1.6vw, 44px); }

/* THE BIG TYPOGRAPHIC MOMENTS. FORMED. is the largest thing on the page after BECOMING. */
.statement { font-family: var(--serif); color: var(--cream); line-height: 1.2;
             font-size: clamp(24px, 18px + 1.5vw, 38px); }
.formed-word { font-family: var(--serif); color: var(--cream); margin: 0;
               font-size: clamp(40px, 27.1px + 3.29vw, 64px); line-height: 1; letter-spacing: -.025em; }

/* ARENA C.A.R.R.Y.™ uses the House journey component. .jstage carries the LETTER, so the left
   rail reads C A R R Y down the spine. It must not read as School stages: there are no stage
   numbers, and the component is used here purely as a framework sequence. */
.journey.framework .jstage { font-size: 15px; letter-spacing: .3em; color: var(--brass-lit); }
/* The terms are set CALLING, ASSIGNMENT, REVELATION, RESPONSE, YIELD as the copy supplies
   them. Done in CSS so the words stay lower-case in the DOM and a screen reader reads them
   as words rather than spelling them out. */
.journey.framework .jbody h3 { text-transform: uppercase; letter-spacing: .06em; font-size: 20px; }
.journey.framework .jmove  { font-style: italic; text-transform: none; letter-spacing: 0;
                             font-family: var(--serif); font-size: 16px; color: var(--brass-lit); }

/* The eight capacity statements. A clean two-column list, not a paragraph and not eight cards. */
.capacities { list-style: none; padding: 0; margin: 20px auto 0; max-width: 1000px;
              display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.capacities li { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--cream);
                 padding: 14px 0; border-bottom: 1px solid rgba(210,172,102,.12); }

/* ==========================================================================
   RESPONSIVE. The shared sheet already collapses .grid2 and .grid4 on narrow screens; these are
   the additions it does not know about.
   ======================================================================== */
@media (max-width: 900px) {
  .grid3 { grid-template-columns: 1fr; }
  .capacities { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  /* Roles stay two-up rather than becoming a single file of eight words. */
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The padding lives on the anchor so the whole cell is the tap target; it tightens here
     to give the longest role and its arrow room inside a 187px column. */
  .roles a { padding: 26px 6px; }
  .run { column-gap: 1.3em; }
  /* No phone-specific offset any more: --hdr carries the real header height at every width,
     so a hard-coded 190px here would only be a second number to keep in step with it. */
}

/* MOTION. A gentle reveal and nothing else - no autoplay, no crawl, no carousel, no text flying
   in. The visitor controls the pace, and a reduced-motion preference removes it entirely. */
@media (prefers-reduced-motion: no-preference) {
  .band, .prose, .quote, .gate { animation: blrise .7s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes blrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .band, .prose, .quote, .gate { animation: none; }
  .open-hint { transition: none; }
}