.home-page { overflow: hidden; }
.home-page .eyebrow { color: var(--color-blue-grey); }
.home-hero { position: relative; min-height: 40rem; isolation: isolate; background: var(--color-dusk); }
.home-hero__image, .home-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__image { object-fit: cover; object-position: center; z-index: -2; }
.home-hero__overlay { z-index: -1; background: linear-gradient(90deg, rgba(39,52,58,.76) 0%, rgba(39,52,58,.56) 43%, rgba(39,52,58,.18) 75%, rgba(39,52,58,.12) 100%); }
.home-hero__inner { min-height: 40rem; display: flex; align-items: flex-end; padding-block: 4rem; }
.home-hero__panel { width: clamp(27.5rem, 46vw, 35rem); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.home-hero__panel > * { min-width: 0; margin: 0; }
.home-hero__panel .display-title { font-size: clamp(2.65rem, 5.5vw, 4.75rem); }
.home-hero__deck { max-width: 31rem; font-size: var(--text-lg); line-height: var(--leading-intro); }
.home-hero__action-wrap { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.home-hero__action-wrap span, .home-first-day__cta small, .home-closing__action span { color: var(--color-blue-grey); font-size: var(--text-xs); letter-spacing: .04em; }
.home-journal__layout { display: grid; grid-template-columns: minmax(0, 42.5rem) minmax(10rem, 12.5rem); justify-content: space-between; column-gap: var(--space-16); }
.home-journal__copy, .home-journal__notes { min-width: 0; }
.home-journal__copy { width: 100%; }
.home-journal__notes { display: flex; width: 100%; flex-direction: column; gap: var(--space-3); padding-top: var(--space-12); }
.home-journal__notes > a { display: flex; min-height: 2.75rem; flex-direction: column; gap: var(--space-1); border-top: var(--border-default); padding-top: var(--space-3); text-decoration: none; }
.home-journal__notes strong { font-size: var(--text-sm); }
.home-journal__notes span { color: var(--color-blue-grey); font-size: var(--text-sm); line-height: 1.4; }
.home-map__intro { width: min(100%, 47.5rem); min-width: 0; margin-inline: auto; text-align: center; }
.home-map__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.home-topic { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: var(--border-default); border-bottom: 2px solid var(--color-line); background: var(--color-paper-bright); padding: var(--space-6); }
.home-topic > * { min-width: 0; margin: 0; }
.home-topic--energy { background: var(--color-concrete); }
.home-topic--room { grid-column: 1 / -1; width: min(100%, 52rem); }
.home-topic__icon { color: var(--color-blue-grey); font-size: 2rem; line-height: 1; }
.home-topic__marker { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-peach); }
.home-topic h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); }
.home-topic__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-first-day__layout { display: grid; grid-template-columns: minmax(0, 35rem) minmax(26.25rem, 31.25rem); justify-content: space-between; gap: 4.5rem; }
.home-first-day__intro, .home-first-day__list { min-width: 0; width: 100%; }
.home-first-day__list { display: flex; flex-direction: column; gap: var(--space-4); border-left: var(--border-default); padding-left: var(--space-6); }
.home-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); width: 100%; min-width: 0; gap: var(--space-3); border-top: var(--border-default); padding-top: var(--space-3); cursor: pointer; }
.home-step > * { min-width: 0; }
.home-step > span { color: var(--color-blue-grey); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; }
.home-step h3 { margin-bottom: var(--space-2); font-size: 1.5rem; }
.home-step p { margin-bottom: 0; }
.home-step.is-active > span { color: var(--color-peach-dark); }
.home-first-day__cta { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: 2px solid var(--color-peach); padding-top: var(--space-4); }
.home-first-day__cta > * { min-width: 0; margin: 0; }
.home-observation__intro { width: min(100%, 37.5rem); min-width: 0; }
.home-observation__zones { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-12); }
.home-zone { display: grid; grid-template-columns: minmax(20rem, 40%) minmax(0, 1fr); gap: var(--space-8); min-width: 0; border-top: var(--border-default); padding-top: var(--space-6); }
.home-zone > * { min-width: 0; }
.home-zone__copy { width: min(100%, 32.5rem); }
.home-plan { position: relative; width: 100%; min-height: 11rem; border: 1px solid var(--color-line); background: linear-gradient(135deg, transparent 49.6%, var(--color-line) 49.7%, var(--color-line) 50.3%, transparent 50.4%); color: var(--color-blue-grey); font-size: var(--text-sm); }
.home-plan--place::before { content: ""; position: absolute; inset: 1.25rem 1.5rem 2.75rem; border: 1px solid var(--color-line); border-right: 0; }
.plan-window { position: absolute; top: 1.7rem; right: 1.25rem; color: var(--color-peach-dark); }
.plan-arrow { position: absolute; bottom: 1.2rem; left: 1.5rem; font-size: 1.5rem; }
.home-plan--objects i { position: absolute; width: 45%; height: 28%; top: 34%; left: 25%; border: 1px solid var(--color-line); }
.home-plan--objects b { position: absolute; top: 39%; left: 42%; font-weight: 400; }
.home-plan--objects span { position: absolute; top: 1.2rem; left: 1.25rem; }
.home-plan--states { display: flex; align-items: center; justify-content: space-around; gap: var(--space-2); background: linear-gradient(90deg, transparent 31%, var(--color-line) 31.2%, var(--color-line) 31.8%, transparent 32%, transparent 65%, var(--color-line) 65.2%, var(--color-line) 65.8%, transparent 66%); }
.home-plan--states span { position: relative; padding-top: 2rem; }
.home-plan--states span::before { content: ""; position: absolute; top: .35rem; left: 50%; width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-peach); transform: translateX(-50%); }
.home-reading__heading { width: min(100%, 57.5rem); min-width: 0; }
.home-reading__layout { display: grid; grid-template-columns: minmax(30rem, 7fr) minmax(18.75rem, 4fr); gap: var(--space-16); margin-top: var(--space-12); }
.home-reading__layout > * { min-width: 0; }
.home-reading__feature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-reading__feature > * { min-width: 0; margin: 0; }
.home-reading__feature h3 { font-size: clamp(1.65rem, 2.6vw, 2rem); }
.home-reading__secondary { display: flex; flex-direction: column; gap: var(--space-6); }
.home-reading__secondary article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: var(--border-default); padding-top: var(--space-4); }
.home-reading__secondary article > * { min-width: 0; margin: 0; }
.home-sky { display: grid; grid-template-columns: minmax(32.5rem, 60%) minmax(0, 40%); min-height: 35rem; background: var(--color-dusk); color: var(--color-white); }
.home-sky__image-wrap, .home-sky__copy { min-width: 0; width: 100%; }
.home-sky__image-wrap { overflow: hidden; }
.home-sky__image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.home-sky__copy { display: flex; align-items: center; padding: var(--space-16) max(2rem, calc((100vw - 75rem) / 2)); }
.home-sky__copy > div { width: min(100%, 31.25rem); min-width: 0; }
.home-sky__copy .eyebrow { color: var(--color-peach); }
.home-sky__note { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: 2px solid var(--color-peach); margin-top: var(--space-6); padding-top: var(--space-4); }
.home-sky__note > * { min-width: 0; margin: 0; }
.home-rhythm__layout { display: grid; grid-template-columns: minmax(26.875rem, 5fr) minmax(0, 6fr); gap: var(--space-16); }
.home-rhythm__layout > * { min-width: 0; }
.home-rhythm__feature { width: 100%; }
.home-rhythm__feature img { width: 100%; aspect-ratio: 4 / 3; margin-block: var(--space-6); object-fit: cover; border-radius: var(--radius-sm); }
.home-rhythm__notes { display: flex; flex-direction: column; gap: var(--space-6); }
.home-rhythm__notes article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: var(--border-default); padding-top: var(--space-4); }
.home-rhythm__notes article > * { min-width: 0; margin: 0; }
.home-editorial__intro { width: min(100%, 42.5rem); min-width: 0; }
.home-editorial__principles { display: grid; grid-template-columns: repeat(3, minmax(15.625rem, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.home-editorial__principles article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: var(--border-default); padding-top: var(--space-4); }
.home-editorial__principles article > * { min-width: 0; margin: 0; }
.home-closing__inner { display: flex; width: min(100%, 47.5rem); min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); margin-inline: auto; text-align: center; }
.home-closing__inner > * { min-width: 0; margin: 0; }
.home-closing__inner > p:not(.eyebrow) { width: min(100%, 38.75rem); }
.home-closing__inner .eyebrow { color: var(--color-peach); }
.home-closing__action { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-2); }
@media (max-width: 56.25rem) { .home-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-first-day__layout, .home-reading__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } .home-first-day__list { width: min(100%, 42.5rem); } .home-reading__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } .home-rhythm__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } .home-rhythm__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 51.25rem) { .home-hero, .home-hero__inner { min-height: 32.5rem; } .home-hero__inner { padding-block: var(--space-8); } .home-journal__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .home-journal__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; } .home-sky { grid-template-columns: minmax(0, 1fr); min-height: 0; } .home-sky__image-wrap { height: 19rem; } .home-sky__copy { padding: var(--space-12) var(--space-8); } .home-sky__copy > div { width: min(100%, 42.5rem); margin-inline: auto; } .home-editorial__principles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 43.75rem) { .home-hero { min-height: 30rem; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 13rem; } .home-hero__image { height: 58%; bottom: auto; object-position: 65% center; } .home-hero__overlay { height: 58%; bottom: auto; background: linear-gradient(180deg, rgba(39,52,58,.16), rgba(39,52,58,.5)); } .home-hero__inner { min-height: 0; padding-block: 0 var(--space-4); } .home-hero__panel { width: 100%; gap: var(--space-3); background: rgba(251,249,244,.94); padding: var(--space-4); } .home-hero__panel .display-title { font-size: clamp(2.25rem, 11vw, 3.25rem); } .home-hero__deck { max-width: none; font-size: var(--text-base); } .home-hero__action-wrap, .home-hero__action-wrap .action { width: 100%; align-items: stretch; } .home-hero__action-wrap span { text-align: center; } .home-journal__notes, .home-map__grid, .home-reading__secondary, .home-rhythm__notes { grid-template-columns: minmax(0, 1fr); } .home-topic--room { grid-column: auto; width: 100%; } .home-first-day__list { padding-left: var(--space-4); } .home-zone { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .home-plan { min-height: 10rem; } .home-reading__layout, .home-rhythm__layout { margin-top: var(--space-8); } .home-sky__image-wrap { height: 15rem; } .home-sky__copy { padding: var(--space-12) var(--space-4); } .home-closing__action, .home-closing__action .action { width: 100%; } }
@media (max-width: 37.5rem) { .home-closing__inner { width: 100%; } .home-closing__action { width: 100%; } .home-closing__action .action { min-height: 3rem; } }
@media (prefers-reduced-motion: reduce) { .home-page .text-link::after { transform: none !important; } }