/* specimen: the artifact itself (a page, a card, a sheet) large on a colored field, with the words in
   one narrow column beside it. The page color is the field; the bar has no fill so the name sits on it.
   For printables, templates and goods. Link after identity.css. */
html[data-layout="specimen"] .site-header { background: transparent; border-bottom: 0; }
html[data-layout="specimen"] .hero { padding-block: var(--s4) var(--s7); }
html[data-layout="specimen"] .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
html[data-layout="specimen"] .specimen-sheet {
  order: -1; width: 100%; max-width: 38rem; justify-self: center; padding: var(--s4); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); transform: rotate(-1.2deg);
}
html[data-layout="specimen"] .specimen-copy { max-width: 26rem; }
html[data-layout="specimen"] .hero-title { font-size: var(--step-3); }
@media (min-width: 860px) {
  html[data-layout="specimen"] .hero .container { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  html[data-layout="specimen"] .specimen-sheet { order: 0; justify-self: stretch; max-width: none; padding: var(--s5); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-layout="specimen"] .specimen-sheet { transition: transform 0.2s; }
  html[data-layout="specimen"] .specimen-sheet:hover { transform: rotate(0deg); }
}