/* =========================================================================
   DESIGN STAGE (render/design-stage.ts; stage pages v2, 2026-10-08).
   House tokens for the page, inside the v2 template's accordions (stage-v2.css). The bookbinder's homepage (.dsg-mk) is a
   specimen: its three directions take their colors and faces from the
   Aesthetic each leans on (model/grammar/aesthetics: quiet-luxury, archival,
   engineering-drawing) and from the bookbinder's own roles (lesson R8).
   Specimens assert their own ground and never follow the theme switch.
   Prefix dsg- (checked against the room namespaces in tests/exhibits.test.ts).
   ========================================================================= */

@font-face { font-family: "dsg-hanken"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "dsg-spacemono"; src: url("fonts/space-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "dsg-spacemono"; src: url("fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "dsg-plex"; src: url("fonts/plex-sans.woff2") format("woff2-variations"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "dsg-plexmono"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---- shared bits ---- */
.dsg-letter { display: inline-block; min-width: 1ch; font: 800 1em/1 var(--display); letter-spacing: -.03em; color: var(--brand); }
.dsg-cap { margin: var(--s3) 0 0; max-width: 78ch; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.dsg-cap a, .dsg .vis-cap a { color: var(--ink-2); }
.dsg-go { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; font: 650 var(--t-base)/1.2 var(--ui); color: var(--ink); text-underline-offset: .25em; }
.dsg-go span { color: var(--brand); }
.dsg-go:hover { color: var(--brand); }
.dsg a:focus-visible, .dsg-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.dsg-sec__lede { margin: 0 0 var(--s6); max-width: 52ch; font: var(--t-md)/1.45 var(--ui); color: var(--ink-2); }
.dsg-sub { margin: var(--s8) 0 var(--s2); font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.dsg-sub__lede { margin: 0 0 var(--s5); max-width: 60ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }

/* ---- the bookbinder's homepage: one markup, three stylesheets ---- */
.dsg-mk { container-type: inline-size; min-width: 0; }
.dsg-mk__pg { position: relative; display: grid; overflow: hidden; aspect-ratio: 5 / 4; font-size: calc(100cqi / 40); line-height: 1.3; box-shadow: 0 0 0 1px var(--rule-firm); }
.dsg-mk__pg p, .dsg-mk__pg ol { margin: 0; padding: 0; }
.dsg-mk__pg ol { list-style: none; }
.dsg-mk__nav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.6em; white-space: nowrap; }
.dsg-mk__nav b { margin-right: auto; }
.dsg-mk__nav i { display: none; font-style: normal; }
.dsg-mk__view { grid-area: view; position: relative; min-height: 0; overflow: hidden; }
.dsg-mk__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsg-mk__keys, .dsg-mk__vl, .dsg-mk__no, .dsg-mk__parts, .dsg-mk__works, .dsg-mk__tb { display: none; }
.dsg-mk__lead { display: contents; }
.dsg-mk__cap { grid-area: cap; } .dsg-mk__h { grid-area: h; } .dsg-mk__p { grid-area: p; } .dsg-mk__btn { grid-area: btn; }

/* ---- A · the object (Quiet Luxury; the bookbinder's own colors, R8) ---- */
.dsg-mk--a .dsg-mk__pg { padding: 1.2em 2.2em 1.6em; background: #F4EFE6; color: #1E1A17; font-family: "dsg-hanken", system-ui, sans-serif;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "nav nav" "view view" "cap cap" "h h" "p btn"; column-gap: 2em; }
.dsg-mk--a .dsg-mk__nav { padding-bottom: 1.1em; font-size: .72em; color: #6E6259; }
.dsg-mk--a .dsg-mk__nav b { font-weight: 600; color: #1E1A17; letter-spacing: .01em; }
.dsg-mk--a .dsg-mk__view { margin: 0 -2.2em; }
.dsg-mk--a .dsg-mk__img { object-position: 22% 82%; mix-blend-mode: multiply; filter: sepia(.14) saturate(.9); transform: scale(1.35); transform-origin: 26% 78%; }
.dsg-mk--a .dsg-mk__cap { position: relative; margin-top: .8em; padding-left: 2.2em; font-size: .66em; color: #6E6259; }
.dsg-mk--a .dsg-mk__cap::before { content: ""; position: absolute; left: 0; top: .65em; width: 1.6em; border-top: .14em dashed #7A2E2A; }
.dsg-mk--a .dsg-mk__h { margin: .45em 0 .3em; max-width: 13em; font-size: 2.55em; font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.dsg-mk--a .dsg-mk__p { align-self: end; max-width: 26em; font-size: .8em; line-height: 1.45; color: #6E6259; }
.dsg-mk--a .dsg-mk__btn { align-self: end; padding: .85em 1.4em; background: #7A2E2A; color: #FFFFFF; font-size: .78em; font-weight: 600; }

/* ---- B · the archive (Archival: one ruled card per record, call numbers, guide tabs) ---- */
.dsg-mk--b .dsg-mk__pg { padding: 1em 1.4em 1.4em; background: #E9E0C8; color: #2A241A; font-family: "dsg-spacemono", "Courier New", monospace;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "nav nav" "lead works" "btn works"; gap: .9em 1em; }
.dsg-mk--b .dsg-mk__nav { padding-bottom: .7em; border-bottom: .1em solid #2A241A; font-size: .58em; text-transform: uppercase; letter-spacing: .08em; }
.dsg-mk--b .dsg-mk__nav b { font-weight: 700; }
.dsg-mk--b .dsg-mk__lead { grid-area: lead; position: relative; display: grid; min-height: 0; align-content: start; grid-template-columns: minmax(0, 1fr) 9.5em; grid-template-areas: "no view" "h view" "p view" "cap cap";
  column-gap: 1em; padding: .9em 1em 1.8em; background: #F1EAD6; border: .08em solid #A89A78; border-top: .28em solid #7A3B2E; }
.dsg-mk--b .dsg-mk__lead::after { content: ""; position: absolute; left: 50%; bottom: .45em; width: .7em; height: .7em; margin-left: -.35em; border: .08em solid #A89A78; border-radius: 50%; background: #E9E0C8; }
.dsg-mk--b .dsg-mk__no { display: block; grid-area: no; margin-bottom: .7em; font-size: .66em; font-weight: 700; letter-spacing: .08em; color: #2E4470; }
.dsg-mk--b .dsg-mk__h { margin-bottom: .8em; font-size: .7em; font-weight: 700; line-height: 1.45; text-transform: uppercase; letter-spacing: .1em; color: #7A3B2E; }
.dsg-mk--b .dsg-mk__p { font-size: .7em; line-height: 1.6; }
.dsg-mk--b .dsg-mk__cap { margin-top: .9em; padding-top: .5em; border-top: .08em solid #A89A78; font-size: .58em; color: #5C5138; }
.dsg-mk--b .dsg-mk__view { align-self: start; aspect-ratio: 4 / 5; padding: .35em; background: #F1EAD6; border: .08em solid #A89A78; }
.dsg-mk--b .dsg-mk__img { object-position: 24% 80%; mix-blend-mode: multiply; filter: sepia(.5) contrast(.92) brightness(1.02); }
.dsg-mk--b .dsg-mk__works { display: grid; grid-area: works; grid-auto-rows: minmax(0, 1fr); gap: 1.7em; min-height: 0; padding-top: 1.5em; }
.dsg-mk--b .dsg-mk__works li { position: relative; padding: .8em .9em; background: #F1EAD6; border: .08em solid #A89A78; font-size: .62em; line-height: 1.5; }
.dsg-mk--b .dsg-mk__works li::before { content: attr(data-tab); position: absolute; bottom: 100%; padding: .15em .9em 0; background: #F1EAD6; border: .08em solid #A89A78; border-bottom: 0; font-weight: 700; }
.dsg-mk--b .dsg-mk__works li:nth-child(1)::before { left: .6em; } .dsg-mk--b .dsg-mk__works li:nth-child(2)::before { left: 4em; } .dsg-mk--b .dsg-mk__works li:nth-child(3)::before { left: 7.4em; }
.dsg-mk--b .dsg-mk__works span { display: block; margin-bottom: .3em; font-weight: 700; letter-spacing: .08em; color: #2E4470; }
.dsg-mk--b .dsg-mk__works b { display: block; text-transform: uppercase; letter-spacing: .08em; color: #7A3B2E; }
.dsg-mk--b .dsg-mk__btn { justify-self: start; align-self: end; padding: .75em 1.1em; background: #F1EAD6; border: .1em solid #2A241A; font-size: .62em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

/* ---- C · the bench (Engineering Drawing: a framed sheet, numbered parts, title block bottom right, one orange) ---- */
.dsg-mk--c .dsg-mk__pg { padding: 1.4em 1.4em 1.4em 2.6em; background: #FFFFFF; color: #22262B; font-family: "dsg-plex", "IBM Plex Sans", Arial, sans-serif;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10.5em; grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "nav nav nav" "view view parts" "cap cap parts" "works h h" "works p btn"; column-gap: 1em; }
.dsg-mk--c .dsg-mk__pg::before { content: ""; position: absolute; inset: .7em .7em .7em 1.7em; border: .12em solid #22262B; pointer-events: none; }
.dsg-mk--c .dsg-mk__nav { padding-bottom: .6em; font: .52em/1.3 "dsg-plexmono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.dsg-mk--c .dsg-mk__nav b { font-weight: 400; }
.dsg-mk--c .dsg-mk__view { border: .12em solid #22262B; }
.dsg-mk--c .dsg-mk__img { object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); }
.dsg-mk--c .dsg-mk__keys { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.dsg-mk__keys path { fill: none; stroke: #22262B; stroke-width: .9; }
.dsg-mk__keys circle { fill: #FFFFFF; stroke: #22262B; stroke-width: .9; }
.dsg-mk__keys text { font: 9px "dsg-plexmono", ui-monospace, monospace; fill: #22262B; text-anchor: middle; }
.dsg-mk__key--one circle { stroke: #E8641B; stroke-width: 1.8; }
.dsg-mk--c .dsg-mk__cap { margin-top: .5em; font: .52em/1.3 "dsg-plexmono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; color: #5C636B; }
.dsg-mk--c .dsg-mk__parts { display: block; grid-area: parts; padding-left: .9em; font-size: .6em; }
.dsg-mk--c .dsg-mk__parts li { display: flex; align-items: center; gap: .7em; padding: .5em 0; border-bottom: .1em solid #A9B0B8; }
.dsg-mk--c .dsg-mk__parts i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border: .1em solid #22262B; border-radius: 50%; font: normal 1em/1 "dsg-plexmono", ui-monospace, monospace; }
.dsg-mk--c .dsg-mk__parts li:first-child i { border: .18em solid #E8641B; color: #B8480C; }
.dsg-mk--c .dsg-mk__works { display: block; grid-area: works; align-self: end; padding-right: .6em; font: .5em/1.3 "dsg-plexmono", ui-monospace, monospace; }
.dsg-mk--c .dsg-mk__works li { padding: .45em 0; border-top: .1em solid #A9B0B8; }
.dsg-mk--c .dsg-mk__works span { margin-right: 1em; color: #5C636B; }
.dsg-mk--c .dsg-mk__works b { font-weight: 400; }
.dsg-mk--c .dsg-mk__tb { display: block; grid-area: 4 / 2 / 6 / 4; margin-top: .8em; border: .12em solid #22262B; }
.dsg-mk--c .dsg-mk__h { margin-top: .8em; padding: .5em .6em 0; font-size: 1.45em; font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
.dsg-mk--c .dsg-mk__p { padding: .6em 1em 1em; font-size: .56em; color: #5C636B; }
.dsg-mk--c .dsg-mk__btn { align-self: center; justify-self: end; margin: 0 .7em .6em 0; padding: .6em .9em; border: .12em solid #22262B; font: .56em/1.2 "dsg-plexmono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* ---- the same three on a phone ---- */
@container (max-width: 26rem) {
  .dsg-mk__pg { aspect-ratio: 3 / 5; font-size: calc(100cqi / 24); }
  .dsg-mk__nav span { display: none; }
  .dsg-mk__nav i { display: inline; }
  .dsg-mk--a .dsg-mk__pg { padding: 1em 1.4em 1.4em; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "nav" "view" "cap" "h" "p" "btn"; }
  .dsg-mk--a .dsg-mk__nav { font-size: .8em; }
  .dsg-mk--a .dsg-mk__view { margin: 0 -1.4em; }
  .dsg-mk--a .dsg-mk__h { font-size: 2.1em; }
  .dsg-mk--a .dsg-mk__p { font-size: .9em; }
  .dsg-mk--a .dsg-mk__btn { justify-self: stretch; margin-top: 1.1em; text-align: center; font-size: .9em; }
  .dsg-mk--b .dsg-mk__pg { padding: 1em 1em 1.2em; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "nav" "lead" "works" "btn"; }
  .dsg-mk--b .dsg-mk__nav { font-size: .7em; }
  .dsg-mk--b .dsg-mk__lead { grid-template-columns: minmax(0, 1fr) 6.5em; }
  .dsg-mk--b .dsg-mk__h, .dsg-mk--b .dsg-mk__p { font-size: .78em; }
  .dsg-mk--b .dsg-mk__works { grid-auto-rows: auto; overflow: hidden; gap: 1.8em; }
  .dsg-mk--b .dsg-mk__works li { font-size: .72em; }
  .dsg-mk--b .dsg-mk__btn { font-size: .72em; }
  .dsg-mk--c .dsg-mk__pg { padding: 1.2em 1.2em 1.2em 1.9em; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "nav nav" "view view" "cap cap" "parts parts" "h h" "p btn"; }
  .dsg-mk--c .dsg-mk__pg::before { inset: .6em .6em .6em 1.2em; }
  .dsg-mk--c .dsg-mk__nav, .dsg-mk--c .dsg-mk__cap { font-size: .62em; }
  .dsg-mk--c .dsg-mk__parts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; padding: .4em 0 0; font-size: .66em; }
  .dsg-mk--c .dsg-mk__works { display: none; }
  .dsg-mk--c .dsg-mk__tb { grid-area: 5 / 1 / 7 / 3; }
  .dsg-mk--c .dsg-mk__h { font-size: 1.6em; }
  .dsg-mk--c .dsg-mk__p { font-size: .66em; padding-right: .4em; }
  .dsg-mk--c .dsg-mk__btn { font-size: .62em; }
}

/* ---- six questions ---- */
.dsg-qs { margin: var(--s8) 0 0; }
.dsg-qs__lede { margin: 0 0 var(--s6); max-width: 56ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-qs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); }
.dsg-qs__list li { border-bottom: 1px solid var(--rule); }
.dsg-qs__list li:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
.dsg-qs__list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); height: 100%; padding: var(--s5) var(--s5) var(--s5) 0; text-decoration: none; color: var(--ink); }
.dsg-qs__list li:not(:nth-child(3n + 1)) a { padding-left: var(--s5); }
.dsg-qs__n { grid-row: 1 / span 3; font: 800 var(--t-xl)/.9 var(--display); color: var(--brand); }
.dsg-qs__list b { font: 700 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; }
.dsg-qs__a { font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-qs__w { font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.dsg-qs__go { grid-column: 2; margin-top: var(--s2); font: var(--t-xs)/1.5 var(--mono); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; }
.dsg-qs__list a:hover b { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }

/* ---- three directions ---- */

/* the comparison: three columns, rows aligned across them (subgrid) */
.dsg-cmp { display: grid; grid-template-columns: 8.5rem repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: var(--s5); }
.dsg-cmp__ks { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; margin: 0; padding: 0; list-style: none; }
.dsg-cmp__ks li { padding: var(--s4) 0 0; border-top: 1px solid var(--rule); font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.dsg-cmp__ks li:first-child { border: 0; }
.dsg-cmp__d { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; min-width: 0; }
.dsg-cmp__head { padding-bottom: var(--s5); }
.dsg-cmp__head h3 { margin: 0 0 var(--s3); font: 700 var(--t-md)/1.2 var(--display); color: var(--ink); }
.dsg-cmp__head h3 .dsg-letter { font-size: var(--t-xl); vertical-align: -.1em; margin-right: var(--s1); }
.dsg-cmp__mk { max-width: 20rem; }
.dsg-cmp__cell { min-width: 0; padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--rule); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-cmp__cell > p { margin: 0; max-width: 34ch; }
.dsg-cmp__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.dsg-cmp__move { font: 700 var(--t-md)/1.25 var(--display) !important; color: var(--ink); margin-bottom: var(--s2) !important; }
.dsg-cmp__leans { font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.dsg-cmp__leans a { color: var(--ink-2); }
.dsg-ty { margin: 0 0 var(--s2) !important; font-size: 3.5rem; line-height: 1; color: var(--ink); }
.dsg-ty--a { font-family: "dsg-hanken", sans-serif; font-weight: 500; letter-spacing: -.03em; }
.dsg-ty--b { font-family: "dsg-spacemono", monospace; font-weight: 400; font-size: 3rem; }
.dsg-ty--c { font-family: "dsg-plex", sans-serif; font-weight: 300; }
.dsg-sws { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.dsg-sws li { display: grid; grid-template-columns: auto; gap: 2px; width: 4.25rem; font: var(--t-xs)/1.3 var(--ui); color: var(--ink-3); }
.dsg-sws li b { font-weight: 600; color: var(--ink); }
.dsg-sws__c { display: block; width: 100%; height: 2.25rem; margin-bottom: var(--s1); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
/* composition schematic: boxes in each direction's arrangement, numbered in reading order */
.dsg-sch { position: relative; display: grid; gap: 4px; width: 100%; max-width: 11rem; aspect-ratio: 5 / 4; margin-bottom: var(--s3); padding: 6px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--rule-firm); }
.dsg-sch i { display: grid; place-items: center; background: var(--paper-3); font: normal 600 var(--t-xs)/1 var(--mono); color: var(--ink-2); }
.dsg-sch i.dsg-sch__1 { background: var(--brand-edge); color: var(--ink); }
.dsg-sch i.dsg-sch__1::after { content: "1"; } .dsg-sch i.dsg-sch__2::after { content: "2"; } .dsg-sch i.dsg-sch__3::after { content: "3"; }
.dsg-sch--a { grid-template-rows: 3fr 1fr .6fr; }
.dsg-sch--a .dsg-sch__3 { justify-self: end; width: 40%; }
.dsg-sch--b { grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(3, 1fr); }
.dsg-sch--b .dsg-sch__1 { grid-row: 1 / -1; background: var(--paper-3); color: var(--ink-2); }
.dsg-sch--b .dsg-sch__1::after, .dsg-sch--b .dsg-sch__2::after { content: "="; }
.dsg-sch--c { grid-template-columns: 2fr 1fr; grid-template-rows: 2fr 1fr; }
.dsg-sch--c .dsg-sch__3 { grid-column: 2; }
.dsg-sch--c .dsg-sch__1 { grid-row: 1; }
.dsg-im { position: relative; width: 100%; max-width: 13rem; aspect-ratio: 4 / 3; margin-bottom: var(--s3); overflow: hidden; }
.dsg-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsg-im--a { background: #F4EFE6; } .dsg-im--a img { object-position: 22% 82%; mix-blend-mode: multiply; filter: sepia(.14) saturate(.9); transform: scale(1.5); transform-origin: 24% 80%; }
.dsg-im--b { background: #E9E0C8; padding: 1.25rem 2.5rem; } .dsg-im--b img { width: 70%; margin: 0 auto; border: 6px solid #F1EAD6; box-shadow: 0 0 0 1px #A89A78; object-position: 24% 80%; mix-blend-mode: multiply; filter: sepia(.5) contrast(.92); }
.dsg-im--c { background: #FFFFFF; box-shadow: inset 0 0 0 2px #22262B; } .dsg-im--c img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); }
.dsg-sp { display: flex; align-items: flex-end; gap: 6px; height: 2.75rem; margin-bottom: var(--s3); }
.dsg-sp i { display: block; width: calc(var(--w) * 1rem); min-width: 3px; height: 100%; background: var(--brand-edge); box-shadow: inset 0 0 0 1px var(--brand); }
.dsg-test { margin: var(--s6) 0 0; padding: var(--s4) var(--s5); max-width: 62ch; background: var(--brand-wash); border-left: 2px solid var(--brand); font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }

/* ---- choose ---- */
.dsg-choose__intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: end; margin-bottom: var(--s5); }
.dsg-choose__intro .dsg-sec__lede { margin: 0; }
.dsg-choose__also { margin: 0; max-width: 40ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-tablewrap { overflow-x: auto; }
.dsg-tablewrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dsg-table { width: 100%; min-width: 40rem; border-collapse: collapse; font: var(--t-sm)/1.45 var(--ui); }
.dsg-table caption { padding-bottom: var(--s3); text-align: left; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); caption-side: top; }
.dsg-table th, .dsg-table td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--ink-2); }
.dsg-table thead th { font: 700 var(--t-base)/1.2 var(--display); color: var(--ink); border-bottom: 1px solid var(--rule-firm); }
.dsg-table thead th .dsg-letter { font-size: var(--t-lg); margin-right: var(--s1); }
.dsg-table tbody th { width: 30%; font-weight: 400; }
.dsg-table tbody th b { display: block; font-weight: 700; color: var(--ink); }
.dsg-table tbody th span { font-size: var(--t-xs); color: var(--ink-3); }
.dsg-table__gh th { padding-top: var(--s5); border-bottom-color: var(--rule-firm); font: var(--t-xs)/1.4 var(--mono) !important; color: var(--brand) !important; }
.dsg-score { font: 700 var(--t-base)/1.2 var(--display); color: var(--ink-2); }
.dsg-score--strong, .dsg-score--clear, .dsg-score--low { color: var(--ink); }
.dsg-score--weak, .dsg-score--crowded, .dsg-score--high { color: var(--ink-3); font-weight: 400; }
.dsg-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s6); margin-top: var(--s6); align-items: baseline; }
.dsg-verdict__k { grid-row: 1 / span 2; margin: 0; font: 800 var(--t-xl)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.dsg-verdict__k .dsg-letter { font-size: 1.6em; vertical-align: -.12em; }
.dsg-verdict__why { margin: 0; max-width: 40ch; font: 700 var(--t-md)/1.3 var(--display); color: var(--ink); }
.dsg-verdict__keep { margin: 0; max-width: 56ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }

/* ---- direction to specification ---- */
.dsg-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dsg-vs p { margin: 0; display: grid; gap: var(--s2); font: var(--t-base)/1.35 var(--ui); }
.dsg-vs span { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.dsg-vs s { color: var(--ink-3); text-decoration-color: var(--brand); }
.dsg-vs b { font-weight: 600; color: var(--ink); }
/* excerpts in the ledger: drawn on the bookbinder's paper, because they are the bookbinder's decisions */
.dsg-x { padding: var(--s4) var(--s5); background: #F4EFE6; color: #1E1A17; font: var(--t-sm)/1.5 "dsg-hanken", var(--ui); box-shadow: 0 0 0 1px var(--rule-firm); }
.dsg-x p, .dsg-x ul, .dsg-x ol { margin: 0; }
.dsg-x__big { font: 500 1.75rem/1.1 "dsg-hanken", var(--ui); letter-spacing: -.02em; }
.dsg-x__move { margin-top: var(--s2) !important; font-size: var(--t-base); color: #6E6259; }
.dsg-x__not { display: grid; gap: 2px; margin-top: var(--s4) !important; padding: var(--s3) 0 0; list-style: none; border-top: 1px solid #D6CBB8; font-size: var(--t-sm); }
.dsg-x__not li::before { content: "Not "; font-weight: 700; color: #7A2E2A; }
.dsg-x--type p { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 var(--s4); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid #D6CBB8; }
.dsg-x--type p:last-child { border: 0; }
.dsg-x__spec { font: var(--t-xs)/1.4 var(--mono); color: #6E6259; }
.dsg-x__sample { font-size: min(var(--fs), 2.4rem); line-height: 1.08; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dsg-x__note { grid-column: 2; font: var(--t-xs)/1.4 var(--mono); color: #6E6259; }
.dsg-x--color ul { display: grid; gap: var(--s2); padding: 0; list-style: none; }
.dsg-x--color li { display: grid; grid-template-columns: 2.5rem 6rem 5rem minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: var(--t-xs); }
.dsg-x--color li b { font: var(--t-xs)/1.3 var(--mono); }
.dsg-x--color .dsg-sws__c { height: 1.75rem; margin: 0; box-shadow: inset 0 0 0 1px rgba(30, 26, 23, .25); }
.dsg-x__tell { margin-top: var(--s4) !important; padding-top: var(--s3); border-top: 1px solid #D6CBB8; font-size: var(--t-sm); }
.dsg-x--layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); }
.dsg-x--layout ol { padding-left: var(--s5); display: grid; gap: var(--s1); }
.dsg-x--layout ol li::marker { font: var(--t-xs) var(--mono); color: #7A2E2A; }
.dsg-x__space { display: grid; gap: var(--s2); padding: 0; list-style: none; font: var(--t-xs)/1.3 var(--mono); color: #6E6259; }
.dsg-x__space i { display: block; width: calc(var(--w) * 1rem); height: .75rem; margin-bottom: 2px; background: #7A2E2A; }
.dsg-kv { display: grid; gap: var(--s1); margin: 0; }
.dsg-kv + .dsg-kv { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid #D6CBB8; }
.dsg-kv div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s3); }
.dsg-kv dt { font: var(--t-xs)/1.5 var(--mono); color: #7A2E2A; }
.dsg-kv dd { margin: 0; }
.dsg-btns { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s4); margin-bottom: var(--s6); }
.dsg-btn { position: relative; display: inline-flex; align-items: center; gap: var(--s2); padding: .6rem 1rem; background: #7A2E2A; color: #FFFFFF; font: 600 var(--t-sm)/1.2 "dsg-hanken", var(--ui); }
.dsg-btn small { position: absolute; left: 0; top: 100%; padding-top: 2px; font: var(--t-xs)/1.3 var(--mono); color: #6E6259; }
.dsg-btn--hover { text-decoration: underline; text-underline-offset: .2em; }
.dsg-btn--focus { outline: 2px solid #1E1A17; outline-offset: 3px; }
.dsg-btn--load::after { content: ""; width: .8em; height: .8em; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #FFFFFF; border-radius: 50%; }
.dsg-x__mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding: 0 0 var(--s3) !important; list-style: none; border-bottom: 1px solid #D6CBB8; }
.dsg-x__mins b { display: block; font: 500 1.75rem/1 "dsg-hanken", var(--ui); letter-spacing: -.02em; }
.dsg-x__mins span { font-size: var(--t-xs); color: #6E6259; }
.dsg-x--a11y > p { margin-top: var(--s3); font-weight: 600; }
.dsg-x--resp { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s5); align-items: start; }
.dsg-x--resp ul { display: grid; gap: 2px; padding-left: var(--s4); }
.dsg-x--resp p { margin-top: var(--s3); font-size: var(--t-sm); color: #6E6259; }
.dsg-handoff { margin-top: var(--s8); }
.dsg-handoff__h { margin: 0 0 var(--s5); font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.dsg-handoff__pair { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s7); }
.dsg-handoff__k { margin: 0 0 var(--s3); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.dsg-handoff__q { margin: 0 0 var(--s2); font: 700 var(--t-xl)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.dsg-handoff__say > p:last-child, .dsg-handoff__read > p:last-child { margin: var(--s4) 0 0; max-width: 44ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.dsg-checks ul { margin: 0; padding-left: var(--s5); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink); }
.dsg-tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.dsg-tech .vis-file__path { overflow-wrap: anywhere; }
.dsg-tech .vis-file { margin: 0; min-width: 0; }

/* ---- Aesthetics, Elements, Mix ---- */
.dsg-lib__aes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--s6); align-items: end; padding-bottom: var(--s7); border-bottom: 1px solid var(--rule-firm); }
.dsg-lib h3 { margin: 0 0 var(--s3); font: 800 var(--t-xl)/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
.dsg-lib__t p, .dsg-lib__el > p, .dsg-lib__mix > p { margin: 0 0 var(--s4); max-width: 40ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-lib__stills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.dsg-lib__stills a, .dsg-lib__plates a { display: block; color: var(--ink); text-decoration: none; }
.dsg-lib__stills img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.dsg-lib__stills span, .dsg-lib__plates span { display: block; padding-top: var(--s2); font: 600 var(--t-sm)/1.3 var(--ui); }
.dsg-lib__stills a:hover span, .dsg-lib__plates a:hover span { color: var(--brand); text-decoration: underline; }
.dsg-lib__stills a:focus-visible, .dsg-lib__plates a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.dsg-lib__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); padding-top: var(--s7); }
.dsg-lib__plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.dsg-lib__plates img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #F3F1EC; }
.dsg-mixfig { margin: 0 0 var(--s3); }
.dsg-mixfig__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.dsg-mixfig__pair img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.dsg-mixfig__pair::after { content: ""; position: absolute; top: -.5rem; bottom: -.5rem; left: 50%; width: 2px; margin-left: -1px; background: var(--brand); }
.dsg-seams { width: 100%; table-layout: fixed; margin-top: var(--s4); border-collapse: collapse; font: var(--t-xs)/1.45 var(--mono); }
.dsg-seams caption { padding-bottom: var(--s2); text-align: left; font: 600 var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.dsg-seams th, .dsg-seams td { overflow-wrap: anywhere; padding: var(--s1) var(--s3) var(--s1) 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; color: var(--ink-2); }
.dsg-seams th { color: var(--ink); width: 40%; }
.dsg-lib__fav { margin: var(--s6) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-lib__fav a { color: var(--ink); }

/* ---- mistakes ---- */
.dsg-gen .ba-site__h .vis-pin, .dsg-gen__stat .vis-pin { margin-right: var(--s1); }
.dsg-gen__btns { display: flex; gap: var(--s2); margin: var(--s3) 0; }
.dsg-gen__btns span { padding: .35rem .8rem; border-radius: 999px; background: var(--ba-accent); color: #FFFFFF; font: 600 var(--t-xs)/1.2 var(--ui); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.dsg-gen__btns span + span { background: transparent; color: var(--ba-ink); box-shadow: inset 0 0 0 1px var(--ba-rule); }
.dsg-gen__icons { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ba-ink); text-align: center; }
.dsg-gen__icons li:not(.dsg-gen__pin) { padding: var(--s2) var(--s1); border-radius: 10px; background: #FFFFFF; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); }
.dsg-gen__icons i { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto var(--s1); border-radius: 50%; background: var(--ba-photo); }
.dsg-gen__pin { align-self: center; }
.dsg-gen__stat { margin: var(--s3) 0 0; font: 800 var(--t-md)/1.2 var(--ui); color: var(--ba-ink); }
.dsg-gen__photo { aspect-ratio: 16 / 9; overflow: hidden; background: #F4EFE6; }
.dsg-gen__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 22% 82%; mix-blend-mode: multiply; transform: scale(1.3); transform-origin: 26% 78%; }
.dsg-tells { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.dsg-tells li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); }
.dsg-tells .vis-pin { grid-row: 1 / span 2; }
.dsg-tells p { margin: 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.dsg-tells b { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); margin-right: var(--s1); }
.dsg .stg-mx--drawn { margin-bottom: var(--s8); }
.dsg .stg-mx--drawn .stg-mx__list { margin-top: var(--s7); }
.dsg .stg-mx__draw { min-height: 0; padding: var(--s3); }
.dsg .stg-mx__list i { color: var(--ink-2); }
.dsg-mis__i { display: grid; grid-template-rows: auto 1fr; gap: var(--s4); min-width: 0; }
.dsg-mis__pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.dsg-mis__pics figure { margin: 0; min-width: 0; }
.dsg-mis__k { display: block; margin-bottom: var(--s1); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.dsg-mis__pics figure + figure .dsg-mis__k { color: var(--brand); }
.dsg-mis__t h3 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.2 var(--display); color: var(--ink); }
.dsg-mis__t p { margin: 0 0 var(--s2); max-width: 46ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-mis__t p b { color: var(--ink); font-weight: 650; }
.dsg-mis__ex { color: var(--ink-3) !important; font-style: italic; }
.dsg-mis__l { font: var(--t-xs)/1.5 var(--mono) !important; }
.dsg-mis__l a { color: var(--ink-2); }
/* the drawn specimens: small sheets of the bookbinder's paper */
.dsg-mi { position: relative; display: grid; align-content: center; gap: 6px; aspect-ratio: 4 / 3; padding: 10px 12px; overflow: hidden; background: #F4EFE6; color: #1E1A17; font: 13px/1.3 "dsg-hanken", var(--ui); box-shadow: 0 0 0 1px var(--rule-firm); }
.dsg-mi p { margin: 0; }
.dsg-mi small { font: 10px/1.3 var(--mono); color: #6E6259; }
.dsg-mi--flat p { font-size: 13px; font-weight: 500; }
.dsg-mi--rank p:first-child { font-size: 21px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.dsg-mi--rank p:nth-child(2) { font-size: 11px; color: #6E6259; }
.dsg-mi--rank span { display: inline-block; padding: 4px 8px; background: #7A2E2A; color: #FFFFFF; font-size: 11px; font-weight: 600; }
.dsg-mi--gold svg { display: block; width: 100%; max-width: 12rem; height: auto; }
.dsg-mi--gold text { font: 600 20px "dsg-hanken", sans-serif; fill: #C9A86A; }
.dsg-mi--goldok p span { display: inline-block; padding: 6px 12px; background: #C9A86A; color: #1E1A17; font-size: 15px; font-weight: 600; }
.dsg-mi--sizes p, .dsg-mi--scale p { font-size: calc(var(--s) * 1px); line-height: 1.15; }
.dsg-mi--scale p:first-child { font-weight: 500; letter-spacing: -.02em; }
.dsg-mi--stock { place-items: center; background: #DCD6CC; }
.dsg-mi--stock span { font: 11px/1.3 var(--mono); color: #4A4440; text-align: center; }
.dsg-mi--claim { padding: 0; align-content: stretch; }
.dsg-mi--claim img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 22% 82%; mix-blend-mode: multiply; transform: scale(1.6); transform-origin: 24% 80%; }
.dsg-mi--claim small { position: absolute; left: 8px; bottom: 6px; padding: 1px 4px; background: #F4EFE6; }
.dsg-mi--btns { justify-items: start; gap: 8px; }
.dsg-mi--btns span { padding: 4px 9px; font-size: 11px; font-weight: 600; }
.dsg-mi--btns .dsg-mi__b1 { background: #7A2E2A; color: #FFFFFF; }
.dsg-mi--btns .dsg-mi__b2 { border-radius: 999px; background: #2F6E5A; color: #FFFFFF; box-shadow: 0 5px 10px -4px rgba(0, 0, 0, .4); }
.dsg-mi--btns .dsg-mi__b3 { border-radius: 4px; box-shadow: inset 0 0 0 1px #6E6259; color: #1E1A17; }
.dsg-mi--btn1 { justify-items: start; }
.dsg-mi--btn1 span { padding: 5px 10px; background: #7A2E2A; color: #FFFFFF; font-size: 12px; font-weight: 600; }
.dsg-mi--phone { justify-self: center; width: 46%; aspect-ratio: 9 / 16; align-content: start; padding: 6px 6px 8px; gap: 4px; border-radius: 6px; box-shadow: 0 0 0 2px #1E1A17; }
.dsg-mis__pics figure { display: grid; justify-items: stretch; }
.dsg-mi--phone .dsg-mi__ph { display: block; height: 42%; overflow: hidden; background: #E4DCCD; }
.dsg-mi--phone .dsg-mi__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 26% 80%; mix-blend-mode: multiply; transform: scale(1.4); transform-origin: 26% 80%; }
.dsg-mi--phone p { font-size: 10px; font-weight: 500; line-height: 1.1; }
.dsg-mi--phone .dsg-mi__act { justify-self: stretch; margin-top: auto; padding: 4px; background: #7A2E2A; color: #FFFFFF; font-size: 8px; text-align: center; }
.dsg-mi--phone-bad .dsg-mi__ph { height: 22%; margin: 0 -6px; background: #D9D0C0; }
.dsg-mi--phone-bad p { font-size: 15px; }
.dsg-mi--phone-bad .dsg-mi__nav { font-size: 8px; font-weight: 400; white-space: nowrap; color: #6E6259; }
.dsg-mi--stat p { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.dsg-mi--stat .dsg-mi__q { font-size: 11px; font-weight: 400; font-style: italic; color: #6E6259; }
.dsg-mi--nostat p { font-size: 15px; font-weight: 500; }
.dsg-mi--lux { background: #1E1A17; color: #C9A86A; }
.dsg-mi--lux p { font: italic 300 22px/1.05 Georgia, "Times New Roman", serif; letter-spacing: .04em; }
.dsg-mi--lux small { color: #C9B9A0; }
.dsg-mi--true p { font-size: 17px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }

/* ---- responsive: rules, not breakpoints for their own sake ---- */
@media (max-width: 64rem) {
  .dsg-qs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsg-qs__list li:not(:nth-child(3n)) { border-right: 0; }
  .dsg-qs__list li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .dsg-qs__list li:not(:nth-child(3n + 1)) a { padding-left: 0; }
  .dsg-qs__list li:nth-child(even) a { padding-left: var(--s5); }
  .dsg-cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dsg-cmp__ks { display: none; }
  .dsg-cmp__k { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 var(--s2); font: 600 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
  .dsg-choose__intro, .dsg-handoff__pair, .dsg-lib__aes { grid-template-columns: minmax(0, 1fr); }
  .dsg-lib__two { gap: var(--s6); }
  .dsg-mis__list { gap: var(--s7) var(--s5); }
}
@media (max-width: 44rem) {
  .dsg-qs__list { grid-template-columns: minmax(0, 1fr); }
  .dsg-qs__list li:nth-child(odd) { border-right: 0; }
  .dsg-qs__list li:nth-child(even) a { padding-left: 0; }
  .dsg-cmp { display: block; }
  .dsg-cmp__d { display: block; padding-bottom: var(--s7); }
  .dsg-cmp__mk { max-width: 22rem; }
  .dsg-lib__stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsg-mis__list { grid-template-columns: minmax(0, 1fr); }
  .dsg-x--resp { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s4); }
  .dsg-x--color li { grid-template-columns: 2rem 5.5rem minmax(0, 1fr); }
  .dsg-x--color li > span:last-child { grid-column: 2 / -1; }
  .dsg-x__mins { grid-template-columns: minmax(0, 1fr); }
  .dsg-x--type p { grid-template-columns: minmax(0, 1fr); }
  .dsg-x__note { grid-column: 1; }
  .dsg-verdict { grid-template-columns: minmax(0, 1fr); }
  .dsg-verdict__k { grid-row: auto; }
}
/* the glossary line that replaced the printed word list (stage pages v2 de-dupe) */
.dsg-gloss { margin: var(--s5) 0 0; max-width: 70ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.dsg-gloss a { color: var(--ink); }

/* ---- inside the v2 accordions (stage-v2.css): the sections became accordion bodies ---- */
.sv2-acc__b > .dsg > :first-child, .sv2-acc__b .dsg-qs > :first-child { margin-top: 0; }
.dsg .dsg-qs { margin: 0; }
.dsg-lib h4 { margin: 0 0 var(--s3); font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.dsg-lib__pre { font: var(--t-xs)/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.dsg .rg { margin-top: var(--s8); }
.dsg-handoff { margin-top: var(--s8); }

/* ---- your turn: the prototype's exercise on the shared component (exercise.css) ---- */
.dsg-turn .lsn-ex__ai.has-yours { grid-template-columns: minmax(0, 1fr); }
.dsg-turn .lsn-ex__theirs .dsg-vs { margin: 0; padding: var(--s3) 0 0; border: 0; }
.dsg-turn .lsn-ex__theirs .dsg-vs p { align-content: start; font: var(--t-base)/1.35 var(--ui); }
.dsg-turn .lsn-ex__theirs .dsg-cap { margin-top: var(--s3); }
.dsg-turn__p { margin: 0 0 var(--s3); max-width: 60ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
@media (max-width: 44rem) { .dsg-turn .lsn-ex__theirs .dsg-vs { grid-template-columns: minmax(0, 1fr); } }
/* the struck words sit on the exercise's darker panel: ink-2, not ink-3, so they keep AA contrast */
.dsg-turn .lsn-ex__theirs .dsg-vs s, .dsg-turn .lsn-ex__theirs .dsg-vs span, .dsg-turn .lsn-ex__theirs .dsg-cap, .dsg-turn .lsn-ex__theirs .dsg-cap a { color: var(--ink-2); }

/* Mix hidden (FEATURES.mix off, 2026-11-02): Elements stands alone in the library's second row. */
.dsg-lib__two--one { grid-template-columns: minmax(0, 1fr); }
.dsg-lib__two--one .dsg-lib__el > p { max-width: 60ch; }