/* Code Diary - A Free Design by Bryant Smith (bryantsmith.com)
   A coding journal in charcoal and blue, built around a right-hand
   sidebar. Every colour sits in the palette below, so the whole page
   can be recoloured from one small block. Look for the SECTION headings
   to find the part you want to change. */


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

:root {
    --canvas:    #e9ecf1;  /* the pale desk behind the page      */
    --paper:     #ffffff;  /* the page itself                    */
    --charcoal:  #22262d;  /* the masthead and code blocks       */
    --charcoal2: #2c313a;  /* lighter end of the masthead fade   */
    --ink:       #2b3038;  /* body text                          */
    --ink-soft:  #626c79;  /* secondary text and fine print      */
    --line:      #e1e5eb;  /* hairline borders                   */
    --blue:      #2563eb;  /* primary accent: rules and marks    */
    --blue-ink:  #1b4fb0;  /* darker blue for link text          */
    --blue-wash: #eef4ff;  /* gentle blue tint                   */
    --blue-soft: #cfe0ff;  /* light blue borders                 */
}


/* ---- RESET & BASE: background, fonts and shared settings ---- */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--canvas);
    /* a faint dot grid, like squared paper under the page */
    background-image: radial-gradient(rgba(34, 38, 45, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.75;
    padding: 48px 16px;
    -webkit-font-smoothing: antialiased;
}

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

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


/* ---- PAGE: the sheet of paper, centred on the desk ---- */

#page {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(34, 38, 45, 0.05),
                0 20px 44px rgba(34, 38, 45, 0.12);
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
}


/* ---- MASTHEAD: the dark charcoal band at the top ---- */

#masthead {
    background:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(135deg, var(--charcoal2) 0%, var(--charcoal) 100%);
    border-bottom: 4px solid var(--blue);
    padding: 52px 56px 0 56px;
}

.kicker {
    color: #8fb4ff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    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: #ffffff;
    font-size: 54px;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 16px 0 8px 0;
}

#masthead .tagline {
    color: #aab6c8;
    font-size: 17px;
    font-style: italic;
    margin-bottom: 34px;
}


/* ---- MENU: the row of links along the foot of the masthead ---- */

#menu {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    padding: 18px 0 20px 0;
}

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

#menu a:hover,
#menu a:focus {
    border-bottom-color: var(--blue);
    color: #ffffff;
}


/* ---- LAYOUT: a reading column with a narrow right-hand rail ---- */

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


/* ---- CONTENT: the reading column on the left ---- */

#content {
    padding: 52px 48px 56px 56px;
}

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

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

#content a:hover {
    border-bottom-color: var(--blue);
    color: var(--blue);
}

.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;
}

code {
    background: var(--blue-wash);
    border: 1px solid var(--blue-soft);
    border-radius: 4px;
    color: var(--blue-ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86em;
    padding: 1px 5px;
}


/* ---- QUOTE: a small tinted passage for a line worth keeping ---- */

blockquote {
    background: var(--blue-wash);
    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.55;
    margin: 32px 0;
    padding: 20px 24px;
}

blockquote p {
    margin: 0;
}


/* ---- HEADINGS: small blue-marked labels above the entries ---- */

h2 {
    color: var(--charcoal);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2.5px;
    margin: 46px 0 18px 0;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}

h2::after {
    background: var(--line);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

h2::before {
    background: var(--blue);
    content: "";
    display: inline-block;
    height: 3px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
}

h3 {
    color: var(--charcoal);
    font-size: 20px;
    font-weight: normal;
}


/* ---- ENTRIES: the dated notes, marked with a blue dot ---- */

.entries {
    list-style: none;
}

.entries li {
    border-bottom: 1px solid var(--line);
    padding: 16px 0 16px 22px;
    position: relative;
}

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

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

.entries .date {
    color: var(--blue-ink);
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.entries .title {
    color: var(--ink);
    font-size: 19px;
    transition: color 0.15s ease;
}

.entries .title:hover {
    color: var(--blue);
}

.entries p {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 6px 0 0 0;
}


/* ---- SNIPPETS: dark preformatted blocks with a blue edge ---- */

.snippet-label {
    color: var(--ink-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.snippet {
    background: var(--charcoal);
    border-left: 4px solid var(--blue);
    border-radius: 0 10px 10px 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: #dde3ec;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 26px 0;
    overflow-x: auto;
    padding: 20px 22px;
    white-space: pre;
}

.snippet code {
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    padding: 0;
}

.snippet .cm { color: #93a0b5; }   /* comment  */
.snippet .kw { color: #8fb4ff; }   /* keyword  */


/* ---- PROJECTS: a tidy bordered list with status words ---- */

.stack {
    border: 1px solid var(--line);
    border-radius: 10px;
    list-style: none;
    overflow: hidden;
}

.stack li {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 15px 20px;
}

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

.stack li:nth-child(even) {
    background: #f7f9fc;
}

.stack .name {
    color: var(--charcoal);
    font-weight: bold;
}

.status {
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 3px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status.live {
    background: var(--blue-wash);
    border-color: var(--blue-soft);
    color: var(--blue-ink);
}

.status.wip {
    background: #eceff4;
    color: var(--ink-soft);
}


/* ---- HOW TO USE: a gentle instructional callout ---- */

.howto {
    background: var(--blue-wash);
    border: 1px dashed var(--blue-soft);
    border-radius: 10px;
    margin: 44px 0 8px 0;
    padding: 26px 28px;
}

.howto h3 {
    margin-bottom: 10px;
}

.howto p {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 0;
}

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


/* ---- SIDEBAR: the narrow rail of links on the right ---- */

#sidebar {
    background: #f5f7fa;
    border-left: 1px solid var(--line);
    padding: 52px 26px 48px 26px;
}

.side-block {
    margin-bottom: 34px;
}

.side-label {
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.links {
    list-style: none;
}

.links li {
    margin-bottom: 12px;
}

.links a {
    color: var(--ink);
    display: block;
    font-size: 15px;
    padding-left: 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.links a::before {
    color: var(--blue);
    content: "\2192";
    margin-right: 9px;
}

.links a:hover {
    color: var(--blue-ink);
    padding-left: 5px;
}

.tags {
    list-style: none;
}

.tags li {
    display: inline-block;
    margin: 0 6px 8px 0;
}

.tags a {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    display: inline-block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 4px 9px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tags a:hover {
    background: var(--blue-wash);
    border-color: var(--blue);
    color: var(--blue-ink);
}

.side-note {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.65;
}


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

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

#footer a,
#footer a:visited {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}

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


/* ---- MEDIUM SCREENS: fold the right rail under the text ---- */

@media (max-width: 880px) {
    #layout {
        display: block;
    }

    #sidebar {
        border-left: none;
        border-top: 1px solid var(--line);
        display: grid;
        gap: 0 32px;
        grid-template-columns: 1fr 1fr;
        padding: 38px 28px;
    }

    .side-block {
        margin-bottom: 28px;
    }
}


/* ---- SMALL SCREENS: ease the padding and shrink the type ---- */

@media (max-width: 640px) {
    body {
        background-image: none;
        padding: 18px 10px;
    }

    #masthead {
        padding: 36px 24px 0 24px;
    }

    #masthead h1 {
        font-size: 36px;
    }

    #menu {
        gap: 4px 16px;
    }

    #content {
        padding: 34px 24px 40px 24px;
    }

    .lead {
        font-size: 19px;
    }

    .lead::first-letter {
        font-size: 2.6em;
    }

    h2 {
        margin-top: 36px;
    }

    .entries .date {
        margin-bottom: 4px;
    }

    .snippet {
        font-size: 12.5px;
        padding: 16px;
    }

    #sidebar {
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }
}


/* ---- PRINT: drop the dark bands for a clean sheet of paper ---- */

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

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

    #masthead {
        background: #ffffff;
        border-bottom: 2px solid #000000;
        padding: 0 0 16px 0;
    }

    #masthead h1,
    #masthead .tagline,
    .kicker {
        color: #000000;
    }

    #menu,
    #sidebar {
        display: none;
    }

    #layout {
        display: block;
    }

    #content {
        padding: 0;
    }

    .snippet {
        background: #f2f2f2;
        border-left: 3px solid #000000;
        box-shadow: none;
        color: #000000;
    }

    .snippet .cm,
    .snippet .kw {
        color: #000000;
    }
}