/* Hallmark · five independent examples; shared accessibility/reset only, no shared page structure. */
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --space-18:72px; --space-20:80px; }
* { box-sizing: border-box; }
html,body { overflow-x: clip; }
body { margin:0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--body); }
h1,h2,h3 { margin:0; font-family: var(--display); font-weight: var(--weight,600); font-style: normal; line-height: 1.08; letter-spacing: -.025em; min-width: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.5rem,5.5vw,5rem); }
h2 { font-size: clamp(1.7rem,3vw,2.6rem); }
h3 { font-size: 1.25rem; }
p { max-width: 65ch; }
a { color: inherit; text-underline-offset: .2em; }
img { display: block; max-width: 100%; height: auto; }
button,input,select { font: inherit; }
button,a.button { cursor: pointer; min-height: 44px; white-space: nowrap; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:active { transform: translateY(1px); }
a:active,summary:active { text-decoration-thickness: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; z-index: 10; top: -100%; padding:var(--space-3); background: var(--paper); color: var(--ink); }
.skip:focus { top: 4px; }
.preview-bar { display: flex; align-items: center; flex-wrap: wrap; gap:var(--space-2) var(--space-6); padding:var(--space-1) var(--space-6); background: var(--ink); color: var(--paper); font: 400 .875rem/1.4 var(--body); }
.preview-bar span { margin-right:auto; }
.preview-bar a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.preview-bar a:focus-visible { outline-color: currentColor; }
.preview-footer { padding:var(--space-8) max(var(--space-6),calc((100% - 1160px)/2)); border-top: 1px solid var(--rule); display: flex; gap:var(--space-6); align-items: center; justify-content: space-between; font-size: .875rem; color: var(--muted); }
.preview-footer p { margin:0; }
.preview-footer a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.photo-credits { margin-top:var(--space-4); max-width:72ch; }
.photo-credits summary { cursor:pointer; min-height:44px; align-content:center; text-decoration:underline; text-underline-offset:4px; }
.photo-credits li { overflow-wrap:anywhere; }
.photo-credits a { white-space:normal; }
@media(hover:hover) { a:hover { text-decoration-thickness: 2px; } button:hover:not(:disabled) { filter: brightness(.94); } }
@media(max-width:48rem) { .preview-bar { padding-inline:var(--space-4); gap:var(--space-1) var(--space-4); } .preview-bar span { width:100%; } .preview-footer { flex-direction:column; align-items:start; padding:var(--space-6) var(--space-4); } }
@media(prefers-reduced-motion:reduce) { button:active { transform:none; } }