/* Camp Notes - A Free Design by Bryant Smith (bryantsmith.com)
   A stacked, band-by-band journal layout.
   Change the colours and spacing here; each section is labelled below. */


/* ---- RESET & BODY: the warm paper the whole page sits on ---- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #f2ecdf;
    color: #2b2a24;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a:focus {
    outline: 2px solid #b15a2b;
    outline-offset: 2px;
}


/* ---- BAND SYSTEM: full-width strips stacked down the page ----
   Each .band spans the whole screen; .band-inner keeps the reading
   column centred at a comfortable width. */

.band {
    border-bottom: 1px solid #ddd3bf;
    padding: 56px 20px;
    width: 100%;
}

.band-inner {
    margin: 0 auto;
    max-width: 820px;
}

.section-intro {
    color: #625d4d;
    margin: -8px 0 28px 0;
}


/* ---- MASTHEAD BAND: a dusk-sky gradient with the title and menu ---- */

.band-masthead {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.10), transparent 42%),
        radial-gradient(circle at 82% 6%, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(165deg, #14211a 0%, #223c2d 58%, #2f5240 100%);
    border-bottom: 4px double #b15a2b;
    color: #f2ecdf;
    padding: 68px 20px 54px 20px;
    text-align: center;
}

.kicker {
    color: #e0a878;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.band-masthead h1 {
    font-size: 56px;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 14px 0 0 0;
}

.tagline {
    color: #c3cfbd;
    font-size: 18px;
    font-style: italic;
    margin-top: 14px;
}

#menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    margin-top: 30px;
}

#menu a,
#menu a:visited {
    border-bottom: 2px solid transparent;
    color: #cfe0c6;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    padding-bottom: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#menu a:hover,
#menu a:focus {
    border-bottom-color: #c9803f;
    color: #ffffff;
}


/* ---- HEADINGS: a small label with a clay underline accent ---- */

h2 {
    border-bottom: 2px solid #cdbfa3;
    color: #33473a;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2.5px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    position: relative;
    text-transform: uppercase;
}

h2::after {
    background: #b15a2b;
    bottom: -2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 58px;
}


/* ---- INTRO BAND ---- */

.band-intro {
    background: #f2ecdf;
}

.lead {
    color: #3a382f;
    font-size: 21px;
    line-height: 1.65;
}

.lead::first-letter {
    color: #3f5d47;
    float: left;
    font-size: 3.3em;
    font-weight: bold;
    line-height: 0.78;
    padding: 6px 10px 0 0;
}

/* the "how to use" card */
.note {
    background: #fffdf7;
    border: 1px dashed #c8b89b;
    border-left: 4px solid #3f5d47;
    border-radius: 4px;
    margin-top: 34px;
    padding: 22px 26px;
}

.note-title {
    color: #33473a;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.note p {
    color: #4a473c;
}


/* ---- CAMPSITE BAND: tinted strip with a definition-list of details ---- */

.band-campsite {
    background: #e7e0cf;
    border-bottom: 1px solid #d3c7ad;
}

.details .row {
    border-bottom: 1px dashed #c3b596;
    display: flex;
    gap: 18px;
    padding: 15px 0;
}

.details .row:last-child {
    border-bottom: none;
}

.details dt {
    color: #6b6047;
    flex: 0 0 150px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding-top: 4px;
    text-transform: uppercase;
}

.details dd {
    color: #35342b;
    flex: 1;
}


/* ---- MEALS BAND: white strip with a dotted bullet list ---- */

.band-meals {
    background: #fffdf7;
}

.meals {
    list-style: none;
}

.meals li {
    border-bottom: 1px dashed #e2d8c4;
    padding: 14px 0 14px 32px;
    position: relative;
}

.meals li:last-child {
    border-bottom: none;
}

.meals li::before {
    background: #b15a2b;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(177, 90, 43, 0.14);
    content: "";
    height: 8px;
    left: 4px;
    position: absolute;
    top: 23px;
    width: 8px;
}

.meal-note {
    color: #776d55;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ---- HIKES BAND: the dark strip, numbered with a circular count ---- */

.band-hikes {
    background: linear-gradient(180deg, #243a2c 0%, #1b2c22 100%);
    border-bottom: 4px double #b15a2b;
    border-top: 4px double #b15a2b;
    color: #e8e3d5;
}

.band-hikes h2 {
    border-bottom-color: rgba(255, 255, 255, 0.18);
    color: #f0ebdd;
}

.band-hikes .section-intro {
    color: #a9b8a4;
}

.hikes {
    counter-reset: hike;
    list-style: none;
}

.hikes li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    counter-increment: hike;
    padding: 18px 0 18px 56px;
    position: relative;
}

.hikes li:last-child {
    border-bottom: none;
}

.hikes li::before {
    border: 1px solid #c9803f;
    border-radius: 50%;
    color: #e0a878;
    content: counter(hike, decimal-leading-zero);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 36px;
    left: 0;
    line-height: 34px;
    position: absolute;
    text-align: center;
    top: 18px;
    width: 36px;
}

.trail-name {
    display: block;
    font-size: 19px;
}

.trail-meta {
    color: #a9b8a4;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
}


/* ---- MEMORIES BAND: cream strip with a quote and small notes ---- */

.band-memories {
    background: #f2ecdf;
    border-bottom: none;
}

blockquote {
    border-left: 4px solid #b15a2b;
    color: #4a473c;
    font-size: 20px;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 2px 0 2px 24px;
}

blockquote p {
    margin: 0;
}

.notes {
    list-style: none;
}

.notes li {
    border-bottom: 1px solid #e2d8c4;
    padding: 11px 0 11px 26px;
    position: relative;
}

.notes li:last-child {
    border-bottom: none;
}

.notes li::before {
    color: #b15a2b;
    content: "\2014";
    left: 0;
    position: absolute;
}


/* ---- FOOTER: the required credit link ---- */

#footer {
    background: #1b2a21;
    color: #9db09a;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 28px 20px;
    text-align: center;
    text-transform: uppercase;
}

#footer a,
#footer a:visited {
    border-bottom: 1px solid rgba(201, 214, 194, 0.4);
    color: #c9d6c2;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#footer a:hover,
#footer a:focus {
    border-bottom-color: #b15a2b;
    color: #ffffff;
}


/* ---- SMALL SCREENS: tighten padding, type and stack the detail rows ---- */

@media (max-width: 640px) {
    .band {
        padding: 40px 18px;
    }

    .band-masthead {
        padding: 48px 18px 40px 18px;
    }

    .band-masthead h1 {
        font-size: 38px;
    }

    .tagline {
        font-size: 16px;
    }

    .lead {
        font-size: 19px;
    }

    .details .row {
        flex-direction: column;
        gap: 2px;
    }

    .details dt {
        flex-basis: auto;
        padding-top: 0;
    }

    .hikes li {
        padding-left: 48px;
    }

    blockquote {
        font-size: 18px;
    }
}


/* ---- PRINT: flat paper, no tinted bands or decoration ---- */

@media print {
    body {
        background: #ffffff;
        color: #000000;
        font-size: 12pt;
    }

    .band,
    .band-masthead,
    .band-campsite,
    .band-meals,
    .band-hikes,
    .band-memories {
        background: #ffffff;
        border: none;
        color: #000000;
        padding: 12px 0;
    }

    .band-masthead h1,
    .kicker,
    .tagline,
    .band-hikes h2,
    .band-hikes .section-intro,
    .trail-meta,
    .meal-note {
        color: #000000;
    }

    #menu {
        display: none;
    }
}