/* Week Notes - A Free Design by Bryant Smith (bryantsmith.com)
   A weekly journal made of seven stacked day bands, a hero masthead and a
   small goals box. Colours, borders and spacing all live here.

   Every colour is gathered in the palette below, so you can recolour the whole
   page from one place. The section headings point you to the rest. */


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

:root {
    --canvas:      #e7e1d3;  /* the desk the page rests on          */
    --paper:       #fffdf8;  /* the page itself                     */
    --band:        #f8f4ea;  /* tint behind every other day         */
    --band-green:  #edf4ef;  /* tint behind the highlighted day     */
    --ink:         #27241e;  /* main body text                      */
    --ink-soft:    #6b6457;  /* secondary text and captions         */
    --pine:        #2f6b5a;  /* primary accent: rules, numbers      */
    --pine-deep:   #1f4a3e;  /* headings and day names              */
    --rust:        #b8562c;  /* second accent: the goals box        */
    --line:        #e3dccb;  /* hairline borders                    */
}


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

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

body {
    background: radial-gradient(circle at 50% 0, #f3efe5, var(--canvas) 70%);
    color: var(--ink);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.7;
    padding: 48px 16px;
    text-align: center;
}

#page {
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 44px rgba(0, 0, 0, 0.10);
    margin: 0 auto;
    max-width: 880px;
    overflow: hidden;
    text-align: left;
}

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


/* ---- MASTHEAD: the coloured band at the top of the week ---- */

#masthead {
    background: linear-gradient(135deg, #357a66, #235044 60%, #1c3f36);
    color: #f2efe2;
    padding: 54px 56px 58px 56px;
}

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

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

#masthead .tagline {
    color: #cfe3d9;
    font-size: 18px;
    font-style: italic;
    margin-top: 10px;
}

#menu {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 28px;
    padding-top: 18px;
    text-transform: uppercase;
}

#menu a,
#menu a:visited {
    color: #e7efe7;
    margin-right: 24px;
    padding-bottom: 3px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#menu a:hover {
    border-bottom-color: #f2b48c;
    color: #f2b48c;
}


/* ---- GOALS: the small box that overlaps the top of the week ---- */

#goals {
    background: #fffaf0;
    border: 1px solid #e7d8bd;
    border-left: 5px solid var(--rust);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    margin: -30px 56px 0 56px;
    padding: 24px 30px 22px 30px;
    position: relative;
}

#goals h2::before {
    background: var(--rust);
}

#goals .goals-note {
    color: var(--ink-soft);
    font-size: 14px;
    font-style: italic;
    margin-top: 4px;
}

.checklist {
    list-style: none;
    margin-top: 14px;
}

.checklist li {
    border-bottom: 1px dashed #ece0c8;
    padding: 8px 0 8px 34px;
    position: relative;
}

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

.checklist li::before {
    background: #ffffff;
    border: 2px solid #c9bda3;
    border-radius: 3px;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    top: 13px;
    width: 16px;
}

.checklist li.done::before {
    background: var(--pine);
    border-color: var(--pine);
}

.checklist li.done::after {
    color: #ffffff;
    content: "\2713";
    font-size: 12px;
    left: 3px;
    line-height: 1;
    position: absolute;
    top: 15px;
}


/* ---- HEADINGS: small uppercase labels used around the page ---- */

h2 {
    color: var(--pine-deep);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

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


/* ---- DAYS: seven labelled sections stacked down the page ---- */

#days {
    margin-top: 34px;
}

.day {
    border-top: 1px solid var(--line);
    display: flex;
    gap: 34px;
    padding: 36px 56px;
}

.day:nth-child(even) {
    background: var(--band);
}

.day.highlight {
    background: var(--band-green);
    box-shadow: inset 4px 0 0 var(--pine);
}

.day-label {
    border-top: 3px solid var(--pine);
    flex: 0 0 148px;
    padding-top: 12px;
}

.day-number {
    background: var(--pine);
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    margin-bottom: 10px;
    text-align: center;
    width: 22px;
}

.day-name {
    color: var(--pine-deep);
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.day-date {
    color: var(--ink-soft);
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-top: 4px;
}

.day-body {
    flex: 1 1 auto;
    min-width: 0;
}

.day-body h3 {
    color: #1c1a15;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.25;
    margin-bottom: 10px;
}

.day-body p {
    color: #3b382f;
    margin-bottom: 14px;
    max-width: 62ch;
}

.day-body .aside {
    border-left: 2px solid #d6ccb6;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 4px;
    padding-left: 16px;
}

.day-list {
    list-style: none;
    margin: 4px 0;
}

.day-list li {
    color: #3b382f;
    padding: 5px 0 5px 22px;
    position: relative;
}

.day-list li::before {
    background: var(--pine);
    border-radius: 50%;
    content: "";
    height: 7px;
    left: 2px;
    position: absolute;
    top: 14px;
    width: 7px;
}

blockquote {
    border-left: 3px solid var(--rust);
    color: #4a453b;
    font-size: 19px;
    font-style: italic;
    margin: 18px 0 4px 0;
    padding: 2px 0 2px 20px;
}

blockquote p {
    color: inherit;
    margin: 0;
}


/* ---- HOW TO USE: a short beginner note before the footer ---- */

#howto {
    background: var(--band);
    border-top: 1px solid var(--line);
    padding: 34px 56px 30px 56px;
}

#howto p {
    color: #4a453b;
    margin-top: 10px;
    max-width: 66ch;
}


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

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

#footer a,
#footer a:visited {
    color: #8b8474;
    text-decoration: none;
}

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


/* ---- SMALL SCREENS: stack the day labels above their notes ---- */

@media (max-width: 640px) {
    body {
        padding: 20px 10px;
    }

    #masthead {
        padding: 38px 24px 34px 24px;
    }

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

    #goals {
        margin: -22px 18px 0 18px;
        padding: 20px 20px 18px 20px;
    }

    .day {
        flex-direction: column;
        gap: 14px;
        padding: 26px 24px;
    }

    .day-label {
        align-items: center;
        border-top: none;
        display: flex;
        gap: 10px;
        padding-top: 0;
    }

    .day-number {
        margin-bottom: 0;
    }

    .day-date {
        margin: 0 0 0 auto;
    }

    #howto,
    #footer {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ---- PRINT: drop the colour and shadows for a clean paper copy ---- */

@media print {
    body {
        background: none;
        color: #000000;
        padding: 0;
    }

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

    #masthead {
        background: none;
        border-bottom: 2px solid #000000;
        color: #000000;
        padding: 0 0 18px 0;
    }

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

    #menu,
    #footer a {
        display: none;
    }

    #goals {
        background: none;
        border: 1px solid #000000;
        border-left: 5px solid #000000;
        box-shadow: none;
        margin: 24px 0;
    }

    .day,
    .day:nth-child(even),
    .day.highlight {
        background: none;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #howto {
        background: none;
    }

    a {
        color: #000000;
    }
}