/* ============================================
   THE UNPAVED JOURNAL
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
    --clr-cover:      #0D0905;
    --clr-page:       #E6D090;
    --clr-page-alt:   #D5BC74;
    --clr-ink:        #1C1A14;
    --clr-ink-mid:    #3D3426;
    --clr-ink-light:  #7A6A52;
    --clr-margin:     #A08050;
    --clr-accent:     #8B1A00;
    --clr-rule:       #B89040;

    --clr-bk-adv:     #7A3010;
    --clr-bk-gui:     #284024;
    --clr-bk-trl:     #283D4A;
    --clr-bk-gea:     #4A2E14;
    --clr-bk-fld:     #383818;
    --clr-bk-gal:     #3A2D1E;
    --clr-bk-post:    #2A1535;

    --ff-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
    --ff-body:        'EB Garamond', Georgia, 'Times New Roman', serif;

    --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-quart:   cubic-bezier(0.25, 1, 0.5, 1);
    /* Emil Kowalski easing set */
    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out for UI interactions  */
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);     /* on-screen movement, enters + exits   */
    --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);      /* iOS-like drawer/page curve           */

    --max-journal:    900px;
    --bk-w:           50px;

    --fs-xs:   0.78rem;
    --fs-sm:   0.9rem;
    --fs-base: 1.08rem;
    --fs-md:   1.22rem;
    --fs-lg:   1.6rem;
    --fs-xl:   2.1rem;
    --fs-2xl:  2.8rem;
    --fs-3xl:  3.8rem;
}

/* ──────────────────────────────────────
   RESET
────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background-color: var(--clr-cover);
    color: var(--clr-ink);
    font-family: var(--ff-body);
    line-height: 1.75;
    min-height: 100vh;
}

/* ──────────────────────────────────────
   ENTRANCE ANIMATIONS
────────────────────────────────────── */

/* Journal card lifts up from below */
@keyframes journal-enter {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Shared fade-up for sequenced elements */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(13px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bookmarks slide in from the right */
@keyframes bookmarks-slide {
    from { transform: translateY(-50%) translateX(58px); opacity: 0; }
    to   { transform: translateY(-50%) translateX(0);   opacity: 1; }
}

/* ──────────────────────────────────────
   BOOKMARKS (right-side tabs)
────────────────────────────────────── */
.bookmarks {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 200;
    animation: bookmarks-slide 0.65s var(--ease-expo) 0.35s both;
}

.bk-tab {
    width: var(--bk-w);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 9px;
    border: none;
    cursor: pointer;
    /* expo gives instant feedback; ease starts sluggish */
    transition: transform 0.2s var(--ease-expo),
                filter  0.2s var(--ease-expo),
                opacity 0.18s ease;
    opacity: 0.72;
    filter: drop-shadow(-3px 2px 10px rgba(0,0,0,0.5));
    position: relative;
    clip-path: polygon(16px 0%, 100% 0%, 100% 100%, 16px 100%, 0% 50%);
}

.bk-tab:nth-child(1) { background: var(--clr-bk-adv); }
.bk-tab:nth-child(2) { background: var(--clr-bk-gui); }
.bk-tab:nth-child(3) { background: var(--clr-bk-trl); }
.bk-tab:nth-child(4) { background: var(--clr-bk-gea); }
.bk-tab:nth-child(5) { background: var(--clr-bk-fld); }
.bk-tab:nth-child(6) { background: var(--clr-bk-gal); }
.bk-tab:nth-child(7) { background: var(--clr-bk-post); }

.bk-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: var(--ff-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-page);
    white-space: nowrap;
    user-select: none;
}

/* Gate hover transform — touch devices trigger hover on tap, causing stuck states */
@media (hover: hover) and (pointer: fine) {
    .bk-tab:hover {
        opacity: 0.92;
        transform: translateX(-5px);
        filter: drop-shadow(-6px 2px 14px rgba(0,0,0,0.58));
    }
}

.bk-tab.active {
    opacity: 1;
    transform: translateX(-14px);
    filter: drop-shadow(-8px 2px 18px rgba(0,0,0,0.7));
}

/* Press feedback — every pressable element must feel responsive */
.bk-tab:active {
    transform: translateX(-16px) scale(0.96);
    transition-duration: 0.1s;
}

/* Pip indicator on active tab */
.bk-tab.active::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(230, 208, 144, 0.7);
}

/* ──────────────────────────────────────
   JOURNAL WRAPPER
────────────────────────────────────── */
.journal {
    animation: journal-enter 0.65s var(--ease-expo) both;
    max-width: var(--max-journal);
    margin: 0 auto;
    background:
        radial-gradient(ellipse 200px 120px at 87% 11%, rgba(110,70,15,0.07), transparent),
        radial-gradient(ellipse 90px 65px at 7%  30%, rgba(95,58,12,0.06),  transparent),
        radial-gradient(ellipse 160px 95px at 72% 74%, rgba(105,68,14,0.05), transparent),
        radial-gradient(ellipse 70px  48px at 20% 88%, rgba(80,48,10,0.05),  transparent),
        var(--clr-page);
    min-height: 100vh;
    position: relative;
    box-shadow:
        0 0 60px  rgba(0,0,0,0.75),
        0 0 120px rgba(0,0,0,0.45),
        inset 0 0 90px rgba(18,9,2,0.14);
}

/* Paper grain + ruled lines */
.journal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E"),
        repeating-linear-gradient(
            transparent,
            transparent 27px,
            rgba(148, 108, 30, 0.18) 27px,
            rgba(148, 108, 30, 0.18) 28px
        );
    z-index: 0;
}

/* Spine shadow on left edge */
.journal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, rgba(18,8,2,0.24), rgba(18,8,2,0.06) 55%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* all journal children above pseudo-elements */
.journal > * { position: relative; z-index: 2; }

/* ──────────────────────────────────────
   MASTHEAD
────────────────────────────────────── */
.masthead {
    text-align: center;
    padding: 60px 70px 44px;
    border-bottom: 1px solid var(--clr-rule);
    position: relative;
    overflow: hidden;
    /* padding removed — animating layout properties triggers recalc every frame.
       Photo state change is instant; the overlay opacity handles the visual transition. */
}

/* Background layer — holds the gradient by default, or a photo if set */
.masthead-bg {
    position: absolute;
    inset: 0;
    background-color: var(--clr-page-alt);
    background-image: linear-gradient(to bottom, var(--clr-page-alt) 0%, var(--clr-page) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: filter 0.4s ease;
}

/* Dark scrim — only visible when a photo is active */
.masthead-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(8, 4, 2, 0.38) 0%,
        rgba(8, 4, 2, 0.60) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.masthead.masthead-has-photo {
    padding: 80px 70px 62px;
    border-bottom-color: rgba(184, 144, 64, 0.35);
}

.masthead.masthead-has-photo .masthead-bg::after {
    opacity: 1;
}

/* Content sits above the background layer */
.masthead-inner {
    position: relative;
    z-index: 1;
}

/* Text adapts when a photo is active */
.masthead.masthead-has-photo .masthead-meta {
    color: rgba(230, 208, 144, 0.7);
}
.masthead.masthead-has-photo .masthead-title {
    color: rgba(230, 208, 144, 0.96);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.masthead.masthead-has-photo .masthead-tagline {
    color: rgba(230, 208, 144, 0.82);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.masthead.masthead-has-photo .rule-line {
    background: rgba(230, 208, 144, 0.38);
}
.masthead.masthead-has-photo .rule-ornament {
    color: rgba(230, 208, 144, 0.5);
}

/* Semi-transparent text backdrop — only visible when a photo is active */
.masthead.masthead-has-photo .masthead-inner {
    background: rgba(10, 6, 2, 0.72);
    border: 2px solid rgba(190, 150, 60, 0.50);
    padding: 32px 52px;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.masthead-meta {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-ink-light);
    margin-bottom: 22px;
    transition: color 0.4s ease;
}

.masthead-title {
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--clr-ink);
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin-bottom: 14px;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.masthead-tagline {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--clr-ink-mid);
    margin-bottom: 32px;
    letter-spacing: 0.01em;
    transition: color 0.4s ease;
}

.masthead-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.rule-line {
    display: block;
    height: 1px;
    width: 100px;
    background: var(--clr-rule);
}

.rule-ornament {
    color: var(--clr-margin);
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Masthead entrance sequence ── */
.masthead-meta    { animation: fade-up 0.45s var(--ease-expo) 0.45s both; }
.masthead-title   { animation: fade-up 0.55s var(--ease-expo) 0.60s both; }
.masthead-tagline { animation: fade-up 0.45s var(--ease-expo) 0.77s both; }
.masthead-rule    { animation: fade-up 0.40s var(--ease-expo) 0.90s both; }

/* ──────────────────────────────────────
   PAGE BODY LAYOUT
────────────────────────────────────── */
.page-body {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: start;
}

/* ──────────────────────────────────────
   LEFT MARGIN
────────────────────────────────────── */
.page-margin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #C42828;
    padding: 0 4px;
    overflow: hidden;
}

.ring-holes {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    pointer-events: none;
    z-index: 0;
    padding: 28px 0;
}

.ring-hole {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--clr-cover);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.section-label {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-xs);
    color: var(--clr-margin);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    letter-spacing: 0.12em;
    user-select: none;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────────
   PAGE CONTENT
────────────────────────────────────── */
.page-content {
    padding: 52px 64px 88px 44px;
    min-width: 0; /* prevent grid overflow */
}

/* ──────────────────────────────────────
   SECTION VISIBILITY + ANIMATION
────────────────────────────────────── */
.journal-section {
    display: none;
}

.journal-section.active {
    display: block;
    animation: sectionIn 0.4s var(--ease-expo) forwards;
}

@keyframes sectionIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────
   PAGES WITHIN SECTIONS
────────────────────────────────────── */
.journal-page {
    display: none;
}

.journal-page.active {
    display: block;
}

/* Exits are slightly faster than entrances and use ease-in —
   the user has already decided; system should get out of the way quickly. */
.journal-page.page-out-left {
    display: block;
    animation: pageOutLeft 0.2s cubic-bezier(0.55, 0, 0.85, 0.06) forwards;
}

.journal-page.page-out-right {
    display: block;
    animation: pageOutRight 0.2s cubic-bezier(0.55, 0, 0.85, 0.06) forwards;
}

/* Entrances use the drawer curve — starts fast, decelerates to rest */
.journal-page.page-in-right {
    display: block;
    animation: pageInRight 0.28s var(--ease-drawer) forwards;
}

.journal-page.page-in-left {
    display: block;
    animation: pageInLeft 0.28s var(--ease-drawer) forwards;
}

@keyframes pageOutLeft {
    from { opacity: 1; transform: perspective(900px) translateX(0)     rotateY(0deg); }
    to   { opacity: 0; transform: perspective(900px) translateX(-48px)  rotateY(-4deg); }
}
@keyframes pageOutRight {
    from { opacity: 1; transform: perspective(900px) translateX(0)     rotateY(0deg); }
    to   { opacity: 0; transform: perspective(900px) translateX(48px)   rotateY(4deg); }
}
@keyframes pageInRight {
    from { opacity: 0; transform: perspective(900px) translateX(48px)   rotateY(4deg); }
    to   { opacity: 1; transform: perspective(900px) translateX(0)     rotateY(0deg); }
}
@keyframes pageInLeft {
    from { opacity: 0; transform: perspective(900px) translateX(-48px)  rotateY(-4deg); }
    to   { opacity: 1; transform: perspective(900px) translateX(0)     rotateY(0deg); }
}

/* ──────────────────────────────────────
   PAGE NAVIGATION ARROWS
────────────────────────────────────── */
.page-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    background: rgba(14, 9, 5, 0.55);
    border: 1px solid rgba(230, 208, 144, 0.2);
    color: rgba(230, 208, 144, 0.75);
    width: 40px;
    height: 72px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    transition: background 0.2s var(--ease-expo),
                color    0.2s var(--ease-expo),
                opacity  0.2s ease,
                transform 0.15s var(--ease-expo);
    opacity: 0.7;
    border-radius: 3px 0 0 3px;
    padding: 0;
    font-family: var(--ff-body);
    letter-spacing: 0;
}

/* Press feedback — 100ms, instantaneous feel */
.page-nav:active {
    transform: translateY(-50%) scale(0.95);
    transition-duration: 0.1s;
}

.page-nav-prev {
    left: max(8px, calc(50vw - 490px));
    border-radius: 0 3px 3px 0;
}

.page-nav-next {
    right: max(calc(var(--bk-w) + 4px), calc(50vw - 490px));
    border-radius: 3px 0 0 3px;
}

.page-nav:hover {
    opacity: 1;
    background: rgba(14, 9, 5, 0.8);
    color: rgba(230, 208, 144, 1);
}

.page-nav.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ──────────────────────────────────────
   PAGE INDICATOR (margin)
────────────────────────────────────── */
.page-indicator {
    font-family: var(--ff-body);
    font-size: 0.62rem;
    color: var(--clr-margin);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    letter-spacing: 0.1em;
    user-select: none;
    opacity: 0.6;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────────
   SECTION HEADER
────────────────────────────────────── */
.section-header {
    margin-bottom: 52px;
    padding-bottom: 24px;
    border-bottom: 3px double var(--clr-rule);
}

.section-title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--clr-ink);
    letter-spacing: 0.01em;
    margin-bottom: 14px;
}

.section-intro {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-base);
    color: var(--clr-ink-mid);
    max-width: 540px;
    line-height: 1.6;
}

/* ──────────────────────────────────────
   ARTICLES
────────────────────────────────────── */
.journal-article {
    margin-bottom: 52px;
}

.article-kicker {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-accent);
    margin-bottom: 12px;
    display: inline-block;
    border: 1.5px solid var(--clr-accent);
    padding: 2px 8px;
    transform: rotate(-0.7deg);
}

.journal-article.featured .article-title {
    font-size: var(--fs-xl);
}

.article-title {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-ink);
    line-height: 1.2;
    margin-bottom: 12px;
}

.article-lede {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-base);
    color: var(--clr-ink-mid);
    line-height: 1.55;
    margin-bottom: 16px;
    max-width: 580px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    color: var(--clr-ink-light);
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}

.article-meta::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--clr-rule);
    flex-shrink: 0;
}

.meta-sep {
    color: var(--clr-margin);
    font-size: 0.9em;
}

/* Body text */
.article-body p {
    font-size: var(--fs-base);
    line-height: 1.9;
    color: var(--clr-ink);
    margin-bottom: 1.15em;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

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

/* Drop cap — featured articles only */
.journal-article.featured .article-body > p:first-child::first-letter {
    font-family: var(--ff-display);
    font-size: 4.4em;
    font-weight: 700;
    line-height: 0.72;
    float: left;
    margin-right: 0.08em;
    margin-top: 0.06em;
    color: var(--clr-accent);
}

/* Article divider */
.article-divider {
    border: none;
    border-top: 1px solid var(--clr-page-alt);
    margin: 52px 0;
    position: relative;
}

.article-divider::after {
    content: '\B7\A0\A0\B7\A0\A0\B7';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--clr-page);
    padding: 0 20px;
    color: var(--clr-margin);
    font-size: var(--fs-sm);
    letter-spacing: 0.25em;
}

/* Strong in guides */
.article-body strong {
    font-weight: 600;
    color: var(--clr-ink);
}

/* ──────────────────────────────────────
   GUIDE-SPECIFIC STYLES
────────────────────────────────────── */
.guide-body .guide-part {
    margin-bottom: 36px;
}

.guide-part-title {
    font-family: var(--ff-display);
    font-size: var(--fs-base);
    font-weight: 600;
    font-style: italic;
    color: var(--clr-ink);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-page-alt);
}

/* ──────────────────────────────────────
   THUMBNAILS (shared)
────────────────────────────────────── */
.thumb-frame {
    width: 100%;
    height: 100%;
    background: var(--clr-page-alt);
    border: 1px solid rgba(148, 108, 30, 0.28);
    position: relative;
    overflow: hidden;
}

.thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 108, 30, 0.38);
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    pointer-events: none;
}

.thumb-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-quart);
}
.thumb-frame:hover img {
    transform: scale(1.04);
}

/* Hide placeholder once a real image is present */
.thumb-frame img ~ .thumb-placeholder {
    display: none;
}

/* Hero banner — featured articles */
.article-thumbnail--hero {
    width: 100%;
    height: 210px;
    margin-bottom: 26px;
}

/* Inline thumbnail — regular articles, floated right */
.article-thumbnail--inline {
    float: right;
    width: 148px;
    height: 108px;
    margin: 0 0 14px 22px;
}

/* Clearfix so article containers wrap floated thumbnails */
.journal-article::after {
    content: '';
    display: table;
    clear: both;
}

/* Trail card thumbnail */
.trail-thumbnail {
    width: 100%;
    height: 155px;
    margin-bottom: 16px;
}

/* Field note thumbnail — floated right */
.fieldnote-thumbnail {
    float: right;
    width: 118px;
    height: 86px;
    margin: 0 0 12px 18px;
}

.fieldnote::after {
    content: '';
    display: table;
    clear: both;
}

/* ──────────────────────────────────────
   TRAIL CARDS
────────────────────────────────────── */
.trail-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.trail-card {
    background: var(--clr-page-alt);
    border-left: 4px solid var(--clr-margin);
    padding: 24px 24px 24px 22px;
}

.trail-card-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.trail-diff {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
    padding: 8px 10px 8px 12px;
    border-radius: 2px;
    line-height: 1;
}

.diff-num {
    font-family: var(--ff-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--clr-page);
    line-height: 1;
}

.diff-label {
    font-family: var(--ff-body);
    font-size: 0.72rem;
    color: rgba(230, 208, 144, 0.6);
    line-height: 1;
    align-self: flex-end;
    padding-bottom: 2px;
}

.diff-1, .diff-2 { background: #284024; }
.diff-3          { background: #4A3A14; }
.diff-4          { background: #7A3010; }
.diff-5          { background: #5A1010; }

.trail-name {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--clr-ink);
    margin-bottom: 4px;
    line-height: 1.25;
}

.trail-region {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--clr-ink-light);
}

.trail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    padding: 14px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--clr-margin);
    border-bottom: 1px solid var(--clr-margin);
}

.stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-label {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clr-ink-light);
    flex-shrink: 0;
    min-width: 72px;
}

.stat-value {
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    color: var(--clr-ink);
}

.trail-notes {
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--clr-ink-mid);
}

/* ──────────────────────────────────────
   TEN ESSENTIALS LIST
────────────────────────────────────── */
.essentials-list {
    margin-top: 28px;
}

.essential-item {
    display: grid;
    grid-template-columns: 40px 78px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--clr-page-alt);
    align-items: start;
}

.essential-thumb {
    width: 78px;
    height: 78px;
}

.essential-item:last-child {
    border-bottom: none;
}

.essential-num {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--clr-margin);
    padding-top: 3px;
    line-height: 1.6;
}

.essential-content h5 {
    font-family: var(--ff-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--clr-ink);
    margin-bottom: 6px;
}

.essential-content p {
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--clr-ink-mid);
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* ──────────────────────────────────────
   FIELD NOTES
────────────────────────────────────── */
.fieldnotes-list {
    display: flex;
    flex-direction: column;
}

.fieldnote {
    padding: 36px 0;
    border-bottom: 1px solid var(--clr-page-alt);
}

.fieldnote:last-child {
    border-bottom: none;
}

.fieldnote-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

.fieldnote-date {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-ink);
    line-height: 1.1;
}

.fieldnote-location {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--clr-ink-light);
    letter-spacing: 0.03em;
}

.fieldnote-body p {
    font-size: var(--fs-base);
    line-height: 1.9;
    color: var(--clr-ink);
    margin-bottom: 0.85em;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

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

/* ──────────────────────────────────────
   GALLERY
────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
}

.photo-slot {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
}

/* Alternating slight tilt — like photos taped into a notebook */
.photo-slot {
    transition: transform 0.35s var(--ease-quart);
}
.photo-slot:nth-child(odd)       { transform: rotate(-0.5deg); }
.photo-slot:nth-child(even)      { transform: rotate(0.6deg);  }
/* Hover: straighten as if picked up */
.photo-slot:nth-child(odd):hover,
.photo-slot:nth-child(even):hover { transform: rotate(0deg) scale(1.015); }

/* Corner mount marks (top-left) */
.photo-slot::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    width: 12px; height: 12px;
    border-top: 1.5px solid rgba(160,128,80,0.5);
    border-left: 1.5px solid rgba(160,128,80,0.5);
    pointer-events: none;
    z-index: 3;
}

/* Corner mount marks (bottom-right) */
.photo-slot::after {
    content: '';
    position: absolute;
    bottom: 22px; right: -5px;
    width: 12px; height: 12px;
    border-bottom: 1.5px solid rgba(160,128,80,0.5);
    border-right: 1.5px solid rgba(160,128,80,0.5);
    pointer-events: none;
    z-index: 3;
}

.photo-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #EAD9A8;
    border: 1px solid rgba(148,108,30,0.35);
    position: relative;
    overflow: hidden;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.22), inset 0 0 0 3px rgba(255,255,255,0.45);
}

/* Dashed inner border on empty frame */
.photo-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(148,108,30,0.25);
    pointer-events: none;
    z-index: 1;
}

.photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: rgba(148,108,30,0.45);
    pointer-events: none;
}

.ph-icon {
    font-size: 1.9rem;
    line-height: 1;
    display: block;
}

.ph-label {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    display: block;
}

/* Actual photos — fill the frame */
.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

.photo-frame img ~ .photo-placeholder {
    display: none;
}

.photo-caption {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: var(--fs-xs);
    color: var(--clr-ink-mid);
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* How-to note on page 1 */
.gallery-note {
    background: rgba(148,108,30,0.07);
    border-left: 3px solid var(--clr-rule);
    padding: 16px 20px;
    margin-bottom: 32px;
}

.gallery-note-title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--clr-ink);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.gallery-note ol {
    margin: 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gallery-note li {
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    color: var(--clr-ink-mid);
    line-height: 1.6;
}

.gallery-note code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82em;
    background: rgba(148,108,30,0.12);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--clr-accent);
    word-break: break-all;
}

/* Mobile: single column gallery */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .photo-slot:nth-child(odd),
    .photo-slot:nth-child(even) {
        transform: none;
    }
}

/* ──────────────────────────────────────
   CREATE POST — SIGN-IN & FORM
────────────────────────────────────── */

#post-gate,
#post-form-wrap {
    max-width: 500px;
    margin: 0 auto;
}

/* Bordered sign-in box */
.signin-box {
    border: 1.5px solid var(--clr-rule);
    padding: 44px 40px 36px;
    margin-top: 12px;
    position: relative;
}

/* Floating ornamental label on top of the box border */
.signin-stamp {
    position: absolute;
    top: -0.72em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-page);
    padding: 0 16px;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--clr-ink-light);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Each label + input pair */
.form-field {
    margin-bottom: 28px;
}

/* Labels */
#post-gate .form-label,
#post-form-wrap .form-label {
    display: block !important;
    font-family: var(--ff-body) !important;
    font-size: 0.67rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--clr-ink-light) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

.form-label-optional {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Text inputs, textarea, select — notebook ruled-line style */
#post-gate input[type="text"],
#post-gate input[type="email"],
#post-form-wrap input[type="text"],
#post-form-wrap input[type="email"],
#post-form-wrap textarea,
#post-form-wrap select {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid var(--clr-rule) !important;
    border-radius: 0 !important;
    padding: 6px 0 10px !important;
    font-family: var(--ff-body) !important;
    font-size: 1rem !important;
    color: var(--clr-ink) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease;
}

#post-gate input[type="text"]::placeholder,
#post-gate input[type="email"]::placeholder,
#post-form-wrap input[type="text"]::placeholder,
#post-form-wrap textarea::placeholder {
    color: var(--clr-ink-light) !important;
    font-style: italic !important;
    opacity: 0.6 !important;
}

#post-gate input[type="text"]:focus,
#post-gate input[type="email"]:focus,
#post-form-wrap input[type="text"]:focus,
#post-form-wrap input[type="email"]:focus,
#post-form-wrap textarea:focus,
#post-form-wrap select:focus {
    border-bottom-color: var(--clr-accent) !important;
    outline: none !important;
}

#post-form-wrap textarea {
    resize: vertical !important;
    min-height: 160px !important;
    line-height: 1.8 !important;
    padding-top: 8px !important;
}

/* Select dropdown arrow */
#post-form-wrap select {
    cursor: pointer !important;
    padding-right: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A6A52'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
}
#post-form-wrap select option {
    background: #E6D090;
    color: #1C1A14;
}

/* File picker row */
.form-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.form-file-label {
    display: inline-block;
    border: 1.5px solid var(--clr-rule);
    padding: 6px 18px;
    font-family: var(--ff-body);
    font-size: 0.84rem;
    letter-spacing: 0.05em;
    color: var(--clr-ink-mid);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}
.form-file-label:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}
.form-file-input { display: none; }
.form-file-name {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--clr-ink-light);
    word-break: break-all;
}

/* Submit / sign-in button */
#post-gate .form-submit,
#post-form-wrap .form-submit {
    display: block !important;
    width: 100% !important;
    background: var(--clr-cover) !important;
    border: none !important;
    color: var(--clr-page) !important;
    font-family: var(--ff-display) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 15px 24px !important;
    cursor: pointer !important;
    margin-top: 32px !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background 0.2s ease;
    box-sizing: border-box !important;
}
#post-gate .form-submit:hover,
#post-form-wrap .form-submit:hover {
    background: var(--clr-accent) !important;
}

/* Sign-in note below button */
.signin-note {
    font-family: var(--ff-body);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--clr-ink-light);
    text-align: center;
    margin-top: 20px;
    line-height: 1.5;
}

/* Sign-out inline link */
.signout-link {
    background: none !important;
    border: none !important;
    font-family: var(--ff-body) !important;
    font-style: italic !important;
    font-size: inherit !important;
    color: var(--clr-ink-light) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 0 !important;
    transition: color 0.2s;
}
.signout-link:hover { color: var(--clr-accent) !important; }

/* Inline status messages */
.form-msg {
    font-family: var(--ff-body);
    font-size: 0.88rem;
    padding: 9px 13px;
    margin: 8px 0 0;
    border-left: 3px solid transparent;
    line-height: 1.5;
}
.form-msg--error {
    border-left-color: var(--clr-accent);
    color: var(--clr-accent);
    background: rgba(139,26,0,0.06);
}
.form-msg--success {
    border-left-color: #284024;
    color: #284024;
    background: rgba(40,64,36,0.07);
}

/* Kicker on user-submitted posts */
.user-post-kicker {
    color: var(--clr-bk-post) !important;
    border-color: var(--clr-bk-post) !important;
}

/* ──────────────────────────────────────
   FOOTER
────────────────────────────────────── */
.journal-footer {
    padding: 36px 70px 44px;
    text-align: center;
    border-top: 1px solid var(--clr-page-alt);
    background: linear-gradient(to top, var(--clr-page-alt) 0%, var(--clr-page) 100%);
}

.footer-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}

.footer-text {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-ink-light);
}

/* ──────────────────────────────────────
   RESPONSIVE — TABLET
────────────────────────────────────── */
@media (max-width: 900px) {
    :root {
        --fs-3xl: 3rem;
        --fs-2xl: 2.2rem;
        --fs-xl:  1.8rem;
    }

    .journal {
        /* Prevent bookmarks overlapping content */
        padding-right: 56px;
    }

    .page-content {
        padding: 40px 36px 72px 32px;
    }

    .masthead {
        padding: 48px 44px 36px;
    }

    .masthead-title {
        font-size: var(--fs-3xl);
    }
}

/* ──────────────────────────────────────
   RESPONSIVE — MOBILE
────────────────────────────────────── */
@media (max-width: 600px) {
    :root {
        --fs-3xl: 2.2rem;
        --fs-2xl: 1.8rem;
        --fs-xl:  1.55rem;
        --fs-lg:  1.3rem;
        --fs-md:  1.1rem;
    }

    /* Bookmarks → horizontal bottom bar */
    .bookmarks {
        position: fixed;
        bottom: 0;
        top: auto;
        right: 0;
        left: 0;
        transform: none;
        flex-direction: row;
        gap: 2px;
        z-index: 200;
        animation: none; /* no slide-in on mobile — already on screen as bottom bar */
    }

    .bk-tab {
        flex: 1;
        width: auto;
        border-radius: 4px 4px 0 0;
        padding: 10px 4px 8px;
        clip-path: none;
        filter: drop-shadow(0 -3px 8px rgba(0,0,0,0.4));
    }

    .bk-tab:hover,
    .bk-tab.active {
        transform: translateY(-5px);
        filter: drop-shadow(0 -5px 12px rgba(0,0,0,0.5));
    }

    .bk-tab.active::before {
        left: 50%;
        top: 6px;
        transform: translateX(-50%);
    }

    .bk-label {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }

    .ring-holes { display: none; }

    /* Room for bottom bar */
    .journal {
        padding-right: 0;
        padding-bottom: 64px;
    }

    .masthead {
        padding: 36px 24px 28px;
    }

    .masthead-title {
        font-size: var(--fs-3xl);
    }

    .rule-line {
        width: 60px;
    }

    .page-body {
        grid-template-columns: 32px 1fr;
    }

    .page-content {
        padding: 32px 20px 60px 18px;
    }

    .trail-stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .trail-card-header {
        gap: 14px;
    }

    /* Thumbnails go full-width on mobile — no float */
    .article-thumbnail--inline,
    .fieldnote-thumbnail {
        float: none;
        width: 100%;
        height: 140px;
        margin: 0 0 16px 0;
    }

    .article-thumbnail--hero {
        height: 160px;
    }

    .trail-thumbnail {
        height: 130px;
    }

    .essential-item {
        grid-template-columns: 36px 64px 1fr;
        gap: 12px;
    }

    .essential-thumb {
        width: 64px;
        height: 64px;
    }

    .journal-article.featured .article-body > p:first-child::first-letter {
        font-size: 3.2em;
    }

    .article-body p {
        text-align: left;
        hyphens: none;
    }

    .fieldnote-body p {
        text-align: left;
        hyphens: none;
    }

    .footer-text {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }
}

/* ──────────────────────────────────────
   REDUCED MOTION
────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Entrances: instant appear — no transforms held by fill-mode */
    .journal,
    .bookmarks,
    .masthead-meta,
    .masthead-title,
    .masthead-tagline,
    .masthead-rule {
        animation: none !important;
    }

    /* Section switch: instant */
    .journal-section.active {
        animation: none !important;
    }

    /* Page turns: suppress perspective rotation, keep display switch */
    .journal-page.page-out-left,
    .journal-page.page-out-right,
    .journal-page.page-in-right,
    .journal-page.page-in-left {
        animation: none !important;
    }

    /* Photo interactions: no motion */
    .thumb-frame img,
    .photo-slot,
    .photo-slot:nth-child(odd):hover,
    .photo-slot:nth-child(even):hover {
        transition: none !important;
        transform: none;
    }
    .photo-slot:nth-child(odd)  { transform: rotate(-0.5deg); }
    .photo-slot:nth-child(even) { transform: rotate(0.6deg);  }
}

/* ──────────────────────────────────────
   PRINT
────────────────────────────────────── */
@media print {
    .bookmarks { display: none; }
    body { background: white; }
    .journal { box-shadow: none; max-width: 100%; }
    .journal-section { display: block !important; }
    .article-divider { border-top: 1px solid #ccc; }
    .article-divider::after { background: white; }
}