/* Atelier specimen grammar. Asset recipes are allowlisted; prose survives without images. */
.at-specimen {
  --at-paper: #f3f0e7;
  --at-ink: #10100e;
  --at-red: #d63524;
  --at-hair: rgba(16,16,14,.24);
  --at-material: none;
  --at-intrusion: none;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  color: var(--at-ink);
  font: 22px/1.48 "EB Garamond", Georgia, serif;
  text-align: left;
  overflow-wrap: anywhere;
}
.at-specimen *, .at-specimen *::before, .at-specimen *::after { box-sizing: border-box; }
.at-specimen.at-sample {
  margin: 3.5rem auto;
  padding: 2.5rem 3rem;
  min-height: 240px;
  border: 0;
  background: var(--at-paper);
  background-image: none;
}
.at-specimen .at-sample-body { position: relative; z-index: 1; min-width: 0; max-width: none; }
.at-specimen :is(h2,h3,p,blockquote,dl,ol) { margin: 0 0 1rem; }
.at-specimen h2 { font: 400 clamp(30px,3.3vw,46px)/1.05 "EB Garamond",Georgia,serif; letter-spacing: -.025em; text-wrap: balance; }
.at-specimen h3 { font: 400 12px/1.5 "JetBrains Mono",monospace; letter-spacing: .02em; }
.at-specimen p { font: inherit; }
.at-specimen .at-specimen-kicker,
.at-specimen .at-marginal,
.at-specimen small,
.at-specimen .at-afterhand,
.at-specimen .at-accounts footer { font: 400 11px/1.7 "JetBrains Mono",monospace; letter-spacing: .01em; }
.at-specimen .at-specimen-kicker { margin-bottom: 1.4rem; text-transform: uppercase; letter-spacing: .07em; }
.at-specimen .at-lead { font-size: 1.2em; line-height: 1.35; }
.at-specimen .at-afterhand { margin-top: 1.7rem; padding-top: .8rem; border-top: 1px solid var(--at-hair); max-width: 65ch; }
.at-specimen a { color: inherit; text-decoration-color: var(--at-red); text-underline-offset: .2em; }
.at-specimen :is(a,summary):focus-visible,
.at-specimen .at-table-scroll:focus-visible { outline: 2px solid var(--at-red); outline-offset: 5px; }
.at-specimen blockquote { border: 0; padding: .5rem 0 .5rem 1.4rem; font-size: 1.25em; }
.at-specimen blockquote p { margin-bottom: .7rem; }
.at-specimen cite { font: 11px/1.7 "JetBrains Mono",monospace; }
.at-specimen details { margin: 1.25rem 0 0; border-block: 1px solid var(--at-hair); padding: .25rem 0; }
.at-specimen summary { min-height: 44px; padding: .5rem 0; cursor: pointer; font-size: .88em; }
.at-specimen details > :not(summary) { margin-top: .8rem; }
.at-specimen .at-table-scroll { overflow-x: auto; max-width: 100%; margin: 1.3rem 0; }
.at-specimen table { width: 100%; border-collapse: collapse; font-size: .88em; line-height: 1.4; }
.at-specimen :is(th,td) { padding: .8rem .6rem .8rem 0; border: 0; border-bottom: 1px solid var(--at-hair); text-align: left; vertical-align: top; }
.at-specimen th { font: 11px/1.7 "JetBrains Mono",monospace; }
.at-specimen .at-register { margin: 1.5rem 0; }
.at-specimen .at-register > div { display: grid; grid-template-columns: minmax(100px,1fr) 2.5fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--at-hair); }
.at-specimen dt { font: 11px/1.65 "JetBrains Mono",monospace; }
.at-specimen dd { margin: 0; }

/* Family silhouettes: folio, handled slip, evidence ledger, definition, temporal plane. */
.at-specimen[data-at-family="relic"].at-sample { width: 93%; margin-right: 0; padding: 2.8rem 3.8rem 2.7rem 3rem; border-right: 1px solid var(--at-hair); }
.at-specimen[data-at-family="relic"] .at-specimen-kicker::first-letter { color: var(--at-red); font-size: 1.25em; }
.at-specimen[data-at-family="relic"] h2 { max-width: 15ch; }
.at-specimen .at-folio { display: grid; grid-template-columns: minmax(0,3fr) minmax(80px,1fr); gap: .5rem 2.2rem; }
.at-specimen .at-folio .at-marginal { padding-top: .4rem; }
.at-specimen .at-folio > :last-child { grid-column: 1; }
.at-specimen .at-roster { list-style: none; margin: 1.5rem 0; padding: 0; }
.at-specimen .at-roster li { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--at-hair); }
.at-specimen .at-roster span { font: 11px/1.7 "JetBrains Mono",monospace; }
.at-specimen .at-roster em { grid-column: 1 / -1; font-size: .9em; }
.at-specimen .at-incident { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; padding: 1.4rem 0 .7rem; }
.at-specimen .at-incident small { display: block; margin-bottom: .5rem; }
.at-specimen .at-incident > :last-child { padding-top: 1.2rem; }
.at-specimen .at-lacuna { color: #635e55; letter-spacing: .25em; margin-block: 1.5rem; }
.at-specimen[data-at-family="field"].at-sample { width: 94%; margin-left: 0; padding: 2rem 2.5rem 1.8rem; border-top: 1px solid var(--at-hair); border-bottom: 1px solid var(--at-hair); }
.at-specimen[data-at-family="field"] h2 { font-size: clamp(28px,3vw,38px); }
.at-specimen .at-observation,
.at-specimen .at-character { display: grid; grid-template-columns: minmax(0,2.7fr) minmax(110px,1fr); gap: 1.8rem; margin: 1.6rem 0; }
.at-specimen .at-observation > aside,
.at-specimen .at-character > aside { border-left: 1px solid var(--at-hair); padding: .5rem 0 .5rem 1.2rem; align-self: start; }
.at-specimen .at-writing-lines p { border-bottom: 1px solid rgba(16,16,14,.16); padding-bottom: 1rem; margin-bottom: 1.1rem; }
.at-specimen[data-at-form="writing-surface"] .at-writing-lines { padding-block: 1rem; }
.at-specimen[data-at-form="marginal-note"] details { margin-left: 14%; padding-left: 1rem; border-left: 1px solid var(--at-hair); }
.at-specimen[data-at-family="archive"].at-sample { padding: 2.2rem 2.8rem 2rem; border-block: 2px solid #665a45; }
.at-specimen[data-at-family="archive"] h2 { padding-bottom: 1rem; border-bottom: 1px solid var(--at-hair); }
.at-specimen .at-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.5rem 0; }
.at-specimen .at-accounts > section + section { padding-left: 2rem; border-left: 1px solid var(--at-hair); }
.at-specimen .at-accounts h3 { padding-bottom: .6rem; border-bottom: 1px solid var(--at-hair); }
.at-specimen .at-accounts p { min-height: 4em; }
.at-specimen .at-archive-path { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.7rem 0; }
.at-specimen .at-archive-path a { display: block; padding-block: .7rem; border-top: 1px solid var(--at-hair); }
.at-specimen .at-archive-path small { display: block; margin-bottom: .7rem; }
.at-specimen .at-archive-path [rel="next"] { text-align: right; }
.at-specimen[data-at-family="system"].at-sample { padding: 2.6rem 2.8rem; background: transparent; border-top: 1px solid var(--at-hair); }
.at-specimen[data-at-family="system"] .at-specimen-kicker { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--at-red); }
.at-specimen .at-definition { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(130px,1fr); gap: 2.5rem; }
.at-specimen .at-definition h2 { font-size: clamp(38px,5vw,58px); }
.at-specimen .at-branches { margin: 2.6rem 0 0; padding-left: 1.4rem; border-left: 1px solid var(--at-hair); }
.at-specimen .at-branches > div { position: relative; margin-bottom: 1.1rem; }
.at-specimen .at-branches > div::before { content: ""; position: absolute; left: -1.4rem; top: .6rem; width: .7rem; border-top: 1px solid var(--at-hair); }
.at-specimen .at-branches dd { font-size: .8em; }
.at-specimen .at-answer-branches { margin-left: 1.5rem; padding-left: 1.5rem; border-left: 1px solid var(--at-hair); }
.at-specimen[data-at-family="signal"].at-sample { padding: 2.5rem 3rem; width: 96%; margin-left: auto; margin-right: 0; background: rgba(243,240,231,.65); border: 0; }
.at-specimen[data-at-family="signal"] .at-sample-body::before,
.at-specimen[data-at-family="signal"] .at-sample-body::after { content: ""; position: absolute; top: -.9rem; width: 9px; height: 9px; border-top: 1px solid var(--at-hair); border-left: 1px solid var(--at-hair); }
.at-specimen[data-at-family="signal"] .at-sample-body::before { left: -1rem; }
.at-specimen[data-at-family="signal"] .at-sample-body::after { right: -1rem; transform: rotate(90deg); }
.at-specimen[data-at-family="signal"] h2 { margin-left: 1.2rem; }
.at-specimen[data-at-family="signal"] blockquote { margin: 2rem 0 2rem 8%; max-width: 25ch; font-size: 1.4em; }
.at-specimen .at-parallel { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.5rem 0; }
.at-specimen .at-parallel > div { border-top: 1px solid var(--at-hair); padding-top: .65rem; }
.at-specimen .at-parallel > div + div { margin-top: 1.5rem; border-top-style: dashed; }
.at-specimen .at-parallel small { display: block; margin-bottom: .8rem; }

/* Natural-scale fabric images; geometry changes with placement, never with text length. */
.at-specimen[data-binding="bast"] { --at-material: url(../images/materials/bast.png); }
.at-specimen[data-binding="linen"] { --at-material: url(../images/materials/linen.png); }
.at-specimen[data-binding="felt"] { --at-material: url(../images/materials/felt.png); }
.at-specimen[data-binding="leather"] { --at-material: url(../images/materials/leather.png); }
.at-specimen[data-binding="silk"] { --at-material: url(../images/materials/silk.png); }
.at-specimen[data-binding="canvas"] { --at-material: url(../images/materials/canvas.png); }
.at-specimen[data-binding="mesh"] { --at-material: url(../images/materials/mesh.png); }
.at-specimen[data-binding="filament"] { --at-material: url(../images/materials/filament.png); }
.at-specimen[data-intrusion="bast"] { --at-intrusion: url(../images/materials/bast.png); }
.at-specimen[data-intrusion="linen"] { --at-intrusion: url(../images/materials/linen.png); }
.at-specimen[data-intrusion="felt"] { --at-intrusion: url(../images/materials/felt.png); }
.at-specimen[data-intrusion="leather"] { --at-intrusion: url(../images/materials/leather.png); }
.at-specimen[data-intrusion="silk"] { --at-intrusion: url(../images/materials/silk.png); }
.at-specimen[data-intrusion="canvas"] { --at-intrusion: url(../images/materials/canvas.png); }
.at-specimen[data-intrusion="mesh"] { --at-intrusion: url(../images/materials/mesh.png); }
.at-specimen[data-intrusion="filament"] { --at-intrusion: url(../images/materials/filament.png); }
.at-specimen .at-specimen-material { position: absolute; z-index: 0; pointer-events: none; }
.at-specimen .at-specimen-material::before,
.at-specimen .at-specimen-patch { content: ""; position: absolute; inset: 0; background-image: var(--at-material); background-size: 200% auto; background-position: center; background-repeat: repeat-y; }
.at-specimen .at-specimen-patch { background-image: var(--at-intrusion); }
.at-specimen .at-specimen-material svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--at-red); }
.at-specimen :is(.at-specimen-material,.at-divider-material) + svg path,
.at-specimen .at-specimen-material svg path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.at-specimen[data-placement="spine"].at-sample { padding-left: 6rem; }
.at-specimen[data-placement="spine"] > .at-specimen-material { inset: 0 auto 0 0; width: 48px; }
.at-specimen[data-placement="spine"] .at-specimen-material::before { background-image: var(--at-material), var(--at-material); background-position: center 0, center 72px; }
.at-specimen[data-placement="spine"] .at-specimen-patch { inset: 20% 6px auto; height: 65px; transform: rotate(-7deg); }
.at-specimen[data-placement="graft"].at-sample { padding-right: 5rem; }
.at-specimen[data-placement="graft"] > .at-specimen-material { top: 24px; right: 0; width: 60px; height: 140px; transform: rotate(4deg); transform-origin: right top; }
.at-specimen[data-placement="graft"] .at-specimen-patch { inset: 54% -4px 4px 18px; transform: rotate(-8deg); }
.at-specimen[data-placement="scar"].at-sample { padding-bottom: 4.5rem; }
.at-specimen[data-placement="scar"] > .at-specimen-material { bottom: 12px; left: 8%; width: 75%; height: 28px; }
.at-specimen[data-placement="scar"] .at-specimen-material::before { background-size: 70px auto; background-repeat: repeat-x; opacity: .75; }
.at-specimen[data-placement="scar"] .at-specimen-patch { inset: -4px 10% -4px auto; width: 38px; }
.at-specimen[data-placement="tab"].at-sample { padding-left: 4rem; }
.at-specimen[data-placement="tab"] > .at-specimen-material { top: 42px; left: 0; width: 40px; height: 66px; }
.at-specimen[data-placement="tab"] .at-specimen-patch { inset: auto -4px 0 12px; height: 22px; }
.at-specimen[data-placement="suture"].at-sample { padding-bottom: 4rem; }
.at-specimen[data-placement="suture"] > .at-specimen-material { bottom: 15px; left: 12%; width: 76%; height: 35px; }
.at-specimen[data-placement="suture"] .at-specimen-material::before { inset: 1px auto 1px 3%; width: 25px; }
.at-specimen[data-placement="suture"] .at-specimen-patch { inset: 1px 3% 1px auto; width: 25px; }
.at-specimen[data-placement="veil"] > .at-specimen-material { width: 46%; height: 155px; right: 5%; top: 26%; opacity: .2; }
.at-specimen[data-placement="veil"] .at-specimen-material::before { background-size: 80px auto; background-repeat: repeat; }
.at-specimen[data-placement="veil"] .at-specimen-patch { inset: 0 4% 0 45%; background-size: 70px auto; background-repeat: repeat; }
.at-specimen[data-placement="veil"] .at-specimen-material svg { height: 28px; top: auto; bottom: -8px; }
.at-specimen[data-placement="plain"] { --at-material: none; --at-intrusion: none; }

/* Six separators: each is a single compact copy unit, with an accessible name. */
.at-specimen.at-divider { width: min(440px,100%); height: 60px; margin: 1.5rem auto; background: transparent; color: var(--at-red); }
.at-specimen.at-divider > svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.at-specimen .at-divider-material { position: absolute; height: 12px; left: 4%; right: 4%; top: 24px; background-image: var(--at-material); background-size: 45px auto; background-position: center; opacity: .65; }
.at-specimen[data-at-form="crossed-repair"] .at-divider-material { left: 35%; right: 35%; height: 25px; top: 18px; background-size: 60px auto; }
.at-specimen[data-at-form="bound-interval"] .at-divider-material { left: 7%; right: 7%; height: 32px; top: 14px; background-image: none; }
.at-specimen[data-at-form="bound-interval"] .at-divider-material::before,
.at-specimen[data-at-form="bound-interval"] .at-divider-material::after { content: ""; position: absolute; width: 16px; height: 32px; background-image: var(--at-material); background-size: 200% auto; background-position: center; }
.at-specimen[data-at-form="bound-interval"] .at-divider-material::before { left: 0; }
.at-specimen[data-at-form="bound-interval"] .at-divider-material::after { right: 0; }
.at-specimen[data-at-form="loose-chronology"] .at-divider-material,
.at-specimen[data-at-form="parallel-seam"] .at-divider-material { display: none; }
.at-specimen[data-at-form="parallel-seam"] > svg { color: #282d32; }
.at-specimen[data-at-form="filament-horizon"] .at-divider-material { height: 18px; top: 21px; opacity: .45; }
.at-specimen[data-at-form="filament-horizon"] > svg path { stroke-width: .9; }

/* These spans are also usable in ordinary HTML-card prose. Echo content lives
   on an aria-hidden child, because generated text on the spoken span can be read twice. */
.at-specimen.at-word-sample { margin: 1.5rem 0; padding: .75rem 0; background: transparent; }
.at-specimen.at-word-sample p { margin: 0; }
.at-word { --at-red: #d63524; position: relative; }
.at-word--witnessed { text-decoration: underline; text-decoration-color: var(--at-red); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.at-word--witnessed::after { content: ""; position: absolute; right: .3em; bottom: -.13em; width: 1px; height: .3em; background: var(--at-red); transform: rotate(24deg); }
.at-word--whispered { color: #605d56; font-style: italic; }
.at-word--disputed { text-decoration: underline double; text-decoration-color: var(--at-red); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.at-word--disputed::after { content: ""; position: absolute; left: 8%; right: 0; bottom: -.14em; border-bottom: 1px solid currentColor; transform: rotate(-1deg); }
.at-word--redacted { background: #24241f; color: #24241f; cursor: text; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.at-word--redacted:is(:hover,:focus,:focus-visible) { background: #e1dccf; color: #10100e; }
.at-word--redacted::selection { background: #e1dccf; color: #10100e; }
.at-word--redacted:focus-visible,
.at-word--thread-pulled:focus-visible { outline: 2px solid var(--at-red); outline-offset: 4px; }
.at-word--time-shifted { color: #393a37; }
.at-word .at-word-echo { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.at-word .at-word-echo::after { content: attr(data-echo); position: absolute; left: .08em; top: .12em; width: 100%; color: rgba(57,58,55,.19); }
.at-word--thread-pulled { padding-bottom: .12em; }
.at-word--thread-pulled::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid var(--at-red); transform-origin: right center; transform: scaleX(.28); transition: transform 180ms ease; }
.at-word--thread-pulled:is(:hover,:focus)::after { transform: scaleX(1); }

@media (max-width: 600px) {
  .at-specimen { font-size: 19px; }
  .at-specimen.at-sample,
  .at-specimen[data-at-family].at-sample { width: 100%; margin: 2rem 0; padding: 1.7rem 1.1rem; min-height: 0; }
  .at-specimen[data-placement="spine"].at-sample { padding-left: 3.8rem; }
  .at-specimen[data-placement="spine"] > .at-specimen-material { width: 32px; }
  .at-specimen[data-placement="spine"] .at-specimen-material::before { background-position: center 0, center 48px; }
  .at-specimen[data-placement="graft"].at-sample { padding-right: 3rem; }
  .at-specimen[data-placement="graft"] > .at-specimen-material { width: 32px; height: 90px; transform: none; }
  .at-specimen[data-placement="tab"].at-sample { padding-left: 3rem; }
  .at-specimen[data-placement="tab"] > .at-specimen-material { width: 27px; height: 48px; }
  .at-specimen[data-placement="scar"].at-sample,
  .at-specimen[data-placement="suture"].at-sample { padding-bottom: 4rem; }
  .at-specimen .at-folio,
  .at-specimen .at-observation,
  .at-specimen .at-character,
  .at-specimen .at-definition { grid-template-columns: 1fr; gap: 1rem; }
  .at-specimen .at-folio .at-marginal { grid-row: 3; }
  .at-specimen .at-folio > :last-child { grid-row: 2; }
  .at-specimen .at-branches { margin-top: .6rem; }
  .at-specimen .at-register > div { grid-template-columns: 1fr; gap: .3rem; }
  .at-specimen .at-accounts,
  .at-specimen .at-parallel,
  .at-specimen .at-archive-path { grid-template-columns: 1fr; gap: 1rem; }
  .at-specimen .at-accounts > section + section { padding-left: 1rem; }
  .at-specimen .at-accounts p { min-height: 0; }
  .at-specimen .at-parallel > div + div { margin: .5rem 0 0 1rem; }
  .at-specimen .at-archive-path [rel="next"] { text-align: left; }
  .at-specimen .at-answer-branches { margin-left: 0; padding-left: .8rem; }
  .at-specimen .at-incident { gap: 1rem; }
  .at-specimen .at-roster li { grid-template-columns: 1fr; }
  .at-specimen[data-at-family="signal"] blockquote { margin-left: 0; padding-left: 0; }
  .at-specimen[data-at-family="signal"] h2 { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .at-word--thread-pulled::after { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .at-specimen.at-sample { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .at-specimen :is(.at-specimen-material,.at-divider-material) { display: none; }
  .at-specimen.at-divider { color: CanvasText; }
  .at-word--whispered, .at-word--time-shifted { color: CanvasText; }
  .at-word--redacted { color: CanvasText; background: Canvas; text-decoration: underline; }
  .at-word .at-word-echo { display: none; }
}
@media print {
  .at-specimen.at-sample { background: white; color: black; border-block: 1px solid #999; break-inside: avoid; }
  .at-specimen .at-specimen-material { opacity: .25; }
  .at-specimen :is(.at-specimen-material,.at-divider-material)::before,
  .at-specimen :is(.at-specimen-patch,.at-divider-material) { background-image: none; }
  .at-word--redacted { color: black; background: transparent; text-decoration: underline; }
  .at-word--whispered, .at-word--time-shifted { color: black; }
  .at-word .at-word-echo { display: none; }
  .at-word--thread-pulled::after { transform: none; }
}