/* DashHouse custom homepage (added to Alto) */
.dh-home { padding-bottom: 64px; }

.dh-intro { padding-top: 72px; padding-bottom: 56px; }
.dh-intro-inner { max-width: 720px; text-align: center; }
.dh-intro-title { margin: 0 0 16px; font-family: var(--gh-font-heading, var(--font-serif)); font-size: 4.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.dh-intro-text { margin: 0 auto 28px; max-width: 600px; font-size: 2rem; line-height: 1.5; color: var(--color-dark-gray); }

.dh-signup { margin: 0 auto; max-width: 520px; }
.dh-signup-row { display: flex; gap: 8px; }
.dh-signup-input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; font-size: 1.6rem; border: 1px solid var(--color-mid-gray); border-radius: 100px; background: var(--color-white); color: var(--color-darker-gray); }
.dh-signup-input:focus { outline: none; border-color: var(--ghost-accent-color); }
.dh-signup-btn { height: 48px; padding: 0 24px; white-space: nowrap; }
.dh-signup-loading, .dh-signup-success, .dh-signup-error { display: none; }
.dh-signup.loading .dh-signup-label { display: none; }
.dh-signup.loading .dh-signup-loading { display: inline; }
.dh-signup.success .dh-signup-row { display: none; }
.dh-signup.success .dh-signup-success { display: block; margin: 0; font-size: 1.7rem; font-weight: 600; }
.dh-signup.error .dh-signup-error { display: block; margin: 10px 0 0; font-size: 1.5rem; color: #c0392b; }

.dh-section { padding-top: 56px; }
.dh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--color-light-gray); }
.dh-section-title { margin: 0; font-family: var(--gh-font-heading, var(--font-serif)); font-size: 2.6rem; font-weight: 800; letter-spacing: -.01em; }
.dh-home > .gh-outer > .gh-inner > .dh-section-title { margin-top: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--color-light-gray); }
.dh-section-link { flex-shrink: 0; font-size: 1.5rem; font-weight: 600; color: var(--ghost-accent-color); }

.dh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dh-card { display: flex; flex-direction: column; }
.dh-card-image { display: block; margin-bottom: 16px; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 10; background: var(--color-lighter-gray); }
.dh-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dh-card-image:hover img { transform: scale(1.03); }
.dh-card-tag { margin-bottom: 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ghost-accent-color); }
.dh-card-title { margin: 0 0 8px; font-family: var(--gh-font-heading, var(--font-serif)); font-size: 2.1rem; font-weight: 800; line-height: 1.25; }
.dh-card-title a { color: inherit; }
.dh-card-title a:hover { opacity: .8; }
.dh-card-excerpt { margin: 0 0 8px; font-size: 1.55rem; line-height: 1.5; color: var(--color-dark-gray); }
.dh-card-date { font-size: 1.35rem; color: var(--color-secondary-text); }

.dh-outro { padding-top: 72px; }
.dh-outro-inner { max-width: 720px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 24px; background: var(--color-lighter-gray); border-radius: 12px; }
.dh-browse-btn { margin-top: 8px; }

.dh-topics { display: flex; flex-wrap: wrap; gap: 10px; }
.dh-topic { padding: 8px 16px; font-size: 1.5rem; font-weight: 600; color: var(--color-darker-gray); background: var(--color-lighter-gray); border: 1px solid var(--color-light-gray); border-radius: 100px; transition: background .2s ease; }
.dh-topic:hover { background: var(--color-light-gray); }
.dark-mode .dh-topic { color: var(--dark-mode-primary-text-color); background: var(--dark-mode-darker-bg-color); border-color: var(--dark-mode-border-color); }

/* Start here carousel sits right under its heading */
.dh-home .featured-posts { margin-top: 24px; }

.dark-mode .dh-intro-text, .dark-mode .dh-card-excerpt { color: var(--dark-mode-primary-text-color); }
.dark-mode .dh-outro-inner { background: var(--dark-mode-darker-bg-color); }
.dark-mode .dh-section-head, .dark-mode .dh-home > .gh-outer > .gh-inner > .dh-section-title { border-color: var(--dark-mode-border-color); }
.dark-mode .dh-signup-input { background: var(--dark-mode-bg-color); color: var(--dark-mode-primary-text-color); border-color: var(--dark-mode-border-color); }

@media (max-width: 900px) { .dh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .dh-intro { padding-top: 48px; }
    .dh-intro-title { font-size: 3.4rem; }
    .dh-grid { grid-template-columns: 1fr; gap: 28px; }
    .dh-signup-row { flex-direction: column; }
    .dh-section-title { font-size: 2.2rem; }
}