/* Public content pages (templates, diagram-type pages, about). Extends /css/landing.css tokens. */
.breadcrumbs { padding: 14px 0 0; font-size: 14px; color: var(--text-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto; padding: 0; list-style: none; width: min(var(--max), calc(100% - 40px)); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--border-strong); }

.page-hero { padding: 36px 0 44px; background: radial-gradient(1200px 500px at 20% -10%, var(--accent-soft), transparent 60%); }
.page-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; max-width: 22ch; }
.page-hero .lead { margin-top: 14px; }
.page-hero .cta-actions { margin-top: 22px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.site-edit-grid { margin-top: 28px; }
.site-dates { margin-top: 18px; }
.h3-size { font-size: clamp(22px, 2.6vw, 28px); }
.site-gap { margin-top: 28px; }

.site-chat { margin-bottom: 14px; }
.site-chat__label { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.site-bubble { margin: 0; max-width: 100%; font-size: 15px; line-height: 1.5; }

.site-figure { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-3); background: var(--surface); box-shadow: var(--shadow-1); }
.site-canvas { display: grid; place-items: center; padding: 8px; border-radius: var(--radius-2); background: var(--bg-2); overflow: auto; }
.site-canvas img { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; }
.site-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--text-3); }

.site-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.site-two-col h3 { margin-top: 22px; }
.site-list { margin: 14px 0 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 8px; }
.site-list li { padding-left: 4px; }
.site-requests li { font-family: var(--font-mono); font-size: 14px; color: var(--text); }
.site-links { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.site-links a { color: var(--accent-strong); font-weight: 600; }
.site-card-grid + p.small a, .site-plan-facts + p a, .site-page p.small a { display: inline-block; padding: 10px 0; color: var(--accent-strong); font-weight: 600; }

.site-anatomy { margin: 16px 0 0; display: grid; gap: 12px; }
.site-anatomy > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); }
.site-anatomy dt { font-weight: 700; }
.site-anatomy dd { margin: 4px 0 0; color: var(--text-2); font-size: 15px; }

.site-plans { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.site-plan-facts { margin: 16px 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text-2); }
.site-plan-facts strong { color: var(--text); }

.site-card-grid, .site-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.site-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-3); background: var(--surface); text-decoration: none; color: inherit; }
.site-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.site-card__preview { display: grid; place-items: center; height: 150px; margin-bottom: 6px; padding: 8px; border-radius: var(--radius-2); background: var(--bg-2); overflow: hidden; }
.site-card__preview img { max-height: 134px; width: auto; }
.site-card__title { font-weight: 700; }
.site-card__blurb { font-size: 14px; color: var(--text-2); }

.site-template-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-3); background: var(--surface); }
.site-template-card .tag { align-self: flex-start; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 600; }
.site-template-card h3 { font-size: 18px; }
.site-template-card h3 a { text-decoration: none; }
.site-template-card h3 a:hover { text-decoration: underline; }
.site-template-card p { font-size: 14px; color: var(--text-2); flex: 1; }
.site-template-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.site-card__preview--tall { height: 210px; }
.site-card__preview--tall img { max-height: 194px; }

.site-prose p + p { margin-top: 14px; }
.site-prose p { max-width: 70ch; color: var(--text-2); font-size: 17px; }
.site-prose a { color: var(--accent-strong); font-weight: 600; }

.btn-ghost-dark { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.1); }
.footer-brand { color: var(--text); }
.footer-mail { color: var(--text-2); }

@media (max-width: 960px) {
  .page-hero__grid, .site-two-col { grid-template-columns: 1fr; gap: 28px; }
  .site-card-grid, .site-template-grid { grid-template-columns: 1fr; }
  .site-canvas img { max-height: 440px; }
}
.types a.type { text-decoration: none; }
.types a.type:hover { border-color: var(--border-strong); background: var(--bg-2); }
.example h3 a { text-decoration: none; }
.example h3 a:hover { text-decoration: underline; }
.example p a { color: var(--accent); font-weight: 600; text-decoration: none; }
.example p a:hover { text-decoration: underline; }