/* The stamp: a band of paper across the home stage, hairline top and bottom, that the render shows
   through. Used by the work-in-progress pages (and the 404 when it takes this form). The page loads
   style.css for the frame, stage and caption, then this. See docs/design.md, Hierarchy. */

.stamp { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); padding: clamp(14px, 2vw, 22px) var(--pad); border-block: 1px solid var(--rule); background: var(--bg); background: color-mix(in srgb, var(--bg) 86%, transparent); pointer-events: none; }
.stamp .big { flex: none; font-family: var(--body); font-weight: 500; font-size: clamp(2rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.stamp .txt { display: grid; gap: 6px; min-width: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
.stamp h1 { margin: 0; font: inherit; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.1em; }
.stamp .plan { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.stamp .plan small { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-2); }
.stamp .plan span { text-transform: none; letter-spacing: 0.02em; }
/* the nav marks the section, as document.css does for inner pages */
.top nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 560px) {
  .stamp { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 10px; }
  .stamp .big { font-size: 1.8rem; }
  .stamp .txt { gap: 4px; }
  .links { gap: 14px 18px; }
}
@media print { .stamp { background: #fff; } }