/* Park page hero: full-bleed photo, breadcrumbs, proof pills, H1, lead.
   The one dark ground on the page, because it is a photograph. */

.pk-hero {
    position: relative;
    min-height: 72svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #111214;
}
.pk-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
/* Two scrims: one to the right so the first words read, one to the foot so
   the copy stands on solid ground. */
.pk-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(17,18,20,.72) 0%, rgba(17,18,20,.35) 45%, rgba(17,18,20,.08) 100%),
        linear-gradient(to bottom, rgba(17,18,20,.12) 0%, rgba(17,18,20,.40) 55%, rgba(17,18,20,.88) 100%);
}
.pk-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 140px 24px 10vh;
}

/* Breadcrumbs over the photo: milk at falling alpha, 13px. */
.pk-hero__crumbs {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(237, 227, 213, .55);
    margin-bottom: 18px;
}
.pk-hero__crumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.pk-hero__crumb + .pk-hero__crumb::before {
    content: "/";
    margin: 0 8px;
    opacity: .5;
}
.pk-hero__crumb-link {
    color: rgba(237, 227, 213, .72);
    text-decoration: none;
    transition: color .18s;
}
.pk-hero__crumb-link:hover { color: #EDE3D5; }
.pk-hero__crumb-link:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }
.pk-hero__crumb-current { color: rgba(237, 227, 213, .92); }

.pk-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.pk-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(237, 227, 213, .3);
    color: rgba(237, 227, 213, .85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
}
.pk-hero__pill--link {
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}
.pk-hero__pill--link:hover {
    border-color: #FF6A00;
    background: rgba(255, 106, 0, .14);
    color: #EDE3D5;
}
.pk-hero__pill--link:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }

.pk-hero__title {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #EDE3D5;
    margin: 0 0 20px;
    max-width: 900px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.pk-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(237, 227, 213, .85);
    max-width: 62ch;
    margin: 0;
}

@media (max-width: 600px) {
    .pk-hero { min-height: 64svh; }
    .pk-hero__inner { padding: 120px 20px 8vh; }
    .pk-hero__crumbs { font-size: 12px; margin-bottom: 14px; }
    .pk-hero__lead { font-size: 15px; }
}