/* Shared stage layout for specimen pages: the stage, its title block, the grab cursor and hint, the fallback
   message and the preview section. The base stage, overlay and panel rules stay in /assets/site.css. */
.specimen .stage{height:var(--specimen-stage-h);min-height:var(--specimen-stage-min);background:var(--specimen-bg);color:var(--specimen-ink)}
.specimen .stage a{color:var(--specimen-accent)}
.specimen #overlay .caps{color:var(--specimen-muted)}
.specimen #overlay h2,.specimen #overlay h2 em{color:var(--specimen-ink)}
.specimen #dot{background:var(--specimen-live)}
.specimen #fallback{color:var(--text-soft)}
.specimen #fallback .caps{font:500 10px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--specimen-muted)}
.specimen #fallback p{margin:0 0 12px}

/* Grab interaction: the drawing is draggable, and a hint says so. */
.specimen .stage canvas{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.specimen .stage.grabbing canvas{cursor:grabbing}
.specimen #hint{position:absolute;z-index:5;left:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);margin:0;pointer-events:none;
  font:500 10px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--specimen-muted);transition:opacity .3s ease}
.specimen .stage.grabbing #hint{opacity:0}

/* Preview section below the stage. */
.specimen-notes{padding:56px 0 8px}
.specimen-notes .wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
.specimen-notes figure{margin:0}
.specimen-notes img{display:block;width:100%;height:auto;aspect-ratio:1;border:1px solid var(--rule);border-radius:16px;background:var(--specimen-bg)}
.specimen-notes figcaption{margin-top:10px;font:500 10px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--specimen-muted)}

@media(max-width:720px){
  .specimen-notes{padding-top:40px}
  .specimen-notes .wrap{grid-template-columns:1fr}
  .specimen-notes figure{max-width:320px}
}