/* =============================================================================
   The Wedding Guest Photo Report - press data report
   =============================================================================
   Brand palette and faces throughout. The one place this page spends its
   boldness is the hour-by-hour day chart, so everything around it stays quiet:
   flat colour, hairline rules, no shadows, no radius on data marks.
   ============================================================================= */

.report-page {
    --rp-ink: #2C2C2C;
    --rp-muted: #6C6C6C;
    --rp-paper: #FEFDFB;
    --rp-warm: #F5F3F0;
    --rp-rule: #E5E1DB;
    --rp-sage: #8B9D83;
    --rp-sage-deep: #6B7D63;
    --rp-sage-pale: #C3CEBD;
    /* Stone reads instantly as "not sage" without leaving the neutral family. */
    --rp-stone: #CBC3B8;

    background: var(--rp-paper);
}

.report-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.report-wrap-narrow {
    max-width: 660px;
}

.report h2,
.report h1 {
    font-family: var(--font-heading);
    color: var(--rp-ink);
    font-weight: 500;
}

/* ---------------------------------------------------------------- hero */

.report-hero {
    padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--rp-rule);
}


.report-hero h1 {
    font-size: clamp(2.4rem, 7.5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-md);
    max-width: 16ch;
}

.report-h1-season {
    display: block;
    font-size: 0.42em;
    letter-spacing: 0;
    color: var(--rp-sage-deep);
    margin-top: 0.6em;
}

/* ---------------------------------------------------------------- founder comment */

.report-comment {
    margin: var(--spacing-lg) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--rp-rule);
    max-width: 62ch;
}

.report-comment blockquote {
    margin: 0;
}

.report-comment blockquote p {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    line-height: 1.5;
    color: var(--rp-ink);
    margin: 0 0 var(--spacing-xs);
}

.report-comment figcaption {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rp-muted);
}

.report-standfirst {
    font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
    line-height: 1.6;
    color: var(--rp-ink);
    max-width: 62ch;
    margin: 0;
}


/* ---------------------------------------------------------------- sections */

.report-intro-section,
.report-chart-section,
.report-figures-section,
.report-arrival-section,
.report-weekday-section,
.report-keen-section,
.report-method-section,
.report-press-section {
    padding: clamp(2.75rem, 7vw, 5rem) 0;
}

.report-figures-section,
.report-press-section {
    background: var(--rp-warm);
}

.report-weekday-section,
.report-keen-section {
    border-bottom: 1px solid var(--rp-rule);
}

.report-weekday-section p,
.report-keen-section p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--rp-ink);
    margin: 0 0 var(--spacing-sm);
}

.report .report-h2-small {
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rp-muted);
    margin-bottom: var(--spacing-md);
}

.report-h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--rp-ink);
    margin: var(--spacing-lg) 0 var(--spacing-xs);
}

.report .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- key findings */

.report-keys-section {
    padding: clamp(2rem, 5vw, 3rem) 0;
    border-bottom: 1px solid var(--rp-rule);
}

.report-keys {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--spacing-md) var(--spacing-lg);
}

.report-keys a {
    display: block;
    border-top: 2px solid var(--rp-sage);
    padding-top: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.report-key-n {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.05;
    color: var(--rp-ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

.report-key-t {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--rp-ink);
}

/* ---------------------------------------------------------------- keen guest, weekday */

.report-keen-n {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 14vw, 7rem) !important;
    line-height: 1 !important;
    color: var(--rp-sage-deep) !important;
    margin: 0 0 var(--spacing-sm) !important;
    font-variant-numeric: tabular-nums;
}

.report-figures.report-figures-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}


/* ---------------------------------------------------------------- downloads */

.report-downloads {
    list-style: none;
    margin: 0;
    padding: 0;
}

.report-downloads li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rp-rule);
}



.report-h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--spacing-sm);
}

.report-lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--rp-muted);
    max-width: 60ch;
    margin: 0 0 var(--spacing-lg);
}

.report-intro-section p,
.report-method-section p,
.report-press-section p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--rp-ink);
    margin: 0 0 var(--spacing-sm);
}

.report-intro-section {
    border-bottom: 1px solid var(--rp-rule);
}

/* ---------------------------------------------------------------- day chart */

.daychart-figure {
    margin: 0;
}

.daychart {
    border-bottom: 1px solid var(--rp-ink);
    padding-bottom: 0.5rem;
}

.daychart-plot {
    display: grid;
    grid-template-columns: repeat(var(--cols, 18), 1fr);
    gap: clamp(2px, 0.5vw, 7px);
    align-items: end;
    height: clamp(200px, 34vw, 340px);
}

.daychart-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.daychart-bar {
    display: block;
    height: var(--h);
    background: var(--rp-sage);
    transform-origin: bottom;
}

.daychart-col.is-peak .daychart-bar {
    background: var(--rp-sage-deep);
}

/* The dip is told by height first. The lighter fill and dotted cap only
   confirm what the shape already says. */
.daychart-col.is-dip .daychart-bar {
    background: var(--rp-sage-pale);
    border-top: 2px dotted var(--rp-sage-deep);
}

.daychart-value {
    position: absolute;
    bottom: calc(var(--h) + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rp-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    white-space: nowrap;
}

.daychart-col.is-peak .daychart-value,
.daychart-col.is-dip .daychart-value {
    opacity: 1;
    color: var(--rp-ink);
}

.daychart-hour {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--rp-muted);
    font-variant-numeric: tabular-nums;
}

.daychart-col.is-peak .daychart-hour,
.daychart-col.is-dip .daychart-hour {
    color: var(--rp-ink);
    font-weight: 700;
}

.daychart-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin: calc(var(--spacing-lg) + 0.75rem) 0 var(--spacing-md);
}

.daychart-note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rp-muted);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 2px solid var(--rp-rule);
}

.daychart-note-peak { border-top-color: var(--rp-sage-deep); }
.daychart-note-dip  { border-top-color: var(--rp-sage-pale); }

.daychart-note-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--rp-ink);
    margin-bottom: 0.2rem;
}

.report-caption {
    font-size: 0.8125rem;
    color: var(--rp-muted);
    margin: 0;
}

/* ---------------------------------------------------------------- details table */

.report-details {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--rp-rule);
    padding-top: var(--spacing-sm);
}

.report-details summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rp-sage-deep);
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.report-table caption {
    text-align: left;
    color: var(--rp-muted);
    font-size: 0.8125rem;
    padding-bottom: var(--spacing-xs);
}

.report-table th,
.report-table td {
    text-align: right;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--rp-rule);
}

.report-table thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rp-muted);
    font-weight: 600;
}

.report-table tbody th {
    text-align: left;
    font-weight: 500;
}

/* ---------------------------------------------------------------- figures */

.report-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--spacing-lg);
    margin: 0 0 var(--spacing-lg);
}

.report-figure {
    border-top: 2px solid var(--rp-sage);
    padding-top: var(--spacing-sm);
}

.report-figure dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rp-muted);
    margin-bottom: 0.5rem;
}

.report-figure dd {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 6vw, 3.75rem);
    line-height: 1;
    color: var(--rp-ink);
    margin: 0 0 0.5rem;
    font-variant-numeric: tabular-nums;
}

.report-figure p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--rp-muted);
    margin: 0;
}

.report-aside {
    font-size: 0.9375rem;
    color: var(--rp-muted);
    border-left: 2px solid var(--rp-sage-pale);
    padding-left: var(--spacing-sm);
    margin: 0;
    max-width: 60ch;
}

/* ---------------------------------------------------------------- arrival by day */

/* Same columns as the day chart. Every value shows here: ten columns leave
   room, and the percentages are the point. Grouped ranges are drawn in stone
   so they never read as a single day. */
.daychart-days .daychart-value {
    opacity: 1;
}

.daychart-days .daychart-col.is-day .daychart-bar {
    background: var(--rp-sage-deep);
}

.daychart-days .daychart-col.is-peak .daychart-bar {
    background: var(--rp-sage-deep);
}

.daychart-days .daychart-col.is-range .daychart-bar {
    background: var(--rp-stone);
}

.daychart-days .daychart-hour {
    white-space: nowrap;
}

.daychart-days .daychart-notes {
    margin-top: calc(var(--spacing-lg) + 0.75rem);
}

.report-arrival-section .report-pull {
    margin-top: var(--spacing-lg);
}

.report-pull {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 3.6vw, 2.125rem);
    line-height: 1.28;
    color: var(--rp-ink);
    border-left: 3px solid var(--rp-sage);
    padding-left: var(--spacing-md);
    margin: 0;
    max-width: 24ch;
}

/* ---------------------------------------------------------------- press */

.report-credit {
    font-size: 0.9375rem !important;
    background: var(--rp-paper);
    border: 1px solid var(--rp-rule);
    padding: var(--spacing-sm);
    color: var(--rp-ink) !important;
}

.report-about {
    font-size: 0.875rem !important;
    color: var(--rp-muted) !important;
    border-top: 1px solid var(--rp-rule);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-lg) !important;
}

.report-press-section a {
    color: var(--rp-sage-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .report-press-section a:hover {
        color: var(--rp-ink);
    }
    .report-details summary:hover {
        color: var(--rp-ink);
    }
}

/* ---------------------------------------------------------------- hero entrance */

/* The hero is above the fold, so it animates on load rather than on scroll.
   Pure CSS with `backwards` fill: no script involved, so there is no path where
   a JS failure leaves the headline invisible. Deliberately quick - this is the
   first thing a journalist reads, and making them wait for it would be rude.

   Same rise-and-fade as everything else on the page, just sequenced. */
@media (prefers-reduced-motion: no-preference) {
    .report-hero h1,
    .report-hero .report-standfirst {
        animation: rp-hero-in 600ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }

    .report-hero h1                 { animation-delay: 140ms; }
    .report-hero .report-standfirst { animation-delay: 260ms; }

    /* The rule under the hero draws itself in as the text settles. */
    .report-hero {
        animation: rp-rule-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards 420ms;
    }
}

@keyframes rp-hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rp-rule-in {
    from { border-bottom-color: transparent; }
    to   { border-bottom-color: var(--rp-rule); }
}

/* ---------------------------------------------------------------- motion */

/* One motion vocabulary for the whole page: a short rise and fade. Everything
   uses it, nothing does anything else. Scattered effects are what make a page
   feel restless.

   All of this is scoped to [data-reveal], which wedding-photo-report.js sets
   only when the browser supports IntersectionObserver AND the reader has not
   asked for reduced motion. Without it nothing here applies and the report is
   simply visible, which is the correct fallback. */

/* Containers whose children stagger in are excluded: they would otherwise fade
   as a block AND have every child fade inside them, which reads as mush.
   Only charts and figure groups carry data-reveal-group; headings and text
   are never hidden. */
.report[data-reveal] [data-reveal-group]:not(.report-figures) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.report[data-reveal] [data-reveal-group].is-revealed:not(.report-figures) {
    opacity: 1;
    transform: none;
}

/* The day builds itself hour by hour, but only once it is actually on screen.
   Previously this ran on page load, so on a phone it had finished before the
   chart was ever scrolled into view. */
.report[data-reveal] .daychart-figure .daychart-bar {
    transform: scaleY(0);
}

.report[data-reveal] .daychart-figure.is-revealed .daychart-bar {
    animation: rp-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.report[data-reveal] .daychart-figure .daychart-col:nth-child(1)  .daychart-bar { animation-delay: 40ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(2)  .daychart-bar { animation-delay: 75ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(3)  .daychart-bar { animation-delay: 110ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(4)  .daychart-bar { animation-delay: 145ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(5)  .daychart-bar { animation-delay: 180ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(6)  .daychart-bar { animation-delay: 215ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(7)  .daychart-bar { animation-delay: 250ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(8)  .daychart-bar { animation-delay: 285ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(9)  .daychart-bar { animation-delay: 320ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(10) .daychart-bar { animation-delay: 355ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(11) .daychart-bar { animation-delay: 390ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(12) .daychart-bar { animation-delay: 425ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(13) .daychart-bar { animation-delay: 460ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(14) .daychart-bar { animation-delay: 495ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(15) .daychart-bar { animation-delay: 530ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(16) .daychart-bar { animation-delay: 565ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(17) .daychart-bar { animation-delay: 600ms; }
.report[data-reveal] .daychart-figure .daychart-col:nth-child(18) .daychart-bar { animation-delay: 635ms; }

/* The peak and dip figures arrive after their bars have finished, so the eye
   reaches the numbers having already seen the shape. */
.report[data-reveal] .daychart-figure .daychart-col.is-peak .daychart-value,
.report[data-reveal] .daychart-figure .daychart-col.is-dip .daychart-value {
    opacity: 0;
    transition: opacity 400ms ease 820ms;
}

.report[data-reveal] .daychart-figure.is-revealed .daychart-col.is-peak .daychart-value,
.report[data-reveal] .daychart-figure.is-revealed .daychart-col.is-dip .daychart-value {
    opacity: 1;
}

/* Grouped items settle in sequence rather than all at once. The notes and the
   arrival notes ride on their parent chart's reveal. */
.report[data-reveal] .daychart-figure .daychart-notes > *,
.report[data-reveal] .report-figures[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.report[data-reveal] .daychart-figure.is-revealed .daychart-notes > *,
.report[data-reveal] .report-figures[data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
}

.report[data-reveal] .daychart-notes > *:nth-child(2),
.report[data-reveal] .report-figures[data-reveal-group] > *:nth-child(2) { transition-delay: 90ms; }

.report[data-reveal] .daychart-notes > *:nth-child(3),
.report[data-reveal] .report-figures[data-reveal-group] > *:nth-child(3) { transition-delay: 180ms; }

.report[data-reveal] .report-figures[data-reveal-group] > *:nth-child(4) { transition-delay: 270ms; }


.report[data-reveal] .daychart-days .daychart-value {
    opacity: 0;
    transition: opacity 400ms ease 820ms;
}

.report[data-reveal] .daychart-days.is-revealed .daychart-value {
    opacity: 1;
}

@keyframes rp-rise {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 640px) {
    .daychart-plot {
        height: 200px;
        gap: 2px;
    }
    /* At this width every second hour label is legible; the rest would collide. */
    .daychart-col:nth-child(even) .daychart-hour {
        display: none;
    }
    /* Ten columns leave room for every label, and +1 is the one that matters. */
    .daychart-days .daychart-col:nth-child(even) .daychart-hour {
        display: block;
    }
    .daychart-days .daychart-hour {
        font-size: 0.5625rem;
    }
    .daychart-value {
        font-size: 0.5625rem;
    }
    .report-pull {
        max-width: none;
    }
}