/* Self-hosted, licensed Latin fonts cover English and Spanish. Swap keeps
   content visible while fonts load; no third-party CSS round trip is needed. */
@font-face  {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/dm-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face  {
    font-family: 'Libre Caslon Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/libre-caslon-display-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Shared palette and font tokens preserve the official BAS identity. */
:root {
    --ink:#183e32;
    --forest:#173f33;
    --cream:#f6f4ec;
    --muted:#5e6d61;
    --line:#d7ded0;
    --lime:#deebbc;
    --clay:#ad562e;
    --serif:'Libre Caslon Display',Georgia,serif;
    --sans:'DM Sans',Arial,sans-serif
}
/* Accessible document defaults, visible keyboard focus and responsive spacing. */
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:28px
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65
}
a {
    color:inherit;
    text-underline-offset:5px
}
button,input {
    font:inherit
}
button,a {
    touch-action:manipulation
}
button {
    cursor:pointer
}
img {
    max-width:100%;
    display:block
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2 {
    font-family:var(--serif);
    font-weight:400;
    line-height:1.03;
    letter-spacing:-.035em
}
h1 {
    font-size:clamp(3.2rem,6.2vw,6.8rem)
}
h2 {
    font-size:clamp(2.5rem,4vw,4.4rem)
}
h3 {
    font-size:1.35rem;
    font-weight:500;
    line-height:1.2
}
em {
    font-weight:400
}
p {
    max-width:70ch
}
a:hover {
    color:#a05b28
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid #c5692d;
    outline-offset:5px
}
h1:focus,main:focus {
    outline:none
}
.wrap {
    width:min(1320px,calc(100% - 104px));
    margin-inline:auto
}
.eyebrow {
    display:block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.15em;
    line-height:1.5
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:15px 23px;
    background:var(--forest);
    color:white;
    border:1px solid var(--forest);
    border-radius:3px;
    text-decoration:none;
    font-size:.91rem;
    font-weight:600;
    line-height:1.4
}
.button:hover {
    background:#285643;
    color:white
}
.button.light {
    background:var(--lime);
    color:var(--forest);
    border-color:var(--lime)
}
.button.light:hover {
    background:white
}
.button.outline {
    background:transparent;
    color:var(--forest)
}
.text-link {
    font-size:.9rem;
    font-weight:600
}
.skip {
    position:fixed;
    z-index:50;
    top:-100px;
    left:20px;
    background:white;
    padding:12px
}
.skip:focus {
    top:10px
}
.preview-strip {
    display:flex;
    justify-content:space-between;
    gap:20px;
    background:var(--lime);
    padding:7px 42px;
    font-size:.69rem
}
.preview-strip a {
    text-decoration:none
}
.site-head {
    display:flex;
    align-items:center;
    gap:30px;
    padding:25px 42px;
    background:var(--cream)
}
.wordmark {
    display:flex;
    align-items:center;
    gap:13px;
    text-decoration:none;
    font-family:var(--serif);
    font-size:1.75rem;
    line-height:1
}
.wordmark small {
    display:block;
    font:600 .59rem var(--sans);
    letter-spacing:.19em;
    margin-top:8px
}
.brand-leaf {
    font:500 1.8rem var(--serif);
    width:46px;
    height:50px;
    background:var(--forest);
    color:var(--lime);
    border-radius:24px 1px 24px 1px;
    text-align:center;
    padding-top:3px
}
.brand-leaf span {
    display:block;
    font:600 .5rem var(--sans);
    letter-spacing:.2em
}
.site-head nav {
    margin-left:auto;
    display:flex;
    gap:28px;
    align-items:center;
    font-size:.85rem;
    font-weight:500
}
.site-head nav a {
    text-decoration:none;
    padding:8px 0
}
.site-head nav a[aria-current=page] {
    border-bottom:1px solid var(--forest)
}
.languages {
    display:flex;
    gap:8px;
    font-size:.7rem
}
.languages a {
    text-decoration:none;
    opacity:.6
}
.languages a[aria-current=true] {
    opacity:1;
    font-weight:700
}
.count {
    font:500 .75rem var(--sans);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #b3c2aa;
    border-radius:50%;
    width:23px;
    height:23px;
    vertical-align:middle
}
/* Photography-led home page; above-the-fold images are not lazy loaded. */
.hero {
    position:relative;
    min-height:650px;
    height:calc(100svh - 160px);
    max-height:900px;
    color:white;
    overflow:hidden
}
.hero-image,.hero-shade {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-image {
    object-position:50% 54%
}
.hero-shade {
    background:linear-gradient(90deg,rgba(5,30,21,.73),rgba(8,30,24,.12) 80%),linear-gradient(0deg,rgba(8,24,16,.48),transparent 30%)
}
.hero-copy {
    position:relative;
    padding:85px 7vw 100px;
    max-width:820px
}
.hero-copy .eyebrow {
    margin-bottom:28px;
    color:#e6edcf
}
.hero h1 {
    font-size:clamp(5rem,8.8vw,9.1rem);
    margin-bottom:24px;
    line-height:.9
}
.hero h1 em {
    color:#e4edc9
}
.hero-copy p {
    max-width:430px;
    margin-bottom:29px;
    font-size:1.03rem
}
.hero-caption {
    position:absolute;
    bottom:24px;
    left:42px;
    font-size:.62rem;
    letter-spacing:.15em
}
.hero-caption a {
    display:block;
    font-size:.6rem;
    letter-spacing:0;
    margin-top:2px;
    color:#e0e9d9
}
.vertical-note {
    position:absolute;
    right:24px;
    top:40%;
    writing-mode:vertical-rl;
    letter-spacing:.2em;
    font-size:.66rem
}
.intro {
    padding-block:100px 80px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:24px 80px
}
.intro .eyebrow {
    grid-column:1/-1
}
.intro h2 {
    margin:0
}
.intro p {
    align-self:end;
    color:var(--muted);
    font-size:1.04rem;
    margin:0
}
.section-top {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px
}
.section-top h1,.section-top h2 {
    margin:12px 0 0
}
.directory {
    padding-block:35px 100px
}
.directory-tools {
    border-block:1px solid var(--line);
    padding:20px 0;
    display:flex;
    align-items:end;
    gap:28px;
    justify-content:space-between
}
.filters {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.filters button {
    font-size:.8rem;
    border:1px solid var(--line);
    border-radius:40px;
    background:transparent;
    color:var(--ink);
    padding:9px 15px
}
.filters button[aria-pressed=true] {
    background:var(--forest);
    color:white;
    border-color:var(--forest)
}
.search {
    display:block;
    min-width:230px;
    font-size:.68rem;
    color:var(--muted)
}
.search input {
    display:block;
    width:100%;
    border:0;
    border-bottom:1px solid #829479;
    background:transparent;
    color:var(--ink);
    font-size:.82rem;
    padding:8px 0;
    outline-offset:3px
}
.results {
    font-size:.74rem;
    color:var(--muted);
    margin:17px 0
}
.park-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:38px 26px
}
.park-card {
    border-bottom:1px solid var(--line);
    min-width:0
}
.park-photo {
    display:block;
    position:relative;
    overflow:hidden;
    aspect-ratio:1.35;
    background:#d4dbc9
}
.park-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s
}
.park-photo:hover img {
    transform:scale(1.035)
}
.photo-index {
    position:absolute;
    top:16px;
    left:17px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--cream);
    display:grid;
    place-items:center;
    font-size:.7rem
}
.park-body {
    padding:22px 0 16px
}
.park-body .eyebrow {
    color:var(--muted);
    font-size:.63rem
}
.park-body h3 {
    font-family:var(--serif);
    font-size:2rem;
    letter-spacing:-.02em;
    margin:8px 0 0
}
.park-body h3 a {
    text-decoration:none
}
.park-body small {
    font-size:.74rem;
    color:var(--muted)
}
.park-body p {
    font-size:.9rem;
    margin:15px 0 22px
}
.card-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.card-bottom>a {
    font-size:.85rem;
    text-decoration:none;
    font-weight:600
}
.save {
    background:transparent;
    color:var(--forest);
    border:1px solid var(--line);
    border-radius:25px;
    padding:6px 12px;
    font-size:.73rem
}
.save[aria-pressed=true] {
    background:#e5ecd9
}
.empty {
    background:#e9eedf;
    padding:40px;
    margin-block:25px
}
.empty p {
    max-width:650px
}
.reef-feature {
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--forest);
    color:var(--cream)
}
.reef-feature>img {
    width:100%;
    height:100%;
    min-height:570px;
    object-fit:cover
}
.reef-feature>div {
    padding:80px 6vw
}
.reef-feature h2 {
    margin-top:25px
}
.reef-feature p {
    color:#d3decf;
    font-size:.95rem
}
.photo-credit {
    font-size:.66rem;
    display:block;
    margin-top:22px
}
.care {
    padding-block:95px
}
.care>.eyebrow {
    margin-bottom:20px
}
.three {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:50px
}
.three article {
    min-width:0
}
.three h2 {
    font-size:2.5rem
}
.three h3 {
    font-family:var(--serif);
    font-size:2rem
}
.three b {
    display:block;
    color:var(--clay);
    font-size:.75rem;
    margin:20px 0
}
.three p {
    color:var(--muted);
    font-size:.93rem
}
.three a {
    font-size:.85rem
}
.three .eyebrow {
    margin-bottom:22px
}
.page-heading {
    padding-block:70px 60px
}
.page-heading .eyebrow {
    margin-bottom:23px
}
.page-heading h1 {
    margin-bottom:25px
}
.page-heading p {
    font-size:1.08rem;
    max-width:760px;
    color:var(--muted)
}
/* Park detail layout: readable stories beside a practical visitor summary. */
.detail-hero {
    height:520px;
    position:relative;
    isolation:isolate;
    color:white
}
.detail-hero>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2
}
.detail-hero .hero-shade {
    z-index:-1;
    background:linear-gradient(0deg,rgba(5,30,21,.85),rgba(5,30,21,.1))
}
.detail-hero .wrap {
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:end;
    padding-block:30px 40px
}
.detail-hero .back {
    margin-bottom:auto;
    font-size:.8rem
}
.detail-hero h1 {
    font-size:clamp(3.2rem,6.5vw,6.8rem);
    margin:18px 0 12px
}
.detail-hero p {
    margin:0;
    font-size:1.15rem
}
.detail-hero .photo-credit {
    margin-top:13px
}
.detail-grid {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:85px;
    padding-block:70px 100px
}
.detail-story h2 {
    font-size:2.25rem;
    margin:42px 0 17px
}
.lede {
    font-family:var(--serif);
    font-size:2rem;
    line-height:1.25;
    letter-spacing:-.015em
}
.detail-story>p:not(.lede) {
    color:var(--muted)
}
.history {
    border-left:2px solid #bd703d;
    padding:15px 0 0 25px;
    margin-block:40px
}
.history p {
    font-size:.92rem;
    margin-top:15px
}
.visit-box {
    background:#e7eddd;
    padding:35px;
    height:fit-content;
    position:sticky;
    top:25px
}
.visit-box h2 {
    font-size:3rem;
    margin:20px 0
}
.visit-box dt {
    font-size:.75rem;
    color:var(--muted);
    margin-top:25px
}
.visit-box dd {
    margin:8px 0 20px;
    font-size:.87rem
}
.visit-box dd strong {
    font-size:1.45rem;
    font-weight:500
}
.visit-box .button {
    display:flex;
    width:100%;
    margin:12px 0
}
.visit-box .text-link {
    display:block;
    margin-top:20px
}
.fine,.source-note {
    font-size:.73rem!important;
    color:var(--muted)
}
.source-note {
    padding-top:25px;
    border-top:1px solid var(--line)
}
.marine {
    padding-block:20px 55px
}
.marine>.eyebrow {
    margin-bottom:18px
}
.accordions {
    border-top:1px solid var(--line)
}
details {
    border-bottom:1px solid var(--line);
    padding:19px 0
}
summary {
    cursor:pointer;
    font-weight:600;
    font-size:.92rem
}
details p {
    font-size:.9rem;
    margin:15px 0 0;
    max-width:85ch;
    color:var(--muted)
}
details a {
    font-size:.8rem;
    display:inline-block;
    margin-top:12px
}
/* Browser-local trip planning, published fees and responsive comparison tables. */
.shortlist {
    padding-bottom:40px
}
.saved-list article {
    display:flex;
    align-items:center;
    gap:24px;
    border-bottom:1px solid var(--line);
    padding:18px 0
}
.saved-list img {
    width:110px;
    height:80px;
    object-fit:cover
}
.saved-list h3 {
    margin-bottom:6px
}
.saved-list p {
    font-size:.76rem;
    margin:0;
    color:var(--muted)
}
.saved-list button {
    margin-left:auto
}
.planning {
    padding-block:50px 70px;
    border-block:1px solid var(--line)
}
.fees {
    padding-block:70px 50px
}
.table-scroll {
    overflow-x:auto
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:.85rem
}
caption {
    text-align:left;
    font-size:.75rem;
    color:var(--muted);
    padding-block:10px
}
th,td {
    padding:16px 15px;
    border-bottom:1px solid var(--line)
}
thead {
    background:#e6ecdb
}
tbody th {
    font-weight:500
}
.fees .fine {
    margin-top:20px
}
.support-banner {
    background:var(--forest);
    color:var(--cream);
    padding:50px;
    display:flex;
    align-items:center;
    gap:50px;
    margin-bottom:80px
}
.support-banner h2 {
    margin:20px 0
}
.support-banner p {
    color:#d9e3d2;
    font-size:.94rem;
    max-width:700px;
    margin-bottom:0
}
.support-banner .button {
    flex-shrink:0
}
/* Attribution and source transparency for original and derived imagery. */
.credits {
    padding-bottom:100px
}
.credits h2 {
    font-size:2.5rem
}
.credits ul {
    margin-bottom:50px
}
.credits article {
    padding:24px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:25px
}
.credits article img {
    width:140px;
    height:90px;
    object-fit:cover
}
.credits article p {
    font-size:.8rem;
    margin:6px 0
}
.credits small {
    font-size:.75rem;
    color:var(--muted)
}
.site-foot {
    background:#153b2f;
    color:#edf2e6;
    padding-top:55px
}
/* Persistent contact, visitor and conservation handoffs across all routes. */
.footer-top {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:55px;
    padding-bottom:55px
}
.footer-brand {
    font:2rem var(--serif);
    text-decoration:none
}
.footer-top p {
    font-size:.83rem;
    color:#c0cbb8;
    margin-top:15px
}
.footer-top>div:not(:first-child) a {
    display:block;
    font-size:.78rem;
    margin-bottom:12px;
    text-decoration:none
}
.footer-bottom {
    border-top:1px solid #45614e;
    padding-block:22px;
    display:flex;
    justify-content:space-between;
    gap:25px;
    font-size:.62rem;
    letter-spacing:.06em
}
.footer-bottom a {
    letter-spacing:0
}
.loading {
    padding:70px;
    max-width:1000px
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    background:#ffe1a8;
    padding:15px;
    text-align:center
}
@media(min-width:1000px) {
    .park-card:nth-child(7) {
        grid-column:auto
    }
    .directory:has(h1) {
        padding-top:70px
    }
}
@media(max-width:1050px) {
    .wrap {
        width:calc(100% - 60px)
    }
    .site-head {
        padding:20px 30px;
        gap:20px
    }
    .site-head nav {
        gap:17px;
        font-size:.77rem
    }
    .wordmark {
        font-size:1.5rem
    }
    .directory-tools {
        display:block
    }
    .search {
        max-width:400px;
        margin-top:20px
    }
    .intro {
        gap:30px
    }
    .three {
        gap:27px
    }
    .reef-feature>div {
        padding:55px 35px
    }
    .detail-grid {
        gap:40px;
        grid-template-columns:1.3fr 1fr
    }
    .visit-box {
        padding:25px
    }
    .support-banner {
        display:block
    }
    .support-banner .button {
        margin-top:25px
    }
}
@media(max-width:720px) {
    .wrap {
        width:calc(100% - 36px)
    }
    .preview-strip {
        padding:7px 18px;
        font-size:.6rem
    }
    .preview-strip span {
        max-width:220px
    }
    .preview-strip a {
        white-space:nowrap
    }
    .site-head {
        padding:17px 18px;
        flex-wrap:wrap;
        gap:14px
    }
    .wordmark {
        font-size:1.5rem;
        flex:1
    }
    .site-head nav {
        order:3;
        width:100%;
        justify-content:space-between;
        gap:8px;
        border-top:1px solid var(--line);
        padding-top:10px
    }
    .site-head nav a {
        font-size:.74rem
    }
    .hero {
        min-height:600px;
        height:73svh;
        max-height:760px
    }
    .hero-copy {
        padding:90px 25px 80px
    }
    .hero h1 {
        font-size:5.6rem
    }
    .hero-copy p {
        font-size:.94rem;
        max-width:330px
    }
    .hero-copy .eyebrow {
        font-size:.61rem
    }
    .hero-image {
        object-position:56% 50%
    }
    .hero-caption {
        left:25px;
        font-size:.56rem
    }
    .vertical-note {
        display:none
    }
    .intro {
        display:block;
        padding-block:60px 40px
    }
    .intro h2 {
        margin-block:18px 24px
    }
    .intro p {
        font-size:.94rem
    }
    .section-top {
        display:block;
        margin-bottom:25px
    }
    .section-top .text-link {
        display:inline-block;
        margin-top:20px
    }
    .directory {
        padding-bottom:55px
    }
    .park-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px 18px
    }
    .park-body h3 {
        font-size:1.7rem
    }
    .park-body p {
        font-size:.8rem;
        min-height:42px
    }
    .park-body small {
        font-size:.67rem
    }
    .park-body .eyebrow {
        font-size:.56rem;
        letter-spacing:.1em
    }
    .photo-index {
        top:10px;
        left:10px;
        width:27px;
        height:27px
    }
    .card-bottom {
        gap:8px
    }
    .save {
        font-size:.65rem;
        padding:5px 8px
    }
    .card-bottom>a {
        font-size:.75rem
    }
    .filters button {
        padding:7px 12px;
        font-size:.73rem
    }
    .reef-feature {
        grid-template-columns:1fr
    }
    .reef-feature>img {
        min-height:0;
        height:350px;
        object-position:50% 55%
    }
    .reef-feature>div {
        padding:45px 24px
    }
    .three {
        grid-template-columns:1fr;
        gap:25px
    }
    .three article {
        border-bottom:1px solid var(--line);
        padding-bottom:15px
    }
    .care {
        padding-block:55px
    }
    .care h2 {
        font-size:2.8rem
    }
    .three b {
        margin:10px 0
    }
    .three h3 {
        margin-bottom:10px
    }
    .page-heading {
        padding-block:45px 30px
    }
    .page-heading h1 {
        font-size:3.7rem
    }
    .page-heading p {
        font-size:.97rem
    }
    .detail-hero {
        height:430px
    }
    .detail-hero h1 {
        font-size:3.6rem
    }
    .detail-hero p {
        font-size:1rem
    }
    .detail-hero .eyebrow {
        font-size:.62rem
    }
    .detail-grid {
        display:flex;
        flex-direction:column;
        padding-block:35px 55px;
        gap:30px
    }
    .visit-box {
        order:-1;
        position:static
    }
    .visit-box h2 {
        font-size:2.7rem
    }
    .visit-box dl {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5px 20px
    }
    .visit-box dt {
        margin:0
    }
    .visit-box dd {
        margin:0 0 15px;
        grid-row:2
    }
    .visit-box .fine {
        margin-top:10px
    }
    .lede {
        font-size:1.8rem
    }
    .saved-list article {
        gap:13px
    }
    .saved-list img {
        width:70px;
        height:70px
    }
    .saved-list h3 {
        font-size:1.1rem
    }
    .saved-list p {
        font-size:.65rem
    }
    .saved-list button {
        flex-shrink:0
    }
    .planning {
        padding-block:35px
    }
    .fees {
        padding-block:45px 30px
    }
    .fees .section-top>span {
        font-size:.75rem;
        display:block;
        margin-top:15px
    }
    th,td {
        padding:12px;
        font-size:.75rem
    }
    table {
        min-width:530px
    }
    .support-banner {
        padding:30px;
        margin-bottom:50px
    }
    .credits article {
        gap:15px
    }
    .credits article img {
        width:85px;
        height:80px
    }
    .credits article div {
        min-width:0;
        overflow-wrap:anywhere
    }
    .footer-top {
        grid-template-columns:1fr 1fr;
        gap:25px
    }
    .footer-top>div:first-child {
        grid-column:1/-1
    }
    .footer-bottom {
        display:block
    }
    .footer-bottom a {
        display:block;
        margin-top:12px
    }
    .site-foot {
        padding-top:35px
    }
    .empty {
        padding:25px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .park-photo img {
        transition:none
    }
}
.involvement {
    padding-bottom:70px
}
.involvement>.eyebrow {
    margin-bottom:20px
}
/* BAS's original bird mark retains its aspect ratio and clear space. */
.site-head {
    background:var(--forest);
    color:#f6f4ec;
    padding:16px 42px;
    gap:26px
}
.wordmark {
    flex-shrink:0;
    display:block;
    padding:2px 12px 2px 0
}
.wordmark img {
    width:146px;
    height:auto;
    object-fit:contain
}
.site-head a:hover {
    color:var(--lime)
}
.site-head nav {
    gap:24px
}
.site-head nav a[aria-current=page] {
    border-color:var(--lime);
    color:var(--lime)
}
.site-head .count {
    border-color:#7b9a85
}
.site-head .nav-contact {
    border:1px solid #769783;
    padding:9px 14px;
    border-radius:3px
}
.menu-toggle {
    display:none
}
.footer-brand img {
    width:180px;
    height:auto
}
.footer-top {
    grid-template-columns:1.4fr 1fr 1fr 1.15fr;
    gap:38px
}
.footer-top h2 {
    font:600 .78rem var(--sans);
    letter-spacing:.04em;
    margin-bottom:23px
}
.footer-top>div:first-child>a:last-child {
    font-size:.78rem
}
.footer-top a:hover {
    color:var(--lime)
}
.section-nav {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding-bottom:25px;
    border-bottom:1px solid var(--line)
}
.section-nav a {
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:30px;
    font-size:.8rem;
    text-decoration:none;
    white-space:nowrap
}
.section-nav a[aria-current=page] {
    background:var(--forest);
    color:white;
    border-color:var(--forest)
}
.content-heading {
    padding-bottom:35px
}
.content-heading h1 {
    max-width:1000px
}
/* Organization content: section navigation, historical timelines and related links. */
.content-layout {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:75px;
    padding-block:55px 85px
}
.contents-box {
    position:sticky;
    top:30px;
    align-self:start;
    border-top:2px solid var(--forest);
    padding-top:20px
}
.contents-box .eyebrow {
    color:var(--muted);
    margin-bottom:18px
}
.contents-box a {
    display:flex;
    justify-content:space-between;
    gap:15px;
    border-bottom:1px solid var(--line);
    padding:13px 0;
    text-decoration:none;
    font-size:.84rem;
    line-height:1.5
}
.contents-box a span {
    flex-shrink:0
}
.content-body {
    min-width:0
}
.content-section {
    margin-bottom:55px;
    scroll-margin-top:28px
}
.content-section h2 {
    font-size:clamp(2.3rem,3.5vw,3.8rem);
    margin-bottom:23px
}
.section-intro {
    font-size:1.02rem;
    color:var(--muted);
    margin-bottom:32px
}
.story-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 36px
}
.story-list article {
    padding:24px 0;
    border-top:1px solid var(--line);
    min-width:0
}
.story-list article h3 {
    font-family:var(--serif);
    font-size:1.9rem;
    margin-bottom:16px
}
.story-list p,.history-list p {
    color:var(--muted);
    font-size:.91rem;
    white-space:pre-line
}
.story-list article:only-child {
    grid-column:1/-1
}
.story-list .text-link {
    font-size:.78rem;
    overflow-wrap:anywhere
}
.history-list {
    border-left:1px solid #c0cdb4;
    margin:35px 0 0 7px;
    padding-left:32px
}
.history-list article {
    position:relative;
    padding:0 0 30px
}
.history-list article:before {
    content:'';
    position:absolute;
    left:-39px;
    top:7px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--clay);
    border:2px solid var(--cream)
}
.history-list h3 {
    font-family:var(--serif);
    font-size:2rem;
    margin-bottom:15px
}
.history-list p {
    max-width:80ch
}
.heritage-logo {
    display:flex;
    align-items:center;
    gap:40px;
    border:1px solid var(--line);
    background:#fff;
    padding:30px;
    margin:0 0 45px
}
.heritage-logo img {
    width:210px;
    height:auto
}
.heritage-logo figcaption {
    font-family:var(--serif);
    font-size:2rem;
    line-height:1.2
}
.park-detail p {
    color:var(--muted);
    white-space:pre-line
}
.park-library {
    background:#e7eddd;
    padding:25px;
    margin-top:35px
}
.park-library p {
    font-size:.9rem
}
.park-library a {
    font-size:.85rem
}
.resource-library {
    padding-bottom:80px
}
/* Document library controls and source cards. Large downloads are clearly labelled. */
.library-tools {
    display:flex;
    align-items:end;
    gap:35px;
    background:#e7eddd;
    padding:25px 30px
}
.library-tools .search {
    flex:1;
    max-width:none;
    margin:0
}
.library-tools .search input {
    padding:10px 0;
    font-size:1rem
}
.resource-select {
    font-size:.72rem;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:235px
}
.resource-select select {
    padding:11px 13px;
    background:var(--cream);
    border:1px solid #9dac96;
    color:var(--forest);
    font:inherit;
    font-size:.85rem;
    border-radius:3px;
    max-width:100%
}
.resource-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}
.resource-grid article {
    display:flex;
    flex-direction:column;
    background:#fffdf7;
    border:1px solid var(--line);
    padding:27px;
    min-width:0
}
.resource-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px 15px;
    justify-content:space-between;
    color:var(--muted);
    font-size:.65rem;
    letter-spacing:.04em;
    margin-bottom:22px
}
.resource-grid h2 {
    font-family:var(--serif);
    font-size:1.9rem;
    line-height:1.12;
    margin-bottom:17px;
    letter-spacing:-.02em
}
.resource-grid h2 a {
    text-decoration:none
}
.resource-grid h2 span {
    font:1.1rem var(--sans)
}
.resource-grid p {
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:25px;
    flex:1
}
.resource-actions {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    border-top:1px solid var(--line);
    padding-top:15px
}
.resource-actions .text-link {
    font-size:.78rem
}
.resource-source {
    font-size:.65rem;
    color:var(--muted)
}
.library-note {
    background:var(--forest);
    color:var(--cream);
    padding:40px;
    margin-top:45px
}
.library-note h2 {
    font-size:2.7rem
}
.library-note p {
    font-size:.9rem;
    color:#d9e3d2
}
.library-note a {
    display:inline-block;
    font-size:.83rem;
    margin:5px 30px 0 0
}
.library-note a:hover {
    color:var(--lime)
}
select:focus-visible {
    outline:3px solid #c5692d;
    outline-offset:4px
}
@media(max-width:1150px) {
    .site-head {
        padding-inline:30px;
        gap:20px
    }
    .site-head nav {
        gap:16px;
        font-size:.76rem
    }
    .wordmark img {
        width:128px
    }
    .site-head .nav-contact {
        display:none
    }
    .content-layout {
        grid-template-columns:200px minmax(0,1fr);
        gap:40px
    }
    .resource-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .footer-top {
        gap:25px
    }
}
@media(max-width:850px) {
    .site-head {
        flex-wrap:wrap;
        gap:15px;
        padding:12px 22px
    }
    .wordmark {
        flex:1
    }
    .wordmark img {
        width:118px
    }
    .languages {
        margin-left:5px
    }
    .menu-toggle {
        display:flex;
        align-items:center;
        gap:25px;
        background:transparent;
        border:1px solid #829e87;
        border-radius:3px;
        color:var(--cream);
        font-size:.8rem;
        padding:10px 15px
    }
    .menu-toggle span {
        font-size:1.1rem;
        line-height:1
    }
    .site-head nav {
        display:none;
        order:5;
        width:100%;
        border-top:1px solid #668371;
        margin:0;
        padding:15px 0 0;
        grid-template-columns:1fr 1fr;
        gap:5px 25px
    }
    .site-head nav.is-open {
        display:grid
    }
    .site-head nav a {
        font-size:.9rem;
        padding:9px 0
    }
    .site-head .nav-contact {
        display:block;
        border:0;
        padding:9px 0
    }
    .content-layout {
        grid-template-columns:1fr;
        gap:35px
    }
    .contents-box {
        position:static;
        display:flex;
        flex-wrap:wrap;
        gap:0 24px;
        border-top:0;
        padding:0
    }
    .contents-box .eyebrow {
        width:100%;
        margin-bottom:5px
    }
    .contents-box a {
        font-size:.76rem
    }
    .story-list {
        gap:0 26px
    }
    .footer-top {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .footer-top>div:first-child {
        grid-column:1/-1
    }
    .footer-brand img {
        width:155px
    }
}
@media(max-width:540px) {
    .site-head {
        padding:12px 18px
    }
    .wordmark img {
        width:106px
    }
    .menu-toggle {
        gap:15px;
        padding:8px 11px
    }
    .languages {
        font-size:.68rem;
        gap:6px
    }
    .section-nav {
        flex-wrap:nowrap;
        overflow:auto;
        width:100%;
        padding-inline:18px;
        scrollbar-width:thin;
        gap:6px;
        padding-bottom:18px
    }
    .section-nav a {
        font-size:.75rem
    }
    .content-layout {
        padding-block:30px 50px
    }
    .story-list {
        grid-template-columns:1fr
    }
    .story-list article h3 {
        font-size:1.9rem
    }
    .content-heading h1 {
        font-size:3.4rem
    }
    .content-section {
        margin-bottom:30px
    }
    .content-section h2 {
        font-size:2.7rem
    }
    .heritage-logo {
        display:block;
        padding:25px
    }
    .heritage-logo img {
        width:180px;
        margin-bottom:25px
    }
    .heritage-logo figcaption {
        font-size:1.5rem
    }
    .library-tools {
        display:block;
        padding:23px
    }
    .resource-select {
        margin-top:20px;
        min-width:0
    }
    .resource-grid {
        grid-template-columns:1fr;
        gap:18px
    }
    .resource-grid article {
        padding:25px
    }
    .library-note {
        padding:28px
    }
    .library-note h2 {
        font-size:2.4rem
    }
    .footer-top {
        grid-template-columns:1fr 1fr
    }
    .footer-top>div:last-child {
        grid-column:1/-1
    }
    .footer-top>div:last-child {
        columns:2
    }
    .footer-top>div:last-child h2 {
        column-span:all
    }
    .footer-top>div:last-child a {
        overflow-wrap:anywhere
    }
    .footer-bottom {
        font-size:.6rem
    }
    .preview-strip span {
        max-width:180px
    }
}
.park-badge {
    width:96px;
    height:auto;
    margin:0 0 25px;
    border-radius:50%
}
.park-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px
}
.park-badge-small {
    width:48px;
    height:auto;
    border-radius:50%;
    flex-shrink:0
}
.directory-map {
    font-size:.8rem;
    display:flex;
    flex-wrap:wrap;
    gap:7px 18px;
    align-items:center;
    margin:20px 0
}
.directory-map span {
    color:var(--muted);
    font-size:.65rem
}
.fee-note {
    font-size:.8rem;
    line-height:1.65;
    border-left:2px solid var(--clay);
    padding:6px 0 6px 18px;
    margin-block:23px
}
button:disabled {
    opacity:.55;
    cursor:wait
}
/* Reading paths, original photographs and short stories from BAS documents. */
.library-start {
    margin-bottom:28px
}
.library-start>.eyebrow {
    margin-bottom:15px
}
.library-intents {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px
}
.library-intents button {
    position:relative;
    text-align:left;
    padding:22px 32px 22px 20px;
    border:1px solid var(--line);
    background:#fffdf7;
    color:var(--forest);
    border-radius:3px
}
.library-intents button span {
    display:block;
    font:1.6rem var(--serif);
    line-height:1.1;
    margin-bottom:8px
}
.library-intents button small {
    font-size:.7rem;
    color:var(--muted);
    display:block;
    line-height:1.5
}
.library-intents button b {
    position:absolute;
    right:14px;
    top:22px;
    font-weight:400
}
.library-intents button:hover {
    border-color:#7f987a
}
.library-intents button[aria-pressed=true] {
    background:var(--forest);
    color:var(--cream);
    border-color:var(--forest)
}
.library-intents button[aria-pressed=true] small {
    color:#d2dfc8
}
.library-tools {
    gap:25px
}
.library-tools .search {
    min-width:180px
}
.library-tools .resource-select {
    min-width:205px
}
.library-tools .format-select {
    min-width:185px
}
.library-results {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:8px
}
.library-results>div {
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    font-size:.74rem
}
.plain-button {
    border:0;
    background:none;
    color:var(--forest);
    padding:0;
    font-size:.74rem;
    text-decoration:underline;
    text-underline-offset:4px
}
.library-format-note {
    font-size:.73rem;
    color:var(--muted);
    max-width:none;
    margin-bottom:24px
}
.file-facts {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 18px
}
.file-facts span {
    font-size:.65rem;
    color:#496149;
    background:#eaf0e0;
    border-radius:3px;
    padding:2px 7px
}
.resource-grid h2 {
    margin-bottom:13px
}
.park-jump {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding-block:14px;
    border-block:1px solid var(--line);
    margin-block:28px
}
.park-jump a {
    padding:6px 11px;
    font-size:.75rem;
    background:#e7eddd;
    text-decoration:none;
    border-radius:24px
}
.park-gallery {
    margin-block:45px
}
.detail-story .park-gallery h2 {
    margin-top:13px
}
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 18px
}
.gallery-grid figure {
    margin:0;
    min-width:0
}
.gallery-grid figure:last-child:nth-child(odd) {
    grid-column:1/-1
}
.gallery-grid img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    background:#e3e8d8
}
.gallery-grid figure:last-child:nth-child(odd) img {
    max-height:360px;
    aspect-ratio:1.75
}
.gallery-grid figcaption {
    font-size:.81rem;
    line-height:1.55;
    padding-top:12px
}
.gallery-grid figcaption a {
    font-size:.63rem;
    display:block;
    color:var(--muted);
    margin-top:5px
}
.park-gallery>.fine {
    margin-top:20px
}
.gallery-grid img[src*="crystal-cave"] {
    object-fit:contain;
    background:#153b2f
}
.insight-section {
    padding-block:35px
}
.insight-section>.section-top {
    margin-bottom:18px
}
.insight-section h2 {
    margin-top:13px
}
.insight-intro {
    color:var(--muted);
    font-size:.95rem
}
.insight-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-top:30px
}
.insight-grid article {
    background:#e9eedf;
    border-top:2px solid #9c6a45;
    padding:30px;
    display:flex;
    flex-direction:column
}
.insight-grid h3 {
    font:2rem var(--serif);
    line-height:1.13;
    margin-bottom:20px
}
.insight-grid p {
    font-size:.91rem;
    color:var(--muted);
    flex:1
}
.insight-grid a {
    font-size:.67rem;
    line-height:1.6;
    text-decoration:none;
    padding-top:15px;
    border-top:1px solid #c7d3bc
}
.insight-grid a span {
    display:block;
    font-weight:600
}
.home-insights {
    padding-top:55px
}
.stories-page {
    padding-bottom:70px
}
.stories-page .insight-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.detail-story .insight-grid {
    grid-template-columns:1fr
}
.detail-story .insight-grid h3 {
    font-size:1.8rem
}
.detail-story .insight-section h2 {
    margin:13px 0 0
}
.detail-story .insight-section .section-top {
    display:block
}
.detail-story .insight-section .text-link {
    display:inline-block;
    margin-top:20px
}
.detail-story .insight-grid {
    gap:18px;
    margin-top:23px
}
@media(max-width:1050px) {
    .library-tools {
        flex-wrap:wrap;
        gap:20px
    }
    .library-tools .search {
        min-width:100%
    }
    .library-tools .resource-select {
        flex:1
    }
    .library-intents {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .insight-grid {
        gap:18px
    }
    .insight-grid article {
        padding:24px
    }
    .insight-grid h3 {
        font-size:1.75rem
    }
}
@media(max-width:720px) {
    .insight-grid {
        grid-template-columns:1fr
    }
    .stories-page .insight-grid {
        grid-template-columns:1fr
    }
    .home-insights {
        padding-top:30px
    }
    .insight-section>.section-top .text-link {
        margin-top:18px
    }
    .insight-section {
        padding-block:25px
    }
    .park-gallery {
        margin-block:35px
    }
    .gallery-grid {
        gap:22px 14px
    }
    .gallery-grid img {
        aspect-ratio:1.15
    }
    .gallery-grid figcaption {
        font-size:.77rem
    }
    .gallery-grid figcaption a {
        font-size:.61rem
    }
    .library-results {
        align-items:start;
        flex-wrap:wrap;
        gap:0
    }
    .library-results>div {
        margin:0 0 15px
    }
    .library-intents button {
        padding:18px 29px 18px 16px
    }
    .library-intents button span {
        font-size:1.45rem
    }
    .library-intents button small {
        font-size:.65rem
    }
    .library-tools .resource-select {
        min-width:0
    }
    .library-tools {
        display:flex
    }
    .library-tools .search {
        min-width:100%;
        flex-basis:100%
    }
    .library-tools select {
        width:100%
    }
    .library-tools .format-select {
        min-width:0
    }
    .library-tools .resource-select {
        margin-top:0
    }
    .stories-page {
        padding-bottom:45px
    }
    .insight-grid article {
        padding:25px
    }
    .insight-grid h3 {
        font-size:2rem
    }
}
@media(max-width:400px) {
    .library-intents {
        gap:10px
    }
    .library-intents button span {
        font-size:1.35rem
    }
    .library-tools {
        padding:20px;
        gap:15px
    }
    .gallery-grid {
        grid-template-columns:1fr
    }
    .gallery-grid img {
        aspect-ratio:1.5
    }
    .gallery-grid figure:last-child:nth-child(odd) img {
        aspect-ratio:1.5
    }
    .library-tools .resource-select {
        min-width:100%
    }
}
