@charset "UTF-8";

.panos-page main.pp-layout { max-width: none; padding-inline: 0; }
.pp-hero { position: relative; min-height: 440px; background: var(--pohaku-black) center 55%/cover no-repeat; color: var(--pulu-white); display: grid; align-items: end; }
.pp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0.1) 0%, rgba(14,14,14,0.75) 100%); }
.pp-hero__inner { position: relative; z-index: 1; max-width: var(--maxw-page); margin: 0 auto; padding: 4rem 1.5rem 2.25rem; width: 100%; }
.pp-hero__eyebrow { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun-gold); margin-bottom: 0.6rem; }
.pp-hero__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; margin-bottom: 0.8rem; max-width: 20ch; text-wrap: balance; }
.pp-hero__sub { max-width: 64ch; font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--pulu-white) 92%, transparent); }
.pp-hero__note { max-width: 64ch; margin-top: 0.75rem; font-size: 0.85rem; color: color-mix(in srgb, var(--pulu-white) 70%, transparent); }

.pp-map-section { background: var(--ocean-deep); padding: 1.25rem 1.5rem 1.5rem; color: var(--pulu-white); }
.pp-map-section__inner { max-width: var(--maxw-page); margin: 0 auto; }
.pp-map { height: 380px; border-radius: var(--radius-md); overflow: hidden; }
.pp-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.pp-jump a { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--pulu-white); padding: 0.35rem 0.65rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; }
.pp-jump a:hover { border-color: var(--sun-gold); color: var(--sun-gold); }

.pp-chapter { padding: 3.5rem 1.5rem; scroll-margin-top: 1rem; }
.pp-chapter:nth-of-type(even) { background: var(--sand); }
.pp-chapter__inner { max-width: var(--maxw-page); margin: 0 auto; }
.pp-chapter .section-eyebrow--gold { color: var(--reef-teal); }
.pp-chapter .section-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 640px) { .pp-map { height: 280px; } .pp-chapter { padding: 2.75rem 1.25rem; } }

.pp-hero__eyebrow, .pp-hero__title, .pp-hero__sub, .pp-hero__note { text-shadow: 0 1px 10px rgba(14,14,14,0.55); }