/* A quiet specimen book: consistent paper, charcoal, sage; no autoplay. */
[hidden] { display: none !important; }
.type-intro { display:flex; justify-content:space-between; gap:32px; padding:32px 0 28px; border-bottom:1px solid #cfd1c6; margin-bottom:24px; }
.type-intro .eyebrow { color:#677362; margin:0 0 10px; }
.type-intro h2 { font-size:clamp(25px,3vw,38px); letter-spacing:-.06em; margin:0 0 12px; font-weight:700; }
.type-intro p { font-size:12px; line-height:1.9; margin:0; color:#626b63; }
.type-intro-aside { align-self:end; max-width:355px; padding-left:24px; border-left:1px solid #cfd1c6; }
.type-intro-aside > span { display:block; font-size:11px; font-weight:700; margin-bottom:8px; }
.type-intro-aside small { display:block; font-size:10px; line-height:1.6; color:#697266; margin-top:10px; }
.typography-grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px; }
.typography-grid .motion-card { aspect-ratio:auto; border:1px solid #d5d9cd; border-radius:5px; box-shadow:none; }
.typography-grid .motion-card::after { display:none; }
.typography-grid .motion-card:hover,.typography-grid .motion-card:focus-within { transform:translateY(-3px); box-shadow:0 9px 22px #26342b14; border-color:#82917d; }
.typography-grid .preview { height:auto; aspect-ratio:320/220; background:#faf8f2; border-bottom:1px solid #e2e4dc; }
.typography-grid .card-id { color:#72806c; font-size:9px; background:#faf8f2dd; padding:4px 5px; border-radius:2px; }
.typography-grid .card-save { width:26px; height:26px; font-size:15px; border-color:#c0c7b8; background:#fffffff0; }
.typography-grid .card-save.is-saved { background:#d7dfcc; }
.typography-grid .card-info { position:relative; height:82px; padding:13px 14px 11px; background:#fffefa; }
.typography-grid .card-info p { font-size:12px; line-height:1.6; font-weight:700; letter-spacing:0; padding-right:4px; }
.typography-grid .category-dot { display:none; }
.typography-grid .card-info small { display:block; font-size:10px; margin-top:5px; color:#697166; padding-right:50px; line-height:1.5; }
.type-card-kind { position:absolute; right:12px; bottom:11px; font-size:8px; letter-spacing:.03em; color:#778070; border:1px solid #d5dbce; border-radius:3px; padding:2px 4px; }
.type-specimen { margin:0; width:100%; height:100%; overflow:hidden; background:#faf8f2; }
.type-specimen svg { display:block; width:100%; height:100%; }
.type-specimen,.font-sample { font-synthesis:none; }
.typography-grid .card-info { height:106px; }
.typography-grid .card-info .card-font-name { color:#354e31; font-size:10px; padding:0; }
.font-grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.font-grid .motion-card { aspect-ratio:auto; border-radius:5px; }
.font-grid .motion-card::after { display:none; }
.font-grid .preview { height:180px; background:#faf8f2; }
.font-grid .card-info { height:100px; }
.font-grid .card-info small { display:block; color:#687460; font-size:10px; line-height:1.7; margin-top:4px; }
.font-grid .preview-font { background:#faf8f2; }
.font-sample { font-size:28px; line-height:1.7; white-space:normal; text-align:center; word-break:normal; overflow-wrap:anywhere; }
.font-intro { padding:22px 0; }
.font-intro h2 { font-size:24px; margin:0 0 12px; }
.font-intro p,.font-intro label { font-size:12px; line-height:1.8; }
.font-intro input { padding:10px; min-width:330px; max-width:100%; border:1px solid #b9c5b2; border-radius:4px; }
.font-intro small { display:block; font-size:10px; margin-top:8px; color:#66745d; }
.font-details { background:#f4f5ef; padding:14px; border-radius:4px; margin:16px 0; }
.font-details h3 { font-size:12px; margin:0 0 8px; }
.font-details p { font-size:10px; line-height:1.8; margin:7px 0; }
.font-links { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:10px; }
.font-links a { color:#385335; text-underline-offset:3px; }
.font-links button { background:white; border:1px solid #b9c5b2; padding:5px 8px; cursor:pointer; font-size:10px; }
.font-missing { padding:24px; display:grid; gap:12px; text-align:center; font-size:12px; }
.font-missing strong { font-size:24px; }
.font-missing small { font-size:10px; line-height:1.8; }
.font-loading > * { visibility:hidden; }
.font-loading::before { content:attr(data-font-status); position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#617158; background:#faf8f2; font-size:11px; text-align:center; }
.type-inputs select { padding:10px; max-width:100%; border:1px solid #bbc4b3; background:#fffefa; border-radius:4px; font-size:12px; }
.type-inputs small,#personalFontLabel small { display:block; font-size:10px; font-weight:400; line-height:1.7; margin-top:5px; }
#personalFontLabel { display:grid; font-size:11px; gap:8px; margin-top:16px; }
.recipe-steps h3 { font-size:12px; margin-bottom:8px; }
.recipe-steps ol { font-size:11px; line-height:1.9; padding-left:20px; }
.recipe-steps li { margin:6px 0; }
.learning-books { margin:32px 0; border-top:1px solid #ccd3c4; padding:18px 0; font-size:11px; line-height:1.9; color:#626c5d; }
.learning-books summary { cursor:pointer; color:#35482f; font-weight:700; }
.learning-books a { color:#35482f; }
.type-image { display:flex; align-items:center; justify-content:center; background:#fff; }
.type-image img { width:100%; height:100%; object-fit:contain; display:block; }
.type-dialog { width:min(1160px,calc(100vw - 50px)); }
.type-dialog .dialog-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.type-dialog .dialog-preview-wrap { background:#edece4; background-image:none; padding:34px 22px; justify-content:flex-start; align-self:start; position:sticky; top:0; min-height:0; }
.type-dialog .dialog-preview { width:100%; max-width:550px; height:auto; aspect-ratio:320/220; border-radius:3px; box-shadow:0 10px 22px #26342b0f; }
.type-dialog .dialog-content { padding:44px 30px 28px; }
.type-dialog .dialog-content h2 { font-size:25px; line-height:1.5; margin-bottom:13px; letter-spacing:-.03em; }
.type-dialog .dialog-description { font-size:12px; line-height:1.9; }
.type-preview-note { max-width:430px; color:#616c5c; font-size:11px; line-height:1.9; margin:18px auto 0; }
.type-usecase { font-size:11px; color:#53644d; background:#edf0e7; padding:10px 12px; line-height:1.6; border-radius:3px; }
.type-inputs { display:grid; gap:10px; grid-template-columns:1fr; margin:17px 0; }
.type-inputs label { font-size:11px; font-weight:700; display:grid; gap:6px; }
.type-inputs input { width:100%; min-width:0; padding:10px; border:1px solid #bbc4b3; background:#fffefa; color:#283127; border-radius:4px; font-size:13px; outline-offset:3px; }
.type-source { font-size:10px; line-height:1.8; color:#697166; margin-bottom:18px; }
.type-source a { color:#425840; text-underline-offset:3px; }
.type-source small { display:block; font-size:9px; margin-top:3px; }
.type-dialog #dialogPrompt { min-height:225px; font-size:11px; line-height:1.85; background:#fafbf8; border-color:#d3dacd; }
.type-dialog .copy-button { background:#43583d; border-color:#43583d; color:#fff; }
.table-preview .type-specimen { min-width:85px; }
@media(min-width:1450px) { .typography-grid { grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); } }
@media(max-width:900px) { .type-intro { flex-direction:column; gap:15px; } .type-intro-aside { align-self:start; padding-left:0; border:0; max-width:none; } .type-dialog .dialog-grid { grid-template-columns:1fr; } .type-dialog .dialog-preview-wrap { min-height:0; padding:30px 25px; } .type-dialog .dialog-preview { max-width:430px; } }
@media(max-width:560px) { .typography-grid { grid-template-columns:1fr; gap:16px; } .type-intro { padding-top:18px; } .type-dialog { width:calc(100vw - 18px); } .type-dialog .dialog-content { padding:28px 20px; } .type-dialog .dialog-preview-wrap { padding:28px 16px 20px; } }