/* Summary · the selected Sweep and twelve held readings.
   Source adopts the approved Final 2.1 study; phone, print and reduced
   motion retain the complete document. */
#sec-summary{
  --sans:Helvetica,'Helvetica Neue',Arial,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --ease:var(--elastic-ease,cubic-bezier(.16,1,.3,1));
  --sum:var(--mhc-chapter-summary-ink);--sum-field:var(--mhc-chapter-summary-field);
  --soft:var(--mhc-on-paper-3);--faint:var(--mhc-on-paper-4);
  --rule:color-mix(in srgb,var(--mhc-ink) 16%,transparent);--rule-soft:color-mix(in srgb,var(--mhc-ink) 9%,transparent);
  --t-mono:11px;--t-label:13px;--t-note:15px;--t-body:17px;
  --t-reading:clamp(21px,2vw,27px);--t-title:clamp(27px,2.4vw,34px);
  --t-finding:clamp(34px,3.6vw,58px);--t-close:clamp(58px,7vw,100px);
  --glass:var(--elastic-glass-surface,linear-gradient(135deg,rgba(var(--mhc-float-rgb),.9),rgba(var(--mhc-float-rgb),.66)));
  --glass-light:linear-gradient(140deg,rgba(var(--mhc-float-rgb),.62),rgba(var(--mhc-float-rgb),.40));
  --edge:var(--elastic-glass-edge,color-mix(in srgb,var(--mhc-ink) 22%,transparent));
  --edge-soft:var(--elastic-glass-edge-soft,color-mix(in srgb,var(--mhc-ink) 12%,transparent));
  --lift:var(--elastic-glass-shadow,0 18px 44px rgba(var(--mhc-shadow-rgb),.18),0 3px 10px rgba(var(--mhc-shadow-rgb),.08));
  --blur:blur(22px) saturate(1.15);
  --r-plate:28px;--r-panel:20px;--r-pill:999px;
  --gutter:clamp(24px,5vw,80px);
  /* The two movements' plates: a volume on its chapter's colour, a finding on
     the Summary's own verdigris bloom, as the shipped chapter paints them. */
  --proof-bloom-share:72%;--proof-shade-share:57%;--proof-base-share:40%;--proof-soft-share:22%;
  position:relative;color:var(--mhc-on-paper);
  font:400 var(--t-body)/1.55 var(--sans);letter-spacing:-.012em;
}
html[data-theme='dark'] #sec-summary{--proof-bloom-share:30%;--proof-shade-share:24%;--proof-base-share:16%;--proof-soft-share:10%}
#sec-summary *{box-sizing:border-box}
#sec-summary :is(h1,h2,h3,h4,p,ol,ul,dl){margin:0}
#sec-summary :is(h1,h2,h3,h4){font-weight:400;text-wrap:balance;text-transform:none}
#sec-summary p{text-wrap:pretty}
#sec-summary ol,#sec-summary ul{padding:0;list-style:none}
#sec-summary a{color:inherit}
#sec-summary button{font:inherit;cursor:pointer;color:inherit}
#sec-summary :is(button,summary){font-family:inherit}
#sec-summary svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#sec-summary ::selection{background:var(--sum-field);color:#111210}
#sec-summary :focus-visible{outline:2px solid var(--sum);outline-offset:4px}
#sec-summary [hidden]{display:none!important}
#sec-summary .sum-local-nav{display:none}
#sec-summary .summary-anchor{display:block;height:0}
#sec-summary :is(section,article,li)[id]{scroll-margin-top:var(--mhc-section-scroll-inset,28px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -- the cover copy, the heads, the plates --------------------------------------- */
#sec-summary header{padding:0;border:0;background:none}
.se-cover-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.se-cover-heading{position:relative;width:fit-content;max-width:100%}
.se-cover-description{max-width:30ch;margin-top:26px}
[data-chapter-hero] .se-cover-description{color:var(--mhc-on-paper-3)!important}
.se-continue{display:grid;place-items:center;width:48px;height:48px;color:var(--sum)}
.se-continue svg{width:22px;height:22px;stroke-width:1.25;transition:transform .25s var(--ease)}
.se-continue:hover svg{transform:translateY(3px)}
.se-head{--mhc-section-field-ink:var(--sum);--sans:Helvetica,'Helvetica Neue',Arial,sans-serif;margin:0}
.se-head .mhc-section-statement{max-width:14ch}
.se-head .mhc-section-support{display:grid;gap:18px}
.se-scope{font-size:var(--t-note);line-height:1.5;color:var(--soft)}

.se-volume-plate{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 clamp(22px,2.5vw,36px);padding:clamp(22px,2.6vw,36px);border:1px solid color-mix(in srgb,var(--chapter) 40%,var(--edge-soft));border-radius:var(--r-plate);
  background:linear-gradient(150deg,color-mix(in srgb,var(--chapter) 16%,rgba(var(--mhc-float-rgb),.88)),color-mix(in srgb,var(--chapter) 6%,rgba(var(--mhc-float-rgb),.64)));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift)}
.se-volume-name{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:18px;font:500 var(--t-label)/1.2 var(--sans);letter-spacing:-.005em}
.se-volume-name b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--chapter) 84%,transparent);color:var(--mhc-on-chroma,#10110f);font:500 var(--t-mono)/1 var(--mono);letter-spacing:.05em}
.se-volume-count{margin-left:auto;font:500 var(--t-mono)/1 var(--mono);font-style:normal;letter-spacing:.05em;color:var(--soft);font-variant-numeric:tabular-nums}
.se-volume-title{grid-column:1;font-size:var(--t-title);line-height:1.1;letter-spacing:-.03em;max-width:18ch}
.se-volume-text{grid-column:1;margin-top:18px;font-size:var(--t-body);line-height:1.6;max-width:52ch}
.se-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px}
.se-actions .mhc-link{font-weight:500}
.se-actions .mhc-link span,.se-ref span{font:500 var(--t-mono)/1 var(--mono);letter-spacing:.05em;color:var(--soft)}
.se-volume-plate>.se-actions{grid-column:1}
.se-guide{grid-column:2;grid-row:2/5;align-self:start;padding-left:clamp(22px,2.5vw,36px);border-left:1px solid color-mix(in srgb,var(--chapter) 55%,var(--rule))}
.se-guide-label{font-size:var(--t-label);line-height:1.4;font-weight:500;color:var(--sum);margin-bottom:12px}
.se-guide p{font-size:var(--t-note);line-height:1.6;color:var(--soft)}

.se-finding-plate{
  --proof-bloom:color-mix(in srgb,var(--sum-field) var(--proof-bloom-share),var(--mhc-ground));
  --proof-shade:color-mix(in srgb,var(--sum-field) var(--proof-shade-share),var(--mhc-ground));
  --proof-base:color-mix(in srgb,var(--sum-field) var(--proof-base-share),var(--mhc-ground));
  --proof-soft:color-mix(in srgb,var(--sum-field) var(--proof-soft-share),var(--mhc-ground));
  position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px clamp(30px,4vw,60px);align-content:start;padding:clamp(26px,3vw,40px);border:1px solid var(--edge-soft);border-radius:var(--r-plate);
  background:radial-gradient(ellipse at 12% 14%,var(--proof-bloom),transparent 68%),radial-gradient(ellipse at 96% 88%,var(--proof-shade),transparent 72%),linear-gradient(130deg,var(--proof-base),var(--proof-soft));
  box-shadow:0 14px 38px rgba(var(--mhc-shadow-rgb),.09),inset 0 1px 0 color-mix(in srgb,var(--mhc-ink) 12%,transparent)}
.se-count{display:flex;align-items:baseline;gap:10px;margin-bottom:20px;font:500 var(--t-mono)/1.4 var(--mono);color:var(--soft);font-variant-numeric:tabular-nums}
.se-count b{font-weight:500;font-size:var(--t-body);color:var(--sum)}
.se-finding-title{font-size:var(--t-finding);font-weight:300;letter-spacing:-.04em;line-height:1.04;max-width:20ch}
.se-finding-body{margin-top:22px;font-size:var(--t-body);line-height:1.55;color:var(--soft);max-width:54ch}
.se-finding-meaning{padding-left:clamp(26px,3vw,44px);border-left:1px solid var(--rule)}
.se-lane-label{font:500 var(--t-label)/1.4 var(--sans);color:var(--sum);margin-bottom:18px}
.se-implication{font-size:var(--t-reading);line-height:1.22;letter-spacing:-.025em;margin-bottom:18px}
.se-meaning{font-size:var(--t-body);line-height:1.55;max-width:46ch;color:var(--soft)}
.se-limit{margin-top:20px;padding-top:12px;border-top:1px solid var(--rule)}
.se-limit>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;font:400 var(--t-label)/1.4 var(--sans);color:var(--soft)}
.se-limit>summary::-webkit-details-marker{display:none}
.se-limit>summary:hover{color:var(--mhc-on-paper)}
.se-limit svg{width:16px;height:16px;transition:transform .36s var(--ease)}
.se-limit[open] svg{transform:rotate(45deg)}
.se-limit>p{font-size:var(--t-note);line-height:1.55;padding-top:10px;color:var(--soft)}
.se-finding-evidence{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--rule)}
.se-finding-evidence>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;margin:0}
.se-finding-evidence>summary::-webkit-details-marker{display:none}
.se-finding-evidence>summary svg{width:16px;height:16px;transition:transform .36s var(--ease)}
.se-finding-evidence[open]>summary svg{transform:rotate(45deg)}
.se-finding-evidence[open]>summary{margin-bottom:10px}
.se-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}
.se-sources:has(li:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.se-sources li{min-width:0}
.se-sources .chapter-ref{width:max-content;max-width:100%}
.se-sources p{font-size:var(--t-note);line-height:1.5;margin:12px 0 6px;max-width:46ch;color:var(--soft)}
.se-source{display:inline-block;font-size:var(--t-label);line-height:1.45;padding-block:6px}

.se-close-plate{position:relative;width:100%;max-width:900px;margin:0 auto;text-align:center}
.se-close-title{font-size:var(--t-close);font-weight:300;line-height:.88;letter-spacing:-.04em;max-width:900px;margin:0 auto}
.se-close-body{font-size:var(--t-body);line-height:1.55;max-width:56ch;margin:28px auto 0}

/* -- the held stage ----------------------------------------------------------------- */
.st-track{position:relative}
.st-stage{position:relative;display:flex;flex-direction:column;gap:40px;padding:calc(var(--archive-masthead-band,48px) + 32px) var(--gutter) 80px}
/* Released, the column opens on the cover, then the strip and the complete
   instrument, then the readings in order. */
html:not(.sum-stage-live) .st-readings,html:not(.sum-stage-live) .st-deck{display:contents}
html:not(.sum-stage-live) .st-reading--cover{order:0}
html:not(.sum-stage-live) .st-strip{order:1}
html:not(.sum-stage-live) .st-instrument{order:2}
html:not(.sum-stage-live) .st-reading:not(.st-reading--cover){order:3}
.st-span{display:none}
/* The instrument's panel: a matte field of the chapter's own colour, with no
   glass and no lift, so that the chapters' side of the stage and the glass
   plates on the readings' side are two materials as well as two grounds. */
.st-instrument{position:relative;display:flex;flex-direction:column;min-height:0;padding:20px 20px 18px;border:1px solid color-mix(in srgb,var(--sum-field) 48%,transparent);border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--sum-field) var(--panel-share,18%),var(--mhc-ground))}
html[data-theme='dark'] .st-instrument{--panel-share:24%}
.st-instrument-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid color-mix(in srgb,var(--sum-field) 45%,var(--rule))}
.st-movement{font:500 var(--t-label)/1.3 var(--sans);letter-spacing:-.005em;color:var(--sum)}
.st-count{font:500 var(--t-mono)/1.3 var(--mono);letter-spacing:.05em;color:var(--soft);font-variant-numeric:tabular-nums;min-height:1.3em}
.st-readings{display:grid;gap:28px;min-height:0}
/* The movement strip: the three sections of the chapter, each with one bead
   for each of its readings, the one being read drawn out into a pill that
   fills as the reading goes by, and a bead darker once its reading is read. */
.st-strip{display:grid;grid-template-columns:6fr 5fr 2fr;gap:12px}
.st-strip-segment{display:grid;gap:9px;align-content:start;padding-top:10px;border-top:1px solid var(--rule);color:var(--soft);text-decoration:none;transition:color .25s ease,border-color .25s ease}
.st-strip-segment[data-current]{color:var(--mhc-on-paper);border-top-color:var(--sum)}
.st-strip-label{display:flex;align-items:baseline;gap:8px;font:500 var(--t-label)/1.3 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.st-strip-label i{font:500 var(--t-mono)/1 var(--mono);font-style:normal;letter-spacing:.05em;color:var(--sum)}
.st-strip-beads{display:flex;gap:6px;min-height:6px}
.st-strip-beads b{--fill:0;display:block;width:6px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--mhc-ink) 22%,transparent);transition:width .4s var(--ease),background .2s ease}
.st-strip-beads b[data-read]{background:color-mix(in srgb,var(--mhc-ink) 46%,transparent)}
.st-strip-beads b[aria-current]{width:24px;background:linear-gradient(to right,var(--sum) calc(var(--fill) * 100%),color-mix(in srgb,var(--sum) 30%,transparent) 0)}
.st-deck{position:relative;display:grid;gap:clamp(44px,6vh,80px)}
.st-reading{position:relative}
.st-reading--cover{display:grid;gap:40px}
.st-reading--cover>.se-continue{justify-self:center}
.st-reading--close .se-close-plate{margin:0 auto}

/* -- the stage holds ---------------------------------------------------------------- */
html.sum-stage-live .st-track{--st-span:100svh}
html.sum-stage-live .st-stage{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;display:grid;gap:0;grid-template-columns:clamp(340px,33vw,430px) minmax(0,1fr);gap:clamp(28px,3.5vw,56px);align-items:stretch;padding:calc(var(--archive-masthead-band,48px) + 20px) clamp(40px,5vw,96px) 48px clamp(28px,4vw,72px)}
html.sum-stage-live .st-span{display:block;height:calc(var(--span,1) * var(--st-span))}
html.sum-stage-live .st-span:last-child{height:calc(var(--span,1) * var(--st-span) + 40svh)}
html.sum-stage-live .st-instrument{z-index:1;overflow:hidden}
html.sum-stage-live .st-readings{position:relative;z-index:2;grid-template-rows:auto minmax(0,1fr);gap:18px}
html.sum-stage-live .st-deck{display:block;min-height:0}
/* A reading not on the stage leaves the layout entirely. */
html.sum-stage-live .st-reading{position:absolute;inset:0;display:none;align-content:center}
html.sum-stage-live .st-reading[data-state]{display:grid}
html.sum-stage-live .st-reading[data-state="enter"]{transform:translate3d(0,calc(var(--dir,1) * 64px),0);opacity:0}
html.sum-stage-live .st-reading[data-state="active"]{transform:none;opacity:1;transition:transform .9s var(--ease),opacity .45s ease}
html.sum-stage-live .st-reading[data-state="exit"]{transform:translate3d(0,calc(var(--dir,1) * -48px),0);opacity:0;transition:transform .5s cubic-bezier(.5,0,.9,.4),opacity .3s ease;pointer-events:none}
html.sum-stage-live .st-reading>:is(.se-volume-plate,.se-finding-plate){max-height:100%;overflow:auto;scrollbar-width:thin}
/* Keep expanded evidence readable to the panel edge; the scrollbar signals overflow. */
html.sum-stage-live .st-reading>:is(.se-volume-plate,.se-finding-plate){scrollbar-color:var(--sum) transparent}
html.sum-stage-live .st-reading--cover{gap:0}
html.sum-stage-live .st-reading--cover>.se-continue{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
html.sum-stage-live .st-reading--cover>.se-continue svg{filter:drop-shadow(0 0 4px var(--mhc-ground))}
/* Short windows keep the whole plate on the stage. */
@media(max-height:820px){
  html.sum-stage-live .st-reading{--t-finding:clamp(27px,2.8vw,40px);--t-body:15px;--t-reading:21px;--t-title:27px}
  html.sum-stage-live .se-finding-plate{padding:18px 22px 16px;gap:16px 24px}
  html.sum-stage-live .se-count{margin-bottom:12px}
  html.sum-stage-live .se-finding-body{margin-top:12px}
  html.sum-stage-live .se-finding-meaning{padding-top:16px}
  html.sum-stage-live .se-lane-label{margin-bottom:10px}
  html.sum-stage-live .se-implication{margin-bottom:12px}
  html.sum-stage-live .se-limit{margin-top:12px;padding-top:6px}
  html.sum-stage-live .se-limit>summary{min-height:36px}
  html.sum-stage-live .se-finding-evidence{padding-top:8px}
  html.sum-stage-live .se-sources p{margin:8px 0 2px}
  html.sum-stage-live .se-volume-plate{padding:22px 24px}
  html.sum-stage-live .se-volume-text{margin-top:12px}
}
@media(max-width:1280px){
  html.sum-stage-live .se-finding-plate,html.sum-stage-live .se-volume-plate{grid-template-columns:1fr}
  html.sum-stage-live .se-finding-meaning{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--rule)}
  html.sum-stage-live .se-guide{grid-column:1;grid-row:auto;padding:20px 0 0;margin-top:20px;border-left:0;border-top:1px solid var(--rule)}
  html.sum-stage-live .se-sources:has(li:nth-child(3)){grid-template-columns:1fr 1fr}
}

/* -- the released column ------------------------------------------------------------- */
html:not(.sum-stage-live) .st-instrument{width:min(100%,560px)}

/* -- smaller screens --------------------------------------------------------------------- */
@media(max-width:899px){
  .se-volume-plate{grid-template-columns:1fr}
  .se-volume-plate>.se-actions,.se-volume-title,.se-volume-text{grid-column:1}
  .se-guide{grid-column:1;grid-row:auto;padding:24px 0 0;margin-top:24px;border-left:0;border-top:1px solid var(--rule)}
  .se-finding-plate{grid-template-columns:1fr}
  .se-finding-meaning{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid var(--rule)}
  .se-sources:has(li:nth-child(3)){grid-template-columns:1fr 1fr}
  .se-sources li:nth-child(3){grid-column:1/-1}
}
@media(max-width:759px){
  #sec-summary{--t-body:16px;--t-reading:21px;--t-title:27px;--t-finding:34px;--t-close:44px}
  .st-stage{padding:76px 20px 64px;gap:32px}
  .st-reading--cover .se-cover-copy{padding-left:30px}
  .st-strip{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .st-strip-label{white-space:normal}
  .se-volume-plate,.se-finding-plate{padding:24px 22px;border-radius:20px}
  .se-sources,.se-sources:has(li:nth-child(3)){grid-template-columns:1fr;gap:20px}
  .se-sources li+li{padding-top:18px;border-top:1px solid var(--rule-soft)}
}
@media(prefers-reduced-motion:reduce){
  #sec-summary *,#sec-summary *::before,#sec-summary *::after{animation:none!important;transition:none!important}
}
@media print{
  .se-continue{display:none!important}
  .se-volume-plate,.se-finding-plate,.st-instrument{background:none;box-shadow:none;border:0;padding:24px 0;break-inside:avoid}
  .se-limit>p{display:block!important}
}

/* F · Final · the shipped cover and the independent chapter index.
   The page opens on the Summary's cover exactly as it ships, its weave running
   on the chapter field, and the held stage takes the cover's place as the
   reader scrolls. The five chapters stand on the page at the stage's left,
   with no panel and nothing beside them. The weave exits through the markers
   and continues off the left edge during the hero's departure.
   The conclusion is not on the stage: it closes the chapter below it,
   centred, as every chapter closes. The strip and the chapters are revealed by
   --fx-d, which the controller writes on the stage as the cover departs.
   Chapter highlights depend only on the current reading. */

/* -- the motif layer: the cover's weave, painted under the chapters ---------- */
.fx-motif{position:absolute;inset:0;z-index:1;pointer-events:none}
.fx-motif canvas{display:block;width:100%;height:100%}
.fx-motif[data-spent]{visibility:hidden}
.fx-motion-toggle{position:absolute;z-index:4;right:22px;bottom:24px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--soft);transition:opacity .4s ease}
.fx-motion-toggle svg{width:16px;height:16px}
.fx-motion-toggle .play-icon,.fx-motion-toggle[aria-pressed=true] .pause-icon{display:none}
.fx-motion-toggle[aria-pressed=true] .play-icon{display:block}
.fx-motion-toggle:hover{color:var(--mhc-on-paper)}
#sec-summary .fx-motif[data-spent]~.fx-motion-toggle{opacity:0;pointer-events:none}

/* -- the cover, as it ships ------------------------------------------------------ */
.fx-hero .se-cover-copy{position:absolute;left:57%;top:27%;width:37%}
.fx-hero .se-cover-description{max-width:27ch;margin-top:28px}
.fx-hero .se-continue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%)}
.fx-hero .se-continue svg{filter:drop-shadow(0 0 6px var(--mhc-ground))}

/* -- the held stage ---------------------------------------------------------------- */
html.sum-stage-live #sec-summary[data-direction="final"] .st-stage{grid-template-columns:272px minmax(0,1fr)}
html.sum-stage-live .st-reading.fx-hero{position:absolute;inset:0;z-index:3;align-content:normal}
html.sum-stage-live .st-reading.fx-hero[data-state]{display:block}
html.sum-stage-live .st-reading.fx-hero>.se-continue{bottom:24px}
/* The cover's copy leaves with the scroll and is gone at the exchange, so the
   first statement arrives into the place it has just left. */
html.sum-stage-live .fx-hero .se-cover-copy{opacity:calc(1 - var(--fx-d,0) * 1.1);translate:0 calc(var(--fx-d,0) * -40px)}
html.sum-stage-live .fx-hero .se-continue{opacity:calc(1 - var(--fx-d,0) * 2.5)}
html.sum-stage-live #sec-summary[data-direction="final"] .st-strip{opacity:var(--fx-d,1)}
#sec-summary[data-direction="final"] .st-strip{grid-template-columns:6fr 5fr}
#sec-summary[data-direction="final"] .st-readings{container:final-readings / inline-size}

/* -- the five chapters, on the page ------------------------------------------------ */
/* No panel: the chapters stand on the field. The aside makes no stacking
   context, so the departing weave can pass beneath the markers while the
   chapters themselves stand above it. */
#sec-summary .fx-index{align-self:center;padding:0;border:0;border-radius:0;background:none}
html.sum-stage-live #sec-summary .fx-index{z-index:auto;overflow:visible}
.fx-index>*{position:relative;z-index:2}
html.sum-stage-live .fx-index>*{opacity:var(--fx-d,1)}
.fx-chapters{display:grid;gap:8px}
.fx-chapter{display:grid;min-width:0}
.fx-name{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0;text-decoration:none;color:var(--mhc-on-paper);font:500 var(--t-label)/1.3 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.fx-name span{color:var(--soft)}
.fx-name:focus-visible{outline:2px solid var(--chapter-ink);outline-offset:4px;border-radius:4px}

/* Every chapter is complete from the start. Its own reading adds emphasis;
   the hero's departure never fills, births or animates the marker. */
.fx-chip{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chapter) 55%,transparent);
  transition:transform .5s var(--ease)}
.fx-chip::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--chapter) 86%,transparent);box-shadow:0 6px 16px rgba(var(--mhc-shadow-rgb),.18);transition:box-shadow .35s var(--ease)}
.fx-chip b{position:relative;font:500 var(--t-mono)/1 var(--mono);letter-spacing:.05em;color:var(--mhc-on-chroma,#10110f)}
.fx-chapter[data-lit] .fx-chip,.fx-name:is(:hover,:focus-visible) .fx-chip{transform:scale(1.1)}
.fx-chapter[data-lit] .fx-chip::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--chapter) 32%,transparent),0 6px 16px rgba(var(--mhc-shadow-rgb),.18)}
.fx-chapter[data-lit] .fx-name span,.fx-name:is(:hover,:focus-visible) span{color:var(--mhc-on-paper)}
.fx-chapter[data-lit] .fx-name span{font-weight:600}
.fx-chip,.fx-name span{transition:transform .5s var(--ease),opacity .4s ease,color .3s ease}
.fx-chapter[data-dim] .fx-chip{opacity:.7}
.fx-chapter[data-dim] .fx-name span{color:var(--soft)}

/* What a chapter shows for the finding being read, opened beneath its name.
   The finding's own lane is withheld on the held stage, so this is where the
   reader finds it; the notes unfold in the chapters' order. */
.fx-notes{display:grid;padding-left:40px}
.fx-note{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .3s ease}
.fx-note[data-on]{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .7s var(--ease),opacity .5s ease .12s}
.fx-note-in{min-height:0;overflow:hidden}
.fx-note p{max-width:32ch;padding-top:2px;font:400 var(--t-label)/1.45 var(--sans);letter-spacing:-.005em;color:var(--mhc-on-paper-3)}
.fx-note .fx-source{display:inline-block;margin:4px 0 10px;font-size:var(--t-label);line-height:1.4}
html:not(.sum-stage-live) .fx-notes{display:none}
.fx-index>.fx-caption{position:absolute;left:0;bottom:calc(100% + 18px);font:500 var(--t-label)/1.3 var(--sans);letter-spacing:-.005em;color:var(--sum);white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .4s ease,translate .6s var(--ease)}
html.sum-stage-live .fx-index>.fx-caption{opacity:0}
html.sum-stage-live .fx-index[data-finding]>.fx-caption{opacity:var(--fx-d,1);translate:0 0}
html:not(.sum-stage-live) .fx-index>.fx-caption{display:none}

/* -- reading composition --------------------------------------------------- */
/* Scope every spacing rule to the final: the shared heading/paragraph reset
   has ID specificity. Groups use grid gaps so the reset cannot flatten them.
   The two-column layout follows the reading width, not the window width. */
#sec-summary[data-direction="final"]{
  --reading-gap:24px;
  --reading-column-gap:32px;
  --reading-inset:32px;
}
#sec-summary[data-direction="final"] .st-reading{
  --t-title:clamp(27px,2.7vw,34px);
  --t-finding:clamp(34px,3.4vw,44px);
}
#sec-summary[data-direction="final"] .se-volume-plate{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--reading-gap) var(--reading-column-gap);
  padding:var(--reading-inset);
}
#sec-summary[data-direction="final"] .se-volume-name{margin:0;gap:12px}
#sec-summary[data-direction="final"] .se-volume-title{
  grid-column:1/-1;max-width:30ch;margin:0;
  font-size:var(--t-title);font-weight:400;line-height:1.12;letter-spacing:-.03em;
}
#sec-summary[data-direction="final"] .se-volume-text{
  grid-column:1;grid-row:3;max-width:52ch;margin:0;
  font-size:var(--t-body);line-height:1.55;
}
#sec-summary[data-direction="final"] .se-volume-plate>.se-actions{grid-column:1;grid-row:4;align-self:end;margin:0}
#sec-summary[data-direction="final"] .se-guide{
  grid-column:2;grid-row:3/5;display:grid;align-content:start;gap:16px;
  margin:0;padding:0 0 0 var(--reading-column-gap);
  border-top:0;border-left:1px solid color-mix(in srgb,var(--chapter) 55%,var(--rule));
}
#sec-summary[data-direction="final"] :is(.se-guide-label,.se-lane-label){
  margin:0;font:500 var(--t-label)/1.4 var(--sans);letter-spacing:-.005em;
}
#sec-summary[data-direction="final"] .se-guide p{font-size:var(--t-body);line-height:1.55}
#sec-summary[data-direction="final"] .se-guide .se-actions{margin:8px 0 0}
#sec-summary[data-direction="final"] .se-actions{gap:12px}
#sec-summary[data-direction="final"] .se-actions .se-ref{min-height:44px}

/* Findings retain the open field and hairline. The statement leads across
   the width; its account and significance read together beneath it. */
#sec-summary[data-direction="final"] .se-finding-plate{
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--reading-gap) var(--reading-column-gap);align-content:start;
  padding:24px 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--sum) 60%,transparent);
  border-radius:0;background:none;box-shadow:none;
}
#sec-summary[data-direction="final"] .se-finding-claim{display:contents}
#sec-summary[data-direction="final"] .se-count{grid-column:1/-1;margin:0}
#sec-summary[data-direction="final"] .se-finding-title{
  grid-column:1/-1;max-width:30ch;margin:0;
  font-size:var(--t-finding);font-weight:300;line-height:1.1;letter-spacing:-.035em;
}
#sec-summary[data-direction="final"] .se-finding-body{grid-column:1;max-width:54ch;margin:0;line-height:1.55}
#sec-summary[data-direction="final"] .se-finding-meaning{
  grid-column:2;display:grid;align-content:start;gap:16px;
  margin:0;padding:0 0 0 var(--reading-column-gap);border:0;border-left:1px solid var(--rule);
}
#sec-summary[data-direction="final"] .se-implication{margin:0;font-size:var(--t-reading);line-height:1.3;letter-spacing:-.02em}
#sec-summary[data-direction="final"] .se-meaning{margin:0;max-width:54ch;line-height:1.55}
#sec-summary[data-direction="final"] .se-limit{margin:8px 0 0;padding:8px 0 0}
#sec-summary[data-direction="final"] .se-limit>summary{min-height:44px}
#sec-summary[data-direction="final"] .se-limit>p{padding-top:12px}
#sec-summary[data-direction="final"] .se-finding-evidence{grid-column:1/-1;margin:0;padding-top:16px}
#sec-summary[data-direction="final"] .se-finding-evidence>summary{min-height:44px}
#sec-summary[data-direction="final"] .se-finding-evidence[open]>summary{margin-bottom:16px}
#sec-summary[data-direction="final"] .se-sources p{margin:12px 0 8px;line-height:1.55}
html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-evidence{display:none}

/* Released pages have no reading container, so their viewport breakpoint
   supplies the same stacked order. Held stages switch at the actual width. */
@container final-readings (max-width:660px){
  #sec-summary[data-direction="final"] :is(.se-volume-plate,.se-finding-plate){grid-template-columns:minmax(0,1fr)}
  #sec-summary[data-direction="final"] .se-guide{grid-column:1;grid-row:5;padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}
  #sec-summary[data-direction="final"] .se-finding-meaning{grid-column:1;padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}
}
@media(max-width:759px){
  #sec-summary[data-direction="final"]{--reading-inset:24px;--reading-column-gap:24px}
  #sec-summary[data-direction="final"] :is(.se-volume-plate,.se-finding-plate){grid-template-columns:minmax(0,1fr)}
  #sec-summary[data-direction="final"] .se-guide{grid-column:1;grid-row:5;padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}
  #sec-summary[data-direction="final"] .se-finding-meaning{grid-column:1;padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}
  #sec-summary[data-direction="final"] .se-sources{grid-template-columns:minmax(0,1fr)}
  #sec-summary[data-direction="final"] .se-sources li{grid-column:1}
}
@media(max-height:820px) and (min-width:1000px){
  html.sum-stage-live #sec-summary[data-direction="final"]{--reading-inset:28px;--reading-gap:20px;--reading-column-gap:28px}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-reading{--t-finding:34px}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-plate{padding-top:20px}
}
@media(prefers-reduced-motion:reduce){
  #sec-summary[data-direction="final"] .fx-chip,#sec-summary[data-direction="final"] .fx-chip::before{transition:none}
}
@media print{
  #sec-summary[data-direction="final"] .se-volume-plate{padding:24px 0}
}

/* -- the conclusion, apart and centred, as the shipped chapter closes ------------- */
#sec-summary .fx-close{position:relative;z-index:1;display:grid;place-items:center;align-content:center;padding:12vh var(--gutter) 0;text-align:center}
#sec-summary .fx-close>*{width:100%;max-width:900px}
#sec-summary .fx-close h2{font-family:var(--sans);font-size:clamp(58px,7vw,100px);font-weight:300;line-height:.88;letter-spacing:-.04em;margin:0 auto}
#sec-summary .fx-close p{font-size:var(--t-body);line-height:1.55;max-width:56ch;margin:28px auto 0}

/* -- released: the cover stands at the head of the column ----------------------- */
html:not(.sum-stage-live) #sec-summary[data-direction="final"] .st-stage{padding-top:0}
html:not(.sum-stage-live) .fx-motif{bottom:auto;height:max(100svh,640px)}
html:not(.sum-stage-live) .fx-hero{position:relative;z-index:2;min-height:max(100svh,640px);margin-inline:calc(-1 * var(--gutter))}
html:not(.sum-stage-live) .fx-motion-toggle{top:calc(max(100svh,640px) - 68px);bottom:auto}
html:not(.sum-stage-live) #sec-summary .fx-index{width:min(100%,360px)}
@media(max-width:759px){
  .fx-hero .se-cover-copy{left:88px;top:22%;width:calc(100% - 116px)}
  .fx-hero .se-cover-description{margin-top:24px;max-width:25ch}
  html:not(.sum-stage-live) .fx-hero{margin-inline:-20px}
  .fx-hero .se-continue{left:55%}
  .fx-motion-toggle{right:15px}
}
@media(prefers-reduced-motion:reduce){.fx-motion-toggle{display:none!important}}

/* The selected stage retains its reading exchange on compact desktops.
   Recompose the reading and index inside the viewport instead of releasing
   every article into the page at the old 1000px breakpoint. */
@media(min-width:760px) and (max-width:1199px){
  html.sum-stage-live #sec-summary[data-direction="final"]{
    --reading-inset:24px;--reading-gap:20px;--reading-column-gap:24px;
  }
  html.sum-stage-live #sec-summary[data-direction="final"] .st-stage{
    grid-template-columns:clamp(160px,19vw,220px) minmax(0,1fr);
    gap:24px;padding-inline:clamp(24px,3vw,36px);padding-bottom:64px;
  }
  html.sum-stage-live #sec-summary[data-direction="final"] .st-reading{--t-title:27px;--t-finding:34px}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-head{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-head .mhc-section-statement{max-width:19ch;font-size:clamp(44px,5.5vw,58px);line-height:1.05}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-head .mhc-section-support{max-width:48ch;font-size:17px;line-height:1.5}
  html.sum-stage-live .fx-hero .se-cover-copy{left:51%;width:44%}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-guide,
  html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-meaning{gap:12px;padding-top:20px}
}
@media(min-width:760px) and (max-width:999px){
  html.sum-stage-live #sec-summary[data-direction="final"] .fx-chapters{gap:6px}
  html.sum-stage-live #sec-summary[data-direction="final"] .fx-name{gap:10px}
  html.sum-stage-live #sec-summary[data-direction="final"] .fx-notes,
  html.sum-stage-live #sec-summary[data-direction="final"] .fx-caption{display:none}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-evidence{display:block}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-sources{grid-template-columns:minmax(0,1fr);gap:20px}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-sources li{grid-column:1}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-readings{gap:16px}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-strip{gap:16px}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-reading[data-state="enter"]{transform:translate3d(0,48px,0)}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-reading[data-state="exit"]{transform:translate3d(0,-36px,0)}
}

@media(min-width:760px) and (max-width:999px){
  html.sum-stage-live #sec-summary[data-direction="final"]{--reading-gap:16px;--reading-inset:20px}
  html.sum-stage-live #sec-summary[data-direction="final"] .st-reading{--t-finding:27px}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-plate{padding-top:16px}
  html.sum-stage-live #sec-summary[data-direction="final"] .se-finding-body,
  html.sum-stage-live #sec-summary[data-direction="final"] .se-meaning{line-height:1.5}
  /* Keep the existing named controls; compact their visual captions so a
     pinned top rail cannot cover the archive title in a narrow window. */
  html.mhc-wayfinding-ready[data-rail-dock="top"] body[data-chapter="summary"] .rail-room-name,
  html.mhc-wayfinding-ready[data-rail-dock="top"] body[data-chapter="summary"] .rail-way .mhc-xref-return__copy{max-width:0;opacity:0;overflow:hidden}
}

/* Clear the route container’s former Summary geometry. */
body.mhc-archive-enabled.chapter-reading[data-chapter="summary"] #sec-summary{box-sizing:border-box;padding:0;margin:0;width:100%;max-width:none;border:0;overflow:visible;background:transparent}
