/* ===================================================================
   site.css: the site's hand-written "field notebook" styles. Plain
   CSS, no build step, no JavaScript. Loaded by the base layout for
   every page.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@300;400;700&display=swap');

:root {
    --nb-paper:    #FBF8EF;
    --nb-rule:     #E7E0CC;
    --nb-ink:      #2A2722;
    --nb-ink-soft: #6F6857;
    --nb-red:      #C8482F;
    --nb-blue:     #3C5A99;
    --nb-hl:       #FBE789;
    --nb-sticky:   #FCE5A0;
    --nb-hole:     rgba(42, 39, 34, 0.14);
}

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

.nb-body {
    margin: 0;
    padding: 0;
    background-color: var(--nb-paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 33px,
        var(--nb-rule) 33px 34px
    );
    color: var(--nb-ink);
    font-family: 'Kalam', 'Segoe Print', cursive;
    font-size: 20px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Page sheet -------------------------------------------------- */
.nb-page {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 720px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 5.5rem 4.5rem;
}

/* Punched binder holes down the left margin */
.nb-page::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 2.5rem;
    bottom: 2.5rem;
    width: 22px;
    background-image: radial-gradient(
        circle at center,
        var(--nb-hole) 0 5.5px,
        transparent 6.5px
    );
    background-size: 22px 58px;
    background-repeat: repeat-y;
}

/* --- Marginalia -------------------------------------------------- */
.nb-margins {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 15px;
    color: var(--nb-ink-soft);
}
.nb-margin-link {
    color: var(--nb-ink-soft);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.nb-margin-link:hover {
    color: var(--nb-red);
}

/* --- Masthead --------------------------------------------------- */
.nb-masthead {
    margin: 1.4rem 0 2.6rem;
}
.nb-title {
    margin: 0 0 0.3rem;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(44px, 9vw, 68px);
    line-height: 1.04;
}
.nb-underline {
    position: relative;
    white-space: nowrap;
}
.nb-underline::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -5px;
    bottom: 3px;
    height: 6px;
    background: var(--nb-red);
    border-radius: 60% 40% 55% 45% / 100% 100% 65% 75%;
    transform: rotate(-1.4deg);
}
.nb-star {
    color: var(--nb-red);
    font-size: 0.62em;
    vertical-align: 0.32em;
}

/* --- Error / danger pages --------------------------------------- */
.nb-hazard {
    height: 15px;
    margin: 0 0 1.5rem;
    background: repeating-linear-gradient(
        -45deg,
        var(--nb-red) 0 13px,
        transparent 13px 26px
    );
    opacity: 0.85;
    transform: rotate(-0.7deg);
}
/* Reuse the canonical .nb-stamp (the "Drafted" oval stamp) for the
   error code; just fix its layout for the masthead context. */
.nb-error .nb-stamp {
    display: inline-block;
    align-self: flex-start;
    margin: 0.2rem 0 1.1rem;
}
.nb-error .nb-title {
    color: var(--nb-red);
}
.nb-error .nb-underline::after {
    background: var(--nb-ink);
}
.nb-error .nb-star {
    color: var(--nb-ink);
}
.nb-tagline {
    margin: 0;
    font-size: 19px;
    color: var(--nb-ink-soft);
}

/* --- Highlighter marker ----------------------------------------- */
.nb-hl {
    background: var(--nb-hl);
    mix-blend-mode: multiply;
    padding: 0.02em 0.22em;
    margin: 0 -0.06em;
    border-radius: 0.55em 0.3em 0.6em 0.35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --- Sections & headings ---------------------------------------- */
.nb-section {
    margin: 0 0 2.5rem;
}
.nb-heading {
    margin: 0 0 0.5rem;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(30px, 5.5vw, 40px);
    line-height: 1.1;
}
.nb-heading-soft {
    color: var(--nb-ink-soft);
}
.nb-scribble {
    font-family: 'Kalam', cursive;
    font-weight: 300;
    font-size: 15px;
    color: var(--nb-ink-soft);
}
.nb-arrow,
.nb-arrow-in {
    color: var(--nb-red);
}
.nb-prose {
    margin: 0.35rem 0;
}
.nb-aside {
    margin: 0.5rem 0 0;
    font-weight: 300;
    font-size: 17px;
    color: var(--nb-ink-soft);
}
.nb-empty {
    color: var(--nb-ink-soft);
}

/* --- Currently shipping: hand-drawn boxes ----------------------- */
.nb-boxes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}
.nb-box {
    border: 2.5px solid var(--nb-ink);
    border-radius: 14px 9px 16px 8px / 9px 15px 8px 14px;
    padding: 1.2rem 1.5rem 1.3rem;
}
.nb-box-main { transform: rotate(-0.5deg); }
.nb-box-side { transform: rotate(0.45deg); }
.nb-box-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.6rem;
}
.nb-box-title {
    margin: 0;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 31px;
    line-height: 1;
}
.nb-quest {
    font-family: 'Kalam', cursive;
    font-weight: 400;
    font-size: 15px;
}
.nb-box-main .nb-box-title,
.nb-box-main .nb-quest { color: var(--nb-red); }
.nb-box-side .nb-box-title,
.nb-box-side .nb-quest { color: var(--nb-blue); }
.nb-box-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px dotted currentColor;
}
.nb-box-link:hover {
    border-bottom-style: solid;
}
.nb-box-desc {
    margin: 0.5rem 0 0;
    font-size: 18px;
}

/* --- To-do list ------------------------------------------------- */
.nb-todo {
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}
.nb-todo-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}
.nb-checkbox,
.nb-tick {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 0.32rem;
    border: 2.2px solid var(--nb-ink);
    border-radius: 6px 3px 7px 4px;
}
.nb-tick {
    position: relative;
}
.nb-tick::after {
    content: "";
    position: absolute;
    left: 4px;
    top: -4px;
    width: 8px;
    height: 15px;
    border: solid var(--nb-red);
    border-width: 0 3px 3px 0;
    transform: rotate(40deg);
}
.nb-todo-text {
    font-size: 19px;
}
.nb-todo-item.is-done .nb-todo-text {
    color: var(--nb-ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--nb-red);
}

/* --- Sticky note ------------------------------------------------ */
.nb-sticky {
    max-width: 30rem;
    margin: 0 0 2.5rem;
    padding: 1.3rem 1.5rem;
    background: var(--nb-sticky);
    box-shadow: 0 12px 24px -14px rgba(42, 39, 34, 0.55);
    transform: rotate(-1.8deg);
}
.nb-sticky p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}
.nb-sticky p.nb-sticky-ps {
    margin-top: 0.7rem;
    font-size: 15px;
    opacity: 0.7;
}

/* --- Latest blog entry ------------------------------------------ */
.nb-entry {
    display: block;
    margin-top: 0.9rem;
    color: inherit;
    text-decoration: none;
}
.nb-entry-title {
    margin: 0 0 0.15rem;
    font-size: 21px;
}
.nb-entry-meta {
    margin: 0;
    font-size: 16px;
    color: var(--nb-ink-soft);
}
.nb-entry-link {
    color: var(--nb-red);
}
.nb-entry:hover .nb-entry-link {
    text-decoration: underline;
}

/* --- "Drafted" stamp -------------------------------------------- */
.nb-stamp {
    align-self: flex-end;
    margin-top: 1.5rem;
    padding: 0.25rem 1.3rem 0.35rem;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-red);
    border: 3px solid var(--nb-red);
    border-radius: 42% 38% 45% 40% / 50% 46% 52% 48%;
    opacity: 0.72;
    transform: rotate(-8deg);
}

/* --- Narrow screens --------------------------------------------- */
@media (max-width: 640px) {
    .nb-body {
        font-size: 18px;
    }
    .nb-page {
        padding: 2.5rem 1.25rem 4rem 2.9rem;
    }
    .nb-page::before {
        left: 0.5rem;
        width: 16px;
        background-size: 16px 52px;
    }
    .nb-margins {
        flex-direction: column;
        gap: 0.15rem;
        font-size: 13px;
    }
}

/* --- Divider tabs (cross-page nav) ------------------------------ */
.nb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px dashed var(--nb-rule);
}
.nb-tab {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.2rem 0.8rem;
    color: var(--nb-ink-soft);
    text-decoration: none;
    background: #F3EEDD;
    border: 1.5px solid var(--nb-ink);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    transform: translateY(2px);
}
.nb-tab:hover { color: var(--nb-ink); }
.nb-tab.is-on {
    background: var(--nb-hl);
    color: var(--nb-ink);
    font-weight: 700;
    transform: translateY(0);
    box-shadow: 0 -2px 0 var(--nb-ink);
}

/* --- About timeline --------------------------------------------- */
.nb-timeline { list-style: none; margin: 0; padding: 0; }
.nb-tl-item {
    position: relative;
    padding: 0 0 1.1rem 1.4rem;
    border-left: 2px solid var(--nb-rule);
}
.nb-tl-item::before {
    content: "";
    position: absolute;
    left: -7px; top: 0.5rem;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--nb-ink-soft);
}
.nb-tl-item.is-now::before { background: var(--nb-red); }
.nb-tl-date { display: block; font-size: 14px; color: var(--nb-ink-soft); }
.nb-tl-role { display: block; font-weight: 700; }
.nb-tl-note { margin: 0.2rem 0 0; color: var(--nb-ink-soft); }

/* --- Work: taped-in cards, tags, quotes ------------------------- */
.nb-cards { display: flex; flex-direction: column; gap: 1.2rem; }
.nb-card {
    background: #FFFDF8;
    border: 1px solid #EAE3D0;
    border-radius: 3px;
    padding: 1rem 1.2rem;
    box-shadow: 0 3px 10px rgba(42, 39, 34, 0.08);
}
.nb-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.nb-card-title { margin: 0; font-size: 1.3rem; }
.nb-card-meta { margin: 0.1rem 0 0.4rem; font-size: 14px; color: var(--nb-ink-soft); }
.nb-card-desc { margin: 0 0 0.6rem; color: var(--nb-ink-soft); }
.nb-tags { margin: 0; }
.nb-tag {
    font-family: 'Caveat', cursive;
    font-size: 1.05rem;
    color: var(--nb-blue);
    border: 1.5px solid var(--nb-blue);
    border-radius: 12px;
    padding: 0 0.5rem;
    margin-right: 0.35rem;
    white-space: nowrap;
}
.nb-quote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--nb-red);
    color: var(--nb-ink);
}
.nb-quote footer { color: var(--nb-ink-soft); font-size: 15px; }

/* --- Contact form ----------------------------------------------- */
.nb-form { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.nb-hp { position: absolute; left: -9999px; }
.nb-field { display: flex; flex-direction: column; gap: 0.2rem; }
.nb-field-label { font-family: 'Caveat', cursive; font-size: 1.2rem; color: var(--nb-ink-soft); }
.nb-input {
    font-family: 'Kalam', cursive;
    font-size: 1rem;
    color: var(--nb-ink);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--nb-ink-soft);
    padding: 0.3rem 0.1rem;
}
.nb-input:focus { outline: none; border-bottom-color: var(--nb-red); }
.nb-textarea { resize: vertical; border: 2px solid var(--nb-ink-soft); border-radius: 4px; }
.nb-field-error { color: var(--nb-red); font-size: 15px; }
.nb-form-errors {
    color: var(--nb-red);
    border: 1.5px dashed var(--nb-red);
    border-radius: 4px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
}
.nb-submit {
    align-self: flex-start;
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    color: var(--nb-ink);
    background: var(--nb-hl);
    border: 2px solid var(--nb-ink);
    border-radius: 6px;
    padding: 0.1rem 1.1rem;
    cursor: pointer;
}
.nb-submit:hover { transform: rotate(-1deg); }
.nb-success-title { font-family: 'Caveat', cursive; font-size: 2rem; margin: 0 0 0.4rem; }

/* --- Notes index ------------------------------------------------ */
.nb-tagfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nb-chip {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--nb-ink-soft);
    text-decoration: none;
    border: 1.5px solid var(--nb-ink-soft);
    border-radius: 14px;
    padding: 0 0.7rem;
}
.nb-chip.is-on { color: var(--nb-ink); border-color: var(--nb-red); box-shadow: inset 0 0 0 1px var(--nb-red); }
.nb-entries { list-style: none; margin: 0; padding: 0; }
.nb-entry-row { border-bottom: 1px dashed var(--nb-rule); }
.nb-entry-row-link { display: block; padding: 0.7rem 0; text-decoration: none; color: var(--nb-ink); }
.nb-entry-row-link:hover .nb-entry-row-title { color: var(--nb-red); }
.nb-entry-row-title { display: block; font-size: 1.3rem; font-weight: 700; }
.nb-entry-row-sum { display: block; color: var(--nb-ink-soft); }
.nb-entry-row-meta { display: block; font-size: 14px; color: var(--nb-ink-soft); }

/* --- Article: taped-in typed page ------------------------------- */
.nb-back { margin: 0.4rem 0; }
.nb-post-meta { font-size: 14px; color: var(--nb-ink-soft); margin: 0 0 0.3rem; }
.nb-paper {
    position: relative;
    background: #FFFDF8;
    border: 1px solid #EAE3D0;
    border-radius: 3px;
    margin: 1.6rem 0;
    padding: 2rem 2.2rem;
    box-shadow: 0 6px 18px rgba(42, 39, 34, 0.10);
}
.nb-paper::before, .nb-paper::after {
    content: "";
    position: absolute;
    width: 90px; height: 24px;
    top: -11px;
    background: rgba(214, 201, 150, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.nb-paper::before { left: 16%; transform: rotate(-4deg); }
.nb-paper::after { right: 16%; transform: rotate(3deg); }

/* Typed, legible body inside the taped-in sheet */
.nb-prose-typed {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #26231e;
}
.nb-prose-typed h1, .nb-prose-typed h2, .nb-prose-typed h3 { font-weight: 600; line-height: 1.25; margin: 1.6rem 0 0.5rem; }
.nb-prose-typed p { margin: 0 0 1rem; }
.nb-prose-typed a { color: var(--nb-blue); }
.nb-prose-typed blockquote { border-left: 3px solid var(--nb-red); margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; color: var(--nb-ink-soft); font-style: italic; }
.nb-prose-typed code { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 0.85em; background: #F0ECE0; padding: 0.1em 0.35em; border-radius: 3px; }
.nb-prose-typed pre { background: #1e1b16; color: #e8e2d4; border-radius: 6px; padding: 1rem 1.1rem; overflow: auto; }
.nb-prose-typed pre code { background: transparent; padding: 0; font-size: 0.82rem; }
.nb-prose-typed img { max-width: 100%; border-radius: 4px; }

/* Comments */
.nb-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #3F6212;
    background: #ECFCCB;
    border: 2.5px solid #65A30D;
    border-radius: 11px 7px 12px 6px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 19px;
    line-height: 1.45;
    box-shadow: 0 10px 20px -13px rgba(63, 98, 18, 0.55);
    transform: rotate(-0.5deg);
}
.nb-flash::before {
    content: "✓";
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.2;
    color: #65A30D;
}
.nb-comment-list { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.nb-comment { border-bottom: 1px dashed var(--nb-rule); padding: 0.6rem 0; }
.nb-comment-head { margin: 0; font-weight: 700; }
.nb-comment-time { color: var(--nb-ink-soft); font-weight: 400; font-size: 14px; }
.nb-comment-body { margin: 0.2rem 0 0; color: var(--nb-ink); white-space: pre-line; }

/* --- Touch targets ---------------------------------------------- */
/* The layout already reflows down to ~320px; this block only grows
   the tap targets so links, inputs and buttons clear the ~44px thumb
   minimum on touch screens. Placed last so it wins on source order
   over the base .nb-tab / .nb-input / .nb-submit rules above. */
@media (max-width: 640px) {
    .nb-tab {
        padding: 0.6rem 1rem;
        font-size: 1.3rem;
    }
    .nb-chip {
        padding: 0.3rem 0.85rem;
        font-size: 1.2rem;
    }
    .nb-input {
        /* keep >= 16px so iOS Safari does not zoom in on focus */
        font-size: 16px;
        padding: 0.6rem 0.1rem;
    }
    .nb-textarea {
        padding: 0.6rem 0.7rem;
    }
    .nb-submit {
        font-size: 1.5rem;
        padding: 0.45rem 1.4rem;
    }
    /* Comfortable row height for the in-page note links */
    .nb-entry-row-link {
        padding: 0.9rem 0;
    }
}