/* ==========================================================================
   APPROACH — "The four movements, kept."
   Owns: the section header, the four-movement band, three Keepers,
   the counter-rotating crenellated rings, the engineering charter.

   Rules honoured here:
   · four type sizes only — no font-size declared anywhere in this file
   · zero border-radius — inherited from system.css reset, never overridden
   · violet in chrome twice per viewport (eyebrow tick + inner ring/core);
     the Keeper artwork carries all remaining colour
   · full bleed to the 24px gutter, no centred column
   · every transition uses --dur (600ms)
   ========================================================================== */

.ap{position:relative;overflow:clip}

/* ==========================================================================
   1. Stage — statement, lead, and the rings that never stop
   ========================================================================== */
.ap__stage{
  position:relative;
  padding-top:112px;
  padding-bottom:200px;
}

.ap__head{position:relative;z-index:2;row-gap:0}
.ap__eyebrow{grid-column:1 / span 6}
.ap__title{grid-column:1 / span 7;margin-top:32px}
.ap__lead{
  grid-column:9 / -1;
  grid-row:2;
  align-self:end;
  padding-bottom:6px;
}

/* --- The rings ----------------------------------------------------------
   Concentric crenellated hexagons lifted from the logo. Outer turns forward
   at 21s, the middle turns back at 13s: coprime, so they never resync.
   Chrome stays greyscale; the innermost ring is the single violet accent. */
.ap__rings{
  position:absolute;
  top:40px;
  right:-232px;
  width:720px;
  height:720px;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.ap-ring{transform-box:view-box;transform-origin:50% 50%}
.ap-ring use{fill:none;stroke-linejoin:miter}
.ap-ring--a use{stroke:var(--hairline);stroke-width:9}
.ap-ring--b use{stroke:var(--muted);stroke-width:5;opacity:.5}
.ap-ring--c use{stroke:var(--violet);stroke-width:4}
.ap-core use{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.65}

/* ==========================================================================
   2. The band — four movements, hairline-ruled, full bleed to the gutter
   ========================================================================== */
.ap__band{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  padding-inline:var(--gutter);
  overflow:hidden;
}
/* the closing vertical rule, on the gutter line, above the artwork */
.ap__band::after{
  content:"";position:absolute;top:0;bottom:0;right:var(--gutter);
  width:1px;background:var(--hairline);z-index:3;pointer-events:none;
}

.mv{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:680px;
  padding:28px 28px 34px;
  transition:background var(--dur) var(--ease);
}
/* frame drawn above the artwork so a Keeper never eats a rule */
.mv::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid var(--hairline);border-right-width:0;
}
.mv:hover{background:rgba(255,255,255,.014)}

.mv__n{position:relative;z-index:2}
.mv__foot{position:relative;z-index:2;max-width:34ch}
.mv__foot .t-lead{margin-top:16px}

/* --- Keeper artwork ------------------------------------------------------
   Bottom-anchored, cropped by the band, masked so the render's near-black
   ground dissolves into the void instead of showing a rectangle edge. */
.mv__art{
  position:absolute;
  bottom:0;
  z-index:0;
  display:block;
  pointer-events:none;
  overflow:hidden;   /* the column rule is the edge; no fade-out */
}
.mv__art i{
  display:block;height:100%;
  overflow:hidden;
}
.mv__art img{
  height:100%;
  width:auto;
  max-width:none;
  opacity:.88;
  transition:opacity var(--dur) var(--ease);
}
.mv:hover .mv__art img{opacity:1}

.mv__art--architect{height:86%;left:-93%}
.mv__art--builder  {height:72%;left:-8%}
.mv__art--warden   {height:96%;left:50%;transform:translateX(-50%)}

/* Scrim: the artwork sinks into black under the type. Not a divider. */
.mv__scrim{
  position:absolute;left:0;right:0;bottom:0;height:56%;
  z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.42) 34%,
    rgba(0,0,0,.84) 68%,
    #000 100%);
}

/* ==========================================================================
   3. Charter
   ========================================================================== */
.ap__charter{padding-top:300px;padding-bottom:8px;align-items:start}
.ap__charter-intro{grid-column:1 / span 4;position:relative}
.ap__charter-title{margin-top:28px}
.ap__charter-body{margin-top:24px}

.ap__rings--sm{
  position:static;
  width:176px;height:176px;
  margin-top:56px;
}

.ap__charter-list{
  grid-column:6 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gutter);
}
.ap__charter-list li{
  border-top:1px solid var(--hairline);
  padding:24px 0 40px;
  transition:border-color var(--dur) var(--ease);
}
.ap__charter-list li:hover{border-color:var(--muted)}
.ap__ci-title{color:var(--primary);line-height:1.4}
.ap__charter-list .t-lead{margin-top:14px;max-width:40ch}

/* ==========================================================================
   4. Responsive — 2 up, then 1 up. Keepers re-anchor, never overflow.
   ========================================================================== */
@media (max-width:1240px){
  .ap__rings{width:600px;height:600px;right:-208px;top:56px}
  .mv{min-height:620px;padding:24px 22px 30px}
}

@media (max-width:1079px){
  .ap__stage{padding-top:88px;padding-bottom:140px}
  .ap__eyebrow{grid-column:1 / -1}
  .ap__title{grid-column:1 / -1}
  .ap__lead{grid-column:1 / span 4;grid-row:3;align-self:start;margin-top:40px}

  .ap__rings{width:520px;height:520px;right:-210px;top:auto;bottom:-30px}

  .ap__band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv{min-height:560px}
  .mv--discover::before,.mv--architect::before{border-bottom-width:0}

  .mv__art--architect{height:84%;left:-86%}
  .mv__art--builder  {height:74%;left:2%}
  .mv__art--warden   {height:94%}

  .ap__charter{padding-top:200px}
  .ap__charter-intro{grid-column:1 / -1}
  .ap__charter-list{grid-column:1 / -1;margin-top:72px}
}

@media (max-width:700px){
  .ap__stage{padding-top:64px;padding-bottom:96px}
  .ap__lead{grid-column:1 / -1}
  .ap__rings{width:400px;height:400px;right:-168px;bottom:-40px}

  .ap__band{grid-template-columns:minmax(0,1fr)}
  .mv{min-height:480px;padding:22px 20px 28px}
  .mv::before{border-bottom-width:0}
  .mv--operate::before{border-bottom-width:1px}
  .mv__foot{max-width:26ch}

  /* one column: every Keeper sits right-of-centre, figure facing the type */
  .mv__art--architect{height:80%;left:auto;right:-6%}
  .mv__art--builder  {height:74%;left:auto;right:-14%}
  .mv__art--warden   {height:92%;left:auto;right:-16%;transform:none}

  .ap__charter{padding-top:128px}
  .ap__charter-list{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .ap__charter-list li{padding:22px 0 32px}
  .ap__rings--sm{width:140px;height:140px;margin-top:44px}
}

/* Reduced motion: system.css freezes the rings at an off-axis angle.
   The composed still frame must still read — hold full opacity. */
@media (prefers-reduced-motion:reduce){
  .ap-ring--b use{opacity:.62}
}


/* --------------------------------------------------------------------------
   Round 2, system critic: four violet-dominant artworks shared one viewport
   against a limit of one, carrying 49% of the frame's ink and putting glow
   behind the body copy of cells 03 and 04.
   design-system.md section 4 (amended): when two violet artworks would be
   visible together, all but one is reduced to structure. The Architect keeps
   the colour because it opens the sequence; the rest become silhouette.
   -------------------------------------------------------------------------- */
.mv__art--builder img,
.mv__art--warden img{
  filter:grayscale(1) brightness(.62) contrast(1.12);
}
.mv:hover .mv__art--builder img,
.mv:hover .mv__art--warden img{
  filter:grayscale(.72) brightness(.72) contrast(1.12);
}

/* The rings ran to x=1672 on a 1440 viewport with no edge at all. */
.ap{overflow:hidden}
.ap__rings{max-width:100%}