/* =====================================================================
   UTILITY ACCORDION — the only genuinely new component in the build
   =====================================================================

   THE CONCEPT HAS ZERO DISCLOSURE WIDGETS — measured: 0 <details>, 0
   aria-expanded, 0 toggle handlers. There is no precedent in this design
   system to copy, so this is built to the disclosure pattern rather than
   by analogy to something that looked similar.

   REGISTER: IT OPENS ON CLICK AND SETTLES. There is no scroll coupling of
   any kind — no expand-as-you-scroll, no pinned rail tracking which
   utility you are in, no progress scalar. This page has zero scroll
   listeners and zero scrollY reads, exactly as the home page does. The
   footer of the selected concept states that relaxing this converts the
   section into a fifth staging of the top-four idea and must be treated
   as a concept-level decision. An accordion driven by scroll position
   would be precisely that.

   EQUAL WEIGHT IS A CONTENT GUARDRAIL EXPRESSED IN CSS. Every panel takes
   the same type sizes, the same padding, the same rule weight and the
   same indicator. No utility is sized, coloured, ordered or emphasised by
   maturity, and NONE IS OPEN BY DEFAULT — opening one on load would
   elevate it above the other four, which the source brief prohibits in
   the same sentence as status staging.

   MULTIPLE PANELS MAY BE OPEN AT ONCE, deliberately. A one-at-a-time
   accordion closes a panel the reader did not ask to close, and on a page
   whose organising claim is that these are peers, having one utility
   evict another is the wrong metaphor.
   ===================================================================== */

.acc-list{max-width:1040px;margin:54px auto 0;text-align:left}

.acc{border-top:1px solid var(--rule-hair)}
.acc:last-of-type{border-bottom:1px solid var(--rule-hair)}

/* The heading wraps the button so the accessible name is exposed as a
   heading to assistive tech AND the control is a real button. A div with
   a click handler would be neither. */
.acc-h{margin:0;font:inherit}

.acc-btn{
  display:flex;align-items:flex-start;gap:20px;
  width:100%;padding:26px 4px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--on-page);
}
.acc-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.acc-mark{
  flex:0 0 52px;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ground-page);border-radius:50%;
}
/* tilted to the hero sphere's own angle (0.2094 rad = 11.998 deg) so the
   section reads as the same system at working scale */
.acc-mark img{width:36px;height:36px;display:block;transform:rotate(11.998deg)}

.acc-t{flex:1 1 auto;min-width:0}
.acc-name{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(19px,2vw,24px);line-height:1.25;
}
.acc-desc{
  display:block;margin-top:6px;
  font-size:15.5px;line-height:1.5;color:var(--on-page-body);
}

/* THE INDICATOR IS A PLUS THAT BECOMES A MINUS. Two bars; the vertical
   one rotates to horizontal. It is aria-hidden — the state is carried by
   aria-expanded on the button, which is the only thing assistive tech
   should be reading it from. A visual indicator that is also the
   announced state is two sources of truth. */
.acc-ind{
  flex:0 0 22px;position:relative;width:22px;height:22px;margin-top:6px;
}
.acc-ind::before,.acc-ind::after{
  content:"";position:absolute;left:50%;top:50%;
  width:18px;height:2px;margin:-1px 0 0 -9px;
  background:var(--on-page);
  transition:transform .38s cubic-bezier(.4,.6,.3,1);
}
.acc-ind::after{transform:rotate(90deg)}
.acc-btn[aria-expanded="true"] .acc-ind::after{transform:rotate(0deg)}

/* ---------------------------------------------------------------------
   THE PANEL — collapsed with grid-template-rows, NOT height:auto.

   height:auto IS NOT INTERPOLABLE. A transition written from 0 to auto
   does not animate; the property snaps on the first frame and every
   endpoint assertion still passes, because the endpoint is correct. The
   same is true of `display` and of the `hidden` attribute. Writing
   `transition:height .38s` with an auto endpoint produces a rule that
   reads as an animation and is not one.

   grid-template-rows:0fr -> 1fr IS interpolable and needs no measured
   pixel height, so nothing has to be recomputed on resize or when the
   copy changes.

   VISIBILITY CARRIES THE ACCESSIBILITY HALF. visibility:hidden removes
   the panel's content from the accessibility tree AND from the tab order,
   which is what a collapsed disclosure must do — content that is visually
   collapsed but still focusable is a keyboard trap that sighted users
   never see. It is delayed on close so the content stays visible for the
   duration of the collapse, and undelayed on open.
   --------------------------------------------------------------------- */
.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.4,.6,.3,1);
}
.acc-panel > .acc-inner{
  overflow:hidden;
  visibility:hidden;
  transition:visibility 0s linear .38s;
}
/* THE OPEN STATE IS SELECTED VIA :has() ON THE ROW, NOT BY SIBLING
   COMBINATOR ON THE BUTTON. The button lives inside the <h2>, so the
   panel is the HEADING's next sibling and never the BUTTON's —
   `.acc-btn[aria-expanded="true"] + .acc-panel` matches nothing, at
   any time, on any row. Measured before this was corrected: the
   attribute flipped to "true" on click, every markup and ARIA check
   passed, and grid-template-rows read 0px at 0/60/120/190/260/340/500ms
   — the panel never opened and nothing at the attribute level could
   see it. Keying on the row survives the heading wrapper, which is
   required for the accessible name, and survives it moving. */
.acc:has(.acc-btn[aria-expanded="true"]) .acc-panel{grid-template-rows:1fr}
.acc:has(.acc-btn[aria-expanded="true"]) .acc-panel > .acc-inner{
  visibility:visible;
  transition:visibility 0s linear 0s;
}

.acc-body{
  padding:0 0 4px 72px;max-width:68ch;
  font-size:16px;line-height:1.65;color:var(--on-page-body);
}
.acc-meta{margin:18px 0 0 72px;display:flex;flex-wrap:wrap;gap:6px 34px}
.acc-meta div{min-width:0}
.acc-meta dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-page-soft);
}
.acc-meta dd{margin:4px 0 0;font-size:15px;color:var(--on-page)}

/* the subnote is external proof, set apart from the body so it reads as
   evidence rather than as more description */
.acc-note{
  margin:20px 0 0 72px;padding:16px 20px;max-width:64ch;
  background:var(--ground-alt);
  border-left:3px solid var(--gold);
  font-size:15px;line-height:1.55;color:var(--on-alt);
}
.acc-cta{margin:0 0 30px 72px}
.acc-cta .cta-line{margin-top:22px}

@media(max-width:760px){
  .acc-btn{gap:14px;padding:22px 4px}
  .acc-mark{flex-basis:40px;width:40px;height:40px}
  .acc-mark img{width:28px;height:28px}
  .acc-body,.acc-meta,.acc-note,.acc-cta{margin-left:0;padding-left:0}
  .acc-body{padding-left:0}
}

/* REDUCED MOTION — the panel still opens and closes, it simply arrives.
   Both halves of the pair must be suppressed: the grid track AND the
   visibility delay. Leaving the delay in place would hold the content
   invisible for 380ms after an instant expansion, which reads as a broken
   control rather than as a fast one. */
@media(prefers-reduced-motion:reduce){
  .acc-panel{transition:none}
  .acc-panel > .acc-inner{transition:none}
  .acc:has(.acc-btn[aria-expanded="true"]) .acc-panel > .acc-inner{transition:none}
  .acc-ind::before,.acc-ind::after{transition:none}
}