/* Template library */
.gallery { padding: clamp(36px, 6vw, 72px) 0 96px; }
.gallery-head h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 22ch; }
.gallery-head .lede { margin-top: 20px; font-size: 1.15rem; max-width: 64ch; }
.gallery-head .hint { margin-top: 12px; max-width: 70ch; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 24px; margin-top: 44px; }
.tpl-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.tpl-sheet { display: block; position: relative; background: #fff; box-shadow: 0 0 0 1px rgba(26,25,23,.08), 0 14px 30px -18px rgba(26,25,23,.45); transition: transform 180ms var(--ease, ease), box-shadow 180ms var(--ease, ease); }
.tpl-sheet img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tpl-card:hover .tpl-sheet, .tpl-card:focus-visible .tpl-sheet { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(26,25,23,.12), 0 22px 40px -20px rgba(26,25,23,.55); }
.tpl-card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.tpl-meta { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); }
.tpl-meta b { font-size: 1.05rem; }
.tpl-meta small { color: var(--ink-2); font-size: .85rem; font-weight: 400; }
.gallery-how { margin-top: 72px; max-width: 72ch; }
.gallery-how h2 { font-size: 1.5rem; }
.gallery-how ol { margin-top: 14px; padding-left: 22px; }
.gallery-how li + li { margin-top: 8px; }
.gallery-how p { margin-top: 14px; }
/* Detail */
.crumbs { font-family: var(--display); font-size: .95rem; color: var(--ink-2); }
.crumbs a { color: inherit; }
.item-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 16px; }
.item-text h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.item-text .lede { margin-top: 16px; font-size: 1.12rem; }
.item-text .hint { margin-top: 10px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.item-preview { margin: 0; }
.item-preview .tpl-sheet.big { margin: 12px 18px 0 0; }
.item-preview figcaption { margin-top: 12px; font-size: .9rem; color: var(--ink-2); }
.gallery-item h2 { margin-top: 56px; font-size: 1.5rem; }
.gallery-item h2 + p { margin-top: 12px; max-width: 70ch; }
table.inputs { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .95rem; }
table.inputs th, table.inputs td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.inputs th { font-family: var(--display); font-weight: 600; font-size: .9rem; }
table.inputs td:first-child { width: 18ch; }
table.inputs details summary { cursor: pointer; color: var(--ink-2); font-family: var(--display); font-size: .9rem; }
table.inputs pre { margin-top: 8px; }
.sample { color: var(--ink-2); }
pre { background: var(--sheet); border: 1px solid var(--rule); padding: 14px 16px; overflow: auto; font-size: .86rem; line-height: 1.5; margin-top: 14px; }
pre code { font-family: var(--mono); }
details.source { margin-top: 14px; }
details.source summary { cursor: pointer; font-family: var(--display); }
#copy-status.err { color: var(--red); }
@media (max-width: 820px) { .item-top { grid-template-columns: 1fr; } .item-preview .tpl-sheet.big { margin: 0; } }
/* Landing strip */
#templates .lede { margin-top: 14px; max-width: 64ch; }
.tpl-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 30px 0 26px; }
.tpl-strip .tpl-sheet { aspect-ratio: 210 / 297; }
@media (max-width: 720px) { .tpl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }