/* ### Variables ### */
    :root {
      --desk:          #1e1a14;
      --page:          #f4edd8;
      --page-shadow:   #e6dbbf;
      --ink:           #1c1812;
      --ink-mid:       #5a5040;
      --ink-faint:     #9a8e7a;
      --accent:        #2e4a6b;
      --accent-light:  #5a80a8;
      --spine:         #1a2030;
      --rule:          #cdc0a5;
      --rule-dark:     #a8997a;
      --gold:          #c8960c;
 
      --serif:         'EB Garamond', Georgia, serif;
      --display:       'Playfair Display', Georgia, serif;
      --display-sc:    'Playfair Display SC', Georgia, serif;
      --mono:          'Courier Prime', 'Courier New', monospace;
    }

/* ### Reset ### */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; };

/* ### Base ### */
    body {
        min-height: 100%;
        background: var(--desk);
            background-image:
            repeating-linear-gradient(
            92deg,
            transparent,
            transparent 120px,
            rgba(255,255,255,0.012) 120px,
            rgba(255,255,255,0.012) 121px
            ),
            repeating-linear-gradient(
            178deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,0.04) 40px,
            rgba(0,0,0,0.04) 41px
            );
        color: var(--ink);
        font-family: var(--serif);
        line-height: 1.5;
        padding: 2.5rem 1rem;
    }

    main {
        position:relative;
        max-width: 780px;
        margin: 0 auto;
        background: var(--page);
            box-shadow:
                -1px 0 0 #d4c9a8,
                -2px 0 0 #c8bda0,
                -3px 0 0 #bcb194,
                -4px 0 0 #b0a58a,
                0 4px 8px rgba(0,0,0,0.15),
                0 12px 40px rgba(0,0,0,0.25),
                0 30px 80px rgba(0,0,0,0.2);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    }

/* # Page Layout # */
    .page-body {
        display: grid;
        grid-template-columns: 1fr 130px;
    }

    .page-content {
        padding: 2.5rem 1.5rem 3rem 3.5rem;
        border-right: 1px solid var(--rule);
    }

    .page-margin {
        padding: 2.5rem 1.25rem 3rem 1rem;
    }

/* ### Header & Nav ### */

/* # Running Header # */
    .running-header {
        padding: 0.6rem 2.5rem 0.6rem 2.8rem;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .running-header .section-name,
    .running-header .site-name {
        font-family: var(--display-sc);
        font-size: 0.72rem;
        color: var(--ink-mid);
        letter-spacing: 0.15em;
    }

    .running-header .header-rule {
        flex: 1;
        height: 1px;
        background: var(--rule);
        margin: 0 1.25rem;
        position: relative;
        top: -2px;
    }

/* # Navbar # */
    .section-nav {
        position: relative;
        border-top: 2px solid var(--rule);
        border-bottom: 2px solid var(--rule);
        z-index: 1;
        padding: 0.55rem 2.5rem 0.55rem 2.8rem;
        display: flex;
        align-items: baseline;
        gap: 0;
        background: var(--page-shadow);
    }
 
    .section-nav a {
        font-family: var(--display-sc);
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-decoration: none;
        color: var(--ink-faint);
        transition: color 0.12s;
        white-space: nowrap;
    }

    .section-nav a:hover { color: var(--ink-mid); }
 
    .section-nav a.active {
      color: var(--accent);
    }

    /* Mid-dot separators */
    .section-nav .nav-sep {
      font-family: var(--serif);
      color: var(--rule-dark);
      margin: 0 0.7rem;
      font-size: 0.8rem;
      position: relative;
      top: 1px;
      user-select: none;
    }

/* ### Title ### */
    .title-container {
        padding: 3.5rem 3rem 2rem 3.5rem;
        border-bottom: 2px solid var(--rule);
        text-align: center;
    }

    .byline {
        font-family: var(--display-sc);
        font-size: 0.75rem;
        letter-spacing: 0.2em;
        color: var(--ink-faint);
        margin-bottom: 0.75rem;
    }

    .title-container h1 {
        font-family: var(--display);
        font-size: 2.8rem;
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 0.5rem;
    }

    .title-container em {
        font-family: var(--display);
        font-style: italic;
        font-weight: 700;
        font-size: 1.4rem;
        display: block;
        color: var(--ink-mid);
        margin-top: 0.15rem;
    }

    .title-quote {
        font-family: var(--serif);
        max-width: 440px;
        margin: 0 auto;
        font-size: 0.9rem;
        color: var(--ink-mid);
        font-style: italic;
        line-height: 1.65;
    }

/* ### Headings & Separators ### */

/* # Section Heading # */
    .section-heading {
        font-family: var(--display-sc);
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        color: var(--ink-mid);
        margin-bottom: 1.25rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--rule);
    }

    .section-link {
        font-size: 0.7rem;
        color: var(--ink-faint);
        text-decoration: none;
        margin-left: 0.5rem;
    }

    .section-link:hover {
        color: var(--accent);
    }

/* # Ornaments # */
    .ornament {
        text-align: center;
        font-size: 1rem;
        color: var(--gold);
        letter-spacing: 0.6em;
        margin: 2rem 0;
        line-height: 1;
    }

/* Horizontal Rules */
    .hr {
        border: none;
        border-top: 1px solid var(--rule);
        margin: 2.5rem 0;
    }

/* ### Main Content ### */

/* # Opening # */
    .opening { margin-bottom: 2rem; }

    .opening p {
        font-family: var(--serif);
        font-size: 1rem;
        line-height: 1.75;
        color: var(--ink-mid);
        text-align: justify;
        hyphens: auto;
        margin-bottom: 0.75rem;
    }

    .opening p:first-of-type::first-letter {
        font-family: var(--display);
        font-size: 3.8rem;
        font-weight: 900;
        float: left;
        line-height: 0.78;
        margin-right: 0.1em;
        margin-top: 0em;
        color: var(--accent);
    }

/* # Garden # */
    .garden-list { list-style: none; }

    .garden-item {
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--page-shadow);
    }

    .garden-item:last-child { border-bottom: none; }

    .garden-number {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink-faint);
        margin-bottom: 0.2rem;
        letter-spacing: 0.05em;
    }

    .garden-title {
        font-family: var(--display);
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 0.5rem;
    }

    .garden-title a { color: var(--accent); text-decoration: none; }
    .garden-title a:hover { color: var(--accent-light); }

    .garden-excerpt {
        font-family: var(--serif);
        font-size: 0.92rem;
        color: var(--ink-mid);
        line-height: 1.65;
        text-align: justify;
        hyphens: auto;
    }

/* # Notes # */
    .note-entry {
        font-family: var(--serif);
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--page-shadow);
    }

    .note-entry:last-child { border-bottom: none; }

    .note-entry p {
        font-size: 0.95rem;
        line-height: 1.7;
        color: var(--ink);
        text-align: justify;
        hyphens: auto;
    }

/* ### Margin ### */
    .marginal-note {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink-faint);
        line-height: 1.45;
        margin-bottom: 2.4rem;
    }

    .marginal-note .m-label {
        font-family: var(--display-sc);
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        color: var(--accent);
        display: block;
        margin-bottom: 0.2rem;
    }

    .marginal-note .m-status {
        display: inline-block;
        font-family: var(--display-sc);
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        color: var(--accent-light);
        margin-top: 0.3rem;
    }

/* # Spine # */
    .spine {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 1.5rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        pointer-events: none;
        user-select: none;
    }

    .spine span {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        font-family: var(--display-sc);
        font-size: 0.69rem; /* Nice */
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold);
        white-space: nowrap;
    }

/* ### Index Nav ### */
    .toc-nav {
        border-top: 2px solid var(--rule);
        padding: 1.5rem 3.5rem 2rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
 
    .toc-section .toc-heading {
        font-family: var(--display-sc);
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        color: var(--ink-mid);
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--rule);
    }
 
    .toc-section ul { list-style: none; }
 
    .toc-section li {
        margin-bottom: 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.25rem;
    }
 
    .toc-section a {
        font-family: var(--serif);
        font-size: 0.82rem;
        color: var(--ink-mid);
        text-decoration: none;
        flex-shrink: 0;
    }
 
    .toc-section a:hover { color: var(--accent); }
 
    .toc-dots {
        flex: 1;
        border-bottom: 1px dotted var(--rule-dark);
        margin: 0 0.2rem;
        position: relative;
        top: -3px;
    }
 
    .toc-pg {
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--ink-faint);
        flex-shrink: 0;
    }

/* ### Footer ### */
    .page-footer {
        border-top: 2px solid var(--rule);
        padding: 0.75rem 3.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page-footer .folio-left,
    .page-footer .folio-right {
        font-family: var(--display-sc);
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        color: var(--ink-faint);
    }

    .page-footer .folio-left a,
    .page-footer .folio-right a {
        color: var(--ink-faint);
        text-decoration: none;
    }

    .page-footer .folio-left a:hover,
    .page-footer .folio-right a:hover { color: var(--accent); }

    .page-footer .folio-center {
        font-family: var(--serif);
        font-size: 0.85rem;
        color: var(--ink-faint);
    }

/* ### Responsiveness ### */
    @media (max-width: 680px) {
        body { padding: 0; }
        .book { box-shadow: none; }
        .book::before { width: 6px; }
        .page-body { grid-template-columns: 1fr; }
        .page-content { padding: 1.75rem 1.5rem 2rem 2rem; border-right: none; }
        .page-margin { display: none; }
        .toc-nav { grid-template-columns: repeat(2, 1fr); padding: 1.5rem 2rem; }
        .title-page { padding: 2rem 1.5rem 1.5rem 2rem; }
        .page-footer { padding: 0.75rem 2rem; }
        .running-header { padding: 0.6rem 1.5rem 0.6rem 2rem; }
        .thumb-tabs { display: none; }
        .bookmark { right: 24px; }
    }

/* ##### Other Pages ##### */
/* ### Garden Entry Page ### */
 
/* # Entry Header # */
    .entry-header {
        padding: 2.5rem 3rem 2rem 3.5rem;
        border-bottom: 1px solid var(--rule-dark);
        text-align: center;
    }
 
    .entry-back {
        font-family: var(--display-sc);
        font-size: 0.68rem;
        letter-spacing: 0.15em;
        color: var(--ink-faint);
        text-decoration: none;
        display: block;
        margin-bottom: 1.25rem;
        text-align: left;
    }
 
    .entry-back:hover { color: var(--accent); }
 
    .entry-title {
        font-family: var(--display);
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1.15;
        margin-bottom: 0.6rem;
    }
 
    .entry-subtitle {
        font-family: var(--serif);
        font-size: 1rem;
        font-style: italic;
        color: var(--ink-mid);
        max-width: 480px;
        margin: 0 auto;
        line-height: 1.6;
    }
 
/* # Entry Rule # */
    .entry-rule {
        border: none;
        border-top: 1px solid var(--rule);
        margin: 0;
    }
 
/* # Entry Body # */
    .entry-body {
        font-family: var(--serif);
        font-size: 1rem;
        line-height: 1.8;
        color: var(--ink);
        text-align: justify;
        hyphens: auto;
    }
 
    .entry-body p { margin-bottom: 1rem; }
    .entry-body p:last-child { margin-bottom: 0; }
 
    .entry-body h2 {
        font-family: var(--display);
        font-size: 1.3rem;
        font-weight: 700;
        margin: 2rem 0 0.75rem;
        color: var(--ink);
    }
 
    .entry-body h3 {
        font-family: var(--display-sc);
        font-size: 0.8rem;
        letter-spacing: 0.15em;
        margin: 1.5rem 0 0.5rem;
        color: var(--ink-mid);
    }
 
    .entry-body a {
        color: var(--accent);
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
 
    .entry-body blockquote {
        border-left: 2px solid var(--rule-dark);
        padding-left: 1.25rem;
        margin: 1.25rem 0;
        color: var(--ink-mid);
        font-style: italic;
    }
 
    .entry-body ul, .entry-body ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }
 
    .entry-body li { margin-bottom: 0.3rem; }
 
/* # Related Links # */
    .related-list {
        list-style: none;
    }
 
    .related-list li {
        margin-bottom: 0.4rem;
        padding-left: 1rem;
        position: relative;
    }
 
    .related-list li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--accent);
    }
 
    .related-list a {
        font-family: var(--serif);
        font-size: 0.92rem;
        color: var(--ink-mid);
        text-decoration: none;
    }
 
    .related-list a:hover { color: var(--accent); }