@charset "UTF-8";
/* ===========================================================================
   In Loving Memory of John Wesley Duewel — johnduewel.com

   Written mobile-first. Most people will arrive here from a WhatsApp message
   on a phone, so the small screen is the design and the desktop is the
   enhancement, not the other way round.

   Palette: deep forest green, warm ivory, antique gold. Photographs supply
   all the other colour.
   =========================================================================== */

@import url("../fonts/fonts.css");

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
    /* Greens — the trail, the hills, the trees */
    --forest-900: #0F2318;
    --forest-800: #15301F;
    --forest-700: #1C3D2A;
    --forest-600: #245039;
    --forest-500: #33684B;
    --sage-400:   #7A9B84;
    --sage-300:   #A3BCA9;
    --sage-200:   #C9D8CA;

    /* Warm papers — hash paper, ivory, cream */
    --ivory-50:   #FDFBF6;
    --ivory-100:  #F8F3E8;
    --ivory-200:  #EFE7D6;
    --ivory-300:  #E2D7C1;

    /* Antique gold — used sparingly */
    --gold-700:   #7A6130;
    --gold-600:   #9A7B3F;
    --gold-500:   #B4924E;
    --gold-400:   #CDB075;

    /* Ink */
    --ink-900:    #1F241D;
    --ink-700:    #3A4136;
    --ink-600:    #4C5449;
    --ink-400:    #6E766B;

    --white: #FFFFFF;

    /* Semantic */
    --bg:            var(--ivory-50);
    --bg-alt:        var(--ivory-100);
    --text:          var(--ink-900);
    --text-muted:    var(--ink-600);
    --rule:          var(--ivory-300);
    --accent:        var(--gold-600);
    --accent-strong: var(--gold-700);

    /* Type */
    --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-script: "Petit Formal Script", "Cormorant Garamond", cursive;

    /* Space */
    --gutter: 1.25rem;
    --section-y: 3.5rem;
    --measure: 38rem;

    --radius: 3px;
    --radius-lg: 6px;

    --shadow-sm: 0 1px 2px rgba(15, 35, 24, .06), 0 2px 8px rgba(15, 35, 24, .05);
    --shadow-md: 0 4px 14px rgba(15, 35, 24, .09), 0 12px 36px rgba(15, 35, 24, .07);
    --shadow-lg: 0 18px 50px rgba(15, 35, 24, .18);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48rem) {
    :root {
        --gutter: 2rem;
        --section-y: 5.5rem;
    }
}

@media (min-width: 75rem) {
    :root {
        --gutter: 2.5rem;
        --section-y: 7rem;
    }
}

/* ---------------------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

@media (min-width: 48rem) {
    body { font-size: 1.125rem; }
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.005em;
    color: var(--forest-800);
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-strong); }

strong { font-weight: 600; }

:focus-visible {
    outline: 3px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--sage-200); color: var(--forest-900); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------------------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: 52rem; }
.measure { max-width: var(--measure); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }

.section--cream { background: var(--bg-alt); }

.section--forest {
    background: var(--forest-800);
    color: var(--ivory-100);
}
/* Any section on a dark ground needs its headings lifted off the default
   forest-green ink, or they vanish into the background. */
.section--forest h1, .section--forest h2, .section--forest h3,
.trail-section h1, .trail-section h2, .trail-section h3 { color: var(--ivory-50); }
/* Links, but not buttons: a .btn carries its own colour pair, and letting the
   section rule win here turned the gold call-to-action into gold-on-gold. */
.section--forest a:not(.btn), .trail-section a:not(.btn) { color: var(--gold-400); }
.section--forest a:not(.btn):hover, .trail-section a:not(.btn):hover { color: var(--white); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--forest-800);
    color: var(--ivory-50);
    padding: .85rem 1.25rem;
    font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   4. Shared decorative pieces — the paper trail motif
   --------------------------------------------------------------------------- */

/* Section eyebrow: small caps label above a heading. */
.eyebrow {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin: 0 0 .9rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--gold-400), transparent);
    max-width: 6rem;
}
.section--forest .eyebrow, .trail-section .eyebrow { color: var(--gold-400); }
.section--forest .eyebrow::after,
.trail-section .eyebrow::after { background: linear-gradient(to right, var(--gold-600), transparent); }

/* Three torn scraps of hash paper, used as a divider. */
.paper-marks {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.paper-marks span {
    display: block;
    width: 13px;
    height: 9px;
    background: var(--ivory-300);
    box-shadow: 0 1px 1px rgba(15, 35, 24, .12);
}
.paper-marks span:nth-child(1) { clip-path: polygon(4% 18%, 96% 0, 100% 78%, 12% 100%); transform: rotate(-7deg); }
.paper-marks span:nth-child(2) { clip-path: polygon(0 6%, 92% 12%, 100% 90%, 6% 82%);  transform: rotate(5deg); }
.paper-marks span:nth-child(3) { clip-path: polygon(8% 0, 100% 22%, 90% 100%, 0 74%);  transform: rotate(-3deg); }
.section--forest .paper-marks span { background: var(--gold-500); }

.trail-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
}
.trail-rule::before,
.trail-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background-image: linear-gradient(to right, var(--ivory-300) 0 6px, transparent 6px 12px);
    background-size: 12px 1px;
}
.section--forest .trail-rule::before,
.section--forest .trail-rule::after {
    background-image: linear-gradient(to right, var(--forest-500) 0 6px, transparent 6px 12px);
}

.script {
    font-family: var(--font-script);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .97rem;
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.2;
    padding: .9rem 1.55rem;
    min-height: 2.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--forest-700);
    color: var(--ivory-50);
    border-color: var(--forest-700);
}
.btn--primary:hover { background: var(--forest-600); border-color: var(--forest-600); color: var(--white); }

.btn--ghost {
    background: transparent;
    color: var(--forest-700);
    border-color: var(--sage-300);
}
.btn--ghost:hover { background: var(--ivory-100); border-color: var(--forest-600); color: var(--forest-800); }

.btn--light {
    background: rgba(253, 251, 246, .1);
    color: var(--ivory-50);
    border-color: rgba(205, 176, 117, .55);
    backdrop-filter: blur(6px);
}
.btn--light:hover { background: var(--ivory-50); color: var(--forest-800); border-color: var(--ivory-50); }

.btn--gold { background: var(--gold-600); border-color: var(--gold-600); color: #211903; }
.btn--gold:hover { background: var(--gold-500); border-color: var(--gold-500); }

.btn--wide { width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* ---------------------------------------------------------------------------
   6. Site header
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(253, 251, 246, .93);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--ivory-200);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}

/* Over the hero the header floats transparently until the visitor scrolls. */
.page-home .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}

/* The photograph has a bright, misty sky along its top edge. This gradient
   guarantees the navigation stays readable over it without putting a solid bar
   across the picture. */
.page-home .site-header:not(.is-scrolled)::before {
    content: "";
    position: absolute;
    inset: 0 0 -2.5rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(15, 35, 24, .62) 0%,
        rgba(15, 35, 24, .34) 55%,
        rgba(15, 35, 24, 0) 100%);
}
.page-home .site-header:not(.is-scrolled) .site-header__name {
    color: var(--ivory-50);
    text-shadow: 0 1px 12px rgba(15, 35, 24, .55);
}
.page-home .site-header:not(.is-scrolled) .nav-toggle { color: var(--ivory-50); }
.page-home .site-header:not(.is-scrolled) .nav-toggle span { background: var(--ivory-50); }

/* The links themselves only turn ivory from the width at which the navigation
   sits directly on the photograph. Below that it is a drop-down panel with its
   own cream background, where ivory text would be invisible. */
@media (min-width: 62rem) {
    .page-home .site-header:not(.is-scrolled) .site-nav a {
        color: var(--ivory-50);
        text-shadow: 0 1px 10px rgba(15, 35, 24, .6);
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
}

.site-header__name {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 500;
    letter-spacing: .015em;
    color: var(--forest-800);
    text-decoration: none;
    line-height: 1.15;
    transition: color .3s var(--ease);
}
.site-header__name small {
    display: block;
    font-family: var(--font-body);
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    opacity: .72;
    margin-top: .1rem;
}

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: .55rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--forest-800);
}
.nav-toggle span {
    display: block;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Mobile: the menu drops out of the header. */
@media (max-width: 61.99rem) {
    .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--ivory-50);
        border-bottom: 1px solid var(--ivory-200);
        box-shadow: var(--shadow-md);
        display: none;
    }
    .site-nav.is-open { display: block; }
    .site-nav ul { padding: .5rem var(--gutter) 1.25rem; }
    .site-nav li + li { border-top: 1px solid var(--ivory-200); }
    .site-nav a {
        display: block;
        padding: .95rem .25rem;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--forest-800);
        text-decoration: none;
    }
    .site-nav a[aria-current="page"] { color: var(--accent-strong); }
    .site-nav .nav-cta { margin-top: .9rem; border-top: 0; }
    .site-nav .nav-cta a {
        background: var(--forest-700);
        color: var(--ivory-50);
        text-align: center;
        border-radius: var(--radius);
        padding: .9rem 1rem;
        font-weight: 600;
    }
}

@media (min-width: 62rem) {
    .nav-toggle { display: none; }
    .site-nav ul {
        display: flex;
        align-items: center;
        gap: .35rem;
    }
    .site-nav a {
        display: inline-block;
        padding: .5rem .8rem;
        font-size: .93rem;
        font-weight: 500;
        letter-spacing: .015em;
        color: var(--forest-700);
        text-decoration: none;
        border-radius: var(--radius);
        transition: color .2s var(--ease), background-color .2s var(--ease);
    }
    .site-nav a:hover { color: var(--forest-900); background: rgba(122, 155, 132, .14); }
    .site-nav a[aria-current="page"] { color: var(--accent-strong); }
    .site-nav .nav-cta a {
        margin-left: .5rem;
        border: 1px solid var(--sage-300);
        padding: .5rem 1.05rem;
    }
    .page-home .site-header:not(.is-scrolled) .nav-cta a { border-color: rgba(253, 251, 246, .5); }
}

/* ---------------------------------------------------------------------------
   7. Hero

   The hero photograph is a tall portrait: John on the trail steps, with the
   whole valley and a cloud-topped mountain behind him. That shape does not
   survive being cropped into a wide banner — either he disappears or the
   mountain does. So the layout changes rather than the photograph:

     phones   the photograph fills the screen and the words sit over its
              lower third, which is where the frame is quietest
     desktop  the photograph keeps its own tall panel beside the words, so
              almost nothing is cropped away
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    margin-top: -4rem;              /* sit underneath the transparent header */
    background: var(--forest-900);
    color: var(--ivory-50);
    isolation: isolate;
}

/* An explicit share of the screen for the picture, rather than "whatever is
   left over". It keeps the whole hero — photograph, name, dates and the hash
   name — on one screen of a phone, which is where nearly everyone will meet
   this page for the first time. */
.hero__body {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 46svh auto;
}

.hero__media {
    position: relative;
    grid-row: 1;
    overflow: hidden;
    min-height: 17rem;
}

/* <picture> is display:inline by default and the base reset gives it
   height:auto, so it has to be told to fill its box before the image inside it
   can do the same. */
.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* John stands lower right. Favouring that corner keeps him, the steps and
       the valley in frame while the hillside fills the rest. */
    object-position: 64% 62%;
}

/* Warm, not black. Dark enough to read white type over, light enough that the
   green of the hillside still reads as green. */
/* Only two jobs on a phone: keep the navigation readable over the misty sky
   at the top, and let the foot of the picture settle into the green the words
   sit on, so there is no hard line across the middle of the screen. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(15, 35, 24, .58) 0%,
            rgba(15, 35, 24, .16) 14%,
            rgba(15, 35, 24, 0) 30%,
            rgba(15, 35, 24, 0) 74%,
            rgba(15, 35, 24, .55) 92%,
            var(--forest-900) 100%);
}

.hero__content {
    position: relative;
    z-index: 2;
    grid-row: 2;
    width: 100%;
    background: var(--forest-900);
    padding: 1.1rem var(--gutter) 2.25rem;
}

.hero__kicker {
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin: 0 0 1rem;
}

.hero__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.45rem, 11.2vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.015em;
    color: var(--white);
    margin: 0 0 .45rem;
    text-shadow: 0 2px 34px rgba(15, 35, 24, .6);
}

.hero__dates {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 3.4vw, 1.45rem);
    font-style: italic;
    color: var(--gold-400);
    letter-spacing: .04em;
    margin: 0 0 1rem;
}
.hero__dates .sep { opacity: .65; padding-inline: .3em; }

.hero__tagline {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 4.2vw, 1.62rem);
    line-height: 1.4;
    color: var(--ivory-100);
    max-width: 26ch;
    margin: 0 0 1.15rem;
}

.hero__hash {
    border-top: 1px solid rgba(205, 176, 117, .38);
    padding-top: .95rem;
    max-width: 30rem;
}
.hero__hash p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(248, 243, 232, .85);
}
.hero__hash .hash-name {
    display: block;
    font-family: var(--font-script);
    font-size: clamp(2rem, 8vw, 2.9rem);
    line-height: 1.25;
    color: var(--gold-400);
    margin-top: .2rem;
}

.hero__onon {
    margin-top: 1.15rem;
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(205, 176, 117, .88);
}

.hero__scroll { display: none; }

/* --- Desktop: give the photograph its own panel -------------------------- */
@media (min-width: 62rem) {
    .hero__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
        align-items: stretch;
        min-height: 100svh;
        max-height: 62rem;
    }

    .hero__body { grid-template-rows: minmax(0, 1fr); }

    .hero__media {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
    }
    .hero__media img { object-position: 52% 46%; }

    /* A crisp edge against the green, and nothing more than a top gradient to
       keep the navigation readable over the misty sky. A soft left-hand blend
       was tried first and only turned the bright sky into a grey smudge. */
    .hero__scrim {
        background: linear-gradient(to bottom,
            rgba(15, 35, 24, .5) 0%,
            rgba(15, 35, 24, .16) 12%,
            rgba(15, 35, 24, 0) 26%);
    }

    .hero__content {
        grid-column: 1;
        grid-row: 1;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5rem 3.5rem 4rem
                 max(var(--gutter), calc((100vw - 75rem) / 2 + var(--gutter)));
    }

    .hero__inner { max-width: 34rem; }

    /* Enough room for "Never Ending Story" to stay on one line. */
    .hero__hash { max-width: none; }
    .hero__hash .hash-name { font-size: 2.7rem; }

    .hero__scroll {
        display: flex;
        position: absolute;
        left: max(var(--gutter), calc((100vw - 75rem) / 2 + var(--gutter)));
        bottom: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: .45rem;
        color: rgba(248, 243, 232, .55);
        font-size: .67rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        text-decoration: none;
        z-index: 3;
    }
    .hero__scroll:hover { color: var(--ivory-50); }
    .hero__scroll svg { animation: nudge 2.6s var(--ease) infinite; }
}

/* Very wide screens: stop the photograph stretching past its own proportions. */
@media (min-width: 100rem) {
    .hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}

@keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ---------------------------------------------------------------------------
   8. Introduction / remembrance
   --------------------------------------------------------------------------- */
.intro__lead {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.6vw, 1.95rem);
    line-height: 1.45;
    color: var(--forest-700);
    margin-bottom: 1.5rem;
}

.intro__body p {
    color: var(--ink-700);
    max-width: var(--measure);
}

.intro-grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 62rem) {
    .intro-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 4.5rem;
        align-items: center;
    }
}

.framed-photo {
    position: relative;
    margin: 0;
}
.framed-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.framed-photo figcaption {
    margin-top: .85rem;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--text-muted);
    font-style: italic;
}
.framed-photo::after {
    content: "";
    position: absolute;
    inset: .55rem -.55rem -.55rem .55rem;
    border: 1px solid var(--gold-400);
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: .55;
}

/* ---------------------------------------------------------------------------
   9. Cards, panels, statistics
   --------------------------------------------------------------------------- */
.card {
    background: var(--white);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
}

.card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.card h3 { margin-bottom: .35rem; }

.card-grid {
    display: grid;
    gap: 1.15rem;
}
@media (min-width: 48rem) {
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   10. Funeral information
   --------------------------------------------------------------------------- */
.funeral-card {
    background: var(--white);
    border: 1px solid var(--ivory-200);
    border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.6rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.funeral-card h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    margin-bottom: .75rem;
}
.funeral-card h3 svg { flex: none; color: var(--gold-600); }

.funeral-card dl { margin: 0; }
.funeral-card dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-top: .95rem;
}
.funeral-card dt:first-child { margin-top: 0; }
.funeral-card dd {
    margin: .2rem 0 0;
    font-size: 1.02rem;
    color: var(--ink-900);
}
.funeral-card p { font-size: .98rem; color: var(--ink-700); }

.tbc {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--gold-700);
    background: #F6EFDD;
    border: 1px solid var(--ivory-300);
    border-radius: 999px;
    padding: .12rem .68rem;
    vertical-align: 2px;
}

.notice-strip {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--ivory-100);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    font-size: .95rem;
    color: var(--ink-700);
}
.notice-strip svg { flex: none; color: var(--gold-600); margin-top: .18rem; }

/* ---------------------------------------------------------------------------
   11. Final hash trail
   --------------------------------------------------------------------------- */
.trail-section {
    position: relative;
    background: var(--forest-800);
    color: var(--ivory-100);
    overflow: hidden;
}

/* Faint hash-paper marks drifting across the background. */
.trail-section__paper {
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;
}

.trail-grid { display: grid; gap: 2.5rem; position: relative; }
.trail-grid > div > p { color: rgba(248, 243, 232, .88); }

@media (min-width: 62rem) {
    .trail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
        gap: 4rem;
        align-items: center;
    }
}

.trail-legs {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
}
@media (min-width: 34rem) {
    .trail-legs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.trail-leg {
    background: rgba(253, 251, 246, .055);
    border: 1px solid rgba(205, 176, 117, .28);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.3rem;
}
.trail-leg h3 {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: .6rem;
}
.trail-leg p {
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(248, 243, 232, .84);
    margin: 0;
}
.trail-leg .leg-distance {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--ivory-50);
    margin-bottom: .35rem;
}

.trail-close {
    margin-top: 1.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(205, 176, 117, .28);
}
.trail-close p { color: var(--ivory-100); font-size: 1.05rem; margin: 0; }
.trail-close .script {
    display: block;
    font-size: clamp(1.7rem, 6vw, 2.5rem);
    color: var(--gold-400);
    margin-top: .5rem;
}

.trail-photo { position: relative; margin: 0; }
.trail-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.trail-photo figcaption {
    margin-top: .8rem;
    font-size: .85rem;
    font-style: italic;
    color: rgba(248, 243, 232, .66);
}

/* ---------------------------------------------------------------------------
   11b. Livestream
   --------------------------------------------------------------------------- */
.livestream {
    background: var(--forest-900);
    color: var(--ivory-100);
}
.livestream h2 { color: var(--ivory-50); }
.livestream .eyebrow { color: var(--gold-400); }
.livestream .eyebrow::after { background: linear-gradient(to right, var(--gold-600), transparent); }
.livestream p { color: rgba(248, 243, 232, .88); }

/* A quiet pulse, not a flashing badge. */
.live-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #D8573F;
    box-shadow: 0 0 0 0 rgba(216, 87, 63, .6);
    animation: livePulse 2.4s ease-out infinite;
    flex: none;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(216, 87, 63, .55); }
    70%  { box-shadow: 0 0 0 .5rem rgba(216, 87, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 87, 63, 0); }
}

.livestream__grid { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
    .livestream__grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }
}

/* 16:9 box that never shifts the page as the player loads. */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background:
        radial-gradient(120% 120% at 50% 0%, #23503A 0%, #12291C 70%);
    border: 1px solid rgba(205, 176, 117, .3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-frame__start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem;
    background: none;
    border: 0;
    color: var(--ivory-50);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.video-frame__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    padding-left: .35rem;
    border-radius: 50%;
    background: rgba(253, 251, 246, .12);
    border: 1px solid rgba(205, 176, 117, .5);
    color: var(--gold-400);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.video-frame__start:hover .video-frame__icon {
    background: var(--gold-500);
    color: #1B1405;
    transform: scale(1.05);
}
.video-frame__label strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: .2rem;
}
.video-frame__label small {
    font-size: .84rem;
    color: rgba(248, 243, 232, .68);
}

.livestream__fallback {
    margin-top: .9rem;
    font-size: .9rem;
    color: rgba(248, 243, 232, .72) !important;
}
.livestream__fallback a { color: var(--gold-400); }

.livestream__when {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(205, 176, 117, .3);
}
.livestream__when dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold-400);
}
.livestream__when dd {
    margin: .25rem 0 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ivory-50);
}
.livestream__when .tbc { background: rgba(205, 176, 117, .14); border-color: rgba(205, 176, 117, .4); color: var(--gold-400); }

.livestream__note {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-top: 1.4rem;
    padding: .9rem 1rem;
    background: rgba(253, 251, 246, .06);
    border: 1px solid rgba(205, 176, 117, .22);
    border-radius: var(--radius-lg);
    font-size: .9rem;
}
.livestream__note svg { flex: none; color: var(--gold-400); margin-top: .18rem; }
.livestream__note p { margin: 0; font-size: .9rem; }

/* ---------------------------------------------------------------------------
   12. Photo gallery
   --------------------------------------------------------------------------- */
.gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.year-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.year-filter a {
    display: inline-block;
    padding: .32rem .78rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--forest-700);
    background: var(--white);
    border: 1px solid var(--ivory-200);
    border-radius: 999px;
    text-decoration: none;
    transition: all .18s var(--ease);
}
.year-filter a:hover { border-color: var(--sage-400); }
.year-filter a[aria-current="true"] {
    background: var(--forest-700);
    border-color: var(--forest-700);
    color: var(--ivory-50);
}

/* A balanced masonry using CSS columns: it keeps portrait and landscape
   photographs at their true proportions with no cropping at all. */
.gallery {
    columns: 2;
    column-gap: .6rem;
}
@media (min-width: 34rem) { .gallery { columns: 2; column-gap: .85rem; } }
@media (min-width: 48rem) { .gallery { columns: 3; column-gap: 1rem; } }
@media (min-width: 75rem) { .gallery { columns: 4; column-gap: 1.15rem; } }

.gallery__item {
    break-inside: avoid;
    margin: 0 0 .6rem;
    position: relative;
}
@media (min-width: 34rem) { .gallery__item { margin-bottom: .85rem; } }
@media (min-width: 48rem) { .gallery__item { margin-bottom: 1rem; } }
@media (min-width: 75rem) { .gallery__item { margin-bottom: 1.15rem; } }

.gallery__link {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ivory-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.gallery__link img {
    width: 100%;
    display: block;
    transition: transform .5s var(--ease);
}
.gallery__link:hover { box-shadow: var(--shadow-md); }
.gallery__link:hover img { transform: scale(1.028); }

.gallery__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.2rem .8rem .7rem;
    background: linear-gradient(to top, rgba(15, 35, 24, .82), transparent);
    color: var(--ivory-50);
    font-size: .82rem;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}
.gallery__link:hover .gallery__caption,
.gallery__link:focus-visible .gallery__caption { opacity: 1; }

.gallery__year {
    position: absolute;
    top: .55rem;
    left: .55rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    background: rgba(15, 35, 24, .62);
    color: var(--ivory-50);
    padding: .16rem .5rem;
    border-radius: 2px;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.gallery__link:hover .gallery__year,
.gallery__link:focus-visible .gallery__year { opacity: 1; }

@media (hover: none) {
    .gallery__caption, .gallery__year { display: none; }
}

.gallery-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--ivory-300);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

/* Home page preview strip */
.gallery--preview { columns: 2; }
@media (min-width: 48rem) { .gallery--preview { columns: 3; } }

/* ---------------------------------------------------------------------------
   13. Lightbox
   --------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(11, 26, 18, .965);
    display: none;
    flex-direction: column;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.lightbox[open], .lightbox.is-open { display: flex; }

.lightbox__stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem .75rem 1rem;
    min-height: 0;
}
.lightbox__stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.lightbox__bar {
    padding: .85rem var(--gutter) 1.25rem;
    color: rgba(248, 243, 232, .9);
    text-align: center;
    font-size: .92rem;
    line-height: 1.5;
}
.lightbox__meta {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(205, 176, 117, .8);
}

.lightbox__btn {
    position: absolute;
    background: rgba(253, 251, 246, .1);
    border: 1px solid rgba(253, 251, 246, .2);
    color: var(--ivory-50);
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(253, 251, 246, .24); }
.lightbox__close { top: .85rem; right: .85rem; }
.lightbox__prev  { left: .6rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: .6rem; top: 50%; transform: translateY(-50%); }

.lightbox__count {
    position: absolute;
    top: 1.35rem;
    left: 1.1rem;
    font-size: .8rem;
    letter-spacing: .1em;
    color: rgba(248, 243, 232, .65);
}

@media (min-width: 48rem) {
    .lightbox__stage { padding: 4.5rem 5rem 1rem; }
    .lightbox__prev  { left: 1.1rem; }
    .lightbox__next  { right: 1.1rem; }
}

body.lightbox-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   14. Remembrance book
   --------------------------------------------------------------------------- */
.memory-list {
    display: grid;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 62rem) {
    .memory-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.memory {
    position: relative;
    background: var(--white);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-lg);
    padding: 1.55rem 1.55rem 1.4rem;
    box-shadow: var(--shadow-sm);
}

.memory--featured {
    background: linear-gradient(180deg, #FFFDF8 0%, var(--white) 60%);
    border-color: var(--gold-400);
}
.memory--featured::before {
    content: "";
    position: absolute;
    top: -1px; left: 1.4rem; right: 1.4rem;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}

.memory__quote {
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.6;
    color: var(--ink-900);
    margin: 0 0 1.1rem;
    white-space: pre-line;
}

.memory__by {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
    padding-top: .95rem;
    border-top: 1px solid var(--ivory-200);
}
.memory__name {
    font-weight: 600;
    font-size: .98rem;
    color: var(--forest-700);
}
.memory__detail {
    font-size: .86rem;
    color: var(--text-muted);
}
.memory__detail::before { content: "· "; opacity: .55; }

.memory-empty {
    text-align: center;
    padding: 3rem 1.25rem;
    border: 1px dashed var(--ivory-300);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   15. Forms
   --------------------------------------------------------------------------- */
.form-shell {
    background: var(--white);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .form-shell { padding: 2.4rem; } }

.field { margin-bottom: 1.35rem; }

.field label {
    display: block;
    font-size: .93rem;
    font-weight: 600;
    color: var(--forest-800);
    margin-bottom: .4rem;
}
.field .optional {
    font-weight: 400;
    color: var(--ink-400);
    font-size: .84rem;
    margin-left: .3rem;
}
.field .hint {
    display: block;
    font-size: .84rem;
    color: var(--text-muted);
    margin-top: .35rem;
    line-height: 1.5;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field textarea,
.field select {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-900);
    background: var(--ivory-50);
    border: 1px solid var(--ivory-300);
    border-radius: var(--radius);
    padding: .75rem .9rem;
    min-height: 2.9rem;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.field textarea { min-height: 10rem; resize: vertical; }

.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    background: var(--white);
    border-color: var(--forest-500);
    box-shadow: 0 0 0 3px rgba(51, 104, 75, .16);
}
.field input:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 1px;
}

.field--error input, .field--error textarea { border-color: #A5462F; background: #FDF6F4; }
.field-error {
    display: block;
    margin-top: .4rem;
    font-size: .87rem;
    font-weight: 500;
    color: #8E3A25;
}

.field-row { display: grid; gap: 0 1.15rem; }
@media (min-width: 34rem) { .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-alert {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    margin-bottom: 1.6rem;
    font-size: .96rem;
    line-height: 1.55;
}
.form-alert--error { background: #FBF0EC; border: 1px solid #E4C4B8; color: #7A331F; }
.form-alert--info  { background: var(--ivory-100); border: 1px solid var(--ivory-300); color: var(--ink-700); }
.form-alert svg { flex: none; margin-top: .15rem; }

/* The honeypot. Hidden from people in every way a person could notice, but
   still present in the DOM for a script to fill in. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}

.file-drop {
    border: 2px dashed var(--ivory-300);
    border-radius: var(--radius-lg);
    background: var(--ivory-50);
    padding: 1.6rem 1.25rem;
    text-align: center;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.file-drop.is-dragging { border-color: var(--forest-500); background: #F2F7F2; }
.file-drop input[type="file"] {
    width: 100%;
    font-size: .95rem;
    color: var(--ink-700);
}
.file-drop__icon { color: var(--sage-400); margin: 0 auto .7rem; }
.file-drop__hint { font-size: .85rem; color: var(--text-muted); margin-top: .7rem; }

.file-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}
.file-preview li {
    list-style: none;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ivory-200);
    border: 1px solid var(--ivory-300);
}
.file-preview img { width: 100%; height: 100%; object-fit: cover; }

.char-count {
    display: block;
    text-align: right;
    font-size: .8rem;
    color: var(--ink-400);
    margin-top: .3rem;
}
.char-count.is-near { color: var(--gold-700); font-weight: 600; }

.privacy-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ivory-200);
    font-size: .87rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   16. Call to action band
   --------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .7rem; }
.cta-band p { max-width: 44ch; margin-inline: auto; color: var(--ink-700); }
.section--forest.cta-band p { color: rgba(248, 243, 232, .85); }
.cta-band .btn-row { justify-content: center; margin-top: 1.9rem; }

/* ---------------------------------------------------------------------------
   17. Pagination
   --------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.75rem;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    min-width: 2.6rem;
    padding: .5rem .75rem;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
}
.pagination a { color: var(--forest-700); border: 1px solid var(--ivory-200); background: var(--white); }
.pagination a:hover { border-color: var(--sage-400); }
.pagination .is-current { background: var(--forest-700); color: var(--ivory-50); }
.pagination .gap { border: 0; background: none; color: var(--ink-400); min-width: auto; }

/* ---------------------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------------------- */
.site-footer {
    background: var(--forest-900);
    color: rgba(248, 243, 232, .78);
    padding-block: 3.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.site-footer__onon {
    font-family: var(--font-script);
    font-size: clamp(2.3rem, 9vw, 3.6rem);
    line-height: 1.2;
    color: var(--gold-400);
    margin: 0 0 1.1rem;
}

.site-footer__lines p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    line-height: 1.55;
    color: var(--ivory-100);
}

.site-footer nav {
    margin: 2.4rem 0 1.9rem;
}
.site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer nav a {
    color: rgba(248, 243, 232, .74);
    font-size: .92rem;
    text-decoration: none;
    padding: .3rem 0;
}
.site-footer nav a:hover { color: var(--gold-400); text-decoration: underline; }

.site-footer__base {
    border-top: 1px solid rgba(122, 155, 132, .22);
    padding-top: 1.6rem;
    font-size: .82rem;
    color: rgba(248, 243, 232, .5);
    line-height: 1.7;
}
.site-footer__base .never-ending {
    font-family: var(--font-script);
    font-size: 1.35rem;
    color: rgba(205, 176, 117, .62);
    display: block;
    margin-bottom: .5rem;
}

/* ---------------------------------------------------------------------------
   19. Simple content pages
   --------------------------------------------------------------------------- */
.page-header {
    background: var(--forest-800);
    color: var(--ivory-50);
    padding-block: 3.25rem 2.75rem;
    margin-top: -1px;
}
.page-header h1 { color: var(--ivory-50); margin-bottom: .5rem; }
.page-header p {
    color: rgba(248, 243, 232, .82);
    max-width: 46ch;
    margin: 0;
    font-size: 1.02rem;
}
.page-header .eyebrow { color: var(--gold-400); }
.page-header .eyebrow::after { background: linear-gradient(to right, var(--gold-600), transparent); }

@media (min-width: 48rem) {
    .page-header { padding-block: 5rem 4rem; }
}

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   20. Print
   --------------------------------------------------------------------------- */
@media print {
    .site-header, .site-nav, .btn, .lightbox, .hero__scroll { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .section--forest, .trail-section, .page-header { background: #fff !important; color: #000 !important; }
    .section--forest h1, .section--forest h2, .page-header h1 { color: #000 !important; }
    a[href^="/"]::after { content: " (johnduewel.com" attr(href) ")"; font-size: 9pt; }
}