/* Slate overview: one answer, one movement, then requested context and evidence. */
#scene .about-overview {
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  padding:26px 34px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
  color:hsl(var(--text));
  background:transparent;
  pointer-events:auto;
  scrollbar-width:thin;
}

#scene .about-path {margin:0;max-width:none;flex:0 0 auto;}
#scene .about-path :is(a,span) {min-height:22px;font-size:10px;}

.about-focus {
  display:grid;
  grid-template-columns:minmax(460px,.82fr) minmax(620px,1.18fr);
  gap:clamp(56px,5vw,96px);
  align-items:stretch;
  flex:1 0 auto;
  min-height:390px;
}
.about-focus-copy {align-self:center;min-width:0;max-width:700px;}
#scene .about-eyebrow {
  margin:0 0 16px;
  font:500 10px/1.4 var(--mono-font,ui-monospace,monospace);
  letter-spacing:.09em;
  color:hsl(var(--primary));
}
#scene .about-overview h1 {
  max-width:15ch;
  margin:0;
  font:500 clamp(44px,3.4cqw,58px)/1.02 var(--font-sans,"Albert Sans",sans-serif);
  letter-spacing:-.048em;
  color:hsl(var(--text-strong));
}
#scene .about-deck {
  max-width:55ch;
  margin:22px 0 0;
  font:400 16px/1.55 var(--font-sans,"Albert Sans",sans-serif);
  color:hsl(var(--text));
}
#scene .about-primary-action {
  width:max-content;
  min-height:42px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  margin-top:26px;
  padding:9px 15px;
  border:1px solid hsl(var(--complement) / .72);
  border-radius:6px;
  background:hsl(var(--complement) / .09);
  color:hsl(var(--complement));
  font:500 13px/1.3 var(--font-sans,"Albert Sans",sans-serif);
  text-decoration:none;
  transition:background-color 180ms,border-color 180ms;
}
#scene .about-primary-action:hover {background:hsl(var(--complement) / .16);}

.about-map {
  box-sizing:border-box;
  min-width:0;
  min-height:390px;
  margin:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid hsl(var(--border-default));
  border-radius:8px;
  background:linear-gradient(145deg,hsl(var(--surface) / .34),hsl(var(--canvas) / .8));
  overflow:hidden;
}
.about-map-head {display:flex;justify-content:space-between;gap:16px;font:500 9px/1.4 var(--mono-font,ui-monospace,monospace);letter-spacing:.06em;color:hsl(var(--text-muted));}
.about-map-state {color:hsl(var(--reference));}
.about-map-mesh {display:block;width:100%;height:190px;min-height:126px;flex:1 1 190px;border-radius:4px;pointer-events:none;}
.about-map-caption {max-width:56ch;font:500 15px/1.4 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-strong));}

.about-context {border-top:1px solid hsl(var(--border-subtle));}
.about-context > summary,.about-reference > summary {
  min-height:42px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:hsl(var(--reference));
  font:500 11px/1.4 var(--font-sans,"Albert Sans",sans-serif);
  cursor:pointer;
  list-style:none;
}
.about-context > summary::-webkit-details-marker,.about-reference > summary::-webkit-details-marker {display:none;}
.about-context > summary::after,.about-reference > summary::after {content:"+";font:500 14px var(--mono-font,monospace);}
.about-context[open] > summary::after,.about-reference[open] > summary::after {content:"\2212";}
.about-layers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:12px;border-top:1px solid hsl(var(--border-subtle));}
#scene .about-layer {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:44px;
  padding:8px 10px;
  border:1px solid hsl(var(--border-subtle));
  border-radius:5px;
  background:transparent;
  color:hsl(var(--text-muted));
  text-align:left;
  cursor:pointer;
}
#scene .about-layer:is(:hover,[aria-pressed="true"]) {border-color:hsl(var(--primary) / .6);background:hsl(var(--primary) / .06);color:hsl(var(--text-strong));}
.about-layer-number {font:500 9px/1 var(--mono-font,monospace);color:hsl(var(--primary));}
.about-layer-name {font:500 12px/1.25 var(--font-sans,"Albert Sans",sans-serif);}
.about-layer-detail {min-height:70px;padding:12px 2px 0;}
.about-layer-detail strong {display:block;margin-bottom:5px;font:500 15px/1.3 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-strong));}
#scene .about-layer-detail p {max-width:74ch;margin:0;font:400 12px/1.45 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}

.about-boundary {
  display:flex;
  align-items:center;
  gap:18px 28px;
  flex:0 0 auto;
  min-height:54px;
  padding-top:13px;
  border-top:1px solid hsl(var(--border-subtle));
}
.about-boundary-label {flex:0 0 auto;font:500 9px/1.4 var(--mono-font,monospace);letter-spacing:.07em;color:hsl(var(--primary));}
.about-boundary > strong {font:500 14px/1.4 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-strong));}
.about-reference {margin-left:auto;flex:0 0 auto;}
.about-reference[open] {flex-basis:100%;margin-left:0;}
.about-boundary:has(.about-reference[open]) {flex-wrap:wrap;}
.about-reference-body {display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:16px 0 4px;border-top:1px solid hsl(var(--border-subtle));}
.about-reference-item h2 {margin:0 0 6px;font:500 15px/1.3 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-strong));}
#scene .about-reference-item p {max-width:70ch;margin:0 0 8px;font:400 12px/1.45 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}
#scene .about-text-link {display:inline-flex;align-items:center;min-height:28px;color:hsl(var(--reference));font:500 11px/1.4 var(--font-sans,"Albert Sans",sans-serif);text-decoration:none;}
#scene .about-text-link:hover {color:hsl(var(--text-strong));}
#scene .about-overview :is(a,button,summary):focus-visible {outline:2px solid hsl(var(--primary));outline-offset:3px;}

.hero-alive[data-page="about"] .lattice-activity {opacity:0;pointer-events:none;}
.hero-alive[data-page="about"] .lattice-field {opacity:.14;}

@media(min-width:901px) and (max-height:780px) {
  #scene .about-overview {padding:20px 24px;gap:12px;}
  .about-focus {grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);gap:42px;min-height:320px;}
  #scene .about-overview h1 {font-size:42px;}
  #scene .about-deck {margin-top:16px;font-size:14px;line-height:1.48;}
  #scene .about-primary-action {margin-top:18px;}
  .about-map {min-height:320px;padding:14px;gap:10px;}
  .about-map-mesh {height:150px;min-height:92px;flex-basis:150px;}
  .about-map-caption {font-size:13px;}
  .about-boundary {min-height:46px;padding-top:9px;}
}

@media(max-width:1100px) {
  .about-focus {grid-template-columns:minmax(0,1fr) minmax(440px,1fr);gap:36px;}
}
@media(max-width:900px) {
  #scene .about-overview {padding:18px;}
  .about-focus {grid-template-columns:1fr;gap:28px;}
  #scene .about-overview h1 {font-size:clamp(36px,9vw,50px);}
  .about-map {min-height:330px;}
  .about-boundary {align-items:flex-start;flex-direction:column;}
  .about-reference {margin-left:0;}
  .about-reference-body {grid-template-columns:1fr;gap:22px;}
}
@media(max-width:540px) {
  .about-layers {grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce) {
  #scene .about-overview :is(a,button) {transition:none;}
}