/* =========================================================================
   ELEMENTS LAB (lab only, never shipped). docs/elements/ART-DIRECTION.md.
   Every value is a house token from site.css (--s*, --t-*, --ui, --mono, --ink*, --paper*, --rule*, --brand)
   except where marked [off-scale] with the reason. Nearly all off-scale values are the plate series' own
   ground and ink: a specimen asserts its own ground in both themes, the way the drawn plates do.
   Violet means one thing: an explanation attached to a spot (pin), or a lab-only review note.
   ========================================================================= */

.el { --sheet: #F4F3EF; --sheet-ink: #1B1B1A; --sheet-mute: #6E6C66; --sheet-rule: #D9D7D0; /* [off-scale] the plate series' ground, ink, mute and rule */
  max-width: 72rem; }
.el-crumb { margin: 0 0 var(--s5); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.el-crumb a { color: inherit; }
.el-h { margin: 0 0 var(--s5); font: 650 var(--t-lg)/var(--lh-tight) var(--display); letter-spacing: -0.01em; color: var(--ink); }
.el-quiet { margin: var(--s3) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-3); max-width: 44rem; }
.el-src { display: block; margin-bottom: var(--s1); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
section.el-demo, section.el-sc, section.el-wh, section.el-use, section.el-held { margin-top: var(--s9); }

/* ---------------------------------------------------------- the plate ---- */
/* Hung, not boxed: the image on its own ground, a hairline caption beneath. No border, shadow or radius. */
.el-plate { margin: 0; --plate-w: min(100%, calc(70vh * 4 / 3)); } /* plate and caption fit the first screen */
.el-plate > .el-hang { max-width: var(--plate-w); }
.el-plate--live .el-seg { margin-top: 0; }
.el-plate--live .el-capset { margin-top: 0; min-height: 3.2em; }
.el-hang { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--sheet); }
.el-cap { display: grid; gap: var(--s2); max-width: var(--plate-w); padding-top: var(--s4); margin-top: var(--s3); border-top: 1px solid var(--rule); }
.el-cap__n { margin: 0; font: 650 var(--t-xl)/1.05 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.el-cap__l { font: var(--t-md)/var(--lh-tight) var(--ui); color: var(--ink); max-width: 46rem; }
.el-cap__p { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
@media (max-width: 48rem) { .el-cap__n { font-size: var(--t-lg); } .el-cap__l { font-size: var(--t-base); } }
.el-cmp { margin-top: var(--s7); max-width: var(--plate-w); }
.el-cmp__h { margin: 0 0 var(--s2); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); font-weight: 400; }

/* The one in-progress line (status messaging, 2026-10-08): plain text in the visitor's terms, no chip. */
.el-progress { margin: var(--s4) 0 0; max-width: 46rem; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.el-status { margin: var(--s4) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.el-status i { font-style: normal; margin: 0 var(--s2); color: var(--rule-firm); }

/* An empty plate: the outline of the sheet and why it is empty. */
.el-hole { display: grid; place-content: center; gap: var(--s2); padding: var(--s6); aspect-ratio: 4 / 3; text-align: center;
  border: 1px dashed var(--rule-firm); color: var(--ink-3); background: transparent; }
.el-hole b { font: 600 var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.el-hole span { font: var(--t-xs)/var(--lh-meta) var(--mono); max-width: 34rem; }
.el-hole--held { border-style: solid; border-color: var(--rule); background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--rule) 9px 10px); }
.el-hang.el-hole { width: 100%; max-width: var(--plate-w); aspect-ratio: 16 / 5; } /* a missing plate is a band, not a void */

/* ------------------------------------------------------- review note ---- */
.el-review { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; margin-top: var(--s5); padding: var(--s3) var(--s4); border-left: 2px dashed var(--brand); }
.el-review p { margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 52rem; }
.el-review b { color: var(--ink); font-weight: 650; }
.el-pending { margin-top: var(--s2) !important; color: var(--ink-3) !important; }
.el-review > div { display: grid; gap: var(--s2); }
.el-missing { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 52rem; }
/* Readiness: one word, four states; only "ready" takes the accent fill. */
.el-ready { display: inline-block; padding: 2px var(--s2); font: 500 var(--t-xs)/1.4 var(--mono); color: var(--ink-2); border: 1px solid var(--rule-firm); white-space: nowrap; }
.el-ready[data-r="ready"] { color: var(--paper); background: var(--brand); border-color: var(--brand); }
.el-ready[data-r="researchable"] { color: var(--brand); border-color: var(--brand); }
.el-ready[data-r="held"] { border-style: dashed; }
.el-heldline { margin-top: var(--s4); }
.el-grade { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; font: 500 var(--t-xs)/1 var(--mono); color: var(--brand); border: 1.5px solid var(--brand); }

/* ------------------------------------------------- the demonstration ---- */
.el-seg { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--s4); border-bottom: 1px solid var(--rule); }
.el-seg button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--s2) var(--s4) var(--s3) 0; margin-right: var(--s4);
  font: 500 var(--t-sm)/1.2 var(--ui); color: var(--ink-3); cursor: pointer; text-align: left; }
.el-seg button small { display: block; margin-top: 2px; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.el-seg button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.el-seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.el-ctl { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0 0 var(--s4); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.el-check, .el-range { display: inline-flex; align-items: center; gap: var(--s2); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.el-range output { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); min-width: 3.5em; }
.el-pause { appearance: none; background: none; border: 1px solid var(--rule-firm); padding: var(--s1) var(--s3); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); cursor: pointer; }

.el-pinned { display: grid; grid-template-columns: minmax(0, var(--plate-w)); gap: var(--s6); align-items: start; }
.el-pinned:has(.el-notes) { grid-template-columns: minmax(0, var(--plate-w)) minmax(13rem, 18rem); }
.el-stage { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sheet); color: var(--sheet-ink); }
/* vis-pin is the Visual Audit's shared pin (ROLLOUT-PLAN A1/A2). Same object, same values; when their vis.css lands, delete this rule. */
.vis-pin { position: absolute; transform: translate(-50%, -50%); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; /* [off-scale] a pin is a circle */
  border: 1.5px solid var(--brand); background: var(--paper); color: var(--brand); font: 500 var(--t-xs)/1 var(--mono); }
.el-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.el-notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.vis-pin--k { position: static; transform: none; }
.el-q { display: block; font-weight: 600; color: var(--ink); quotes: '“' '”'; }
.el-capset { margin-top: var(--s4); max-width: 46rem; }
.el-say { display: none; margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.el-say.is-on { display: block; }
.el-note { margin: var(--s3) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); max-width: 46rem; }
@media (max-width: 56rem) { .el-pinned:has(.el-notes) { grid-template-columns: 1fr; } }

/* ------------------------------------------- what stays, what changes ---- */
.el-sc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.el-sc h3 { margin: 0 0 var(--s3); font: 650 var(--t-base)/1.2 var(--ui); color: var(--ink); }
.el-sc h3 small { display: block; margin-top: var(--s1); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); font-weight: 400; }
.el-sc ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.el-sc li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
@media (max-width: 48rem) { .el-sc__cols { grid-template-columns: 1fr; gap: var(--s5); } }

/* -------------------------------------------------- where it appears ---- */
.el-where { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.el-where > li { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.el-where__a { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.el-where__a img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.el-where__a b { font: 650 var(--t-sm)/1.2 var(--ui); }
.el-where__s { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.el-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.el-rules q { display: block; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); quotes: none; }
.el-rules span { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.el-where .el-quiet { margin-top: 0; }
@media (max-width: 40rem) { .el-where > li { grid-template-columns: 1fr; } .el-where__a { max-width: 16rem; } }

/* ------------------------------------------------------------- usage ---- */
.el-steps { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s3); max-width: 46rem; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.el-dist { margin: var(--s5) 0 0; max-width: 46rem; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.el-more { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); max-width: 52rem; }
.el-more summary { cursor: pointer; font: 600 var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.el-more summary small { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); margin-left: var(--s2); }
.el-more p { font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.el-tail { margin-top: var(--s9); }
.el-dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2) var(--s4); margin: var(--s4) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); }
.el-dl dt { color: var(--ink-3); } .el-dl dd { margin: 0; color: var(--ink-2); }
.el-dl small { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.el-res { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.el-res li { display: grid; grid-template-columns: minmax(10rem, 14rem) 6rem minmax(0, 1fr); gap: var(--s3); font: var(--t-sm)/1.4 var(--ui); }
.el-res__v { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.el-res__v[data-v="link"] { color: var(--ink-2); }
.el-res__l { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
@media (max-width: 48rem) { .el-res li { grid-template-columns: 1fr auto; } .el-res__l { grid-column: 1 / -1; } .el-dl { grid-template-columns: 1fr; } }
.el-held p { max-width: 46rem; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }

/* ================================================================ LIBRARY */
.el-libh h1 { margin: 0; font: 650 var(--t-2xl)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.el-libh > p:first-of-type { margin: var(--s4) 0 0; max-width: 40rem; font: var(--t-md)/var(--lh-tight) var(--ui); color: var(--ink-2); }
.el-filter { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: end; margin: var(--s7) 0 0; padding: var(--s3) 0 0; background: var(--paper); }
.el-filter .el-seg { margin: 0; border-bottom: 0; }
.el-seg--quiet button { padding-right: 0; margin-right: var(--s4); }
.el-area { margin-top: var(--s8); }
.el-area__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s4); padding-bottom: var(--s3); margin-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.el-area__h h2 { margin: 0; font: 650 var(--t-lg)/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.el-area__h p { grid-column: 1; margin: 0; font: var(--t-sm)/1.4 var(--ui); color: var(--ink-3); }
.el-count { grid-row: 1; grid-column: 2; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.el-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--s6) var(--s5); }
.el-tile { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.el-tile__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--sheet); }
.el-tile .el-hole { padding: var(--s3); }
.el-tile__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); }
.el-tile__cap b { font: 600 var(--t-sm)/1.25 var(--ui); }
.el-tile__cap > span:not(.el-grade) { grid-column: 1; font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.el-tile__cap .el-ready { grid-column: 1; display: none; justify-self: start; }
.el-tile:hover b { text-decoration: underline; text-underline-offset: 3px; }
.el-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.el[data-grades] .el-tile__cap .el-ready { display: inline-block; }
.el[data-area-f]:not([data-area-f="all"]) .el-area { display: none; }
.el[data-area-f="typography"] .el-area[data-area="typography"], .el[data-area-f="color"] .el-area[data-area="color"],
.el[data-area-f="composition"] .el-area[data-area="composition"], .el[data-area-f="imagery"] .el-area[data-area="imagery"],
.el[data-area-f="surfaces"] .el-area[data-area="surfaces"], .el[data-area-f="motion"] .el-area[data-area="motion"],
.el[data-area-f="motifs"] .el-area[data-area="motifs"], .el[data-area-f="techniques"] .el-area[data-area="techniques"] { display: block; }
.el[data-show-f="shown"] .el-tile:not([data-show="shown"]), .el[data-show-f="missing"] .el-tile:not([data-show="missing"]), .el[data-show-f="held"] .el-tile:not([data-show="held"]) { display: none; }
.el-foot { margin-top: var(--s9); }

/* ============================================================ SPECIMENS
   Each stage draws in the plate series' ground and ink. Colour only where the Element is colour. */

/* Bento: the same six cells in four arrangements. */
.els-bento { position: absolute; inset: 6%; display: grid; gap: 1.2%; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.els-bento .c { position: relative; background: #E2E0D8; border-radius: 14px; transition: all .35s ease; } /* [off-scale] the bento plate's own cell fill and radius */
.els-bento span { position: absolute; left: 6%; top: 8%; font: var(--t-sm)/1 var(--mono); color: var(--sheet-mute); }
[data-state="bento"] .c1 { grid-area: 1 / 1 / 3 / 3; } [data-state="bento"] .c2 { grid-area: 1 / 3 / 2 / 5; } [data-state="bento"] .c3 { grid-area: 2 / 3 / 3 / 4; }
[data-state="bento"] .c4 { grid-area: 2 / 4 / 4 / 5; } [data-state="bento"] .c5 { grid-area: 3 / 1 / 4 / 2; } [data-state="bento"] .c6 { grid-area: 3 / 2 / 4 / 4; }
[data-state="bento2"] .c1 { grid-area: 1 / 1 / 3 / 3; } [data-state="bento2"] .c2 { grid-area: 1 / 3 / 3 / 5; } [data-state="bento2"] .c3 { grid-area: 3 / 1 / 4 / 2; }
[data-state="bento2"] .c4 { grid-area: 3 / 2 / 4 / 3; } [data-state="bento2"] .c5 { grid-area: 3 / 3 / 4 / 4; } [data-state="bento2"] .c6 { grid-area: 3 / 4 / 4 / 5; }
[data-state="card"] .els-bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
[data-state="masonry"] .els-bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(20, 1fr); }
[data-state="masonry"] .c1 { grid-area: 1 / 1 / 9 / 2; } [data-state="masonry"] .c2 { grid-area: 1 / 2 / 6 / 3; } [data-state="masonry"] .c3 { grid-area: 1 / 3 / 12 / 4; }
[data-state="masonry"] .c4 { grid-area: 9 / 1 / 17 / 2; } [data-state="masonry"] .c5 { grid-area: 6 / 2 / 19 / 3; } [data-state="masonry"] .c6 { grid-area: 12 / 3 / 16 / 4; }

/* Modular grid: four items, two ways of ranking them. */
.els-mgrid { position: absolute; inset: 7%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2.4%; }
.els-mgrid .g { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; }
.els-mgrid .g b { outline: 1px solid #C9C6BD; } /* [off-scale] the plate's hairline */
[data-grid] .els-mgrid .g { opacity: 1; }
.els-mgrid p { margin: 0; font-family: var(--ui); color: var(--sheet-ink); }
.els-mgrid .h, .els-mgrid .s, .els-mgrid .n { font-size: clamp(.7rem, 1.6vw, 1.05rem); line-height: 1.3; font-weight: 600; }
.els-mgrid .s, .els-mgrid .n { font-weight: 400; }
.els-mgrid .img { background: var(--sheet-ink); }
[data-state="module"] .h { grid-area: 1 / 1 / 2 / 3; } [data-state="module"] .s { grid-area: 1 / 3 / 2 / 5; }
[data-state="module"] .img { grid-area: 2 / 3 / 4 / 7; } [data-state="module"] .n { grid-area: 4 / 1 / 5 / 3; align-self: end; }
[data-state="loud"] .els-mgrid { display: block; }
[data-state="loud"] .h { position: absolute; left: 4%; top: 3%; font-size: clamp(2rem, 7.5vw, 5.5rem); line-height: .9; letter-spacing: -0.04em; font-weight: 800; }
[data-state="loud"] .s { position: absolute; left: 47%; top: 31%; width: 40%; font-size: clamp(.7rem, 1.4vw, 1rem); }
[data-state="loud"] .img { position: absolute; left: 13%; top: 48%; width: 38%; height: 42%; background: #E9573F; } /* [off-scale] a filled accent block: the near miss uses colour for rank */
[data-state="loud"] .n { position: absolute; right: 2%; bottom: 3%; font-size: .75rem; }

/* Pastel. */
.els-pastel { position: absolute; inset: 6% 6% 30%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4%; }
.els-pastel .sw { position: relative; background: var(--c); display: flex; flex-direction: column; justify-content: space-between; padding: 8% 7%; }
.els-pastel .t { font: 600 clamp(.75rem, 1.5vw, 1.1rem)/1.15 var(--ui); color: var(--sheet-ink); }
[data-state="pastel"] .els-pastel .t { color: #D8CDEF; } /* the lilac from the same set: the forbidden text source */
[data-state="pastel"] .els-pastel .sw:last-child .t { color: #F5E7A8; }
.els-pastel .k, .els-pastel .r { font: clamp(.55rem, .9vw, .7rem)/1.3 var(--mono); color: var(--sheet-mute); }
.els-pastel .r { color: var(--sheet-ink); font-weight: 500; }
.el-stage:not([data-state="pastel"]) .r[data-show="pastel"], .el-stage:not([data-state="ink"]) .r[data-show="ink"] { display: none; }
.els-pastel-not { position: absolute; left: 6%; right: 6%; bottom: 5%; height: 20%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.els-pastel-not figure { margin: 0; display: grid; grid-template-columns: 30% 1fr; gap: 6%; align-items: center; }
.els-pastel-not i { display: block; height: 100%; }
.els-pastel-not figcaption { font: clamp(.55rem, .95vw, .75rem)/1.35 var(--ui); color: var(--sheet-mute); }
.els-pastel-not b { display: block; color: var(--sheet-ink); }

/* Monospace. */
.els-mono { position: absolute; inset: 6%; font-family: var(--mono); color: var(--sheet-ink); font-size: clamp(.6rem, 1.45vw, 1.05rem); line-height: 1.6; white-space: pre; overflow: hidden; }
[data-cells] .els-mono { background-image: linear-gradient(to right, #E4E2DA 1px, transparent 1px), linear-gradient(to bottom, #E4E2DA 1px, transparent 1px); background-size: 1ch 1.6em; } /* [off-scale] the plate's cell rule */
.els-mono p { margin: 0; font-family: var(--mono); white-space: pre; }
.els-mono .b { display: none; }
[data-state="cell"] .els-mono .a { display: none; } [data-state="cell"] .els-mono .b { display: inline; }
[data-state="size"] .els-mono .h1 { font-size: 2.6em; line-height: 1.2; } [data-state="size"] .els-mono .h2 { font-size: 1.7em; line-height: 1.4; margin-top: .4em; }
[data-state="size"] .els-mono .rule { display: none; } [data-state="size"] .els-mono .body { font-size: .82em; margin-top: .6em; }
[data-state="cell"] .els-mono .h2 { margin-top: 1.6em; } [data-state="cell"] .els-mono .body { margin-top: 0; padding-left: 4ch; }

/* Glassmorphism: the real property. */
.els-glass { position: absolute; inset: 0; background: #1E4A8C; transition: background .3s; } /* [off-scale] the glassmorphism plate's field and discs */
.els-glass i { position: absolute; border-radius: 50%; transition: opacity .3s; }
.els-glass .d1 { left: 14%; top: 18%; width: 30%; aspect-ratio: 1; background: #F2A93B; }
.els-glass .d2 { left: 40%; top: 10%; width: 14%; aspect-ratio: 1; background: #E5533D; }
.els-glass .d3 { left: 58%; top: 44%; width: 34%; aspect-ratio: 1; background: #2EC4A6; }
.els-glass .pane { position: absolute; left: 32%; top: 26%; width: 40%; height: 48%; border-radius: 18px; background: rgba(255,255,255,.5); display: flex; align-items: flex-end; padding: 4%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
[data-state="flat"] .els-glass { background: var(--sheet); } [data-state="flat"] .els-glass i { opacity: 0; }
[data-state="clear"] .els-glass .pane { backdrop-filter: none; -webkit-backdrop-filter: none; }
.els-glass .pane p { margin: 0; color: #1B1B1A; font: 600 clamp(1.1rem, 3vw, 2rem)/1.05 var(--display); letter-spacing: -0.01em; }
.els-glass .pane p span { display: block; margin-top: .4em; font: 400 clamp(.75rem, 1.3vw, .9rem)/1.3 var(--sans, system-ui); }

/* Soft elevation: one step, a scale, or a hard border. */
.els-soft { position: absolute; inset: 0; display: grid; place-items: center; }
.els-soft .card { position: absolute; width: 36%; aspect-ratio: 3 / 2; left: 32%; top: 24%; background: #FBFAF7; border-radius: 28px; box-shadow: 0 8px 32px rgba(0,0,0,.10); transition: all .35s; } /* [off-scale] the record's own values, printed beneath */
.els-soft .k2, .els-soft .k3, .els-soft .k4, .els-soft .k5, .els-soft .k6 { opacity: 0; }
.els-soft .v { position: absolute; bottom: 14%; margin: 0; font: var(--t-xs)/1 var(--mono); color: var(--sheet-mute); }
[data-state="border"] .els-soft .k1 { box-shadow: none; border: 2px solid var(--sheet-ink); }
[data-state="scale"] .els-soft .card { width: 12%; top: 34%; border-radius: 4px; background: #FFFFFF; opacity: 1; }
[data-state="scale"] .k1 { left: 7%; box-shadow: none; outline: 1px solid #D6D3CB; } [data-state="scale"] .k2 { left: 22%; box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); }
[data-state="scale"] .k3 { left: 37%; box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12); } [data-state="scale"] .k4 { left: 52%; box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12); }
[data-state="scale"] .k5 { left: 67%; box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12); } [data-state="scale"] .k6 { left: 82%; box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12); }
[data-state="scale"] .els-soft .v { visibility: hidden; }

/* Engraving: line against fill. */
.els-engr > * { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; }
[data-state="line"] .els-engr .fill, [data-state="fill"] .els-engr .line { opacity: 0; }

/* Risograph: the second drum moves with the slider; flat state drops grain, overprint and misregistration. */
.els-riso, .els-riso svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.els-riso .p1, .els-riso .p2 { mix-blend-mode: multiply; }
.els-riso .p1 { filter: url(#rg-a); } .els-riso .p2 { filter: url(#rg-b); transform: translate(var(--off, 7px), calc(var(--off, 7px) * -0.7)); }
[data-state="tight"] .els-riso .p1, [data-state="tight"] .els-riso .p2 { filter: none; mix-blend-mode: normal; transform: none; }
[data-state="flat"] ~ .el-ctl, .el-stage[data-state="flat"] .vis-pin { opacity: .25; }

/* Aurora: a live field; text either rides it (near miss) or sits on its own ground. */
.els-aur { position: absolute; inset: 0; background: #121316; overflow: hidden; } /* [off-scale] the aurora plate's dark ground */
.els-aur i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .9; }
.els-aur .f1 { left: -10%; top: -20%; background: #2E9C8A; } .els-aur .f2 { left: 45%; top: -25%; background: #3E6FD1; }
.els-aur .f3 { left: -5%; top: 45%; background: #D8A93C; } .els-aur .f4 { left: 55%; top: 40%; background: #D9573F; } .els-aur .f5 { left: 28%; top: 15%; width: 40%; background: #6F4BD8; opacity: .5; }
.els-aur .tx { position: absolute; left: 12%; top: 34%; width: 52%; margin: 0; padding: 5% 6%; display: grid; gap: .5em; font-family: var(--ui); }
.els-aur .tx b { font: 700 clamp(1.1rem, 2.8vw, 2.2rem)/1.05 var(--display); letter-spacing: -0.02em; }
.els-aur .tx span { font-size: clamp(.75rem, 1.3vw, 1rem); line-height: 1.4; }
[data-state="field"] .els-aur .tx { color: #FFFFFF; left: 18%; top: 40%; }
[data-state="solid"] .els-aur .tx { background: #121316; color: #FFFFFF; }

/* Kinetic typography: a weight wave runs through the word. */
.els-kin { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: .02em; font: 400 clamp(2.5rem, 10vw, 8rem)/1 var(--display); color: var(--sheet-ink); letter-spacing: -0.02em; }
.els-kin span { display: inline-block; }
[data-state="local"] .els-kin span { animation: el-wave 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .14s); }
[data-state="reveal"] .els-kin span { font-weight: 700; animation: el-in 2.4s ease-out infinite; animation-delay: calc(var(--i) * .08s); }
[data-state="travel"] .els-kin span { font-weight: 600; animation: el-travel 3.2s ease-in-out infinite; }
[data-state="travel"] .els-kin span:nth-child(-n+4) { --dir: -1; } [data-state="travel"] .els-kin span:nth-child(n+5) { --dir: 1; }
@keyframes el-travel { 0%, 20%, 80%, 100% { transform: none; } 45%, 55% { transform: translateX(calc(var(--dir, 1) * .9em)); } }
[data-paused] .els-kin span { animation-play-state: paused; }
@keyframes el-wave { 0%, 100% { font-weight: 400; transform: scaleY(1); } 30% { font-weight: 900; transform: scaleY(1.32); } 60% { font-weight: 400; transform: scaleY(1); } }
@keyframes el-in { 0% { opacity: 0; transform: translateY(.4em); } 30%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .els-kin span { animation: none !important; }
  .els-bento .c, .els-soft .card, .els-glass, .els-glass i, .els-engr > *, .els-mgrid .g { transition: none; }
}

/* ================================================================ REVIEW */
.el--review { max-width: 76rem; }
.el-rv { margin-top: var(--s9); }
.el-h3 { margin: var(--s6) 0 0; font: 650 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.el-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.el-pair figure { margin: 0; }
.el-pair img { display: block; width: 100%; height: auto; }
.el-pair figcaption { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.el-pair figcaption b { color: var(--ink); }
@media (max-width: 48rem) { .el-pair { grid-template-columns: 1fr; } }
.el-rulings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.el-rulings li { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.el-rulings h3 { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; margin: 0; font: 600 var(--t-md)/var(--lh-tight) var(--ui); color: var(--ink); max-width: 56rem; }
.el-rulings .el-grade { width: auto; padding: 0 var(--s1); }
.el-rulings .el-dl { grid-template-columns: 7rem minmax(0, 1fr); max-width: 56rem; }
.el-rulings .el-dl b { font-weight: 600; color: var(--ink); }
.el-queue { margin: var(--s3) 0 0; padding-left: var(--s5); display: grid; gap: var(--s2); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.el-queue small { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); margin: 0 var(--s2); }
.el-queue a { color: var(--ink); font-weight: 600; }
.el-tablewrap { overflow-x: auto; margin-top: var(--s3); }
.el-table { border-collapse: collapse; width: 100%; min-width: 40rem; font: var(--t-xs)/1.45 var(--ui); color: var(--ink-2); }
.el-table th { text-align: left; font: 500 var(--t-xs)/1.2 var(--mono); color: var(--ink-3); padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule-firm); }
.el-table td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.el-table td:first-child a { color: var(--ink); font-weight: 600; }
.el-table small { color: var(--ink-3); }
.el-more summary .el-grade { margin-right: var(--s2); vertical-align: middle; }

/* The 75 as squares, one per Element. Readiness is the only variable: fill for ready, outline for researchable,
   hatch for held, empty for incomplete. */
.el-field { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; max-width: 46rem; }
.el-sq { display: block; aspect-ratio: 1; border: 1.5px solid var(--rule-firm); }
.el-sq[data-r="ready"] { background: var(--brand); border-color: var(--brand); }
.el-sq[data-r="researchable"] { border-color: var(--brand); }
.el-sq[data-r="held"] { background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--rule-firm) 3px 4px); }
a.el-sq:hover, a.el-sq:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.el-key { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font: var(--t-sm)/1.3 var(--ui); color: var(--ink-2); }
.el-key li { display: inline-flex; align-items: center; gap: var(--s2); }
.el-key .el-sq { width: 1rem; }
.el-key b { color: var(--ink); }
@media (max-width: 40rem) { .el-field { grid-template-columns: repeat(15, minmax(0, 1fr)); } }

.el-wall--strip { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }

/* One Element across Aesthetics: a strip per Aesthetic, then that Aesthetic's own rule. */
.el-across { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); max-width: 56rem; }
.el-across li { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--s5); align-items: start; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.el-across b { font: 650 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.el-across small { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.el-across q { display: block; margin-top: var(--s2); font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.el-across .el-src { margin-top: var(--s1); }
.el-xsw { display: grid; grid-template-columns: repeat(6, 1fr); height: 3rem; position: relative; }
.el-xsw--metal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.75) 42%, rgba(160,160,170,.35) 55%, rgba(255,255,255,0) 75%); } /* [off-scale] our rendering of Y2K's “pastel metallic” */
.el-xsw--held { background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--rule) 7px 8px); border: 1px solid var(--rule); }
@media (max-width: 40rem) { .el-across li { grid-template-columns: 1fr; gap: var(--s2); } }

/* Near misses, frozen in pairs. */
.el-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: var(--s7) var(--s6); }
.el-pairs h3 { margin: 0 0 var(--s3); font: 650 var(--t-base)/1.2 var(--ui); }
.el-pairs h3 a { color: var(--ink); }
.el-dd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.el-dd figure { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.el-dd figcaption { font: var(--t-xs)/1.45 var(--ui); color: var(--ink-2); }
.el-dd__k { font: var(--t-xs)/1 var(--mono); color: var(--ink); }
.el-dd__k--x { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.el-dd .el-stage { font-size: 60%; }

/* The Mix gate: a funnel computed from the records, then four Elements run through it. */
.el-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); max-width: 46rem; }
.el-funnel li { display: grid; grid-template-columns: minmax(0, 18rem) auto 1fr; gap: var(--s3); align-items: center; font: var(--t-sm)/1.3 var(--ui); color: var(--ink-2); }
.el-funnel__bar { display: block; height: .9rem; width: calc(var(--n) / 75 * 100%); min-width: 2px; background: var(--ink); }
.el-funnel li:last-child .el-funnel__bar { background: var(--brand); }
.el-funnel b { font: 500 var(--t-sm)/1 var(--mono); color: var(--ink); }
.el-gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s5); margin-top: var(--s6); }
.el-gate h3 { margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font: 650 var(--t-sm)/1.3 var(--ui); }
.el-gate h3 a { color: var(--ink); }
.el-gate ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.el-gate li { display: grid; grid-template-columns: 1.25rem 1fr; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font: var(--t-sm)/1.3 var(--ui); color: var(--ink-2); }
.el-gate li[data-ok="false"] { color: var(--ink-3); }
.el-gate li[data-ok="true"] span { color: var(--brand); }

/* What Build receives: the file, labelled with its path. */
.el-file { margin: 0; max-width: 56rem; }
.el-file figcaption { display: inline-block; padding: var(--s2) var(--s3); background: var(--paper-3); font: var(--t-xs)/1 var(--mono); color: var(--ink-2); }
.el-file pre { margin: 0; padding: var(--s4); background: var(--paper-deep); overflow-x: auto; font: var(--t-xs)/1.55 var(--mono); color: var(--ink); max-height: 32rem; }

.el-held2 { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 40rem) { .el-held2 { grid-template-columns: 1fr; } }
.el-prov { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); max-width: 52rem; }
.el-prov li { display: grid; gap: 2px; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.el-prov small { font: var(--t-xs)/1.4 var(--ui); color: var(--ink-3); }
.el-contra { grid-template-columns: 14rem minmax(0, 1fr); max-width: 60rem; }
.el-contra dt { color: var(--ink); font-weight: 600; }
.el-steps b { font-weight: 650; }

.el-table td:last-child { min-width: 16rem; }
.el-table .el-missing { font-size: inherit; padding-left: var(--s4); }
.el-tile .el-hole { display: grid; }
@media (max-width: 40rem) {
  .el-review { grid-template-columns: 1fr; }
  .el-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
  .el-tile .el-hole b { font-size: var(--t-xs); }
  .el-tile .el-hole span { display: none; }
  .els-pastel-not, .els-pastel .k { display: none; }
  .els-pastel { inset: 6%; }
  .el-dd { grid-template-columns: 1fr; }
}

/* Public walls: Elements without a specimen are a quiet list, not a row of empty frames. */
.el-rest { margin-top: var(--s6); max-width: 56rem; }
.el-rest h3 { margin: 0 0 var(--s3); font: 500 var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.el-rest ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s2) var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.el-rest li { display: grid; gap: 2px; }
.el-rest a { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.el-rest span { font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }

/* ============================================================== SIGN-OFF */
.so-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.so-grid--one { grid-template-columns: minmax(0, 46rem); }
.so-fig { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.so-fig figcaption { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.so-fig figcaption b { color: var(--ink); font-weight: 650; }
.so-fig figcaption span { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.so-fig figcaption a { margin-left: auto; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
/* A screenshot is a scroll box: the first screen shows, the rest is a scroll away. */
.so-shot { display: block; max-height: 34rem; overflow-y: auto; border: 1px solid var(--rule); background: var(--paper-deep); }
.so-shot img { display: block; width: 100%; height: auto; }
.so-shot--m { max-width: 17rem; max-height: 36rem; }
.so-pair { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s5); margin-top: var(--s6); align-items: start; }
.so-phones { display: flex; flex-wrap: wrap; gap: var(--s5); }
.so-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.so-plate { margin: 0; display: grid; gap: var(--s2); }
.so-plate img { display: block; width: 100%; height: auto; }
.so-plate figcaption { display: grid; gap: 2px; padding-top: var(--s2); border-top: 1px solid var(--rule); font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.so-plate figcaption b { color: var(--ink); }
.so-heldline { max-width: 46rem; margin: 0 0 var(--s5); padding-left: var(--s4); border-left: 2px solid var(--rule-firm); font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.so-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.so-flow li { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s3); border-top: 2px solid var(--ink); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.so-flow li + li { border-top-color: var(--rule-firm); }
.so-flow img { width: 100%; height: auto; }
.so-flow b { color: var(--ink); }
.so-flow p { margin: 0; }
.so-flow ul { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s1); }
.so-flow__k { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
@media (max-width: 56rem) { .so-grid, .so-plates { grid-template-columns: 1fr; } .so-pair { grid-template-columns: 1fr; } .so-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .so-flow { grid-template-columns: 1fr; } }

/* Parallax: planes behind a scrolling reading column; each moves at scroll × its rate. */
.els-par { position: absolute; inset: 0; overflow: hidden; background: #E9E6DD; --y: 0; } /* [off-scale] a pale sky in the plate series' palette */
.els-par__plane { position: absolute; inset: 0; transform: translateY(calc(var(--y) * -1px * var(--rate))); will-change: transform; }
.els-par .sun { position: absolute; right: 18%; top: 14%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #CFC9BA; }
.els-par .h1, .els-par .h2, .els-par .h3 { position: absolute; left: -10%; right: -10%; border-radius: 50% 50% 0 0; }
.els-par .h1 { top: 48%; height: 120%; background: #B9B3A5; }
.els-par .h2 { top: 58%; height: 120%; left: 30%; background: #9A9486; }
.els-par .h3 { top: 72%; height: 160%; background: #5E5A52; border-radius: 40% 60% 0 0; }
.els-par__scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; }
.els-par__text { width: 46%; margin-left: 8%; padding: 8% 0 140%; font: 600 clamp(.8rem, 1.6vw, 1.15rem)/1.5 var(--ui); color: var(--sheet-ink); }
.els-par__text p { margin: 0 0 1.4em; padding: .35em .6em; background: rgba(244,243,239,.88); }
.els-par__scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
[data-state="fixed"] .els-par .p-mid, [data-state="fixed"] .els-par .p-near { display: none; }
[data-state="fixed"] .els-par .p-far { --rate: 0 !important; }
@media (prefers-reduced-motion: reduce) { .els-par__plane { --rate: 1 !important; } }

/* Batch 01 specimens: whole drawings swapped by state (specimens.ts `variants`). */
.els-v { position: absolute; inset: 0; display: flex; align-items: center; background: #F4F3EF; } /* the plate ground, letterboxing the 1072×712 figure in the 4:3 stage */
.els-v > [data-v] { display: none; }
.els-v > [data-v] { width: 100%; aspect-ratio: 1072 / 712; }
.els-v > [data-v] > svg { display: block; width: 100%; height: 100%; }
[data-state="benday"] [data-v="benday"], [data-state="halftone"] [data-v="halftone"],
[data-state="drawn"] [data-v="drawn"], [data-state="constructed"] [data-v="constructed"],
[data-state="kiss"] [data-v="kiss"], [data-state="bite"] [data-v="bite"], [data-state="raised"] [data-v="raised"],
[data-state="intact"] [data-v="intact"], [data-state="broken"] [data-v="broken"], [data-state="scattered"] [data-v="scattered"],
[data-state="monoline"] [data-v="monoline"], [data-state="coded"] [data-v="coded"], [data-state="hatched"] [data-v="hatched"],
[data-state="iso"] [data-v="iso"], [data-state="dimetric"] [data-v="dimetric"], [data-state="perspective"] [data-v="perspective"],
[data-state="overlap"] [data-v="overlap"], [data-state="single"] [data-v="single"],
[data-state="chrome"] [data-v="chrome"], [data-state="flat"] [data-v="flat"] { display: block; }
/* The chrome plate is 1200×900 with a 64px margin; crop to its figure box so it sits like the SVG drawings. */
.els-v > [data-v] { overflow: hidden; }
.els-v > [data-v] > img.els-crop { width: 111.94%; max-width: none; height: auto; margin: -5.97% 0 0 -5.97%; } /* 1200/1072 and 64/1072 */
.el-stage:not([data-guides]) .bg-guides { display: none; }
.els-v .mo-b { transform: translateX(var(--mo, 32px)); }

/* Batch 01 wall. House tokens only; the specimen colours are the plates'. */
.b1-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s5) var(--s4); margin-top: var(--s5); }
.b1-tile { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.b1-tile img, .b1-tile .el-stage { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--sheet); }
.b1-tile span { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; font: var(--t-sm)/1.3 var(--ui); }
.b1-tile i { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--brand); }
.b1-tile em { flex-basis: 100%; font: var(--t-xs)/1.2 var(--mono); font-style: normal; color: var(--ink-3); }
.b1-tile:hover b, .b1-tile:focus-visible b { text-decoration: underline; }
.b1-cards, .b1-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--s6); margin-top: var(--s5); }
.b1-card, .b1-prop { padding-top: var(--s4); border-top: 1px solid var(--rule); }
.b1-card header, .b1-prop header { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; justify-content: space-between; }
.b1-card h3, .b1-prop h3 { margin: 0; font: 650 var(--t-base)/1.2 var(--ui); }
.b1-card h3 a { color: var(--ink); }
.b1-conf { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.b1-conf[data-c="high"] { color: var(--ink); }
.b1-sum { margin: var(--s3) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink); }
.b1-flag { margin: var(--s3) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.b1-dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s2) var(--s3); margin: var(--s4) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); }
.b1-dl dt { font: var(--t-xs)/var(--lh-body) var(--mono); color: var(--ink-3); }
.b1-dl dd { margin: 0; color: var(--ink-2); }
.b1-dl ul, .b1-dl ol { margin: var(--s1) 0 0; padding-left: 1.1em; }
.b1-dl li + li { margin-top: var(--s1); }
.b1-prop details { margin-top: var(--s3); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.b1-prop summary { cursor: pointer; color: var(--ink); }
.b1-prop code, .b1-list code, .b1-table code { font: var(--t-xs)/1.4 var(--mono); }
.b1-specs { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s8); }
.b1-specs h3 { margin: 0 0 var(--s3); font: 650 var(--t-base)/1.2 var(--ui); }
.b1-specs h3 a { color: var(--ink); }
.b1-med { font: 400 var(--t-xs)/1 var(--mono); color: var(--ink-3); margin-left: var(--s2); }
.b1-states { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--s4); }
.b1-states figure { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.b1-states figcaption { font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-2); }
.b1-plate { margin: var(--s4) 0 0; display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: var(--s4); align-items: start; }
.b1-plate img { display: block; width: 100%; height: auto; }
.b1-plate figcaption { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.b1-table { margin-top: var(--s5); overflow-x: auto; }
.b1-table table { width: 100%; border-collapse: collapse; font: var(--t-sm)/var(--lh-body) var(--ui); }
.b1-table th, .b1-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s3) var(--s3) 0; border-top: 1px solid var(--rule); }
.b1-table thead th { font: var(--t-xs)/1.2 var(--mono); color: var(--ink-3); font-weight: 400; }
.b1-table td ul { margin: 0; padding-left: 1em; color: var(--ink-2); }
.b1-num { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.b1-list { margin: var(--s4) 0 0; padding-left: 1.2em; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 52rem; }
.b1-list li + li { margin-top: var(--s2); }
.b1-list b { color: var(--ink); }
/* The two proposed specimens. */
.b1-hs, .b1-sp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s4); margin-top: var(--s3); }
.b1-hs figure, .b1-sp figure { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.b1-hs figcaption, .b1-sp figcaption { font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-2); }
.b1-sp svg { display: block; width: 100%; height: auto; }
.b1-hs__k { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; padding: var(--s6) var(--s5); background: var(--sheet); }
.b1-card-s { width: 7.5rem; height: 5.5rem; padding: var(--s3); box-sizing: border-box; background: #FFFFFF; color: var(--sheet-ink); font: 600 var(--t-xs)/1.2 var(--ui); }
.b1-btn { padding: var(--s2) var(--s4); background: #FFD84D; color: var(--sheet-ink); font: 600 var(--t-xs)/1 var(--ui); cursor: default; } /* [off-scale] one candy fill, so the button reads as a button */
.b1-hs-on { border: 3px solid var(--sheet-ink); box-shadow: 6px 6px 0 0 var(--sheet-ink); }
.b1-r { border-radius: 14px; }
.b1-hs-soft { border: 0; box-shadow: 0 8px 32px rgba(27, 27, 26, .10); border-radius: 14px; }
.b1-hs-faint { border: 3px solid var(--sheet-ink); box-shadow: 6px 6px 0 0 rgba(27, 27, 26, .25); }
@media (max-width: 40rem) { .b1-states { grid-template-columns: 1fr; } .b1-plate { grid-template-columns: 1fr; } .b1-dl { grid-template-columns: 1fr; } }
/* Glassmorphism's record: “reduced_transparency_state require opaque_fill”. The specimen obeys it. */
@media (prefers-reduced-transparency: reduce) { .els-glass .pane { background: rgba(255, 255, 255, .94); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Batch 01 specimens large; everything else quiet. */
.s1 .el-libh { max-width: 52rem; }
.s1-toc ol { margin: var(--s5) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font: var(--t-sm)/1.4 var(--ui); counter-reset: s1; }
.s1-toc li { counter-increment: s1; }
.s1-toc li::before { content: counter(s1, decimal-leading-zero) " "; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.s1-toc i { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); }
.s1-el { margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--rule); scroll-margin-top: var(--s5); }
.s1-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.s1-h h2 { margin: 0; font: 650 var(--t-lg)/var(--lh-tight) var(--display); letter-spacing: -0.01em; }
.s1-h h2 a { color: var(--ink); }
.s1-n, .s1-ar { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.s1-st { font: var(--t-xs)/1 var(--mono); color: var(--ink); }
.s1-tag { margin-left: var(--s2); font: 400 var(--t-xs)/1 var(--mono); color: var(--brand); vertical-align: middle; }
.s1-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--s6) var(--s5); }
.s1-fig { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.s1-k { font: var(--t-xs)/1.2 var(--mono); color: var(--ink); }
.s1-k--x { color: var(--ink-3); }
.s1-cap { margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 36rem; }
.s1-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s5) var(--s7); margin-top: var(--s6); }
.s1-meta h3, .s1-ch h3 { margin: 0 0 var(--s3); font: 650 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.s1-q, .s1-rules, .s1-cav { margin: 0; padding-left: 1.1em; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.s1-q { list-style: none; padding: 0; margin-bottom: var(--s3); color: var(--ink); }
.s1-q li + li, .s1-rules li + li, .s1-cav li + li { margin-top: var(--s2); }
.s1-rules code { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.s1-cav b { color: var(--ink); }
.s1-note { margin: var(--s3) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); max-width: 44rem; }
.s1-ch { margin-top: var(--s6); }
.s1-ch p { margin: 0; max-width: 44rem; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.s1-on { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s5); margin-top: var(--s4); }
.s1-on figure, .s1-plate { margin: 0; display: grid; gap: var(--s2); }
.s1-on img, .s1-plate img { display: block; width: 100%; height: auto; }
.s1-plate { margin-top: var(--s5); max-width: 26rem; }
.s1-plate figcaption { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.s1-seven { margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.s1-seven__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s4); margin-top: var(--s5); }
.s1-seven__t { display: grid; gap: var(--s2); color: var(--ink); font: var(--t-xs)/1.3 var(--ui); text-decoration: none; }
.s1-seven__t img { display: block; width: 100%; height: auto; opacity: .85; }

/* A wall tile showing a live specimen at rest (render.ts hang): the stage is laid out four times wider, as on its own
   page, then scaled to the tile, so its type keeps page proportions. */
.el-tile__live { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sheet); pointer-events: none; }
.el-tile__live-in { position: absolute; left: 0; top: 0; width: 400%; transform: scale(.25); transform-origin: 0 0; }
/* WCAG AA inside specimens (axe, 2026-10-07): small labels on tinted cells take a darker ink. */
.els-bento span { color: #55534D; } /* [off-scale] 5.5:1 on the bento cell fill */
.els-pastel .k { color: #4A4843; } /* [off-scale] 5:1 or better on every pastel in the set */