/* THE ARENA — page styles. The intellectual centre.
   Built to B6_The_Arena_Page_Build_v1_0 (Kaleb, B.6, 2026-08-11).

   THE BUILD SHEET SPECIFIED A CREAM GROUND — "the Architect page's room, not the
   homepage's. A reader arrives here from a black argument into a lit room." The Architect
   ruled that out on 2026-08-11. The lit room is gone; the whole site is black. The page's
   copy, structure, sources and section order are untouched by that and still Kaleb's.

   #5C0E1A REMAINS THE BOUND ARCHITECT CRIMSON and governs sitewide. The Architect page had
   drifted to #7B1E2B under the same name; that value was swept and must not be
   reintroduced anywhere. Architect Crimson is one colour — it simply does not appear on
   this page, for the reason given below.

   ONE STRUCTURAL RULE ON THIS PAGE, and it is the lifecycle diagram: the seven stage
   numbers and their function labels, and nothing else. They are brass, not crimson. */

/* THE GROUND IS BLACK — ruled 2026-08-11, and this page and the Architect page carry it
   together. They are the House's two interior rooms and they do not diverge on ground.

   THE STRUCTURE IS BRASS, and that is the part that needs explaining, because the next
   person to open this file will want to put the crimson lifecycle marginalia back.

   #5C0E1A measures 1.44:1 against this ground. It does not read as a dark red; it reads as
   black. Restoring it would not be restoring a colour - the seven stage numbers and their
   function labels would simply vanish into the page, and the one diagram this page has
   would lose its structure while appearing to have it.

   THE ALTERNATIVE WAS CONSIDERED AND NOT TAKEN: a lifted red, #A32639, visible at 2.71:1,
   which is a SECOND red under a name already bound to a first. That is a ruling on the
   visual language, not a stylesheet decision, and it has not been made.

   DO NOT reintroduce crimson marks on this page. Brass is doing the job on purpose. */
.arena {
  --ground:  #0B0B0C;
  --ink:     #F5F5F2;
  --crimson: #C9A227;   /* structure is brass here. Named --crimson so the shared shell
                           inherits it; the value is deliberate, not a mistake */
  --gold:    #E3C97A;
  --rule:    rgba(245,245,242,.14);
  --soft:    rgba(245,245,242,.70);
  background: var(--ground);
  color: var(--ink);
}

.arena header.site {
  position: sticky; top: 0; z-index: 5;
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.arena header.site .markword, .arena header.site nav.top a { color: var(--ink); }
.arena header.site nav.top a:hover { color: var(--crimson); }

.ar-wrap { max-width: 760px; margin: 0 auto; padding: 0 7vw 14vh; }

.ar-hero { padding: 12vh 0 6vh; border-bottom: 2px solid var(--crimson); margin-bottom: 5vh; }
/* THE PAGE TITLE STEPS BACK so the governing question can be the largest thing here.
   The build sheet is explicit: "The governing question takes the largest weight on the
   page - larger than the page title." An earlier pairing gave the title 7vw and the
   question 5vw, which only held at wide viewports and inverted below about 900px - the
   title outgrew the question exactly where most readers are. The two scales are now
   swapped outright rather than nudged, so the relationship holds at every width. */
.arena h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 1.4rem; }
.arena p.ar-standfirst { font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.45; margin: 0; color: var(--ink); }

.ar-sec { padding: 5vh 0; border-top: 1px solid var(--rule); }
.ar-num { font-family: var(--sans, system-ui, sans-serif); font-size: .74rem;
          letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.arena h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0 0 1.6rem; }

/* THE SHORT FORM at display weight, THE FULL FORM at editorial lead. The short definition
   is what a reader repeats; the full one is what survives examination. Both, in that
   order, is the whole method of this page. */
/* THE ELEMENT DEFAULT GOES FIRST AND EVERY TIER OVERRIDES IT WITH ITS OWN ELEMENT
   QUALIFIER. Written this way deliberately: `.arena p` scores (0,1,1) and a bare
   `.ar-lead` scores (0,1,0), so the paragraph default silently beat all four tiers below
   and flattened this page to 1.06rem - including the governing question, which is
   specified as the largest thing on it. Caught by measuring the built page, not by
   reading the file. Do not "simplify" these back to bare class selectors. */
.arena p { font-size: 1.06rem; line-height: 1.72; margin: 0 0 1.3rem; }
.arena p.ar-short { font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.3; margin: 0 0 1.8rem;
                    border-left: 3px solid var(--crimson); padding-left: 1.4rem; }
.arena p.ar-lead { font-size: 1.16rem; line-height: 1.62; }
.arena strong { font-weight: 600; }
.arena em { color: var(--soft); }

/* A BRIDGE is one of the eight sentences on this page that are Kaleb's rather than the
   Architect's. They are marked IN THE FILE, not merely mentioned in a report, and they
   connect two doctrinal passages without defining anything. */
.arena p.ar-bridge { font-style: italic; color: var(--soft); font-size: 1.02rem;
                     border-left: 1px solid var(--gold); padding-left: 1.2rem; margin: 0 0 1.6rem; }

.ar-quote { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.ar-quote li { font-size: 1.1rem; line-height: 1.55; padding: .5rem 0; }

.ar-src { font-family: var(--sans, system-ui, sans-serif); font-size: .78rem;
          letter-spacing: .04em; color: var(--soft); margin: 1.4rem 0 0; font-style: italic; }

/* THE LIFECYCLE — the page's one diagram. Seven numbered stages, the function label as
   crimson marginalia, the definitions in body. Verbatim from KWYLL-CANON-FG-2026-01,
   ADOPTED 30 July 2026. Demand Exposure and Overtaking Exposure keep their sealed names
   though the House standard prefers "reveal" over "expose". Do not "correct" them. */
.ar-cycle { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: stage; }
.ar-cycle li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1.2rem;
               padding: 1.3rem 0; border-top: 1px solid var(--rule); }
.ar-cycle li:last-child { border-bottom: 1px solid var(--rule); }
.ar-cycle .n { font-family: var(--sans, system-ui, sans-serif); font-size: 1.5rem;
               color: var(--crimson); line-height: 1.1; }
.ar-cycle .stage { font-size: 1.18rem; line-height: 1.3; margin: 0 0 .35rem; }
.ar-cycle .def { font-size: 1rem; line-height: 1.55; margin: 0 0 .4rem; color: var(--ink); }
.ar-cycle .fn { font-family: var(--sans, system-ui, sans-serif); font-size: .7rem;
                letter-spacing: .2em; text-transform: uppercase; color: var(--crimson); margin: 0; }
@media (max-width: 560px) { .ar-cycle li { grid-template-columns: 2rem 1fr; gap: 0 .8rem; } }

.ar-neg { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.ar-neg li { padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
.ar-neg li:last-child { border-bottom: 0; }

/* THE GOVERNING QUESTION takes the largest weight on the page — larger than the page
   title. It is the only sentence here addressed to the reader in the second person. */
.arena p.ar-governing { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.12;
                        letter-spacing: -.025em; margin: 2.4rem 0; }

.ar-books { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.ar-books li { padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
.ar-books li:last-child { border-bottom: 0; }
.ar-books .imprint { font-family: var(--sans, system-ui, sans-serif); font-size: .78rem;
                     letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: block; }

.ar-close { padding: 8vh 0 2vh; border-top: 2px solid var(--crimson); margin-top: 5vh; }
.ar-close p { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; margin: 0; }

.arena footer.site { background: var(--ground); border-top: 1px solid var(--rule);
                     color: var(--soft); padding: 6vh 7vw; }
.arena footer.site a { color: var(--crimson); }

@media (prefers-reduced-motion: no-preference) {
  .ar-sec, .ar-hero { animation: arrise .8s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes arrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .ar-sec, .ar-hero { animation: none; } }