/* ===========================================================================
   Tsimane Fishing Report — shared stylesheet
   ---------------------------------------------------------------------------
   Standalone (no Tailwind / no build step). Used by every weekly fishing
   report HTML page. Tokens mirror the main app's brand book
   (resources/css/app.css @theme) so these pages can later be folded into the
   Laravel site with minimal diff.

   To create a new report: copy an existing report .html, swap the copy and
   the image filenames, and link this same stylesheet. Do not fork this file
   per report — keep it the single source of styling.
=========================================================================== */

/* ---------------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------------- */
:root {
    /* Brand palette (HEX from the brand book) */
    --color-cream-50: #f6f5ef;
    --color-cream-100: #edebe0; /* primary background */
    --color-cream-200: #ddd8c5;
    --color-ink-900: #312b29; /* primary text */
    --color-ink-700: #4a4240;
    --color-sage-300: #b6c5ac;
    --color-sage-500: #87a07d; /* ornament accent */
    --color-sage-700: #6b8463; /* muted text */
    --color-forest-500: #3d6354;
    --color-forest-700: #315244; /* CTA / dark panels */
    --color-forest-900: #233a30;
    --color-gold-300: #f5e9a0;
    --color-gold-500: #efdf80;

    /* Semantic shortcuts */
    --color-bg: var(--color-cream-100);
    --color-surface: var(--color-cream-50);
    --color-text: var(--color-ink-900);
    --color-muted: var(--color-sage-700);
    --color-accent: var(--color-forest-700);
    --color-band-surface: var(--color-forest-700);
    --color-band-text: var(--color-cream-100);

    /* Fonts */
    --font-sans:
        "Work Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-display:
        "tt-travels-next", "TT Travels Next", "Fraunces", ui-serif, Georgia,
        serif;

    /* Radius scale */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Motion */
    --duration-base: 300ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Ornament */
    --ornament-color: var(--color-sage-500);
    --ornament-ring-size: 64px;

    /* Layout sizing */
    --container-max: 1200px;
    --prose-max: 680px;

    /* Responsive typography (large desktop defaults) */
    --fs-eyebrow: 14px;
    --fs-hero-meta: 18px;
    --fs-hero-title: 44px;
    --fs-section-title: 30px;
    --fs-block-title: 22px;
    --fs-body: 17px;
    --fs-lede: 20px;
}

@media (max-width: 1439px) {
    :root {
        --fs-hero-title: 38px;
        --fs-section-title: 27px;
        --fs-block-title: 21px;
        --fs-body: 16px;
        --fs-lede: 19px;
    }
}

@media (max-width: 1023px) {
    :root {
        --fs-eyebrow: 13px;
        --fs-hero-meta: 16px;
        --fs-hero-title: 32px;
        --fs-section-title: 24px;
        --fs-block-title: 20px;
        --fs-body: 16px;
        --fs-lede: 18px;
    }
}

@media (max-width: 639px) {
    :root {
        --fs-eyebrow: 12px;
        --fs-hero-meta: 14px;
        --fs-hero-title: 26px;
        --fs-section-title: 22px;
        --fs-block-title: 19px;
        --fs-body: 15px;
        --fs-lede: 17px;
    }
}

/* ---------------------------------------------------------------------------
   Base / reset
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1.15em;
}

p:last-child {
    margin-bottom: 0;
}

:focus-visible {
    outline: 2px solid var(--color-forest-700);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------------------- */
.fr-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

.fr-prose {
    max-width: var(--prose-max);
    margin-inline: auto;
}

.fr-section {
    padding-block: clamp(32px, 5vw, 76px);
}

.fr-section--tight {
    padding-block: clamp(24px, 4vw, 46px);
}

/* Eyebrow label */
.fr-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-forest-700);
    margin: 0;
}

.fr-eyebrow--light {
    color: var(--color-gold-500);
}

/* Divider line + open ring ornament */
.fr-divider {
    position: relative;
    height: 1px;
    width: min(100%, 320px);
    background-color: color-mix(
        in srgb,
        var(--color-sage-500) 70%,
        transparent
    );
    margin: 22px 0;
}

.fr-divider::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-sage-500) 70%, transparent);
}

.fr-divider--center {
    margin-inline: auto;
}

.fr-divider--center::before {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */
.fr-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 90svh;
    overflow: hidden;
    color: #fff;
}

@supports not (height: 1svh) {
    .fr-hero {
        min-height: 90vh;
    }
}

.fr-hero__media,
.fr-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.fr-hero__media img {
    object-fit: cover;
}

/* Placeholder fill when no hero image is present yet */
.fr-hero__media .fr-ph {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
}

.fr-hero__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
    padding-block: clamp(40px, 8vh, 88px);
}

/* Phones: the caption sits close to the bottom edge. Its bottom padding
   matches the side gutter, so the text keeps the same inset from both edges
   and more of the photo stays clear above it. The top padding is kept on
   purpose: it is the run-up of the gradient that keeps the text readable. */
@media (max-width: 767px) {
    .fr-hero__inner {
        padding-bottom: clamp(20px, 5vw, 40px);
    }
}

.fr-hero__inner::before {
    content: "";
    position: absolute;

    /* Se alinea perfectamente arriba y abajo con la altura del contenedor de texto */
    top: 0;
    bottom: 0;

    /* El truco mágico para romper el max-width y ser 100% ancho de pantalla */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;

    /* Tu degradado impecable */
    background: linear-gradient(
        180deg,
        rgba(35, 58, 48, 0) 0%,
        rgba(35, 58, 48, 0.3) 70%,
        rgba(35, 58, 48, 0.6) 100%
    );
    z-index: -1;
    pointer-events: none;
}

.fr-hero .fr-eyebrow {
    color: var(--color-gold-500);
}

.fr-hero__meta {
    font-family: var(--font-display);
    font-size: var(--fs-hero-meta);
    letter-spacing: 0.04em;
    margin: 10px 0 14px;
    color: rgba(255, 255, 255, 0.92);
}

.fr-hero__title {
    font-size: var(--fs-hero-title);
    font-weight: 600;
    max-width: 18ch;
    text-wrap: balance;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25);
}

/* Capped hero (opt-in via .fr-hero--capped): past a certain width a
   100vw x 90svh box turns into an ever wider letterbox, so the photo is
   squeezed into a thinner and thinner band. On an ultrawide it shows barely
   a quarter of a portrait photo. Capping the width stops the box from
   growing and leaves the page background as a margin, which also gives the
   picture an edge to sit against instead of bleeding into the screen.
     Full HD  160px per side, and the photo gains 8 points of visible height
     2K/ultrawide  the box settles at 1.23 and stops degrading
   Below 1600px nothing changes. */
@media (min-width: 1600px) {
    .fr-hero--capped {
        max-width: 1600px;
        margin-inline: auto;
        margin-block-start: clamp(16px, 1.5vw, 28px);
        border-radius: var(--radius-md);
    }
}

/* Portrait hero (opt-in via .fr-hero--portrait): for vertical 3:4 photos of
   an angler holding a fish across the frame. The default 90svh box is far
   narrower than the photo on a phone (about 0.46 against 0.75), so cover crops
   roughly 19% off each side and beheads the fish. Cropping the file cannot fix
   that: cover only trims the sides when the source is wider than the box, so
   the box is what has to change. Here the phone hero takes the photo's own 3:4
   shape, which means no side crop at all. min-height (not height) so a long
   title still makes the box grow instead of being clipped.
   Tablet/desktop are untouched. */
@media (max-width: 767px) {
    .fr-hero.fr-hero--portrait {
        min-height: calc(100vw * 4 / 3);
    }
}

/* Wide hero (opt-in via .fr-hero--wide) — for landscape photos whose subject
   spans the full width (e.g. a double hook-up). The default tall, cover-cropped
   hero cuts off the sides on phones; here, phones instead show the WHOLE photo
   at its natural ratio and drop the caption onto a solid brand band below it.
   Tablet/desktop are untouched (standard overlay hero). */
@media (max-width: 767px) {
    .fr-hero.fr-hero--wide {
        display: block;
        min-height: 0;
        background-color: var(--color-forest-900);
    }

    /* Take the media out of the absolute cover box so it flows at full size. */
    .fr-hero--wide .fr-hero__media,
    .fr-hero--wide .fr-hero__media img {
        position: static;
        height: auto;
    }

    .fr-hero--wide .fr-hero__media img {
        aspect-ratio: auto;
        object-fit: contain;
    }

    /* No gradient needed — the caption sits on the solid band, not the photo. */
    .fr-hero--wide .fr-hero__inner::before {
        display: none;
    }

    .fr-hero--wide .fr-hero__inner {
        padding-block: clamp(22px, 6vw, 34px);
    }
}

/* ---------------------------------------------------------------------------
   Intro
--------------------------------------------------------------------------- */
.fr-intro .fr-lede {
    font-size: var(--fs-lede);
    line-height: 1.5;
    color: var(--color-ink-700);
}

/* ---------------------------------------------------------------------------
   Stats row (Anglers / Weather / Water)
--------------------------------------------------------------------------- */
.fr-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 48px);
    border-top: 1px solid
        color-mix(in srgb, var(--color-ink-900) 12%, transparent);
    border-bottom: 1px solid
        color-mix(in srgb, var(--color-ink-900) 12%, transparent);
    padding-block: clamp(28px, 4vw, 44px);
}

.fr-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fr-stat__icon {
    width: 34px;
    height: 34px;
    color: var(--color-forest-700);
}

.fr-stat__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fr-stat__label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-forest-700);
}

.fr-stat__value {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--color-ink-700);
    margin: 0;
}

.fr-stat__value strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5em;
    color: var(--color-ink-900);
    display: block;
}

@media (max-width: 639px) {
    .fr-stats {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* ---------------------------------------------------------------------------
   Section heading
--------------------------------------------------------------------------- */
.fr-section-head {
    max-width: 640px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

/* ---------------------------------------------------------------------------
   Split block (image + copy) — alternating
--------------------------------------------------------------------------- */
.fr-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 52px);
    align-items: center;
}

.fr-split + .fr-split {
    margin-top: clamp(40px, 6vw, 80px);
}

.fr-split__media {
    grid-column: 1;
}

.fr-split__body {
    grid-column: 1;
}

.fr-split__title {
    font-size: var(--fs-block-title);
    margin-bottom: 14px;
}

@media (min-width: 1024px) {
    .fr-split {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .fr-split__media {
        grid-column: 1;
    }

    .fr-split__body {
        grid-column: 2;
    }

    /* Reversed: copy on the left, media on the right */
    .fr-split--reverse .fr-split__media {
        grid-column: 2;
    }

    .fr-split--reverse .fr-split__body {
        grid-column: 1;
        grid-row: 1;
    }
}

/* ---------------------------------------------------------------------------
   Figures & image placeholders
--------------------------------------------------------------------------- */
.fr-figure {
    margin: 0;
}

.fr-figure img {
    width: 100%;
    border-radius: var(--radius-xs);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.fr-figure--wider img {
    aspect-ratio: 3 / 2 !important;
}

.fr-figure--some-wide img {
    aspect-ratio: 5 / 4 !important;
}

.fr-figure--tall img {
    aspect-ratio: 3 / 3 !important;
}

.fr-figure--taller img {
    aspect-ratio: 3 / 4 !important;
}

.fr-figure--even-taller img {
    aspect-ratio: 3 / 6 !important;
}

.fr-figure--wide img {
    aspect-ratio: 16 / 9 !important;
}

.fr-figure--bottom img {
    object-position: 50% 85%;
}

.fr-figure--top img {
    object-position: 50% 25%;
}

.fr-figure--midtop img {
    object-position: 50% 35%;
}

/* Placeholder shown until a real <img> is dropped in */
.fr-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    padding: 20px;
    border-radius: var(--radius-xs);
    background-color: color-mix(
        in srgb,
        var(--color-sage-300) 38%,
        var(--color-cream-50)
    );
    border: 1px dashed
        color-mix(in srgb, var(--color-forest-700) 45%, transparent);
    color: var(--color-forest-700);
}

.fr-ph--wide {
    aspect-ratio: 16 / 9 !important;
}

.fr-ph__label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    max-width: 32ch;
}

.fr-ph__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--color-sage-700);
    word-break: break-all;
}

.fr-ph__icon {
    width: 30px;
    height: 30px;
    opacity: 0.65;
}

/* ---------------------------------------------------------------------------
   Video — behaves like an image inside figures, galleries and the lightbox.
     · Highlight (plays inline where it sits):
         <figure class="fr-figure fr-figure--video">
           <video class="fr-video" controls playsinline poster="…">
             <source src="clip.mp4" type="video/mp4" />
           </video>
         </figure>
     · Gallery (opens in the lightbox and plays there — see report.js):
         <figure class="fr-gallery__item fr-gallery__item--video"
                 data-lightbox data-video="clip.mp4" data-video-type="video/mp4">
           <img src="poster.jpg" alt="" />
           <span class="fr-play-badge" aria-hidden="true"><svg …/></span>
         </figure>
--------------------------------------------------------------------------- */
/* A <video> fills its figure exactly like an <img>, reusing the aspect hooks. */
.fr-figure .fr-video,
.fr-figure video {
    display: block;
    width: 100%;
    border-radius: var(--radius-xs);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #000;
}

.fr-figure--tall .fr-video,
.fr-figure--tall video {
    aspect-ratio: 3 / 3 !important;
}

.fr-figure--taller .fr-video,
.fr-figure--taller video {
    aspect-ratio: 3 / 4 !important;
}

.fr-figure--even-taller .fr-video,
.fr-figure--even-taller video {
    aspect-ratio: 3 / 6 !important;
}

.fr-figure--wide .fr-video,
.fr-figure--wide video {
    aspect-ratio: 16 / 9 !important;
}

/* Gallery video tile: same footprint as a photo tile, plus a play badge. */
.fr-gallery__item--video {
    position: relative;
    cursor: zoom-in;
}

/* Centered "play" affordance over a video poster. */
.fr-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: clamp(44px, 22%, 60px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(35, 42, 38, 0.55);
    color: #fff;
    pointer-events: none;
    transition:
        background var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.fr-play-badge svg {
    width: 46%;
    height: 46%;
    margin-left: 6%; /* optical centering of the triangle */
}

.fr-gallery__item--video:hover .fr-play-badge {
    background: rgba(35, 42, 38, 0.72);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Video playing inside the lightbox. */
.fr-lightbox__video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-xs);
    background: #000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.fr-lightbox__img[hidden],
.fr-lightbox__video[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Looking ahead + signature
--------------------------------------------------------------------------- */
.fr-signature {
    margin-top: clamp(28px, 4vw, 44px);
}

.fr-signature__role {
    font-family: var(--font-display);
    font-size: 1.05em;
    color: var(--color-ink-900);
    margin: 0;
}

.fr-signature__lodge {
    font-size: 0.95em;
    color: var(--color-sage-700);
    margin: 2px 0 0;
}

/* ---------------------------------------------------------------------------
   Gallery — single-row carousel
   The track is a horizontal scroll-snap strip. report.js enhances it by
   wrapping it in .fr-carousel and injecting the prev/next arrows; without
   JS the strip is still swipeable / scrollable, so it degrades gracefully.
   The number of gap/visible values is the single source for item sizing.
--------------------------------------------------------------------------- */
:root {
    --gallery-gap: clamp(12px, 2vw, 20px);
    --gallery-visible: 3; /* items in view on desktop */
}

@media (max-width: 1023px) {
    :root {
        --gallery-visible: 2;
    }
}

@media (max-width: 639px) {
    :root {
        --gallery-visible: 1.15; /* peek the next photo on mobile */
    }
}

.fr-carousel {
    position: relative;
}

.fr-gallery {
    display: flex;
    gap: var(--gallery-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* Inset so focus rings / hover scale aren't clipped by the arrows. */
    padding-block: 2px;
}

.fr-gallery::-webkit-scrollbar {
    display: none; /* WebKit */
}

.fr-gallery__item {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    flex: 0 0 auto;
    width: calc(
        (100% - (var(--gallery-visible) - 1) * var(--gallery-gap)) /
            var(--gallery-visible)
    );
    overflow: hidden;
    border-radius: var(--radius-xs);
    scroll-snap-align: start;
}

.fr-gallery__item:has(img) {
    cursor: zoom-in;
}

.fr-gallery__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-standard);
}

.fr-gallery__item:hover img {
    transform: scale(1.04);
}

.fr-gallery .fr-ph {
    aspect-ratio: 1 / 1;
}

/* Prev / next arrows (injected by report.js). */
.fr-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(40px, 4vw, 52px);
    height: clamp(40px, 4vw, 52px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-cream-50);
    color: var(--color-forest-700);
    box-shadow: 0 4px 14px rgba(35, 58, 48, 0.25);
    cursor: pointer;
    transition:
        opacity var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.fr-carousel__nav:hover {
    background-color: var(--color-cream-100);
}

.fr-carousel__nav:active {
    transform: translateY(-50%) scale(0.94);
}

.fr-carousel__nav--prev {
    left: clamp(-10px, -1vw, 0px);
}

.fr-carousel__nav--next {
    right: clamp(-10px, -1vw, 0px);
}

.fr-carousel__nav svg {
    width: 45%;
    height: 45%;
}

.fr-carousel__nav--next svg {
    transform: scaleX(-1);
}

.fr-carousel__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 639px) {
    .fr-carousel__nav--prev {
        left: 4px;
    }

    .fr-carousel__nav--next {
        right: 4px;
    }
}

/* ---------------------------------------------------------------------------
   Read more (sibling report card)
--------------------------------------------------------------------------- */
.fr-readmore {
    background-color: var(--color-band-surface);
    color: var(--color-band-text);
}

.fr-readmore__head {
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* Grid wrapper when a report links to more than one sibling. A single card
   inside stretches full width; two or more sit side by side on wider screens. */
.fr-readmore__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 28px);
}

@media (min-width: 768px) {
    .fr-readmore__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fr-readmore__card {
    position: relative;
    display: block;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-sm);
    min-height: clamp(220px, 32vw, 340px);
    color: #fff;
    text-decoration: none;
}

.fr-readmore__media,
.fr-readmore__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.fr-readmore__media img {
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-standard);
}

.fr-readmore__media .fr-ph {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

.fr-readmore__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(35, 58, 48, 0.25) 0%,
        rgba(35, 58, 48, 0.78) 100%
    );
}

.fr-readmore__card:hover .fr-readmore__media img {
    transform: scale(1.04);
}

.fr-readmore__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    padding: clamp(22px, 3vw, 38px);
}

.fr-readmore__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-block-title);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.fr-readmore__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.9em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-500);
}

.fr-readmore__cta svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-base) var(--ease-standard);
}

.fr-readmore__card:hover .fr-readmore__cta svg {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   Lightbox
--------------------------------------------------------------------------- */
.fr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(35, 42, 38, 0.92);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.fr-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.fr-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-xs);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.fr-lightbox__close {
    position: absolute;
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard);
}

.fr-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.fr-lightbox__close svg {
    width: 22px;
    height: 22px;
}

/* Prev / next arrows inside the lightbox (injected by report.js). */
.fr-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: clamp(40px, 5vw, 52px);
    height: clamp(40px, 5vw, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition:
        background var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard);
}

.fr-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.fr-lightbox__nav--prev {
    left: clamp(8px, 2vw, 24px);
}

.fr-lightbox__nav--next {
    right: clamp(8px, 2vw, 24px);
}

.fr-lightbox__nav svg {
    width: 45%;
    height: 45%;
}

.fr-lightbox__nav--next svg {
    transform: scaleX(-1);
}

.fr-lightbox__nav[disabled] {
    opacity: 0.3;
    pointer-events: none;
}

.fr-lightbox__nav[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Scroll reveal (progressive enhancement)
--------------------------------------------------------------------------- */
.fr-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 600ms var(--ease-standard),
        transform 600ms var(--ease-standard);
    will-change: opacity, transform;
}

.fr-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fr-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Site chrome (opt-in)
   A reader who lands here from a newsletter or a share has no way back into
   the destination while the main site is being rebuilt. This bar gives them
   one: the wordmark and the breadcrumb both return to the report index, and
   it sticks so the way out is always one tap away.
     <header class="fr-topbar">
       <div class="fr-topbar__inner">
         <a class="fr-topbar__brand" href="…"><img src="…" alt="…" /></a>
         <nav class="fr-topbar__crumbs" aria-label="Breadcrumb">
           <ol><li><a href="…">Fishing Reports</a></li>
               <li aria-current="page">Week 10</li></ol>
         </nav>
       </div>
     </header>
--------------------------------------------------------------------------- */
.fr-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--color-cream-50);
    border-bottom: 1px solid var(--color-cream-200);
}

.fr-topbar__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
    padding-block: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fr-topbar__brand {
    display: block;
    flex: 0 0 auto;
}

.fr-topbar__brand img {
    height: clamp(26px, 3.4vw, 34px);
    width: auto;
}

.fr-topbar__crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fr-topbar__crumbs a {
    color: var(--color-forest-700);
    text-decoration: none;
}

.fr-topbar__crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Current page: muted ink so it never reads as a link. */
.fr-topbar__crumbs [aria-current] {
    color: var(--color-ink-700);
}

.fr-topbar__crumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--color-cream-200);
}

/* Tight screens keep the way out and drop the current page. */
@media (max-width: 639px) {
    .fr-topbar__crumbs li + li {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Single-photo carousel (opt-in)
   One square at a time inside a .fr-split__media, browsed with the arrows
   report.js injects. Add [data-autoplay] to have it advance on its own; see
   report.js.
--------------------------------------------------------------------------- */
.fr-gallery--single {
    --gallery-visible: 1;
}

/* ---------------------------------------------------------------------------
   Read more — one card with no sibling spans the band instead of sitting in
   a half-width column.
--------------------------------------------------------------------------- */
.fr-readmore__grid--single {
    grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
   Previous report
   Sits under "More From This Week" and carries the reader back one week, so
   the series can be walked rather than dead-ending at whichever report the
   share happened to point at.
--------------------------------------------------------------------------- */
.fr-prevweek__link {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px clamp(14px, 2vw, 24px);
    padding-block: clamp(18px, 2.5vw, 26px);
    border-top: 1px solid
        color-mix(in srgb, var(--color-sage-500) 40%, transparent);
    text-decoration: none;
    color: inherit;
}

.fr-prevweek__label {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-forest-700);
}

.fr-prevweek__title {
    font-family: var(--font-display);
    font-size: var(--fs-block-title);
    line-height: 1.25;
    color: var(--color-ink-900);
}

.fr-prevweek__link:hover .fr-prevweek__title {
    text-decoration: underline;
    text-underline-offset: 4px;
}