/* Page-level layout for the static site. Components live in components/components.css. */
body { margin: 0; background: var(--surface-page); }
main { display: block; min-height: 50vh; }
.section { padding: var(--space-8) 0; }
.section--tint { background: var(--surface-tint); }
.section--tight { padding-top: var(--space-6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.section-head h2 { margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); align-items: start; }
.split > aside { position: sticky; top: var(--space-5); }
.home-glance { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.prose-wrap { max-width: var(--container-prose); }
.involve { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.involve > i { font-size: 22px; color: var(--forp-green-700); }
.involve h3 { margin: 0; }
.involve p { margin: 0; font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.facility { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: var(--fw-bold) !important; font-size: var(--fs-body); color: var(--forp-green-900) !important; text-decoration: none !important; transition: background-color var(--dur) var(--ease); }
.facility:hover { background: var(--forp-sage-50); }
.facility i:first-child { width: 22px; text-align: center; color: var(--forp-green-700); }
.facility .fa-arrow-right { margin-left: auto; font-size: 13px; color: var(--forp-green-700); }
.notice { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--forp-sage-50); border: 1px solid var(--forp-sage-300); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font-size: var(--fs-small); line-height: 1.6; margin-bottom: var(--space-5); }
.notice i { color: var(--forp-green-700); padding-top: 4px; }
.migrate { border: 1px dashed var(--forp-sage-400); background: repeating-linear-gradient(135deg, var(--forp-sage-50) 0 10px, #fff 10px 20px); border-radius: var(--radius-sm); padding: var(--space-5); font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: var(--space-4) 0; }
.migrate b { color: var(--forp-green-900); }
.empty { padding: var(--space-6); text-align: center; border: 1px dashed var(--forp-sage-400); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--text-muted); }
.past .forp-event { opacity: .8; }
.img-slot { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: repeating-linear-gradient(135deg, var(--forp-sage-50) 0 10px, #fff 10px 20px); display: flex; align-items: center; justify-content: center; text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-muted); padding: var(--space-5); }
.price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); color: var(--forp-green-900); line-height: 1; }
.quote { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); background: var(--surface-tint); border-radius: var(--radius-sm); font-style: italic; }
.quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-family: var(--font-display); font-size: var(--fs-small); color: var(--text-muted); }
.people { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-5); }
.people li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); margin: 0; }
.people span { display: block; font-size: var(--fs-small); color: var(--text-muted); }
.crumb { font-family: var(--font-display); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.crumb a { font-weight: var(--fw-regular) !important; }
.post-meta { font-family: var(--font-display); font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 var(--space-5); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); max-width: 520px; }
.form-stack textarea.forp-input { height: 140px; padding: 12px 14px; resize: vertical; }
.checks { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-small); }
.checks label { display: flex; gap: var(--space-2); align-items: center; }
.checks input { width: 18px; height: 18px; accent-color: var(--forp-green-900); }
.drawer { position: absolute; left: 0; right: 0; top: var(--header-height); background: var(--surface-brand); padding: var(--space-3) var(--gutter) var(--space-5); display: none; flex-direction: column; z-index: 20; }
.drawer.is-open { display: flex; }
.drawer a { color: #fff !important; text-decoration: none !important; font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: var(--forp-green-900); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
@media (max-width: 900px) { .split, .home-glance { grid-template-columns: 1fr; } .split > aside { position: static; } }