:root{--pine:#172b25;--dark:#10211d;--cream:#f4f2eb;--ink:#24332c;--muted:#6c776d;--accent:#d1b38a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{height:76px;padding:0 max(5%,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--dark);color:#fff}.brand{font-size:1.18rem;font-weight:750;letter-spacing:.18em}.brand span{font-weight:350}.site-header nav{display:flex;gap:27px;align-items:center;font-size:.83rem;letter-spacing:.035em}.site-header nav a:hover,.text-link:hover{color:var(--accent)}.nav-yt{border:1px solid #87958a;padding:8px 14px}.menu-toggle{display:none}.backgr{min-height:640px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(11,28,24,.82),rgba(11,28,24,.12)),linear-gradient(0deg,rgba(17,38,32,.4),transparent 65%),url('../images/backgr.jpg') center/cover,linear-gradient(130deg,#314a3b,#77816c 52%,#2a403b);color:white}.backgr-inner{max-width:1180px;width:90%;margin:auto;padding:80px 0}.eyebrow{font-size:.72rem;font-weight:750;letter-spacing:.22em;text-transform:uppercase;color:#9baf9e}.backgr .eyebrow{color:#d5d9ca}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.13}h1{font-size:clamp(3.1rem,6.2vw,6.5rem);letter-spacing:-.035em;margin:16px 0 20px}h2{font-size:clamp(2.25rem,4vw,3.7rem);letter-spacing:-.03em;margin-bottom:15px}.backgr-inner>p:not(.eyebrow){font-size:1.1rem;color:#e0e6de}.button{display:inline-block;background:#e5e2d7;color:#193027;font-size:.82rem;font-weight:750;letter-spacing:.06em;padding:15px 24px;margin-top:20px}.button:hover{background:#fff}.intro{max-width:740px;text-align:center;padding:95px 24px;margin:auto}.intro p:last-child{color:var(--muted);font-size:1.05rem}.section{max-width:1180px;width:90%;margin:auto;padding:65px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:26px}.text-link{font-weight:700;font-size:.88rem;color:#456250}.video-mount{aspect-ratio:16/9;background:#1b2d27;display:grid;place-items:center;color:#fff;overflow:hidden}.video-mount iframe{width:100%;height:100%;border:0}.video-placeholder{text-align:center;padding:25px;max-width:530px}.video-placeholder .play{font-size:3rem;color:#e3c8a1}.video-placeholder p{color:#d4ddd6}.video-placeholder code{color:#fff}.hint{font-size:.77rem;color:var(--muted);margin-top:12px}.feature-grid,.pick-grid{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap:20px}.feature{min-height:340px;display:flex;align-items:end;color:white;padding:26px;background-position:center;background-size:cover}.feature>div{position:relative;z-index:1}.feature span{font-size:.7rem;letter-spacing:.18em}.feature h3{font:normal 2.3rem Georgia,serif;margin:8px 0}.feature p{font-size:.9rem;margin:0}.hiking{background:linear-gradient(0deg,rgba(9,28,20,.9),transparent 75%),url('../images/hiking.jpg') center/cover,#6e8470}.bushcraft{background:linear-gradient(0deg,rgba(9,28,20,.9),transparent 75%),url('../images/bushcraft.jpg') center/cover,#52614c}.diy{background:linear-gradient(0deg,rgba(9,28,20,.9),transparent 75%),url('../images/diy.jpg') center/cover,#85735e}.picks{border-top:1px solid #d8d9cf}.pick-art{height:190px;display:grid;place-items:center;font-size:4rem;color:#e7e4d7}.winter{background:linear-gradient(145deg,#6b8790,#d0d6d1)}.forest{background:linear-gradient(145deg,#17362e,#75816a)}.craft{background:linear-gradient(145deg,#725c43,#bd9f75)}.pick h3{margin:14px 0 2px;font:normal 1.5rem Georgia,serif}.pick p{color:var(--muted);font-size:.85rem}.notes{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-bottom:105px}.notes>div:first-child>p:not(.eyebrow){color:var(--muted);max-width:440px}.notes-art{min-height:340px;background:linear-gradient(140deg,#243d33,#647b66 55%,#a6a48a);display:grid;place-items:center}.notes-art span{font:2.7rem Georgia,serif;letter-spacing:.12em;color:#f0ede3;text-align:center}footer{background:var(--dark);color:#e9ece6;padding:48px max(5%,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1fr auto;gap:25px}footer strong{letter-spacing:.16em}footer p,footer small{color:#a9b9ad;font-size:.8rem}.footer-links{display:flex;gap:24px;font-size:.85rem}footer small{grid-column:1/-1}@media(max-width:720px){.site-header{height:auto;min-height:70px;flex-wrap:wrap;padding:17px 5%}.brand{font-size:1rem}.menu-toggle{display:block;background:none;color:#fff;border:1px solid #708276;padding:5px 10px}.site-header nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;padding:18px 0;gap:16px}.site-header nav.open{display:flex}.backgr{min-height:520px}.backgr-inner{padding:65px 0}.intro{padding:65px 22px}.section{padding:42px 0}.section-heading{display:block}.feature-grid,.pick-grid{grid-template-columns:1fr}.feature{min-height:250px}.notes{grid-template-columns:1fr;gap:24px}.notes-art{min-height:240px}footer{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}footer small{grid-column:auto}}
/* Outdoor Silence - Backgr background */
.backgr {
  background-image:
    linear-gradient(
      90deg,
      rgba(10, 25, 19, 0.78) 0%,
      rgba(10, 25, 19, 0.35) 48%,
      rgba(10, 25, 19, 0.05) 100%
    ),
    url("../images/backgr.jpg");

  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
}
/* White text over the mountain photograph */
.backgr {
  color: #ffffff;
}

.backgr h1,
.backgr p,
.backgr .eyebrow {
  color: #ffffff;
}

/* Improve readability */
.backgr {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* YouTube playlist cards */
.feature.playlist-link {
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: white;
    background-image:
        linear-gradient(
            to top,
            rgba(8, 24, 18, 0.85),
            rgba(8, 24, 18, 0.05)
        ),
        url("https://img.youtube.com/vi/d_LimBsE8M4/hqdefault.jpg");
    background-size: cover;
    background-position: center;
    transition: transform 0.2s ease;
}

.feature.playlist-link:hover {
    transform: translateY(-4px);
}

/* Bushcraft playlist thumbnail */
.feature.bushcraft.playlist-link {
    background-image:
        linear-gradient(
            to top,
            rgba(8, 24, 18, 0.85),
            rgba(8, 24, 18, 0.05)
        ),
        url("https://img.youtube.com/vi/ku2ZSID_oMg/hqdefault.jpg");

    background-size: cover;
    background-position: center;
}

/* DIY playlist thumbnail */
.feature.diy.playlist-link {
    background-image:
        linear-gradient(
            to top,
            rgba(8, 24, 18, 0.85),
            rgba(8, 24, 18, 0.05)
        ),
        url("https://img.youtube.com/vi/Ysd1-sWK_bA/hqdefault.jpg");

    background-size: cover;
    background-position: center;
}

/* Winter playlist thumbnail */
.feature.winter.playlist-link {
    background-image:
        linear-gradient(
            to top,
            rgba(8, 24, 18, 0.85),
            rgba(8, 24, 18, 0.05)
        ),
        url("https://img.youtube.com/vi/RkIhzV7hRb4/hqdefault.jpg");

    background-size: cover;
    background-position: center;
}

/* Crop YouTube thumbnails to fill the cards */
.feature.hiking.playlist-link,
.feature.bushcraft.playlist-link {
    background-size: auto 100%;
    background-position: center;
}


.playlist-more {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
}


.playlist-more a {
    display: inline-block;
    padding: 14px 24px;
    border: 1px solid #263b30;
    color: #263b30;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s;
}

.playlist-more a:hover {
    background: #263b30;
    color: #ffffff;
}

/* Selected Adventures video cards */

.video-pick {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.video-pick:hover {
    transform: translateY(-5px);
}

.video-pick img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-pick h3 {
    margin-top: 18px;
}

.video-pick p {
    color: #607367;
}


/* Social media links */

.social-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.2s ease;
}

.social-links a:hover {
    opacity: 0.6;
}

.social-links svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-links a:first-child svg path {
    fill: currentColor;
    stroke: none;
}

/* Keep footer links aligned */

.footer-links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}


/* Social icons in header */

.site-header nav .social-links {
    gap: 16px;
    margin-left: 8px;
}

.site-header nav .social-links a {
    white-space: nowrap;
}

/* Switch to mobile menu a little earlier */

@media (min-width: 721px) and (max-width: 1050px) {
    .site-header {
        height: auto;
        min-height: 76px;
        flex-wrap: wrap;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .site-header nav {
        gap: 15px;
        font-size: 0.78rem;
    }

    .site-header nav .social-links {
        gap: 12px;
    }
}

@media (max-width: 720px) {
    .site-header nav .social-links {
        margin-left: 0;
        padding-top: 8px;
    }
}

/* Mobile backgr adjustments */
@media (max-width: 720px) {
    .backgr h1 {
        font-size: clamp(2.6rem, 9vw, 3.5rem);
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .backgr-inner {
        width: 88%;
    }

    .backgr .eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
    }
}


/* Better playlist image cropping on mobile */
@media (max-width: 720px) {
    .feature.playlist-link {
        min-height: 300px;
        background-size: cover;
        background-position: center center;
    }

    .feature.hiking.playlist-link,
    .feature.bushcraft.playlist-link,
    .feature.diy.playlist-link {
        background-size: cover;
        background-position: center center;
    }
}


/* Outdoor Silence profile logo */

.intro-logo {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 30px;
    border: 3px solid #e0e2d8;
}

@media (max-width: 720px) {
    .intro-logo {
        width: 115px;
        height: 115px;
        margin-bottom: 24px;
    }
}


/* Field Notes article */

.article-back {
    color: #e9ece6;
    font-size: 0.85rem;
}

.article-back:hover {
    color: var(--accent);
}

.field-article {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 85px 0 100px;
}

.article-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 45px;
}

.article-header h1 {
    font-size: clamp(2.8rem, 5vw, 5rem);
    margin: 18px 0;
}

.article-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
}

.article-image {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.article-content {
    max-width: 700px;
    margin: 65px auto 0;
    font-size: 1.05rem;
    line-height: 1.9;
}

.article-content p {
    margin-bottom: 25px;
}

.article-content h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 55px 0 25px;
}

.article-signature {
    font-family: Georgia, serif;
    font-style: italic;
    margin-top: 40px;
}

.article-bottom {
    max-width: 700px;
    margin: 65px auto 0;
    padding-top: 25px;
    border-top: 1px solid #d8d9cf;
}

.article-bottom a {
    font-weight: 600;
    color: #456250;
}

@media (max-width: 720px) {
    .field-article {
        padding: 55px 0 65px;
    }

    .article-header {
        margin-bottom: 30px;
    }

    .article-content {
        margin-top: 40px;
        font-size: 1rem;
    }

    .article-content h2 {
        margin-top: 40px;
    }

    .article-back {
        font-size: 0.75rem;
    }
}

/* Field Notes publication dates */

.article-date,
.field-note-date {
    color: #788779;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.article-date {
    margin-top: 20px;
}

.field-note-date {
    margin: 8px 0 18px;
}


/* Field Notes article preview */

.section.notes {
    display: block;
    padding-bottom: 105px;
}

.notes-intro {
    max-width: 650px;
    margin-bottom: 35px;
}

.notes-intro > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1.05rem;
}

.note-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eae9df;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.note-card:hover {
    transform: translateY(-4px);
}

.note-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}

.note-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
}

.note-date {
    color: #788779;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.note-card h3 {
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 20px;
}

.note-card-content > p:not(.note-date) {
    color: var(--muted);
}

.note-read {
    color: #456250;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 15px;
}

/* Mobile Field Notes */

@media (max-width: 720px) {
    .section.notes {
        padding-bottom: 65px;
    }

    .note-card {
        grid-template-columns: 1fr;
    }

    .note-card img {
        height: 230px;
        min-height: 0;
    }

    .note-card-content {
        padding: 28px;
    }
}


/* Explore Outdoor Silence - 16:9 thumbnails */
.feature-grid .feature.playlist-link {
    aspect-ratio: 16 / 9;
    min-height: 0;
    background-size: cover;
    background-position: center;
}

/* Keep the same proportions on mobile */
@media (max-width: 720px) {
    .feature-grid .feature.playlist-link {
        min-height: 0;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center;
    }
}


.gear-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 14px auto 0;
}


.gear-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}


.gear-link a svg.gear-icon {
    display: inline-block;
    width: 19px;
    height: 19px;
    min-width: 19px;
    max-width: 19px;
    color: #344d3d;
    flex-shrink: 0;
}


.gear-link a:hover {
    opacity: 0.65;
}

/* Collaborations page */
.collaborate-hero {
    min-height: 440px;
    display: flex;
    align-items: end;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(10, 25, 19, .82), rgba(10, 25, 19, .18)),
        url('../images/backgr.jpg') center 35% / cover no-repeat;
}

.collaborate-hero-inner {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 85px 0 65px;
}

.collaborate-hero h1 { margin: 12px 0 18px; }

.collaborate-hero-inner > p:last-child {
    max-width: 620px;
    margin: 0;
    color: #e0e6de;
}

.collaborate-content {
    max-width: 760px;
    padding-top: 85px;
    padding-bottom: 110px;
}

.collaborate-content h2 { margin-bottom: 24px; }

.collaborate-content > p:not(.eyebrow):not(.collaborate-email) {
    color: var(--muted);
    font-size: 1.05rem;
}

.collaborate-divider {
    height: 1px;
    background: #d8d9cf;
    margin: 55px 0;
}

.collaborate-contact {
    background: var(--pine);
    color: #fff;
    margin-top: 15px;
}

.collaborate-contact:hover { background: #304d40; }

.collaborate-email {
    margin-top: 14px;
    font-size: .85rem;
    color: var(--muted);
}

@media (max-width: 720px) {
    .collaborate-hero { min-height: 350px; }
    .collaborate-hero-inner { padding: 70px 0 45px; }
    .collaborate-content {
        padding-top: 55px;
        padding-bottom: 70px;
    }
    .collaborate-divider { margin: 40px 0; }
}

/* Selected Adventures – three equal cards across full width */
.pick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 900px) {
    .pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .pick-grid {
        grid-template-columns: 1fr;
    }
}

/* Explore – responsive 4-card layout */

@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer – fix for mobile */
@media (max-width: 600px) {

    footer .footer-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    footer .footer-links .social-links {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: 28px;
        row-gap: 20px;
        width: auto;
    }

    footer .footer-links .social-links a {
        white-space: nowrap;
    }
}
/* YouTube-inspired subscribe button */
#latest .subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 17px;
    border: none;
    border-radius: 24px;
    background: #e5e5e5;
    color: #242424;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#latest .subscribe-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#latest .subscribe-btn:hover {
    background: #d5d5d5;
}
/* Latest Adventure – grouped YouTube actions */
#latest .latest-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

@media (max-width: 700px) {
    #latest .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    #latest .latest-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 14px;
    }
}