/* The renderer fills the hero; copy floats above its quiet left edge. */
.about-ascii-hero{position:relative;isolation:isolate;overflow:hidden;background:#000;border-bottom:1px solid var(--line)}
.about-ascii-hero>.in{max-width:var(--maxw);margin:0 auto;padding:80px var(--gutter) 125px;min-height:clamp(640px,calc(100svh - 90px),860px);display:flex;align-items:center;pointer-events:none}
.about-ascii-copy{position:relative;z-index:2;display:grid;gap:27px;width:40%;max-width:540px;pointer-events:none;text-shadow:0 2px 25px #000}
.about-ascii-copy h1{font-size:clamp(38px,4.2vw,64px);line-height:1.04;max-width:18ch}
.about-ascii-copy .lede{font-size:17px;max-width:39ch}
.about-ascii-copy .cta{align-items:center;gap:21px;pointer-events:none}
.about-ascii-copy a{pointer-events:auto}
.about-ascii-copy .story-link{font-size:12px;margin:0;border:0}
.about-ascii-figure{position:absolute;inset:0;margin:0;z-index:0;pointer-events:auto}
.about-ascii-figure iframe{display:block;width:100%;height:100%;border:0;background:transparent}
.about-ascii-figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000e 0%,#0009 26%,transparent 45%)}
.about-ascii-figure figcaption{position:absolute;z-index:1;bottom:27px;left:var(--gutter);right:var(--gutter);display:flex;gap:18px;justify-content:space-between;font:9px/1.7 var(--mono);color:#aaa3b6;pointer-events:none}
.about-ascii-figure>p{display:none}
@media(max-width:950px) and (min-width:701px){.about-ascii-copy{width:47%}.about-ascii-copy h1{font-size:43px}.about-ascii-copy .lede{font-size:15px}}
@media(max-width:700px){.about-ascii-hero>.in{min-height:820px;align-items:flex-start;padding-top:36px;padding-bottom:340px}.about-ascii-copy{width:100%;max-width:480px;gap:22px}.about-ascii-copy h1{font-size:clamp(36px,8.5vw,48px);max-width:19ch}.about-ascii-copy .lede{font-size:16px}.about-ascii-copy .cta{gap:16px}.about-ascii-figure::after{background:linear-gradient(180deg,#0009,transparent 44%)}.about-ascii-figure figcaption{font-size:8px;bottom:18px;display:block}.about-ascii-figure figcaption span{display:block}.about-ascii-figure figcaption span+span{margin-top:5px}}
/* §03 Our purpose: the helix ribbon (assets/vibe-helix.js). The host holds the
   frame's 640x560 aspect so nothing moves when the still is swapped for the
   live canvas; the two layers and the still all fill it. */
.helix-stage{position:relative;width:100%;aspect-ratio:640/560}
.purpose-figure .helix-stage canvas,.purpose-figure .helix-stage svg,.purpose-figure .helix-stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.purpose-figure .helix-stage svg{overflow:visible;pointer-events:none}
.helix-stage .hx-idx{fill:#6e7085}
.helix-stage .hx-num{fill:#efeaf6;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.helix-stage .hx-dot{fill:#efeaf6}
@media(max-width:500px){.helix-stage .hx-num{font-size:21px}}
/* §03's layout: on wide screens the helix sits on the left and the heading and
   text on the right, the mirror of §02 above. The markup keeps the order
   heading, figure, text, so narrow screens stack them that way. The figure
   spans both rows; the heading sits at the foot of the first and the text at
   the top of the second, so the words stay together, centred on the figure. */
.purpose-copy p{font-size:15.5px;font-weight:300;line-height:1.68;color:var(--fg-2);max-width:56ch}
.purpose-copy p+p{margin-top:16px}
@media(min-width:921px){
 .purpose-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"fig head" "fig copy";column-gap:clamp(30px,6vw,88px)}
 .purpose-split>.purpose-figure{grid-area:fig;align-self:center;max-width:none;margin:0}
 .purpose-split>.sec-head{grid-area:head;align-self:end;margin-bottom:clamp(22px,2.4vw,32px)}
 .purpose-split>.purpose-copy{grid-area:copy;align-self:start}
 /* a little under the site's h2 size, so each of its two lines fits the column */
 .purpose-split h2{font-size:clamp(28px,3.55vw,48px)}
}
/* §02 A collective picture: the pattern surface (assets/vibe-pattern.js).
   Same arrangement as the helix: the host holds the 640x560 aspect and a
   still; the canvas and the label layer replace the still once live. */
.pattern-stage{position:relative;width:100%;aspect-ratio:640/560}
.story-figure .pattern-stage canvas,.story-figure .pattern-stage svg,.story-figure .pattern-stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-figure .pattern-stage svg{overflow:visible;pointer-events:none}
.pattern-stage .pt-now{fill:#efeaf6;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.pattern-stage .pt-dot{fill:#efeaf6}
.pattern-stage .pt-foot{fill:#a79ab5;font:10px var(--mono);letter-spacing:1.6px}
/* place names sit over contour lines: a halo in the page colour, as on a map */
.pattern-stage .pt-place{paint-order:stroke;stroke:#07080e;stroke-width:3.2px;stroke-linejoin:round}
@media(max-width:500px){.pattern-stage .pt-now{font-size:21px}.pattern-stage .pt-foot{font-size:17px;letter-spacing:2.2px}}