/* Field Notes - A Free Design by Bryant Smith (bryantsmith.com)
   A naturalist's field notebook: cream graph paper, taped specimen
   boxes and hand-written labels. Every colour and measurement lives
   here. Follow the section headings to find what you want to change. */


/* ---- RESET: remove default spacing so we control it all ---- */

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


/* ---- BODY: the dark desk the notebook rests on ---- */

body {
    background-color: #31392a;
    background-image: radial-gradient(circle at 50% -10%, #4b5540 0%, #2b3222 58%, #1e2419 100%);
    background-attachment: fixed;
    color: #33322a;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.7;
    padding: 48px 16px;
    text-align: center;
}

a {
    color: #8f3f22;
}


/* ---- NOTEBOOK: the cream graph-paper page ---- */

#notebook {
    background-color: #f8f5e9;
    background-image:
        linear-gradient(rgba(94, 126, 124, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 126, 124, 0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 4px;
    box-shadow:
        inset 0 0 90px rgba(120, 100, 60, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.45);
    margin: 0 auto;
    max-width: 940px;
    padding: 34px 38px 26px 38px;
    text-align: left;
}


/* ---- MASTHEAD: title, volume mark and the menu ---- */

#masthead {
    align-items: flex-end;
    border-bottom: 2px solid #35342c;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 14px;
}

#titleblock h1 {
    color: #22211b;
    font-size: 42px;
    font-weight: normal;
    letter-spacing: -0.5px;
    line-height: 1;
}

.tagline {
    color: #7a705c;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 15px;
    margin-top: 6px;
}

.volume {
    color: #8a8172;
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#menu {
    flex-basis: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 16px;
    text-transform: uppercase;
}

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

#menu a:hover {
    border-bottom-color: #c98a6a;
    color: #8f3f22;
}


/* ---- DATALINE: the ruled heading found on every field page ---- */

.dataline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    margin: 16px 0 28px 0;
}

.dataline .field {
    align-items: baseline;
    display: flex;
    gap: 8px;
}

.dataline .key {
    color: #8a8172;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dataline em {
    border-bottom: 1px solid #c3b89c;
    color: #3a382f;
    font-style: italic;
    min-width: 130px;
    padding: 0 4px 2px 4px;
}


/* ---- SPREAD: two facing pages, with a soft fold at the spine ---- */

.spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.spread::before {
    background: linear-gradient(
        90deg,
        rgba(80, 68, 44, 0) 0%,
        rgba(80, 68, 44, 0.10) 42%,
        rgba(80, 68, 44, 0.22) 50%,
        rgba(80, 68, 44, 0.10) 58%,
        rgba(80, 68, 44, 0) 100%);
    bottom: 0;
    content: "";
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 30px;
}

.page {
    position: relative;
}

.page-left {
    padding: 10px 38px 96px 46px;
}

/* the red margin rule of the left-hand page */
.page-left::before {
    background: #c98a6a;
    bottom: 8px;
    content: "";
    left: 30px;
    opacity: 0.55;
    position: absolute;
    top: 6px;
    width: 1px;
}

.page-right {
    padding: 10px 30px 96px 46px;
}


/* ---- TEXT: the body copy inside the pages ---- */

.page p {
    margin-bottom: 14px;
}

.lead {
    color: #403d33;
    font-size: 18px;
    line-height: 1.7;
}

.lead::first-letter {
    color: #8f3f22;
    float: left;
    font-size: 3.2em;
    line-height: 0.8;
    padding: 4px 10px 0 0;
}

.page a {
    border-bottom: 1px solid #d8b6a0;
    color: #8f3f22;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.page a:hover {
    border-bottom-color: #59250f;
    color: #59250f;
}

h2 {
    border-bottom: 1px solid #cfc6ad;
    color: #3f5c30;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 3px;
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
    text-transform: uppercase;
}

h2::before {
    background: #8f3f22;
    content: "";
    display: inline-block;
    height: 8px;
    margin-right: 10px;
    vertical-align: middle;
    width: 8px;
}


/* ---- HANDWRITING: the scrawl of a naturalist ---- */

.label,
.meta,
.marginalia,
.folio,
.stamp,
.index .num {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}


/* ---- NOTE CARD: a taped-on instruction sheet ---- */

.note {
    background: #fffbe9;
    border: 1px solid #e3d9b8;
    box-shadow: 0 6px 16px rgba(90, 70, 30, 0.12);
    margin: 26px 0 34px 0;
    padding: 18px 20px;
    position: relative;
    transform: rotate(-0.6deg);
}

.note::before {
    background: linear-gradient(135deg, rgba(214, 196, 142, 0.92), rgba(228, 214, 170, 0.72));
    box-shadow: 0 2px 4px rgba(90, 70, 30, 0.18);
    content: "";
    height: 22px;
    left: 50%;
    position: absolute;
    top: -11px;
    transform: translateX(-50%) rotate(-3deg);
    width: 92px;
}

.note p {
    color: #4a4638;
    font-size: 15px;
    margin: 0;
}


/* ---- INDEX: numbered list with dotted leaders ---- */

.index {
    list-style: none;
}

.index li {
    align-items: baseline;
    border-bottom: 1px dotted #d3c9ad;
    display: flex;
    padding: 9px 0;
}

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

.index .num {
    color: #8f3f22;
    flex: none;
    font-size: 14px;
    width: 34px;
}

.index .dots {
    border-bottom: 2px dotted #bfb498;
    flex: 1;
    margin: 0 8px;
    min-width: 16px;
    transform: translateY(-4px);
}

.index .pg {
    color: #8a8172;
    font-size: 13px;
}

.marginalia {
    color: #8f3f22;
    font-size: 14px;
    margin-top: 34px;
    transform: rotate(-2deg);
}


/* ---- OBSERVATIONS: an ordered list counted in the margin ---- */

.observations {
    counter-reset: obs;
    list-style: none;
}

.observations li {
    margin-bottom: 22px;
    padding-left: 54px;
    position: relative;
}

.observations li::before {
    color: #9a4526;
    content: "No. " counter(obs);
    counter-increment: obs;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 13px;
    left: 0;
    position: absolute;
    top: 2px;
}

.observations p {
    margin-bottom: 8px;
}

.obs-title {
    color: #2b2a22;
    font-weight: bold;
}


/* ---- SPECIMENS: taped cards in a gently offset grid ---- */

.specimens {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
    margin: 8px 0 30px 0;
}

.specimen {
    background: #fffdf4;
    border: 1px solid #d9cfb6;
    box-shadow: 0 1px 0 #ffffff inset, 0 6px 14px rgba(80, 64, 30, 0.10);
    padding: 14px 12px 12px 12px;
    position: relative;
}

/* two pieces of tape hold each card down */
.specimen::before,
.specimen::after {
    background: linear-gradient(135deg, rgba(214, 196, 142, 0.92), rgba(228, 214, 170, 0.72));
    box-shadow: 0 2px 4px rgba(90, 70, 30, 0.16);
    content: "";
    height: 20px;
    position: absolute;
    width: 56px;
}

.specimen::before {
    left: 14px;
    top: -10px;
    transform: rotate(-6deg);
}

.specimen::after {
    bottom: -10px;
    right: 14px;
    transform: rotate(5deg);
}

.specimen:nth-child(odd) {
    transform: rotate(-1deg);
}

.specimen:nth-child(even) {
    margin-top: 22px;
    transform: rotate(1.2deg);
}

.sketch {
    align-items: center;
    display: flex;
    height: 96px;
    justify-content: center;
    margin-bottom: 10px;
}

.label {
    color: #2f2d24;
    font-size: 17px;
    line-height: 1.2;
}

.latin {
    color: #7a705c;
    font-size: 12px;
    font-style: italic;
}

.meta {
    color: #8f3f22;
    font-size: 13px;
    margin-top: 4px;
}


/* ---- SKETCHES: specimens drawn with CSS shapes only ---- */

/* a leaf: two rounded corners, turned on its side */
.leaf {
    background: linear-gradient(135deg, #8fb06a, #3f5c30);
    border-radius: 0 70% 0 70%;
    box-shadow: inset -8px -8px 14px rgba(0, 0, 0, 0.18);
    height: 64px;
    position: relative;
    transform: rotate(-45deg);
    width: 64px;
}

.leaf::after {
    background: rgba(255, 255, 255, 0.42);
    content: "";
    height: 84%;
    left: 50%;
    position: absolute;
    top: 8%;
    transform: translateX(-50%);
    width: 2px;
}

/* a beetle: head and body from pseudo-elements, legs from spans */
.beetle {
    height: 58px;
    position: relative;
    width: 44px;
}

.beetle::before {
    background: #2c1c0f;
    border-radius: 50% 50% 40% 40%;
    content: "";
    height: 16px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 20px;
    z-index: 1;
}

.beetle::after {
    background: radial-gradient(circle at 38% 28%, #7b573a, #241608 72%);
    border-radius: 50% 50% 46% 46%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    content: "";
    height: 44px;
    left: 0;
    position: absolute;
    top: 13px;
    width: 44px;
    z-index: 1;
}

.beetle .seam {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    height: 40px;
    left: 50%;
    position: absolute;
    top: 16px;
    transform: translateX(-50%);
    width: 2px;
    z-index: 2;
}

.beetle .antenna {
    background: #2c1c0f;
    border-radius: 2px;
    height: 16px;
    position: absolute;
    top: -6px;
    width: 2px;
    z-index: 2;
}

.beetle .antenna.left {
    left: 14px;
    transform: rotate(-28deg);
}

.beetle .antenna.right {
    right: 14px;
    transform: rotate(28deg);
}

/* a mushroom: stem behind, spotted cap in front */
.mushroom {
    height: 64px;
    position: relative;
    width: 70px;
}

.mushroom::before {
    background: linear-gradient(90deg, #e6dcc3, #f4edda 60%, #e6dcc3);
    border-radius: 4px 4px 8px 8px;
    bottom: 0;
    content: "";
    height: 32px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 20px;
}

.mushroom::after {
    background:
        radial-gradient(circle at 30% 46%, #e8b18c 0 5px, transparent 6px),
        radial-gradient(circle at 64% 30%, #e8b18c 0 4px, transparent 5px),
        linear-gradient(180deg, #b85a33, #8f3f22);
    border-radius: 36px 36px 8px 8px;
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.15);
    content: "";
    height: 38px;
    left: 0;
    position: absolute;
    top: 0;
    width: 70px;
}

/* a moulted feather: quill line over barbs */
.feather {
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #9a8f7d, #5f574b);
    border-radius: 50% 50% 50% 50% / 62% 62% 42% 42%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    height: 84px;
    position: relative;
    transform: rotate(14deg);
    width: 26px;
}

.feather::after {
    background: rgba(255, 255, 255, 0.45);
    content: "";
    height: 92%;
    left: 50%;
    position: absolute;
    top: 4%;
    transform: translateX(-50%);
    width: 2px;
}


/* a pressed sprig: a stem with leaves pinned either side */
.pressed {
    margin-top: 30px;
    max-width: 190px;
}

.sprig {
    background: linear-gradient(#6f8a4a, #3f5c30);
    border-radius: 4px;
    height: 84px;
    position: relative;
    width: 8px;
}

.sprig-leaf {
    background: #6f8a4a;
    border-radius: 0 70% 0 70%;
    height: 22px;
    position: absolute;
    width: 30px;
}

.sprig-leaf.l1 {
    left: 6px;
    top: 4px;
    transform: rotate(-28deg);
}

.sprig-leaf.l2 {
    left: -28px;
    top: 24px;
    transform: rotate(28deg) scaleX(-1);
}

.sprig-leaf.l3 {
    left: 6px;
    top: 44px;
    transform: rotate(-28deg);
}

.sprig-leaf.l4 {
    left: -28px;
    top: 62px;
    transform: rotate(28deg) scaleX(-1);
}


/* ---- STAMP & FOLIOS: the small marks on the page ---- */

.stamp {
    border: 2px solid rgba(143, 63, 34, 0.6);
    border-radius: 4px;
    bottom: 56px;
    box-shadow: inset 0 0 0 1px rgba(143, 63, 34, 0.3);
    color: rgba(143, 63, 34, 0.75);
    font-size: 13px;
    left: 26px;
    letter-spacing: 3px;
    padding: 6px 14px;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    transform: rotate(-11deg);
}

.folio {
    bottom: 22px;
    color: #8a8172;
    font-size: 15px;
    position: absolute;
}

.page-left .folio {
    left: 46px;
}

.page-right .folio {
    right: 46px;
}


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

#footer {
    border-top: 2px solid #35342c;
    color: #8a8172;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-top: 34px;
    padding-top: 16px;
    text-align: center;
    text-transform: uppercase;
}

#footer a {
    border-bottom: none;
    color: #6f6752;
    text-decoration: none;
}

#footer a:hover {
    color: #8f3f22;
}


/* ---- SMALL SCREENS: fold the notebook to one page ---- */

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

    #notebook {
        padding: 20px 18px 16px 18px;
    }

    #titleblock h1 {
        font-size: 32px;
    }

    .spread {
        grid-template-columns: 1fr;
    }

    .spread::before {
        display: none;
    }

    .page-left,
    .page-right {
        padding: 8px 4px 84px 4px;
    }

    .page-left::before {
        display: none;
    }

    .dataline em {
        min-width: 0;
    }

    .specimens {
        grid-template-columns: 1fr;
    }

    .specimen:nth-child(odd),
    .specimen:nth-child(even) {
        margin-top: 0;
        transform: none;
    }

    .stamp {
        left: 12px;
    }

    .page-left .folio {
        left: 4px;
    }

    .page-right .folio {
        right: 4px;
    }
}


/* ---- PRINT: a clean sheet, no desk and no shadows ---- */

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

    #notebook {
        background-image: none;
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }

    .spread::before,
    .page-left::before,
    #menu,
    .stamp {
        display: none;
    }

    #footer a,
    .page a {
        color: #33322a;
    }
}