/* Stylebook v1 · 2026-09-07. Load after /style.css. Only opt-in ui-* classes. */
:root{--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-6:24px;--ui-space-8:32px;--ui-space-12:48px;--ui-space-16:64px;--ui-control:44px;--ui-reading:65ch}
.ui-scope,.ui-scope *,.ui-scope *::before,.ui-scope *::after{box-sizing:border-box}
.ui-scope{font-family:var(--sans);font-size:1rem;line-height:1.7;color:var(--ink);background:var(--paper);overflow-wrap:anywhere}
.ui-scope [hidden]{display:none!important}
.ui-shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}
.ui-stack{display:grid;gap:var(--ui-space-4);min-width:0}
.ui-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3);min-width:0}
.ui-row>*{min-width:0;max-width:100%}
.ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--ui-space-6)}
.ui-grid>*{min-width:0}
.ui-section{padding-block:clamp(48px,7vw,88px);scroll-margin-top:24px;border-bottom:1px solid var(--line)}
.ui-section h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.32;margin-bottom:24px}
.ui-title{font-family:var(--serif);font-size:clamp(2rem,5.4vw,4.1rem);font-weight:500;line-height:1.28;max-width:16em;text-wrap:balance}
.ui-card h3,.ui-dialog h2{font-family:var(--serif);font-size:1.35rem;line-height:1.45}
.ui-latin{font-family:var(--latin);font-size:2rem;line-height:1.3}
.ui-muted{color:var(--muted)}
.ui-reading{max-width:var(--ui-reading)}
.ui-card{display:flex;flex-direction:column;gap:16px;padding:24px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.ui-card__actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px}
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-control);min-width:var(--ui-control);max-width:100%;padding:10px 20px;border:1px solid var(--ink);border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);font:inherit;font-weight:500;line-height:1.5;text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:background .15s,color .15s}
.ui-button:hover{background:var(--ink-soft)}
.ui-button--secondary{background:var(--card);color:var(--ink)}
.ui-button--secondary:hover{background:var(--paper-deep)}
.ui-button--accent{background:var(--accent);color:var(--on-accent)}
.ui-button--accent:hover{background:var(--accent-strong)}
.ui-button:active{background:var(--paper-deep);color:var(--ink)}
.ui-button:disabled{opacity:.55;cursor:not-allowed;background:var(--paper-deep);color:var(--ink)}
.ui-button[aria-busy=true]{cursor:progress}
.ui-scope :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ui-link{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.ui-field{display:grid;gap:8px;min-width:0}
.ui-field input:not([type=checkbox]):not([type=radio]),.ui-field select,.ui-field textarea{width:100%;min-width:0;min-height:var(--ui-control);padding:10px 12px;border:1px solid var(--muted);border-radius:var(--radius-sm);font:inherit;color:var(--ink);background:var(--card)}
.ui-field textarea{min-height:128px;resize:vertical}
.ui-field [aria-invalid=true]{border:2px solid var(--ink)}
.ui-field :disabled{background:var(--paper-deep);color:var(--muted);cursor:not-allowed}
.ui-check{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.ui-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--ink)}
.ui-fieldset{border:1px solid var(--line);padding:16px;min-width:0}
.ui-notice{padding:16px 20px;border:1px solid var(--muted);border-inline-start:4px solid var(--ink);border-radius:var(--radius-sm);background:var(--paper-alt)}
.ui-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border:1px solid var(--muted);border-radius:var(--radius-sm);font-size:1rem;line-height:1.5;background:var(--paper-alt);color:var(--ink)}
.ui-dark{padding:24px;background:var(--ink-surface);color:var(--on-ink);border-radius:var(--radius)}
.ui-dark .ui-muted{color:var(--on-ink-soft)}
.ui-dark :focus-visible{outline-color:var(--on-ink)}
.ui-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.ui-table{width:100%;border-collapse:collapse;text-align:start}
.ui-table caption{text-align:start;padding:16px;font-weight:500}
.ui-table th,.ui-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;min-width:8em;overflow-wrap:anywhere}
.ui-table th{background:var(--paper-alt);text-align:start}
.ui-number{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.ui-media{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ui-details{border-bottom:1px solid var(--line);padding-block:12px}
.ui-details summary{cursor:pointer;min-height:44px;padding-block:8px;font-weight:500}
.ui-details p{padding:12px 0}
.ui-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding-block:20px;border-bottom:1px solid var(--line)}
.ui-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.ui-nav [aria-current]{font-weight:700;text-decoration-thickness:3px}
.ui-dialog{margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.ui-dialog::backdrop{background:rgb(27 26 23 / .65)}
.ui-progress{width:100%;height:16px;accent-color:var(--ink)}
.ui-code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper-alt);padding:16px;border:1px solid var(--line);font-size:1rem}
.ui-swatch{min-height:64px;border:1px solid var(--muted);border-radius:var(--radius-sm)}
@media(max-width:560px){.ui-shell{padding-inline:18px}.ui-card{padding:20px}.ui-card__actions .ui-button{width:100%}}
@media(prefers-reduced-motion:reduce){.ui-scope{scroll-behavior:auto}.ui-scope *{animation:none!important;transition:none!important}}