/*
 * Nidderdale Angling Club: field-guide design system (prototype, "v2")
 *
 * Applies only to pages whose view sets $designV2 = true, which adds the
 * class "nac-v2" to <body>. Every other page keeps the original look until the
 * direction is approved.
 *
 * Contents
 *   1. Fonts and tokens
 *   2. Base type
 *   3. Header and footer
 *   4. Components: eyebrow, buttons, chips, photo frames, panels
 *   5. Home
 *   6. Our Waters
 *   7. Article layout (River Nidd; Scar House and long articles next)
 *
 * Accent treatments, used consistently and sparingly:
 *   - a short yellow rule before every eyebrow label
 *   - rounded photo frames with a dark caption chip
 *   - pill buttons and pill chips
 */

/* ------------------------------------------------------------------ 1 */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

body.nac-v2 {
    /* palette */
    --v2-paper: #F7F3EA;
    --v2-paper-2: #EEE8D8;
    --v2-surface: #FFFFFF;
    --v2-ink: #15201C;
    --v2-muted: #55605B;
    --v2-green: #1B4A40;
    --v2-green-deep: #112E27;
    --v2-yellow: #E8B94A;
    --v2-yellow-ink: #6B4708;
    --v2-line: #D9D2C0;

    /* type */
    --v2-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
    --v2-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* shape */
    --v2-r: 1rem;
    --v2-r-lg: 1.5rem;

    /* Remap the original tokens so any legacy component used on a v2 page
       (notices, chips, footer) picks up the new palette and type. */
    --nac-green: var(--v2-green);
    --nac-green-dark: var(--v2-green-deep);
    --nac-green-soft: var(--v2-paper-2);
    --nac-brass: var(--v2-yellow);
    --nac-brass-dark: var(--v2-yellow-ink);
    --nac-paper: var(--v2-paper);
    --nac-surface: var(--v2-surface);
    --nac-ink: var(--v2-ink);
    --nac-muted: var(--v2-muted);
    --nac-border: var(--v2-line);
    --nac-serif: var(--v2-display);

    --bs-body-bg: var(--v2-paper);
    --bs-body-color: var(--v2-ink);
    --bs-link-color-rgb: 27, 74, 64;
    --bs-link-hover-color-rgb: 17, 46, 39;
}

/* ------------------------------------------------------------------ 2 */

body.nac-v2 {
    background: var(--v2-paper);
    color: var(--v2-ink);

    font-family: var(--v2-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

body.nac-v2 h1,
body.nac-v2 h2,
body.nac-v2 h3,
body.nac-v2 h4 {
    font-family: var(--v2-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

body.nac-v2 a:focus-visible,
body.nac-v2 button:focus-visible {
    outline: 3px solid var(--v2-green);
    outline-offset: 3px;
    border-radius: 4px;
}

.v2-wrap {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.v2-h1 {
    margin: 0;

    font-size: clamp(2.5rem, 1.6rem + 4.6vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.v2-h2 {
    margin: 0;

    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.v2-h3 {
    margin: 0;

    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
}

.v2-lede {
    margin: 0;

    color: var(--v2-muted);

    font-size: 1.15rem;
    line-height: 1.5;
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 0.6rem;

    margin: 0;

    color: var(--v2-yellow-ink);

    font-family: var(--v2-body);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.v2-eyebrow::before {
    content: "";

    width: 1.75rem;
    height: 3px;

    border-radius: 2px;

    background: var(--v2-yellow);
}

.v2-section {
    padding: 2.75rem 0;
}

@media (min-width: 992px) {

    .v2-wrap {
        padding-inline: 1.5rem;
    }

    .v2-section {
        padding: 4.5rem 0;
    }

}

/* ------------------------------------------------------------------ 3 */

body.nac-v2 .nac-header {
    background: var(--v2-paper);
    color: var(--v2-ink);

    border-bottom: 1px solid var(--v2-line);
    box-shadow: none;
}

body.nac-v2 .nac-brand,
body.nac-v2 .nac-brand:hover {
    color: var(--v2-green);
}

body.nac-v2 .nac-brand-name {
    font-family: var(--v2-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

body.nac-v2 .nac-brand-est {
    color: var(--v2-yellow-ink);
}

body.nac-v2 .nac-menu-toggle {
    border-color: var(--v2-green);
    border-width: 2px;

    color: var(--v2-green);

    font-weight: 700;
}

body.nac-v2 .nac-menu-toggle:hover {
    background: var(--v2-green);
    color: #ffffff;
}

/* Phone menu: dark panel, light links (unchanged behaviour). */
body.nac-v2 .nac-menu.offcanvas {
    background: var(--v2-green-deep);
}

body.nac-v2 .nac-nav-link {
    font-family: var(--v2-body);
    font-weight: 700;
}

@media (min-width: 1200px) {

    body.nac-v2 .nac-nav-link {
        display: inline-flex;
        align-items: center;

        min-height: 2.75rem;

        color: var(--v2-ink);

        font-size: 0.93rem;
    }

    body.nac-v2 .nac-nav-link:hover {
        background: var(--v2-paper-2);
        color: var(--v2-green);
    }

    body.nac-v2 .nac-nav-link.nac-nav-external {
        border-color: var(--v2-green);

        background: var(--v2-green);
        color: #ffffff;

        border-radius: 999px;
    }

    body.nac-v2 .nac-nav-link.nac-nav-external:hover {
        background: var(--v2-green-deep);
        color: #ffffff;
    }

}

body.nac-v2 .nac-footer {
    margin-top: 0;

    background: var(--v2-green-deep);
}

body.nac-v2 .nac-footer-name {
    font-family: var(--v2-display);
    font-weight: 800;
}

body.nac-v2 .nac-footer-links a {
    display: inline-flex;
    align-items: center;

    min-height: 2.75rem;
}

/* ------------------------------------------------------------------ 4 */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    min-height: 3rem;
    padding: 0.7rem 1.4rem;

    border: 2px solid transparent;
    border-radius: 999px;

    font-family: var(--v2-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.v2-btn--primary {
    background: var(--v2-green);
    color: #ffffff;
}

.v2-btn--primary:hover {
    background: var(--v2-green-deep);
    color: #ffffff;
}

.v2-btn--ghost {
    border-color: var(--v2-ink);
    color: var(--v2-ink);
}

.v2-btn--ghost:hover {
    background: var(--v2-ink);
    color: var(--v2-paper);
}

.v2-btn--yellow {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-btn--yellow:hover {
    background: #F1CB6E;
    color: var(--v2-ink);
}

.v2-btn--ondark {
    border-color: rgba(255, 255, 255, 0.75);
    color: #ffffff;
}

.v2-btn--ondark:hover {
    background: #ffffff;
    color: var(--v2-green-deep);
}

.v2-btn-row {
    display: flex;
    flex-direction: column;

    gap: 0.75rem;
}

@media (min-width: 576px) {

    .v2-btn-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

}

.v2-chip {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.8rem;

    border: 1.5px solid currentColor;
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v2-photo {
    position: relative;

    margin: 0;

    overflow: hidden;

    border-radius: var(--v2-r-lg);

    background: var(--v2-paper-2);
}

.v2-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.v2-photo-cap {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;

    max-width: calc(100% - 1.5rem);

    padding: 0.45rem 0.8rem;

    border-radius: 0.6rem;

    background: rgba(17, 46, 39, 0.86);
    color: #ffffff;

    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
}

.v2-panel {
    padding: 1.25rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
}

.v2-panel-title {
    margin: 0 0 0.75rem;

    color: var(--v2-yellow-ink);

    font-family: var(--v2-body);
    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ 5 */

.v2-hero {
    padding-bottom: 2.5rem;
}

.v2-hero-grid {
    display: grid;

    gap: 1.5rem;
}

/* Phone: the photograph leads, edge to edge, and the headline and both
   actions sit directly beneath it, inside the first screen. */
.v2-hero-photo {
    margin-inline: -1rem;

    aspect-ratio: 4 / 3;

    border-radius: 0;
}

.v2-hero-photo img {
    object-position: 50% 60%;
}

.v2-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 1rem;
}

.v2-hero-copy .v2-h1 {
    font-size: clamp(2.05rem, 1.25rem + 3.6vw, 3.2rem);
    line-height: 1.04;

    text-wrap: balance;
}

.v2-hero-copy .v2-btn-row {
    width: 100%;

    margin-top: 0.25rem;
}

@media (min-width: 768px) {

    .v2-hero {
        padding-top: 1.5rem;
    }

    .v2-hero-photo {
        margin-inline: 0;

        border-radius: var(--v2-r-lg);
    }

}

@media (min-width: 992px) {

    .v2-hero {
        padding: 2.5rem 0 4rem;
    }

    .v2-hero-grid {
        grid-template-columns: 5fr 7fr;
        align-items: center;

        gap: 3.5rem;
    }

    .v2-hero-photo {
        order: 2;

        aspect-ratio: 5 / 4;
    }

    .v2-hero-copy {
        gap: 1.4rem;
    }

    .v2-hero-copy .v2-btn-row {
        width: auto;
    }

}

/* Two waters: one light, one dark, so they read as two distinct choices. */
.v2-feature {
    display: grid;

    gap: 1.25rem;
}

.v2-feature-photo {
    margin-inline: -1rem;

    aspect-ratio: 3 / 2;

    border-radius: 0;
}

.v2-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.85rem;
}

.v2-feature-copy p {
    margin: 0;

    color: var(--v2-muted);
}

.v2-feature-copy .v2-btn-row {
    width: 100%;
}

@media (min-width: 576px) {

    .v2-feature-copy .v2-btn-row {
        width: auto;
    }

}

.v2-feature-links {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem 1rem;

    margin-top: 0.4rem;
}

.v2-textlink {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    min-height: 2.75rem;

    color: var(--v2-green);

    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

.v2-textlink:hover {
    color: var(--v2-green-deep);
}

.v2-feature--dark {
    margin-inline: -1rem;

    overflow: hidden;

    background: var(--v2-green-deep);
    color: #ffffff;

    gap: 0;
}

.v2-feature--dark .v2-feature-photo {
    margin-inline: 0;
}

.v2-feature--dark .v2-feature-copy {
    padding: 1.5rem 1rem 2rem;
}

.v2-feature--dark .v2-feature-copy p {
    color: rgba(255, 255, 255, 0.86);
}

.v2-feature--dark .v2-eyebrow {
    color: var(--v2-yellow);
}

.v2-feature--dark .v2-textlink {
    color: #ffffff;
}

.v2-feature--dark .v2-textlink:hover {
    color: var(--v2-yellow);
}

.v2-feature--dark a:focus-visible {
    outline-color: var(--v2-yellow);
}

@media (min-width: 768px) {

    .v2-feature-photo {
        margin-inline: 0;

        border-radius: var(--v2-r-lg);
    }

    .v2-feature--dark {
        margin-inline: 0;

        border-radius: var(--v2-r-lg);
    }

    .v2-feature--dark .v2-feature-photo {
        border-radius: 0;
    }

}

@media (min-width: 992px) {

    .v2-feature {
        grid-template-columns: 7fr 5fr;
        align-items: center;

        gap: 3.5rem;
    }

    .v2-feature-photo {
        aspect-ratio: 4 / 3;
    }

    .v2-feature--dark {
        grid-template-columns: 5fr 7fr;
        align-items: stretch;

        gap: 0;
    }

    .v2-feature--dark .v2-feature-copy {
        justify-content: center;

        padding: 3rem 3rem 3rem 3.25rem;

        order: 1;
    }

    .v2-feature--dark .v2-feature-photo {
        order: 2;

        aspect-ratio: auto;
        min-height: 26rem;
    }

}

/* Yellow band for the day-ticket call to action. */
.v2-band {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-band-inner {
    display: flex;
    flex-direction: column;

    gap: 1.25rem;

    padding-block: 2rem;
}

.v2-band h2 {
    margin: 0 0 0.35rem;

    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    font-weight: 800;
}

.v2-band p {
    margin: 0;

    font-size: 1.05rem;
}

.v2-band .v2-btn--primary {
    background: var(--v2-green-deep);
}

@media (min-width: 768px) {

    .v2-band-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 2rem;

        padding-block: 2.5rem;
    }

}

/* Fishing & Learning: compact rows on a phone, photo tiles on a desktop. */
.v2-tiles {
    display: grid;

    gap: 0.75rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-tile {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;

    gap: 1rem;

    padding: 0.6rem 1rem 0.6rem 0.6rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
    color: var(--v2-ink);

    text-decoration: none;
}

.v2-tile:hover {
    border-color: var(--v2-green);
}

.v2-tile img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 1;

    border-radius: 0.65rem;

    object-fit: cover;

    background: #ffffff;
}

.v2-tile span {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;
}

.v2-tile strong {
    font-family: var(--v2-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.v2-tile i {
    color: var(--v2-green);

    font-size: 1.25rem;
}

@media (min-width: 768px) {

    .v2-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 1.25rem;
    }

    .v2-tile {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0.9rem;

        padding: 0.75rem 0.75rem 1rem;
    }

    .v2-tile img {
        aspect-ratio: 4 / 3;

        border-radius: 0.8rem;
    }

    .v2-tile span {
        padding-inline: 0.25rem;
    }

}

.v2-notice-empty {
    padding: 1.1rem 1.25rem;

    border: 1.5px dashed #B5AE9B;
    border-radius: var(--v2-r);

    color: var(--v2-muted);
}

.v2-story {
    background: var(--v2-paper-2);
}

.v2-story-grid {
    display: grid;

    gap: 1rem;

    align-items: center;
}

.v2-story-year {
    margin: 0;

    color: var(--v2-green);

    font-family: var(--v2-display);
    font-size: clamp(5.5rem, 3rem + 16vw, 11rem);
    font-weight: 800;
    line-height: 0.85;

    letter-spacing: -0.06em;
}

.v2-story-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 1rem;
}

.v2-story-copy p {
    margin: 0;

    font-size: 1.15rem;
    line-height: 1.55;
}

@media (min-width: 768px) {

    .v2-story-grid {
        grid-template-columns: auto 1fr;

        gap: 3.5rem;
    }

}

/* ------------------------------------------------------------------ 6 */

.v2-intro {
    padding: 2rem 0 0;
}

.v2-intro-grid {
    display: grid;

    gap: 1.25rem;
}

.v2-choice {
    display: grid;

    gap: 0.75rem;

    margin: 0.25rem 0 0;
    padding: 0;

    list-style: none;
}

.v2-choice a {
    display: flex;
    align-items: center;

    gap: 0.9rem;

    min-height: 3.5rem;
    padding: 0.5rem 1.4rem;

    border: 2px solid var(--v2-green);
    border-radius: 999px;

    background: var(--v2-surface);
    color: var(--v2-green);

    font-family: var(--v2-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;

    text-decoration: none;
}

.v2-choice a:hover {
    background: var(--v2-green);
    color: #ffffff;
}

.v2-choice i {
    margin-left: auto;
}

@media (min-width: 768px) {

    .v2-choice {
        grid-template-columns: repeat(2, max-content);

        gap: 1rem;
    }

}

@media (min-width: 992px) {

    .v2-intro {
        padding-top: 3.5rem;
    }

    .v2-intro-grid {
        grid-template-columns: 7fr 5fr;
        align-items: end;

        gap: 3rem;
    }

}

.v2-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
}

/* ------------------------------------------------------------------ 7 */

.v2-article-hero {
    margin-inline: -1rem;

    aspect-ratio: 3 / 2;

    border-radius: 0;
}

.v2-article-hero img {
    object-position: 50% 55%;
}

@media (min-width: 768px) {

    .v2-article-hero {
        margin-inline: 0;

        aspect-ratio: 21 / 9;

        border-radius: var(--v2-r-lg);
    }

}

.v2-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;
}

.v2-article > * {
    min-width: 0;
}

/* Phone: the useful links come first, then the article at full width. */
.v2-article-side {
    order: -1;
}

.v2-actions {
    display: grid;

    gap: 0.6rem;
}

.v2-actions .v2-btn {
    justify-content: flex-start;

    width: 100%;
}

.v2-actions .v2-btn i {
    flex: 0 0 auto;
}

.v2-toc {
    margin-top: 1rem;
}

.v2-toc-list {
    display: flex;

    gap: 0.5rem;

    margin: 0;
    padding: 0 0 0.35rem;

    overflow-x: auto;

    list-style: none;

    scrollbar-width: thin;
}

.v2-toc-list a {
    display: inline-flex;
    align-items: center;

    min-height: 2.75rem;
    padding: 0.4rem 1rem;

    border: 1.5px solid var(--v2-line);
    border-radius: 999px;

    background: var(--v2-surface);
    color: var(--v2-ink);

    font-size: 0.95rem;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.v2-toc-list a:hover,
.v2-toc-list a.is-active {
    border-color: var(--v2-green);

    background: var(--v2-green);
    color: #ffffff;
}

.v2-prose h2 {
    margin: 2.75rem 0 0.8rem;

    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
    font-weight: 800;
    line-height: 1.1;

    scroll-margin-top: 6rem;
}

.v2-prose h2:first-child {
    margin-top: 0;
}

.v2-prose h3 {
    margin: 1.75rem 0 0.5rem;

    font-size: 1.3rem;
    font-weight: 800;
}

.v2-prose p {
    margin: 0 0 1.1rem;

    font-size: 1.125rem;
    line-height: 1.7;
}

.v2-prose .v2-photo {
    margin: 1.75rem 0;

    aspect-ratio: 16 / 9;
}

.v2-prose .v2-photo--wide {
    margin-inline: -1rem;

    border-radius: 0;
}

.v2-video {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--v2-r);

    background: #000000;
}

.v2-video iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.v2-cta {
    padding: 1.5rem;

    border-radius: var(--v2-r-lg);

    background: var(--v2-green-deep);
    color: #ffffff;
}

.v2-cta h2 {
    margin: 0 0 0.5rem;

    font-size: 1.7rem;
    font-weight: 800;
}

.v2-cta p {
    margin: 0 0 1.1rem;

    color: rgba(255, 255, 255, 0.86);
}

.v2-cta-chips {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin: 0 0 1.25rem;
    padding: 0;

    list-style: none;
}

.v2-cta-chips a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border: 2px solid var(--v2-yellow);
    border-radius: 50%;

    color: var(--v2-yellow);

    font-weight: 800;
    text-decoration: none;
}

.v2-cta-chips a:hover {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-cta a:focus-visible {
    outline-color: var(--v2-yellow);
}

@media (min-width: 768px) {

    .v2-prose .v2-photo--wide {
        margin-inline: 0;

        border-radius: var(--v2-r-lg);
    }

}

@media (min-width: 992px) {

    .v2-article {
        grid-template-columns: minmax(0, 40rem) 22rem;
        align-items: start;
        justify-content: space-between;

        gap: 3rem;
    }

    .v2-article-side {
        order: 2;

        position: sticky;
        top: 6.5rem;
    }

    .v2-toc-list {
        flex-direction: column;

        gap: 0;

        overflow: visible;
    }

    .v2-toc-list a {
        display: flex;

        min-height: 2.75rem;
        padding: 0.45rem 0.9rem;

        border: 0;
        border-left: 3px solid var(--v2-line);
        border-radius: 0;

        background: transparent;

        white-space: normal;
    }

    .v2-toc-list a:hover,
    .v2-toc-list a.is-active {
        border-left-color: var(--v2-yellow);

        background: var(--v2-paper-2);
        color: var(--v2-green);
    }

}

/* ------------------------------------------------------------------ 8
   Shared components used across the remaining pages
   ------------------------------------------------------------------ */

.v2-intro-text p {
    margin: 0 0 0.9rem;

    color: var(--v2-muted);

    font-size: 1.1rem;
    line-height: 1.6;
}

.v2-intro-text p:last-child {
    margin-bottom: 0;
}

.v2-note {
    display: flex;

    gap: 0.9rem;

    padding: 1.1rem 1.25rem;

    border-radius: var(--v2-r);

    background: var(--v2-paper-2);
    color: var(--v2-ink);
}

.v2-note > i {
    flex: 0 0 auto;

    color: var(--v2-yellow-ink);

    font-size: 1.25rem;
    line-height: 1.5;
}

.v2-note h2,
.v2-note h3 {
    margin: 0 0 0.25rem;

    font-size: 1.1rem;
    font-weight: 800;
}

.v2-note p {
    margin: 0;

    color: var(--v2-muted);
}

.v2-note a {
    color: var(--v2-green);
    font-weight: 700;
}

.v2-backlink {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    min-height: 3rem;
    padding: 0.5rem 1.25rem 0.5rem 1rem;

    border: 2px solid var(--v2-line);
    border-radius: 999px;

    background: var(--v2-surface);
    color: var(--v2-green);

    font-weight: 700;
    text-decoration: none;
}

.v2-backlink:hover {
    border-color: var(--v2-green);

    background: var(--v2-green);
    color: #ffffff;
}

/* Photo cards: the whole card is one link */
.v2-cards {
    display: grid;

    gap: 1.25rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-card {
    display: flex;
    flex-direction: column;

    height: 100%;
    overflow: hidden;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);

    background: var(--v2-surface);
    color: var(--v2-ink);

    text-decoration: none;
}

a.v2-card:hover {
    border-color: var(--v2-green);
    color: var(--v2-ink);
}

.v2-card-photo {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    background: var(--v2-paper-2);
}

.v2-card-photo--contain {
    object-fit: contain;

    background: #ffffff;
}

.v2-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    gap: 0.5rem;

    padding: 1.25rem 1.25rem 1.4rem;
}

.v2-card-title {
    margin: 0;

    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
}

.v2-card-meta {
    margin: 0;

    color: var(--v2-muted);

    font-size: 0.9rem;
}

.v2-card-text {
    margin: 0;

    color: var(--v2-muted);
}

.v2-linkline {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    margin-top: auto;
    padding-top: 0.5rem;

    color: var(--v2-green);

    font-weight: 800;
}

@media (min-width: 768px) {

    .v2-cards--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 992px) {

    .v2-cards--triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

.v2-category {
    margin: 0 0 1.25rem;

    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
}

/* Price cards */
.v2-price-grid {
    display: grid;

    gap: 1rem;
}

.v2-price {
    display: flex;
    flex-direction: column;

    padding: 1.25rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);

    background: var(--v2-surface);
}

.v2-price-name {
    margin: 0;

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.v2-price-detail {
    margin: 0.2rem 0 0;

    color: var(--v2-muted);

    font-size: 0.95rem;
}

.v2-price-amount {
    margin: auto 0 0;
    padding-top: 0.6rem;

    color: var(--v2-green);

    font-family: var(--v2-display);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.03em;
}

.v2-price .v2-btn {
    margin-top: 1.1rem;
}

@media (min-width: 576px) {

    .v2-price-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 768px) {

    .v2-price-grid--triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

.v2-group-title {
    margin: 2rem 0 0.75rem;

    font-size: 1.3rem;
    font-weight: 800;
}

.v2-group-title:first-child {
    margin-top: 0;
}

/* Rules panels */
.v2-rules-grid {
    display: grid;

    gap: 1.25rem;
}

.v2-rules {
    padding: 1.4rem 1.4rem 1.5rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);

    background: var(--v2-surface);
}

.v2-rules > h2,
.v2-rules > h3 {
    margin: 0 0 0.5rem;

    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    font-weight: 800;
}

.v2-rules .v2-tags {
    margin: 0 0 1rem;
}

.v2-rules--dark {
    border-color: var(--v2-green-deep);

    background: var(--v2-green-deep);
    color: #ffffff;
}

.v2-rules--dark .v2-eyebrow {
    color: var(--v2-yellow);
}

.v2-rules--dark .v2-list li::marker {
    color: var(--v2-yellow);
}

.v2-list {
    margin: 0;
    padding-left: 1.25rem;
}

.v2-list li {
    margin-bottom: 0.7rem;

    line-height: 1.6;
}

.v2-list li:last-child {
    margin-bottom: 0;
}

.v2-list li::marker {
    color: var(--v2-yellow-ink);
}

.v2-list a {
    color: inherit;

    font-weight: 700;
}

@media (min-width: 992px) {

    .v2-rules-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;

        gap: 1.75rem;
    }

    .v2-list--cols {
        columns: 2;
        column-gap: 2.5rem;
    }

    .v2-list--cols li {
        break-inside: avoid;
    }

}

.v2-how {
    display: flex;

    gap: 0.9rem;

    padding: 1.1rem 1.25rem;

    border-left: 5px solid var(--v2-yellow);
    border-radius: 0.75rem;

    background: var(--v2-surface);
}

.v2-how > i {
    flex: 0 0 auto;

    color: var(--v2-yellow-ink);

    font-size: 1.3rem;
    line-height: 1.4;
}

.v2-how p {
    margin: 0;
}

/* Maps and diagrams: full width on a phone */
.v2-map {
    margin: 0;
}

.v2-map-link {
    display: block;

    overflow: hidden;

    background: #ffffff;
}

.v2-map-link img {
    display: block;

    width: 100%;
    height: auto;
}

.v2-map--bleed {
    margin-inline: -1rem;
}

.v2-map--bleed .v2-map-link {
    border-block: 1px solid var(--v2-line);
}

.v2-map-hint {
    margin: 0.7rem 0 0;

    color: var(--v2-muted);

    font-size: 0.92rem;
}

.v2-map--bleed .v2-map-hint {
    padding-inline: 1rem;
}

@media (min-width: 768px) {

    .v2-map--bleed {
        margin-inline: 0;
    }

    .v2-map-link,
    .v2-map--bleed .v2-map-link {
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-r-lg);
    }

    .v2-map--bleed .v2-map-hint {
        padding-inline: 0;
    }

}

/* Checklists, download box */
.v2-checks {
    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-checks li {
    display: flex;

    gap: 0.75rem;

    padding: 0.7rem 0;

    border-bottom: 1px solid var(--v2-line);

    font-size: 1.05rem;
    line-height: 1.55;
}

.v2-checks li:last-child {
    border-bottom: 0;
}

.v2-checks i {
    flex: 0 0 auto;

    color: var(--v2-green);

    line-height: 1.55;
}

.v2-two {
    display: grid;

    gap: 1.25rem;
}

@media (min-width: 992px) {

    .v2-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;

        gap: 2rem;
    }

}

/* Contact */
.v2-routes {
    display: grid;

    gap: 0.75rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-route {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    min-height: 4.25rem;
    padding: 0.9rem 1.2rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
    color: var(--v2-ink);

    text-decoration: none;
}

.v2-route:hover {
    border-color: var(--v2-green);

    color: var(--v2-ink);
}

.v2-route strong {
    display: block;

    color: var(--v2-ink);

    font-family: var(--v2-display);
    font-size: 1.15rem;
    font-weight: 800;
}

.v2-route span {
    color: var(--v2-muted);

    font-size: 0.95rem;
}

.v2-route i {
    flex: 0 0 auto;

    color: var(--v2-green);

    font-size: 1.2rem;
}

@media (min-width: 768px) {

    .v2-routes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.v2-contact {
    display: grid;

    gap: 1.25rem;
}

.v2-contact-item {
    font-size: 1.15rem;
    line-height: 1.5;
}

.v2-contact-item small {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--v2-yellow-ink);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.v2-contact-item a {
    display: inline-flex;
    align-items: center;

    min-height: 2.75rem;

    color: var(--v2-green);

    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Split: photo beside text */
.v2-split {
    display: grid;

    gap: 1.5rem;

    align-items: center;
}

.v2-split .v2-photo {
    aspect-ratio: 3 / 2;
}

.v2-split--bleed .v2-photo {
    margin-inline: -1rem;

    border-radius: 0;
}

@media (min-width: 768px) {

    .v2-split--bleed .v2-photo {
        margin-inline: 0;

        border-radius: var(--v2-r-lg);
    }

}

@media (min-width: 992px) {

    .v2-split {
        grid-template-columns: 6fr 5fr;

        gap: 3.5rem;
    }

}

/* Pager and article intro */
.v2-pager {
    display: grid;

    gap: 0.75rem;

    margin: 2.5rem 0 0;
}

.v2-pager a {
    display: block;

    padding: 1rem 1.1rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
    color: var(--v2-ink);

    font-family: var(--v2-display);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;

    text-decoration: none;
}

.v2-pager a:hover {
    border-color: var(--v2-green);
}

.v2-pager small {
    display: block;

    margin-bottom: 0.15rem;

    color: var(--v2-yellow-ink);

    font-family: var(--v2-body);
    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (min-width: 576px) {

    .v2-pager {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.v2-byline {
    margin: 0;

    color: var(--v2-muted);

    font-size: 1.05rem;
}

.v2-specimen {
    margin: 0;

    padding: 0.75rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);

    background: #ffffff;
}

.v2-specimen img {
    display: block;

    width: 100%;
    max-height: 13rem;

    object-fit: contain;
}

@media (min-width: 992px) {

    .v2-specimen img {
        max-height: 19rem;
    }

}

@media (min-width: 992px) {

    .v2-intro-grid.v2-intro-grid--center {
        align-items: center;
    }

}

/* Beat selector */
.v2-chips {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-chips a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border: 2px solid var(--v2-green);
    border-radius: 50%;

    color: var(--v2-green);

    font-family: var(--v2-display);
    font-size: 1.15rem;
    font-weight: 800;

    text-decoration: none;
}

.v2-chips a:hover {
    background: var(--v2-green);
    color: #ffffff;
}

.v2-beats-layout {
    display: grid;

    gap: 2rem;
}

.v2-beat-list {
    display: grid;

    gap: 0.9rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-beat {
    position: relative;

    display: grid;
    grid-template-columns: 6.5rem 1fr;

    gap: 1rem;

    padding: 0.8rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
}

.v2-beat:hover {
    border-color: var(--v2-green);
}

.v2-beat-thumb {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 6.5rem;

    overflow: hidden;

    border: 1px solid var(--v2-line);
    border-radius: 0.6rem;

    background: #ffffff;
}

.v2-beat-thumb img {
    display: block;

    width: 100%;
    height: 100%;
    max-height: 8.5rem;

    object-fit: contain;
}

.v2-beat-no {
    color: var(--v2-yellow-ink);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.v2-beat-name {
    margin: 0.1rem 0 0.3rem;

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
}

.v2-beat-name a {
    color: var(--v2-ink);

    text-decoration: none;
}

.v2-beat-pdf {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    min-height: 2.75rem;

    color: var(--v2-green);

    font-size: 0.95rem;
    font-weight: 700;
}

.v2-diagram {
    display: block;

    width: 100%;
    max-width: 24rem;
    height: auto;

    margin: 0 auto;
}

.v2-diagram a {
    text-decoration: none;
}

.v2-diagram a:hover .v2-river-row,
.v2-diagram a:focus-visible .v2-river-row {
    fill: rgba(27, 74, 64, 0.08);
}

@media (min-width: 768px) {

    .v2-beat {
        grid-template-columns: 8rem 1fr;
    }

}

@media (min-width: 992px) {

    .v2-beats-layout {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        align-items: start;

        gap: 3rem;
    }

    .v2-sticky {
        position: sticky;
        top: 6.5rem;
    }

}

/* Side panel on map pages: after the main content on a phone */
.v2-article--after .v2-article-side {
    order: 2;
}

@media (min-width: 992px) {

    .v2-article--wide {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

}

.v2-side-links {
    display: grid;

    gap: 0.6rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-side-links a {
    display: block;

    padding: 0.8rem 1rem;

    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
    color: var(--v2-ink);

    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;
}

.v2-side-links a:hover {
    border-color: var(--v2-green);
}

.v2-side-links small {
    display: block;

    color: var(--v2-yellow-ink);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.v2-side-links em {
    display: block;

    color: var(--v2-muted);

    font-size: 0.85rem;
    font-style: normal;
    font-weight: 500;
}

/* Long-article body (HTML fragments from resources/content/learning) */
.v2-prose ul,
.v2-prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}

.v2-prose li {
    margin-bottom: 0.65rem;

    font-size: 1.125rem;
    line-height: 1.65;
}

.v2-prose li::marker {
    color: var(--v2-green);

    font-weight: 800;
}

.v2-prose .v2-figure {
    margin: 1.75rem 0;
}

.v2-prose .v2-figure img {
    display: block;

    max-width: 100%;
    height: auto;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: #ffffff;
}

.v2-prose .v2-figure a {
    display: block;
}

/* Diagrams and charts get the full phone width */
.v2-prose .v2-figure--wide {
    margin-inline: -1rem;
}

.v2-prose .v2-figure--wide img {
    width: 100%;

    border-inline: 0;
    border-radius: 0;
}

@media (min-width: 768px) {

    .v2-prose .v2-figure--wide {
        margin-inline: 0;
    }

    .v2-prose .v2-figure--wide img {
        border-inline: 1px solid var(--v2-line);
        border-radius: var(--v2-r);
    }

}

.v2-prose ol.v2-steps {
    padding: 0;

    list-style: none;

    counter-reset: step;
}

.v2-prose .v2-steps > li {
    display: grid;

    gap: 0.6rem 1.25rem;

    margin-bottom: 1rem;
    padding: 1rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);

    counter-increment: step;
}

.v2-prose .v2-steps > li::before {
    content: "Step " counter(step);

    color: var(--v2-yellow-ink);

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.v2-prose .v2-steps .v2-figure {
    margin: 0;
}

.v2-prose .v2-steps .v2-figure img {
    width: 100%;
    max-width: 18rem;
}

.v2-prose .v2-steps p {
    margin: 0;
}

.v2-prose .v2-table {
    width: 100%;

    margin: 1.25rem 0;

    border-collapse: collapse;

    background: var(--v2-surface);
}

.v2-prose .v2-table caption {
    padding: 0 0 0.6rem;

    color: var(--v2-ink);

    font-family: var(--v2-display);
    font-size: 1.2rem;
    font-weight: 800;

    caption-side: top;
}

.v2-prose .v2-table th,
.v2-prose .v2-table td {
    padding: 0.7rem 0.6rem;

    border: 1px solid var(--v2-line);

    font-size: 1rem;
    line-height: 1.35;

    text-align: center;
}

.v2-prose .v2-table th {
    background: var(--v2-paper-2);

    font-weight: 800;
}

.v2-prose .v2-colours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));

    gap: 0.4rem 1rem;

    margin: 1.25rem 0;
    padding: 0.9rem 1rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
}

.v2-prose .v2-colours div {
    display: flex;

    gap: 0.5rem;

    line-height: 1.5;
}

.v2-prose .v2-colours dt {
    flex: 0 0 2.2rem;

    color: var(--v2-muted);

    font-weight: 700;
}

.v2-prose .v2-colours dd {
    margin: 0;
}

@media (min-width: 576px) {

    .v2-prose .v2-steps > li {
        grid-template-columns: 12rem 1fr;
        grid-template-areas:
            "label label"
            "photo text";

        align-items: start;
    }

    .v2-prose .v2-steps > li::before {
        grid-area: label;
    }

    .v2-prose .v2-steps .v2-figure {
        grid-area: photo;
    }

    .v2-prose .v2-steps p {
        grid-area: text;
    }

}

.v2-btn--block {
    width: 100%;
}

@media (min-width: 576px) {

    .v2-btn--block {
        width: auto;
    }

}

.v2-h1--md {
    font-size: clamp(2rem, 1.35rem + 3.3vw, 3.5rem);
    line-height: 1.05;
}

.v2-note p:only-child {
    color: var(--v2-ink);
}

.v2-note--water {
    background: #E6EFF3;
}

.v2-note--water > i {
    color: #2B4652;
}

.v2-section.v2-after-intro {
    padding-top: 2.25rem;
}

@media (min-width: 992px) {

    .v2-section.v2-after-intro {
        padding-top: 3rem;
    }

}

/* ------------------------------------------------------------------ 9
   Health & Safety, club hub, buying in person
   ------------------------------------------------------------------ */

.v2-note--safety {
    background: #E4ECE8;
}

.v2-note--safety > i {
    color: var(--v2-green);
}

.v2-checks--cols li > i {
    font-size: 1.25rem;
}

.v2-checks a {
    color: var(--v2-green);

    font-weight: 700;
    white-space: nowrap;
}

.v2-checks--cols a {
    display: flex;
    align-items: center;

    min-height: 2.75rem;
    width: fit-content;
}

@media (min-width: 992px) {

    .v2-checks--cols {
        columns: 2;
        column-gap: 3rem;
    }

    .v2-checks--cols li {
        break-inside: avoid;
    }

}

.v2-route-icon {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;

    border-radius: 50%;

    background: var(--v2-paper-2);
    color: var(--v2-green);

    font-size: 1.25rem;
}

.v2-route > span {
    flex: 1 1 auto;
}

.v2-route--feature {
    border-color: var(--v2-green);

    background: #E4ECE8;
}

.v2-route--feature .v2-route-icon {
    background: var(--v2-green);
    color: #ffffff;
}

@media (min-width: 768px) {

    .v2-route--feature {
        grid-column: 1 / -1;
    }

}

/* Two ways to buy */
.v2-outlets {
    display: grid;

    gap: 1rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-outlet {
    display: flex;
    align-items: flex-start;

    gap: 1rem;

    padding: 1.25rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);

    background: var(--v2-surface);
}

.v2-outlet > i {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;

    border-radius: 50%;

    background: var(--v2-yellow);
    color: var(--v2-ink);

    font-size: 1.25rem;
}

.v2-outlet h3 {
    margin: 0;

    font-size: 1.3rem;
    font-weight: 800;
}

.v2-outlet p {
    margin: 0.15rem 0 0;

    color: var(--v2-muted);
}

@media (min-width: 768px) {

    .v2-outlets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.v2-way {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    margin: 0 0 0.75rem;
    padding: 0.4rem 0.9rem;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.v2-way--online {
    background: var(--v2-green);
    color: #ffffff;
}

.v2-way--person {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

/* ------------------------------------------------------------------ 10
   Club hub cards: equal height, aligned icon, heading and arrow
   ------------------------------------------------------------------ */

.v2-routes--hub {
    align-items: stretch;
}

.v2-routes--hub > li {
    display: flex;
}

.v2-route--hub {
    align-items: flex-start;

    width: 100%;
    padding: 1.25rem 1.3rem;
}

.v2-route--hub .v2-route-icon,
.v2-route--hub .v2-route-arrow {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;
}

.v2-route--hub .v2-route-arrow {
    background: none;

    color: var(--v2-green);

    font-size: 1.25rem;
}

@media (min-width: 992px) {

    .v2-routes--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

/* A feature card is tinted, not wider, so every card in a row keeps one width */
@media (min-width: 768px) {

    .v2-route--feature {
        grid-column: auto;
    }

}

/* Videos: a titled 16:9 player with its source credited underneath */
.v2-video-card {
    margin: 0;
}

.v2-video-title {
    margin: 0 0 0.75rem;

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
}

.v2-video-cap {
    display: grid;

    gap: 0.35rem;

    margin-top: 0.7rem;

    color: var(--v2-muted);

    font-size: 0.92rem;
}

.v2-video-summary {
    color: var(--v2-ink);
}

.v2-video-card + .v2-video-card {
    margin-top: 2rem;
}

.v2-video-card .v2-video {
    max-width: 100%;
}

.v2-watch {
    max-width: 52rem;
}

/*
 * "Opens in a new tab" cues: the small note under a link's label, and the
 * size/notice text inside a button.
 */
.v2-newtab {
    display: block;

    color: var(--v2-muted);

    font-size: 0.82rem;
    font-weight: 500;
}

.v2-btn small {
    font-weight: 600;
    opacity: 0.9;
}

/* On a phone the note sits under the label, so neither wraps awkwardly. */
@media (max-width: 575.98px) {

    .v2-btn > span > small {
        display: block;

        font-size: 0.82rem;
        font-weight: 500;
    }

}

.v2-btn--sm {
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;

    font-size: 0.95rem;
}

/* Club News & Notices */
.v2-chip--news,
.v2-chip--doc {
    color: var(--v2-green);
}

.v2-chip--notice {
    color: var(--v2-yellow-ink);
}

.v2-news {
    overflow-wrap: anywhere;
}

.v2-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.4rem 0.75rem;

    margin: 0 0 0.7rem;

    color: var(--v2-muted);

    font-size: 0.92rem;
}

.v2-news-meta .v2-chip {
    padding: 0.2rem 0.65rem;

    font-size: 0.72rem;
}

.v2-news-expired {
    font-weight: 700;
}

.v2-news-title {
    margin: 0 0 0.6rem;

    font-family: var(--v2-display);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

.v2-news-body p {
    margin: 0 0 0.75rem;
}

.v2-news-body p:last-child {
    margin-bottom: 0;
}

.v2-news-body a,
.v2-notice-empty a {
    color: var(--v2-green);
    font-weight: 700;
}

.v2-news-more {
    margin: 0.75rem 0 0;
}

/* Document Archive */
.v2-filter {
    display: grid;

    gap: 0.9rem;

    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
}

.v2-filter label {
    display: block;

    margin: 0 0 0.3rem;

    font-size: 0.88rem;
    font-weight: 700;
}

.v2-filter .form-select {
    min-height: 3rem;

    border-color: var(--v2-line);
    border-radius: 0.75rem;
}

.v2-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.5rem 1rem;
}

.v2-doc-year {
    margin: 2rem 0 0.75rem;

    font-family: var(--v2-display);
    font-size: 1.6rem;
    font-weight: 800;
}

.v2-docs {
    display: grid;

    gap: 0.75rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-doc {
    display: grid;

    gap: 0.9rem;

    padding: 1rem 1.1rem;

    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);

    background: var(--v2-surface);
}

.v2-doc .v2-chip {
    padding: 0.2rem 0.65rem;

    font-size: 0.72rem;
}

.v2-doc-title {
    margin: 0.5rem 0 0.2rem;

    font-family: var(--v2-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;

    overflow-wrap: anywhere;
}

.v2-doc-meta {
    margin: 0;

    color: var(--v2-muted);

    font-size: 0.92rem;
}

.v2-doc-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
}

@media (min-width: 768px) {

    .v2-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }

    .v2-doc {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

}