/* Park page: the practical block as a briefing. A rail of the topics on the
   left (ordinal, heading, the fact line under it), the open topic on the
   right: text at reading width beside a portrait photograph. Without the
   script the panes stand one under the other; with it (.is-ready) they
   share one cell and only the active one is visible. Tokens from
   park-prose.css (--pk-*). */

.pk-practical.pk-section { padding: clamp(44px, 4.8vw, 64px) 0; }
.pk-br__header { margin-bottom: 28px; }
.pk-br__header .pk-h2 { max-width: 22ch; }

/* ── The two lanes ─────────────────────────────────────────────────── */
.pk-br {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 0 clamp(36px, 5vw, 72px);
    align-items: start;
}

/* ── The rail ──────────────────────────────────────────────────────── */
.pk-br__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pk-line, #e2ddd4);
}
.pk-br__item { margin: 0; }
.pk-br__tab {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: baseline;
    padding: 14px 12px 14px 14px;
    border-bottom: 1px solid var(--pk-line, #e2ddd4);
    color: var(--pk-body, #33353a);
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
/* The marker: a bar down the left edge, drawn only on the open topic. */
.pk-br__tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--pk-orange, #FF6A00);
    opacity: 0;
    transition: opacity .15s;
}
.pk-br__num {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
    color: var(--pk-orange, #FF6A00);
}
.pk-br__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: inherit;
}
.pk-br__figure {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pk-text-62, rgba(17, 18, 20, .62));
}
.pk-br__tab:hover {
    color: var(--pk-ink, #111214);
    background: var(--pk-milk-2, #f7f3ec);
}
.pk-br__tab.is-active {
    color: var(--pk-ink, #111214);
}
.pk-br__tab.is-active::before { opacity: 1; }
.pk-br__tab:focus-visible {
    outline: 2px solid var(--pk-orange, #FF6A00);
    outline-offset: -2px;
    border-radius: 2px;
}

/* ── The panes ─────────────────────────────────────────────────────── */
.pk-br__panes { display: grid; }
/* Stacked on the page until the script arrives. */
.pk-br__pane + .pk-br__pane { margin-top: 36px; }
/* With the script every pane sits in the same cell: the cell is as tall as
   the tallest topic, so switching never moves the section below. */
.pk-br.is-ready .pk-br__pane { grid-area: 1 / 1; margin-top: 0; }
.pk-br.is-ready .pk-br__pane:not(.is-active) {
    visibility: hidden;
    pointer-events: none;
}
.pk-br.is-ready .pk-br__pane.is-active { animation: pk-br-in .28s ease both; }
@keyframes pk-br-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.pk-br__pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
    /* A jump from the rail lands under the fixed header, not behind it. */
    scroll-margin-top: 110px;
}
.pk-br--no-photos .pk-br__pane { grid-template-columns: minmax(0, 1fr); }
.pk-br--no-photos .pk-br__text { max-width: 68ch; }

.pk-br__pane-num {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
    color: var(--pk-orange, #FF6A00);
    margin: 0 0 8px;
}
/* Once the rail carries the ordinals, the pane needs no second copy. */
.pk-br.is-ready .pk-br__pane-num { display: none; }
.pk-br__h3 {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--pk-ink, #111214);
    margin: 0 0 14px;
}
.pk-br__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--pk-body, #33353a);
    max-width: 60ch;
}
.pk-br__text p { margin: 0 0 12px; }
.pk-br__text p:last-child { margin-bottom: 0; }
.pk-br__text ul, .pk-br__text ol { margin: 0 0 12px; padding-left: 20px; }
.pk-br__text li { margin: 0 0 4px; }
.pk-br__text a { color: var(--pk-orange-text, #B84A00); }
.pk-br__text strong { color: var(--pk-ink, #111214); }

/* ── The photograph ────────────────────────────────────────────────── */
/* Portrait, so it stands as tall as the text beside it rather than a stripe
   over an empty column; the page's rounded corners and slow zoom. */
.pk-br__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background: var(--pk-milk, #EDE3D5);
}
.pk-br__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.pk-br__photo:hover .pk-br__img { transform: scale(1.04); }

/* ── Narrow ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pk-br {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px 0;
    }
    /* The rail as a strip of chips the thumb can scroll; the fact lines go,
       the pane is a swipe away. */
    .pk-br__nav {
        margin: 0 -24px;
        padding: 0 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pk-br__nav::-webkit-scrollbar { display: none; }
    .pk-br__rail {
        display: flex;
        gap: 8px;
        border-top: 0;
        width: max-content;
        padding-bottom: 2px;
    }
    .pk-br__tab {
        display: inline-flex;
        align-items: baseline;
        gap: 7px;
        padding: 9px 14px;
        border: 1px solid var(--pk-line-strong, #cfc7b8);
        border-radius: 999px;
        white-space: nowrap;
        background: var(--pk-white, #fff);
    }
    .pk-br__tab::before { display: none; }
    .pk-br__figure { display: none; }
    .pk-br__num { padding-top: 0; font-size: 10px; }
    .pk-br__title { font-size: 14px; }
    .pk-br__tab:hover { background: var(--pk-milk-2, #f7f3ec); }
    .pk-br__tab.is-active {
        background: var(--pk-ink, #111214);
        border-color: var(--pk-ink, #111214);
        color: #fff;
    }
    .pk-br__tab.is-active .pk-br__num { color: var(--pk-orange, #FF6A00); }
    .pk-br__tab:focus-visible { outline-offset: 2px; border-radius: 999px; }

    .pk-br__pane {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        scroll-margin-top: 90px;
    }
    .pk-br__photo { aspect-ratio: 3 / 2; border-radius: 6px; }
}
@media (max-width: 600px) {
    .pk-br__header { margin-bottom: 20px; }
    .pk-br__h3 { font-size: 20px; }
    .pk-br__text { font-size: 15px; }
    .pk-br__pane + .pk-br__pane { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-br__tab, .pk-br__tab::before, .pk-br__img { transition: none; }
    .pk-br.is-ready .pk-br__pane.is-active { animation: none; }
}