/* ============================================================
   Pulse of Tulsa — Main Stylesheet
   Phase 9: Launch-surface polish — homepage, mobile nav, static pages.
   ============================================================ */

/* --- Design Tokens --- */
:root {
    /* Typography */
    --font-heading: Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --line-height-base: 1.65;
    --line-height-tight: 1.2;

    /* Colors */
    --color-bg: #faf8f5;
    --color-text: #2c2c2c;
    --color-text-light: #5a5a5a;
    --color-text-muted: #8a8a8a;
    --color-accent: #b85c38;
    --color-accent-hover: #a04e2f;
    --color-accent-light: #f5e6de;
    --color-border: #e0dcd7;
    --color-border-light: #ebe8e4;
    --color-card-bg: #ffffff;
    --color-tip-bg: #fdf6f0;
    --color-tip-border: #e8cbb8;
    --color-section-bg: #f5f3f0;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;
    --space-3xl: 5rem;

    /* Layout */
    --max-width: 72rem;
    --content-width: 42rem;
    --sidebar-width: 18rem;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--line-height-tight);
    margin-top: 0;
    color: var(--color-text);
}

/* --- Skip Link (Accessibility) --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    z-index: 1000;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: var(--space-sm);
}

/* --- Focus Styles (Accessibility) --- */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* --- Image loading state --- */
img {
    content-visibility: auto;
}

img[loading="lazy"] {
    background: var(--color-section-bg);
}

h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); }
h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

img { max-width: 100%; height: auto; display: block; }

p { margin-top: 0; margin-bottom: var(--space-md); }

/* --- Layout --- */
main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

/* --- Site Header --- */
.site-header {
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-lg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    gap: var(--space-lg);
}

.site-header__logo {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.site-header__logo:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: nowrap;
}

.site-nav a {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    text-decoration: none;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}

.site-nav a.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

.site-search input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color 0.15s ease;
}

.site-search input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Mobile nav toggle — hidden on desktop */
.site-header__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
}

.site-header__toggle-bar {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Site Footer --- */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    margin-top: var(--space-3xl);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    background: var(--color-card-bg);
}

.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}

.site-footer__brand {
    max-width: 20rem;
}

.site-footer__name {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
}

.site-footer__tagline {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.site-footer__nav {
    display: flex;
    gap: var(--space-2xl);
}

.site-footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.site-footer__nav-heading {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin: 0 0 var(--space-xs);
}

.site-footer__nav-group a {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.site-footer__nav-group a:hover {
    color: var(--color-accent);
}

.site-footer__bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: var(--space-lg);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.site-footer__bottom p {
    margin: 0;
}

/* ============================================================
   Content Sections
   ============================================================ */
.content-section {
    margin-bottom: var(--space-2xl);
}

.content-section__title {
    font-size: var(--font-size-xl);
    position: relative;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.content-section__title::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    margin-top: var(--space-sm);
    border-radius: 2px;
}

/* Section divider — gradient accent strip between major page sections */
.section-divider {
    height: 6px;
    border: none;
    margin: var(--space-2xl) 0;
    background:
        repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(184,92,56,0.15) 4px, rgba(184,92,56,0.15) 5px),
        linear-gradient(90deg,
            transparent 0%,
            var(--color-accent-light) 10%,
            var(--color-accent) 50%,
            var(--color-accent-light) 90%,
            transparent 100%);
    border-radius: 3px;
}

.content-section__subtitle {
    color: var(--color-text-light);
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: var(--space-lg);
}

.section-link {
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
}

.section-link a {
    font-weight: 600;
}

/* ============================================================
   Editorial Prose (rich text content from CKEditor)
   ============================================================ */
.editorial-prose {
    max-width: var(--content-width);
    font-size: var(--font-size-lg);
    line-height: 1.75;
    color: var(--color-text);
}

.editorial-prose p {
    margin-bottom: 1.25em;
}

.editorial-prose h2 {
    font-size: var(--font-size-xl);
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.editorial-prose h3 {
    font-size: var(--font-size-lg);
    margin-top: 1.75em;
    margin-bottom: 0.5em;
}

.editorial-prose blockquote {
    border-left: 3px solid var(--color-accent);
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.5em;
    color: var(--color-text-light);
    font-style: italic;
}

.editorial-prose ul,
.editorial-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.editorial-prose li {
    margin-bottom: 0.4em;
}

.editorial-prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.editorial-prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2em 0;
}

/* ============================================================
   Cards
   ============================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.card-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow-card);
}

.card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--color-text);
}

.card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-section-bg);
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .card__image img {
    transform: scale(1.03);
}

.card__body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    margin: 0;
}

.card__tagline,
.card__summary {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}

.card__hint {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-style: italic;
    margin: 0;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: 600;
}

.card__time {
    color: var(--color-text-light);
    font-weight: 400;
}

.card__detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.card__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: auto;
    padding-top: var(--space-sm);
}

.card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: 3px;
    padding: 0.15em 0.5em;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge--recurring {
    background: #e8f0e8;
    color: #3a7a3a;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3em;
}

.breadcrumbs a {
    color: var(--color-text-light);
}

.breadcrumbs__sep {
    color: var(--color-text-muted);
    margin: 0 0.1em;
}

/* ============================================================
   Hero — Homepage
   ============================================================ */
.hero {
    text-align: center;
    padding: var(--space-3xl) 0 var(--space-2xl);
}

.hero__title {
    font-size: 3rem;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.hero__subtitle {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    max-width: 32rem;
    margin: 0 auto var(--space-xl);
}

.hero__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.hero__nav-link {
    display: inline-block;
    padding: 0.65rem 1.75rem;
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background 0.15s ease;
}

.hero__nav-link:hover {
    background: var(--color-accent-hover);
    color: white;
    text-decoration: none;
}

.hero__nav-link--secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
}

.hero__nav-link--secondary:hover {
    background: var(--color-section-bg);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* ============================================================
   Spotlight (homepage editorial feature)
   ============================================================ */
.spotlight {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.spotlight__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
}

.spotlight__content {
    max-width: var(--content-width);
    margin: 0 auto var(--space-lg);
    text-align: left;
}

.spotlight__link {
    font-weight: 600;
    font-size: var(--font-size-lg);
}

/* ============================================================
   Neighborhood Detail
   ============================================================ */
.neighborhood-hero {
    margin-bottom: var(--space-2xl);
}

.neighborhood-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 24rem;
    position: relative;
}

.neighborhood-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.3) 100%),
        radial-gradient(ellipse at 15% 85%, rgba(184,92,56,0.2) 0%, transparent 50%);
    pointer-events: none;
}

.neighborhood-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.neighborhood-hero__title {
    font-size: 2.75rem;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
}

.neighborhood-hero__tagline {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-style: italic;
    margin: 0;
}

.neighborhood-detail__character {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: none;
    background-image: linear-gradient(90deg, transparent 0%, var(--color-accent-light) 20%, var(--color-accent) 50%, var(--color-accent-light) 80%, transparent 100%);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Place type groups within neighborhood */
.place-type-group {
    margin-bottom: var(--space-xl);
}

.place-type-group__title {
    color: var(--color-text-light);
    font-weight: normal;
    margin-bottom: var(--space-md);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-sm);
}

/* Nearby neighborhoods */
.nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.nearby-link {
    display: block;
    padding: var(--space-lg);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nearby-link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}

.nearby-link__name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.nearby-link__tagline {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Guide links */
.guide-link {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.guide-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.guide-link strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
}

.guide-link span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ============================================================
   Place Detail
   ============================================================ */
.place-hero {
    margin-bottom: var(--space-2xl);
}

.place-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 20rem;
}

.place-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-hero__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
}

.place-hero__context {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

/* Two-column layout */
.place-layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.place-layout__main {
    min-width: 0;
}

.place-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Practical details sidebar */
.practical-details {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.practical-details__title {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.detail-list {
    margin: 0;
}

.detail-list dt {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.15em;
}

.detail-list dd {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.detail-list dd:last-child {
    margin-bottom: 0;
}

/* Neighborhood context box in sidebar */
.neighborhood-context {
    background: var(--color-section-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.neighborhood-context__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.neighborhood-context__tagline {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.neighborhood-context__link {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Insider tip */
.insider-tip {
    display: flex;
    gap: var(--space-md);
    background: var(--color-tip-bg);
    border: 1px solid var(--color-tip-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-xl) 0;
    max-width: var(--content-width);
}

.insider-tip__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    padding-top: 0.1em;
}

.insider-tip__label {
    display: block;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.insider-tip__content {
    font-size: var(--font-size-sm);
}

.insider-tip__content p {
    margin-bottom: 0;
}

/* ============================================================
   Empty States
   ============================================================ */
.empty-state {
    color: var(--color-text-light);
    font-style: italic;
    padding: var(--space-xl) 0;
    text-align: center;
    font-size: var(--font-size-base);
}

/* ============================================================
   Homepage — Org Feature Card
   ============================================================ */
.org-feature-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.org-feature-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-section-bg);
}

.org-feature-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-feature-card__body {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
}

.org-feature-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    margin: 0;
}

.org-feature-card__mission {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

.org-feature-card__link {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* ============================================================
   Homepage — Orientation Section
   ============================================================ */
.homepage-orientation {
    background: var(--color-section-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-top: var(--space-xl);
    text-align: center;
}

.homepage-orientation__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-sm);
}

.homepage-orientation__text {
    color: var(--color-text-light);
    max-width: 36rem;
    margin: 0 auto var(--space-lg);
    line-height: 1.6;
}

.homepage-orientation__link {
    font-weight: 600;
    font-size: var(--font-size-lg);
}

/* ============================================================
   Static Pages (About, New to Tulsa)
   ============================================================ */
.static-page {
    max-width: var(--max-width);
}

.static-page__header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
    max-width: var(--content-width);
}

.static-page__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.static-page__lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

.static-page__body {
    margin-bottom: var(--space-2xl);
}

.static-page__cta {
    background: var(--color-section-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    max-width: 24rem;
}

.static-page__cta h3 {
    font-family: var(--font-heading);
    margin-bottom: var(--space-xs);
}

.static-page__cta p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.static-page__cta a {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Orientation links grid (New to Tulsa) */
.orientation-links {
    margin-bottom: var(--space-xl);
}

.orientation-links__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}

.orientation-link {
    display: block;
    padding: var(--space-lg);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.orientation-link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
    color: var(--color-text);
}

.orientation-link__title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.orientation-link__desc {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Newcomer featured guide */
.newcomer-featured-guide {
    margin-bottom: var(--space-2xl);
}

/* ============================================================
   Error Pages
   ============================================================ */
.error-page {
    text-align: center;
    padding: var(--space-3xl) 0;
    max-width: 32rem;
    margin: 0 auto;
}

.error-page__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.error-page__message {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
}

.error-page__actions {
    margin-bottom: var(--space-2xl);
}

.error-page__link--primary {
    display: inline-block;
    padding: 0.65rem 1.75rem;
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background 0.15s ease;
}

.error-page__link--primary:hover {
    background: var(--color-accent-hover);
    color: white;
    text-decoration: none;
}

.error-page__explore {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-light);
}

.error-page__explore-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.error-page__explore-links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.error-page__explore-links a {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* ============================================================
   Search
   ============================================================ */
.search-form {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    max-width: 32rem;
}

.search-form input {
    flex: 1;
    padding: 0.6rem var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    background: var(--color-card-bg);
}

.search-form input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.search-form button {
    padding: 0.6rem var(--space-lg);
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: background 0.15s ease;
}

.search-form button:hover {
    background: var(--color-accent-hover);
}

.search-results__section {
    margin-bottom: var(--space-xl);
}

.search-results__section h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.search-results__section a {
    display: block;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* ============================================================
   Browse Headers
   ============================================================ */
.browse-header {
    margin-bottom: var(--space-xl);
    max-width: var(--content-width);
}

.browse-header__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
}

.browse-header__subtitle {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* ============================================================
   Filter Bar
   ============================================================ */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-lg);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
}

.filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.filter-bar__group label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.filter-bar__group select {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    color: var(--color-text);
    min-width: 10rem;
    cursor: pointer;
}

.filter-bar__group select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.filter-bar__submit {
    padding: 0.45rem var(--space-lg);
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: background 0.15s ease;
}

.filter-bar__submit:hover {
    background: var(--color-accent-hover);
}

.filter-bar__clear {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.result-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

/* ============================================================
   Detail Layout (two-column, shared by happenings/orgs)
   ============================================================ */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.detail-layout__main {
    min-width: 0;
}

.detail-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ============================================================
   Happening Detail
   ============================================================ */
.happening-hero {
    margin-bottom: var(--space-2xl);
}

.happening-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 20rem;
}

.happening-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.happening-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.happening-hero__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
}

.happening-hero__meta {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* ============================================================
   Organization Detail
   ============================================================ */
.org-hero {
    margin-bottom: var(--space-2xl);
}

.org-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 20rem;
}

.org-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.org-hero__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.mission-callout {
    background: var(--color-section-bg);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-2xl);
    max-width: var(--content-width);
}

.mission-callout__content {
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text-light);
    line-height: 1.6;
}

.mission-callout__content p {
    margin: 0;
}

/* Neighborhood context list in sidebar */
.neighborhood-context__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.neighborhood-context__item {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ============================================================
   Guide Detail
   ============================================================ */
.guide-hero {
    margin-bottom: var(--space-2xl);
}

.guide-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 24rem;
}

.guide-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-hero__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
}

.guide-hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-style: italic;
    margin: 0;
}

.guide-body {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-border-light);
}

.guide-neighborhood-box {
    background: var(--color-section-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    max-width: 24rem;
}

.guide-neighborhood-box h3 {
    font-family: var(--font-heading);
    margin-bottom: var(--space-xs);
}

.guide-neighborhood-box p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.guide-neighborhood-box a {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ============================================================
   Collection Detail
   ============================================================ */
.collection-hero {
    margin-bottom: var(--space-2xl);
}

.collection-hero__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    max-height: 20rem;
    position: relative;
}

.collection-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.35) 100%),
        radial-gradient(ellipse at 20% 80%, rgba(93,74,107,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(128,104,152,0.2) 0%, transparent 50%);
    pointer-events: none;
}

.collection-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-hero__title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.collection-intro {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: none;
    background-image: linear-gradient(90deg, transparent 0%, var(--color-accent-light) 20%, var(--color-accent) 50%, var(--color-accent-light) 80%, transparent 100%);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* ============================================================
   Search Results — Phase 8
   ============================================================ */
.search-section {
    margin-bottom: var(--space-2xl);
}

.search-section__title {
    font-size: var(--font-size-xl);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.search-section__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: normal;
}

.empty-state--search {
    text-align: center;
    padding: var(--space-2xl) 0;
}

.empty-state__links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.empty-state__links a {
    font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- Mobile nav breakpoint: toggle hamburger, collapse nav --- */
@media (max-width: 960px) {
    .site-header__toggle {
        display: flex;
    }

    .site-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: var(--space-md) 0 var(--space-sm);
        gap: 0;
        border-top: 1px solid var(--color-border-light);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        display: block;
        padding: 0.7rem 0;
        font-size: var(--font-size-base);
        border-bottom: 1px solid var(--color-border-light);
    }

    .site-nav a:last-of-type {
        border-bottom: none;
    }

    .site-search {
        padding-top: var(--space-sm);
    }

    .site-search input {
        width: 100%;
    }

    .site-header__inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-sm) 0;
    }

    .place-layout {
        grid-template-columns: 1fr;
    }

    .place-layout__sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .practical-details,
    .neighborhood-context {
        flex: 1 1 280px;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-layout__sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .detail-layout__sidebar .practical-details,
    .detail-layout__sidebar .neighborhood-context {
        flex: 1 1 280px;
    }

    .org-feature-card {
        grid-template-columns: 1fr;
    }

    .org-feature-card__image {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.5rem;
        --font-size-xl: 1.25rem;
    }

    main {
        padding: var(--space-lg) var(--space-md);
    }

    .site-footer__inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .site-footer__nav {
        flex-direction: column;
        gap: var(--space-xl);
        text-align: center;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__nav {
        flex-direction: column;
        align-items: center;
    }

    .hero__nav-link {
        width: 100%;
        max-width: 16rem;
        text-align: center;
    }

    .neighborhood-hero__title {
        font-size: 2rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .nearby-grid {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar__group select {
        min-width: auto;
        width: 100%;
    }

    .empty-state__links {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .spotlight {
        padding: var(--space-xl);
    }

    .homepage-orientation {
        padding: var(--space-xl);
    }

    .error-page__explore-links {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .orientation-links__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .breadcrumbs {
        font-size: var(--font-size-xs);
    }

    .hero {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    .static-page__header {
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-xl);
    }
}

/* ============================================================
   Placeholder Images — Layered CSS Gradient Patterns
   When no hero_image is uploaded, cards and heroes show rich,
   layered geometric patterns per content type. Zero images.
   ============================================================ */

/* Base placeholder — shared structure */
.card__placeholder {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.card__placeholder-initial {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.02em;
    z-index: 1;
    user-select: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Neighborhood — topographic contour rings ── */
.neighborhood-card .card__placeholder {
    background:
        repeating-radial-gradient(circle at 60% 55%, transparent 0px, transparent 18px, rgba(255,255,255,0.06) 19px, transparent 20px),
        repeating-radial-gradient(circle at 25% 35%, transparent 0px, transparent 28px, rgba(255,255,255,0.05) 29px, transparent 30px),
        repeating-radial-gradient(circle at 80% 20%, transparent 0px, transparent 22px, rgba(255,255,255,0.04) 23px, transparent 24px),
        radial-gradient(ellipse at 20% 80%, #c4703a 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, #d4956b 0%, transparent 60%),
        linear-gradient(135deg, #b85c38 0%, #d4956b 50%, #e8c4a8 100%);
}

/* ── Place (default) — diagonal woven stripes ── */
.place-card .card__placeholder {
    background:
        repeating-linear-gradient(45deg, transparent 0px, transparent 8px, rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 10px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 8px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 10px),
        radial-gradient(ellipse at 30% 70%, rgba(255,255,255,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #7d6b5d 0%, #a89585 50%, #c4b5a5 100%);
}

/* ── eat-drink — warm chevrons ── */
.place-card .card__placeholder[data-type="eat-drink"] {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 25%, transparent 25%) -20px 0,
        linear-gradient(225deg, rgba(255,255,255,0.06) 25%, transparent 25%) -20px 0,
        linear-gradient(315deg, rgba(255,255,255,0.06) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
        radial-gradient(ellipse at 70% 60%, #c4703a 0%, transparent 50%),
        linear-gradient(135deg, #b85c38 0%, #d4836b 60%, #e8b89c 100%);
    background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px, 100% 100%, 100% 100%;
}

/* ── culture — diamond lattice ── */
.place-card .card__placeholder[data-type="culture"] {
    background:
        linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%),
        radial-gradient(ellipse at 20% 80%, #5a3870 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, #8060a0 0%, transparent 50%),
        linear-gradient(135deg, #6b4c7d 0%, #9474a8 60%, #b89cc8 100%);
    background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%;
}

/* ── outdoors — layered hill waves ── */
.place-card .card__placeholder[data-type="outdoors"] {
    background:
        radial-gradient(ellipse 120% 40% at 15% 90%, rgba(40,80,50,0.4) 0%, transparent 100%),
        radial-gradient(ellipse 100% 35% at 50% 95%, rgba(50,100,60,0.3) 0%, transparent 100%),
        radial-gradient(ellipse 110% 30% at 85% 85%, rgba(60,120,70,0.3) 0%, transparent 100%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 14px, rgba(255,255,255,0.03) 14px, rgba(255,255,255,0.03) 15px),
        linear-gradient(180deg, #3a6b4c 0%, #5a9468 40%, #8cb89c 100%);
}

/* ── shop — grid shelves pattern ── */
.place-card .card__placeholder[data-type="shop"] {
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 24px, rgba(255,255,255,0.06) 24px, rgba(255,255,255,0.06) 25px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 34px, rgba(255,255,255,0.04) 34px, rgba(255,255,255,0.04) 35px),
        radial-gradient(ellipse at 75% 25%, #8a7a48 0%, transparent 50%),
        linear-gradient(135deg, #6b5d3a 0%, #948a5a 60%, #b8ae8c 100%);
}

/* ── gather — overlapping circles (community) ── */
.place-card .card__placeholder[data-type="gather"] {
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 30%, transparent 31%),
        radial-gradient(circle at 55% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 25%, transparent 26%),
        radial-gradient(circle at 70% 35%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 20%, transparent 21%),
        radial-gradient(circle at 45% 65%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 22%, transparent 23%),
        radial-gradient(ellipse at 20% 80%, #4a5a70 0%, transparent 50%),
        linear-gradient(135deg, #5a6b7d 0%, #7a8ea2 60%, #a4b5c4 100%);
}

/* ── worship — radiating light rays ── */
.place-card .card__placeholder[data-type="worship"] {
    background:
        conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,255,255,0.04) 10deg, transparent 20deg, transparent 30deg, rgba(255,255,255,0.03) 40deg, transparent 50deg, transparent 60deg, rgba(255,255,255,0.04) 70deg, transparent 80deg, transparent 90deg, rgba(255,255,255,0.03) 100deg, transparent 110deg, transparent 120deg, rgba(255,255,255,0.04) 130deg, transparent 140deg, transparent 150deg, rgba(255,255,255,0.03) 160deg, transparent 170deg, transparent 180deg),
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,255,255,0.10) 0%, transparent 70%),
        linear-gradient(135deg, #7d6b5d 0%, #a09080 60%, #c4b8ac 100%);
}

/* ── wellness — soft flowing waves ── */
.place-card .card__placeholder[data-type="wellness"] {
    background:
        radial-gradient(ellipse 200% 50% at 0% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 200% 50% at 100% 60%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(ellipse 200% 50% at 0% 80%, rgba(255,255,255,0.04) 0%, transparent 50%),
        linear-gradient(135deg, #4a7d6b 0%, #6aa894 60%, #9cc8b8 100%);
}

/* ── Happening — starburst energy ── */
.happening-card .card__placeholder {
    background:
        conic-gradient(from 0deg at 80% 80%, transparent 0deg, rgba(255,255,255,0.06) 5deg, transparent 10deg, transparent 20deg, rgba(255,255,255,0.04) 25deg, transparent 30deg, transparent 40deg, rgba(255,255,255,0.06) 45deg, transparent 50deg, transparent 350deg, rgba(255,255,255,0.04) 355deg, transparent 360deg),
        radial-gradient(ellipse at 80% 80%, rgba(255,200,100,0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 40%, #c4703a 0%, transparent 60%),
        linear-gradient(135deg, #c4703a 0%, #d4956b 50%, #e8c08c 100%);
}

/* ── Organization — honeycomb lines ── */
.org-card .card__placeholder {
    background:
        radial-gradient(circle at 0% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 12px, transparent 13px),
        radial-gradient(circle at 100% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 12px, transparent 13px),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 12px, transparent 13px),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 12px, transparent 13px),
        repeating-linear-gradient(60deg, transparent 0px, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px),
        repeating-linear-gradient(-60deg, transparent 0px, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px),
        linear-gradient(135deg, #3a7d7d 0%, #5aa0a0 50%, #8cc4c4 100%);
}

/* ── Guide — editorial dot grid ── */
.guide-card .card__placeholder {
    background:
        radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(ellipse at 20% 70%, #6a4828 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, #b88850 0%, transparent 50%),
        linear-gradient(135deg, #7d5c38 0%, #a88460 50%, #c8a880 100%);
    background-size: 12px 12px, 100% 100%, 100% 100%, 100% 100%;
}

/* ── Collection — aurora mesh blobs ── */
.collection-card .card__placeholder {
    background:
        radial-gradient(ellipse at 15% 80%, rgba(120,60,160,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(160,100,200,0.4) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(100,80,140,0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(140,80,180,0.2) 0%, transparent 40%),
        linear-gradient(135deg, #5d4a6b 0%, #806898 50%, #a88cc0 100%);
}

/* ============================================================
   Detail page hero placeholders — larger pattern variants
   ============================================================ */
.neighborhood-hero__placeholder,
.place-hero__placeholder,
.happening-hero__placeholder,
.org-hero__placeholder,
.guide-hero__placeholder,
.collection-hero__placeholder {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.neighborhood-hero__placeholder {
    max-height: 24rem;
    min-height: 12rem;
    background:
        repeating-radial-gradient(circle at 55% 50%, transparent 0px, transparent 30px, rgba(255,255,255,0.05) 31px, transparent 32px),
        repeating-radial-gradient(circle at 20% 30%, transparent 0px, transparent 45px, rgba(255,255,255,0.04) 46px, transparent 47px),
        repeating-radial-gradient(circle at 85% 25%, transparent 0px, transparent 38px, rgba(255,255,255,0.03) 39px, transparent 40px),
        radial-gradient(ellipse at 15% 85%, #c4703a 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, #d4956b 0%, transparent 55%),
        linear-gradient(135deg, #b85c38 0%, #d4956b 40%, #e8c4a8 70%, #f0dbc8 100%);
}

.place-hero__placeholder {
    max-height: 20rem;
    min-height: 10rem;
    background:
        repeating-linear-gradient(45deg, transparent 0px, transparent 12px, rgba(255,255,255,0.04) 12px, rgba(255,255,255,0.04) 14px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 12px, rgba(0,0,0,0.03) 12px, rgba(0,0,0,0.03) 14px),
        radial-gradient(ellipse at 25% 75%, rgba(255,255,255,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #7d6b5d 0%, #a89585 50%, #c4b5a5 100%);
}

.happening-hero__placeholder {
    max-height: 20rem;
    min-height: 10rem;
    background:
        conic-gradient(from 0deg at 85% 85%, transparent 0deg, rgba(255,255,255,0.05) 5deg, transparent 10deg, transparent 20deg, rgba(255,255,255,0.03) 25deg, transparent 30deg, transparent 40deg, rgba(255,255,255,0.05) 45deg, transparent 50deg, transparent 350deg),
        radial-gradient(ellipse at 85% 85%, rgba(255,200,100,0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 15% 35%, #c4703a 0%, transparent 55%),
        linear-gradient(135deg, #c4703a 0%, #d4956b 50%, #e8c08c 100%);
}

.org-hero__placeholder {
    max-height: 20rem;
    min-height: 10rem;
    background:
        repeating-linear-gradient(60deg, transparent 0px, transparent 28px, rgba(255,255,255,0.03) 28px, rgba(255,255,255,0.03) 29px),
        repeating-linear-gradient(-60deg, transparent 0px, transparent 28px, rgba(255,255,255,0.03) 28px, rgba(255,255,255,0.03) 29px),
        radial-gradient(circle at 30% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 18px, transparent 19px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 14px, transparent 15px),
        linear-gradient(135deg, #3a7d7d 0%, #5aa0a0 50%, #8cc4c4 100%);
}

.guide-hero__placeholder {
    max-height: 24rem;
    min-height: 12rem;
    background:
        radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px),
        radial-gradient(ellipse at 15% 75%, #6a4828 0%, transparent 45%),
        radial-gradient(ellipse at 85% 25%, #b88850 0%, transparent 45%),
        linear-gradient(135deg, #7d5c38 0%, #a88460 50%, #c8a880 100%);
    background-size: 16px 16px, 100% 100%, 100% 100%, 100% 100%;
}

.collection-hero__placeholder {
    max-height: 20rem;
    min-height: 10rem;
    background:
        radial-gradient(ellipse at 10% 85%, rgba(120,60,160,0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 15%, rgba(160,100,200,0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(100,80,140,0.3) 0%, transparent 50%),
        linear-gradient(135deg, #5d4a6b 0%, #806898 50%, #a88cc0 100%);
}

.hero-placeholder__initial {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.02em;
    user-select: none;
    text-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Homepage org feature card placeholder */
.org-feature-card__placeholder {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background:
        repeating-linear-gradient(60deg, transparent 0px, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px),
        repeating-linear-gradient(-60deg, transparent 0px, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px),
        radial-gradient(circle at 40% 60%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 14px, transparent 15px),
        linear-gradient(135deg, #3a7d7d 0%, #5aa0a0 50%, #8cc4c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.org-feature-card__placeholder .hero-placeholder__initial {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
}

.hero-image-credit {
    margin: calc(var(--space-sm) * -1) 0 var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.hero-image-credit__label,
.hero-image-credit__license {
    color: var(--color-text-light);
}

.hero-image-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

/* ============================================================
   Suggestion Form
   ============================================================ */
.suggest-form {
    max-width: var(--content-width);
}

.suggest-form__group {
    margin-bottom: var(--space-lg);
}

.suggest-form__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.suggest-form__required {
    color: var(--color-accent);
}

.suggest-form__input,
.suggest-form__select,
.suggest-form__textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-card-bg);
    transition: border-color 0.2s;
}

.suggest-form__input:focus,
.suggest-form__select:focus,
.suggest-form__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-light);
}

.suggest-form__textarea {
    resize: vertical;
    min-height: 6rem;
}

.suggest-form__select {
    appearance: auto;
}

.suggest-form__row {
    display: flex;
    gap: var(--space-md);
}

.suggest-form__group--half {
    flex: 1;
}

.suggest-form__divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: var(--space-xl) 0 var(--space-md);
}

.suggest-form__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.suggest-form__error {
    color: #c0392b;
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

.suggest-form__errors {
    background: #fdf0ef;
    border: 1px solid #e8b8b8;
    border-radius: 4px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    color: #c0392b;
    font-size: var(--font-size-sm);
}

.suggest-form__submit {
    display: inline-block;
    padding: 0.7rem 2rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: var(--space-md);
}

.suggest-form__submit:hover {
    background: var(--color-accent-hover);
}

/* Suggestion CTA banner — used on browse/detail pages */
.suggest-cta {
    background: var(--color-section-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    margin-top: var(--space-2xl);
}

.suggest-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.suggest-cta__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.suggest-cta__link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.suggest-cta__link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .suggest-form__row {
        flex-direction: column;
        gap: 0;
    }
}


/* --- Weather Signup --- */
.weather-signup {
    max-width: var(--content-width);
    margin: var(--space-3xl) auto;
    padding: 0 var(--space-lg);
}

.weather-signup__inner {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
}

.weather-signup__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.weather-signup__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.weather-signup__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.weather-signup__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    max-width: 32rem;
    margin: 0 auto;
    line-height: var(--line-height-base);
}

.weather-form__group {
    margin-bottom: var(--space-md);
}

.weather-form__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.weather-form__required {
    color: var(--color-accent);
}

.weather-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    box-sizing: border-box;
}

.weather-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-light);
}

.weather-form__divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: var(--space-lg) 0;
}

.weather-form__section-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.weather-form__checkbox-group {
    margin-bottom: var(--space-md);
}

.weather-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
}

.weather-form__checkbox-label:hover {
    border-color: var(--color-accent);
}

.weather-form__checkbox-label strong {
    font-size: var(--font-size-sm);
}

.weather-form__checkbox-label small {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.weather-checkbox {
    margin-top: 4px;
    accent-color: var(--color-accent);
}

.weather-form__submit {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-top: var(--space-lg);
    transition: background 0.15s;
}

.weather-form__submit:hover {
    background: var(--color-accent-hover);
}

.weather-form__submit--danger {
    background: #c0392b;
}

.weather-form__submit--danger:hover {
    background: #a93226;
}

.weather-form__note {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-md);
}

.weather-form__error {
    color: #c0392b;
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

.weather-form__errors {
    background: #fdf0ef;
    border: 1px solid #e8c4c0;
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.weather-cta {
    background: var(--color-tip-bg);
    border: 1px solid var(--color-tip-border);
    border-radius: 6px;
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    margin-top: var(--space-2xl);
}

.weather-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.weather-cta__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.weather-cta__link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.weather-cta__link:hover {
    text-decoration: underline;
}