/* Demo chrome for component preview pages (not part of the design system). */
.wrap { max-width: var(--content-width); margin-inline: auto; padding: var(--space-xl) var(--gutter); }
.doc-head { margin-bottom: var(--space-xl); }
.doc-head .script { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem); display: block; color: var(--secondary-dark); }
.doc-head h1 { margin-block: 0.05em 0.2em; }
.doc-head p { color: var(--text-muted); font-size: var(--text-l); }

section { margin-bottom: var(--space-xl); }
.sec-label { display: flex; align-items: baseline; gap: var(--space-s); margin-bottom: var(--space-l); padding-bottom: var(--space-s); border-bottom: var(--border); }
.sec-label h2 { font-size: var(--h4); }
.sec-label span { font-size: var(--text-s); color: var(--text-muted); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* Coastal gradient placeholders standing in for photography */
.ph { background: linear-gradient(135deg, var(--secondary-light), var(--primary-light) 55%, var(--tertiary-light)); }
.ph--2 { background: linear-gradient(135deg, var(--blossom-light), var(--accent-light) 60%, var(--tertiary-light)); }
.ph--3 { background: linear-gradient(135deg, var(--primary-light), var(--secondary-semi-light)); }