/* Train Window - A Free Design by Bryant Smith (bryantsmith.com)
   A travel diary in cool blues and grays: a slim top bar, a wide story
   column on the left and a narrow rail of destination notes on the right.

   Every colour is gathered in the palette below, so the whole mood can be
   changed from one place. Look for the section headings to find your way. */


/* ---- PALETTE: change these hex values to recolour the page ---- */

:root {
    --canvas:    #e8edf3;  /* the cool gray surface behind the page  */
    --paper:     #ffffff;  /* the page itself                        */
    --bar:       #24425f;  /* the slim cool-blue top bar             */
    --bar-deep:  #1b3249;  /* the darker end of the bar gradient     */
    --blue:      #33628f;  /* primary accent: links, rules, labels   */
    --blue-soft: #6f93b5;  /* quieter blue for captions and hairlines */
    --tint:      #eaf0f6;  /* the rail background                    */
    --ink:       #243240;  /* body text and headings                 */
    --ink-soft:  #5d6b7a;  /* secondary text and fine print          */
    --line:      #d3dde8;  /* hairline borders                       */
}


/* ---- RESET & BASE: shared settings for the whole page ---- */

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

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.75;
    padding-bottom: 56px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:focus {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}


/* ---- TOP BAR: the slim full-width blue band with the menu ---- */

#topbar {
    background: linear-gradient(180deg, var(--bar) 0%, var(--bar-deep) 100%);
    border-bottom: 3px solid var(--blue);
    position: sticky;
    top: 0;
    z-index: 10;
}

.bar-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 940px;
    min-height: 58px;
    padding: 0 24px;
}

.brand {
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.brand::before {
    border: 2px solid #8fb4d6;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 9px;
    margin-right: 10px;
    vertical-align: middle;
    width: 9px;
}

#menu a,
#menu a:visited {
    border-bottom: 2px solid transparent;
    color: #c4d8ea;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-left: 22px;
    padding: 6px 0;
    text-transform: uppercase;
    transition: color 0.15s ease, border-color 0.15s ease;
}

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


/* ---- PAGE: the sheet of paper sitting below the top bar ---- */

#page {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    box-shadow: 0 22px 46px rgba(36, 66, 95, 0.10);
    margin: 0 auto;
    max-width: 940px;
}


/* ---- LAYOUT: wide story column left, narrow notes rail right ---- */

#layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
}

#main {
    max-width: 640px;
    padding: 46px 44px 56px 48px;
}


/* ---- MASTHEAD: the kicker, title and byline at the top of the story ---- */

.masthead {
    border-bottom: 1px solid var(--line);
    margin-bottom: 30px;
    padding-bottom: 26px;
}

.kicker {
    color: var(--blue);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.kicker::before {
    background: var(--blue);
    content: "";
    display: inline-block;
    height: 2px;
    margin-right: 10px;
    vertical-align: middle;
    width: 26px;
}

.masthead h1 {
    color: var(--ink);
    font-size: 48px;
    font-weight: normal;
    letter-spacing: -0.5px;
    line-height: 1.05;
    margin: 14px 0 12px 0;
}

.byline {
    color: var(--ink-soft);
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
}


/* ---- STORY: paragraphs, links and the opening lead ---- */

#main p {
    margin-bottom: 20px;
}

#main a {
    border-bottom: 1px solid var(--blue-soft);
    transition: border-color 0.15s ease, color 0.15s ease;
}

#main a:hover {
    border-bottom-color: var(--blue);
    color: var(--bar-deep);
}

.lead {
    color: var(--ink);
    font-size: 21px;
    line-height: 1.65;
}

.lead::first-letter {
    color: var(--blue);
    float: left;
    font-size: 3.2em;
    line-height: 0.82;
    padding: 6px 12px 0 0;
}


/* ---- ENTRIES: each dated diary entry ---- */

.entry {
    border-top: 1px solid var(--line);
    margin-top: 36px;
    padding-top: 30px;
}

.entry .date {
    color: var(--blue);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.entry h2 {
    color: var(--ink);
    font-size: 27px;
    font-weight: normal;
    line-height: 1.2;
    margin: 8px 0 16px 0;
}


/* ---- PHOTOS: CSS placeholder views and their captions ---- */

.photo {
    margin: 28px 0;
}

/* The plate is a CSS-only stand-in for a photograph. */
.plate {
    background-color: #cfe0ef;
    background-image:
        radial-gradient(90px 70px at 16% 100%, #7b97b1 0 70%, rgba(123, 151, 177, 0) 71%),
        radial-gradient(140px 90px at 44% 100%, #8ea9c1 0 70%, rgba(142, 169, 193, 0) 71%),
        radial-gradient(110px 64px at 78% 100%, #6f8ba6 0 70%, rgba(111, 139, 166, 0) 71%),
        linear-gradient(180deg, #bad2ea 0%, #dcebf7 58%, #c3d6e6 59%, #aec5d9 100%);
    border: 1px solid #bfd0e0;
    border-radius: 8px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.plate::before {
    background: #fafaf2;
    border-radius: 50%;
    box-shadow: 0 0 30px 8px rgba(255, 255, 255, 0.65);
    content: "";
    height: 40px;
    position: absolute;
    right: 44px;
    top: 26px;
    width: 40px;
}

/* A faint vertical bar, like the strut in a train window. */
.plate::after {
    background: rgba(255, 255, 255, 0.28);
    bottom: 0;
    content: "";
    left: 52%;
    position: absolute;
    top: 0;
    width: 2px;
}

.plate.alt {
    background-color: #c9d9e8;
    background-image:
        radial-gradient(120px 80px at 30% 100%, #7894ae 0 70%, rgba(120, 148, 174, 0) 71%),
        radial-gradient(160px 96px at 72% 100%, #8ba6be 0 70%, rgba(139, 166, 190, 0) 71%),
        linear-gradient(180deg, #b6cfe8 0%, #dbeaf5 62%, #bcd0e0 63%, #a4bbd0 100%);
}

.plate.alt::before {
    display: none;
}

/* Real images, if you add one, will always fit their column. */
.photo img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
}

.photo figcaption {
    border-left: 2px solid var(--blue-soft);
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
    margin-top: 10px;
    padding-left: 12px;
}


/* ---- QUOTE: an indented tinted passage ---- */

blockquote {
    background: var(--tint);
    border-left: 3px solid var(--blue);
    border-radius: 0 8px 8px 0;
    color: var(--ink-soft);
    font-size: 19px;
    font-style: italic;
    line-height: 1.6;
    margin: 34px 0;
    padding: 20px 24px;
}

blockquote p {
    margin: 0;
}


/* ---- PACKING: a marked list of small reminders ---- */

.packing {
    border-top: 1px solid var(--line);
    margin-top: 36px;
    padding-top: 30px;
}

.packing h2 {
    color: var(--ink);
    font-size: 27px;
    font-weight: normal;
    margin-bottom: 16px;
}

.tips {
    list-style: none;
}

.tips li {
    color: var(--ink-soft);
    margin-bottom: 12px;
    padding-left: 26px;
    position: relative;
}

.tips li::before {
    background: var(--tint);
    border: 2px solid var(--blue);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 8px;
}


/* ---- RAIL: the narrow right-hand column of destination notes ---- */

#rail {
    background: var(--tint);
    border-left: 1px solid var(--line);
    padding: 46px 22px 56px 22px;
}

.rail-title {
    border-bottom: 1px solid var(--line);
    color: var(--blue);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.note-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.note-card:hover {
    border-color: #b9cde0;
    box-shadow: 0 8px 18px rgba(36, 66, 95, 0.10);
    transform: translateY(-2px);
}

.note-card .km {
    color: var(--blue-soft);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.note-card h3 {
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
    margin: 5px 0 7px 0;
}

.note-card p {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}


/* ---- HOW TO USE: a gentle dashed callout in the rail ---- */

.howto {
    background: var(--paper);
    border: 1px dashed var(--blue-soft);
    border-radius: 10px;
    margin-top: 26px;
    padding: 16px;
}

.howto h3 {
    color: var(--blue);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.howto p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.howto strong {
    color: var(--ink);
}


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

#footer {
    background: #f7f9fc;
    border-top: 1px solid var(--line);
    color: #8b98a6;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 22px 24px;
    text-align: center;
    text-transform: uppercase;
}

#footer a,
#footer a:visited {
    color: #8b98a6;
    text-decoration: none;
    transition: color 0.15s ease;
}

#footer a:hover {
    color: var(--blue);
}


/* ---- SMALL SCREENS: stack the rail under the story ---- */

@media (max-width: 640px) {
    body {
        padding-bottom: 24px;
    }

    .bar-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 12px 20px;
    }

    #menu {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 16px;
    }

    #menu a {
        margin: 0;
    }

    #page {
        border-left: none;
        border-right: none;
    }

    #layout {
        display: block;
    }

    #main {
        max-width: 100%;
        padding: 32px 24px 40px 24px;
    }

    .masthead h1 {
        font-size: 34px;
    }

    .lead {
        font-size: 19px;
    }

    .plate {
        height: 160px;
    }

    #rail {
        border-left: none;
        border-top: 1px solid var(--line);
        padding: 32px 24px 40px 24px;
    }
}


/* ---- PRINT: drop the bar and the rail for a clean sheet ---- */

@media print {
    body {
        background: #ffffff;
        padding: 0;
    }

    #topbar,
    #rail {
        display: none;
    }

    #page {
        border: none;
        box-shadow: none;
        max-width: 100%;
    }

    #main {
        max-width: 100%;
        padding: 0;
    }
}