/* Foil standard v2 (2026-09-25). James: merge "Good design goes all the way through" into the foil section and make
   each point collapsible. The section is no longer pinned: seven points that open to their detail cannot fit a
   one-screen stage, so the copy scrolls and the foil stays beside it (sticky on desktop). Lamps light as each point
   reaches the reader, a beat apart; opening a point lights its lamp (foil-standard-v2.js). Replaces v1. */
body .standard-story{height:auto}
body .standard-stage{position:relative;height:auto;min-height:0;overflow:visible;overflow-x:clip;align-items:start;align-content:start;padding-top:130px;padding-bottom:110px}
body .standard-copy>p{margin-top:18px}
body .standard-copy .foil-k{margin-top:30px;font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2,#56565d)}
.foil-list{list-style:none;margin:12px 0 0;padding:0;max-width:620px;border-top:1px solid rgb(0 0 0 / .12)}
.foil-list>li{border-bottom:1px solid rgb(0 0 0 / .12);scroll-margin-top:110px}
.foil-list summary{list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr) 14px;align-items:center;column-gap:12px;min-height:50px;padding:10px 0;cursor:pointer;color:var(--ink,#1f1f23)}
.foil-list summary::-webkit-details-marker{display:none}
.foil-list summary b{font-size:16px;font-weight:600;line-height:1.35}
@media (hover:hover){.foil-list summary:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.foil-list summary:focus-visible{outline:2px solid var(--ink,#1f1f23);outline-offset:3px;border-radius:2px}
.foil-list .lamp{width:16px;height:3px;border-radius:2px;background:#cfcfd4;transition:background .15s}
.foil-list .pm{position:relative;width:12px;height:12px;justify-self:end}
.foil-list .pm::before,.foil-list .pm::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s ease}
.foil-list .pm::after{transform:rotate(90deg)}
.foil-list details[open] .pm::after{transform:rotate(0)}
.foil-more{padding:0 26px 18px 34px}
.foil-more p{font-size:14.5px;line-height:1.7;color:#4f4f56;max-width:60ch;margin:0}
.foil-more p+p{margin-top:10px}
.foil-more a{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink,#1f1f23);border-bottom:1px solid currentColor;padding-bottom:1px}
/* opening animates its height where the browser can; the text moves with it and never fades */
@supports (interpolate-size:allow-keywords){
  .foil-list{interpolate-size:allow-keywords}
  .foil-list details::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}
  .foil-list details[open]::details-content{block-size:auto}
}
.foil-list li.on .lamp{background:var(--tube-sat,rgb(255 61 154));box-shadow:0 0 1px var(--n90,#ff3d9a),0 3px 8px 0 var(--n70,rgb(255 61 154 / .7)),0 8px 16px -2px var(--n25,rgb(255 61 154 / .25))}
.foil-list li.igniting .lamp{animation:neon-ignite 1.05s steps(1,end) both}
body .standard-copy .standard-footnote{margin-top:24px;font-size:13px;line-height:1.65;color:#56565d;max-width:60ch}
@media (min-width:1001px){
  body .standard-stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6%}
  body .standard-copy h2{font-size:clamp(40px,4.2vw,62px)}
  body .standard-copy>p{max-width:56ch}
  body .seal-scene{position:sticky;top:calc(50svh - 230px)}
}
@media (max-width:800px){
  body .standard-stage{padding-top:90px;padding-bottom:70px}
  .foil-list summary{min-height:52px}
  .foil-more{padding:0 6px 16px 34px}
  .foil-more p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.foil-list li.igniting .lamp{animation:none}.foil-list details::details-content{transition:none}}