/* Notes from Derek — v1.7 */

/* ============================================
   ARCHIVE PAGE
   ============================================ */

.notes-page {
    padding: 5rem 0 4rem;
}

.notes-page__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero */
.notes-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.notes-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--v-text);
    margin: 0 0 0.5rem;
}

.notes-hero__subtitle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--v-text-secondary);
    margin: 0;
}

/* Entry List */
.notes-list {
    display: flex;
    flex-direction: column;
}

.notes-entry {
    border-bottom: 1px solid var(--v-border);
}

.notes-entry:first-child {
    border-top: 1px solid var(--v-border);
}

.notes-entry__link {
    display: block;
    padding: 1.5rem 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.notes-entry__link:hover {
    opacity: 0.8;
}

.notes-entry__date {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v-text-muted);
    margin-bottom: 0.4rem;
}

.notes-entry__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--v-text);
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.notes-entry__excerpt {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--v-text-secondary);
    margin: 0 0 0.4rem;
}

.notes-entry__read {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-accent);
    opacity: 0.7;
}

.notes-entry__link:hover .notes-entry__read {
    opacity: 1;
}

/* Pagination */
.notes-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 0;
}

.notes-pagination__link {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-accent);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.notes-pagination__link:hover {
    opacity: 0.7;
}

.notes-pagination__current {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--v-text-muted);
}

/* Empty */
.notes-empty {
    text-align: center;
    padding: 3rem 0;
}

.notes-empty__text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--v-text-muted);
}


/* ============================================
   SINGLE POST
   ============================================
   Reading column: 680px.
   Pull quotes and writing-guide excerpts can break out
   to a slightly wider band (820px) on desktop to act as
   visual punctuation. Mobile keeps everything in column.
*/

/* Note-scoped tone variables.
   The site's default --v-text-secondary (#c8b48e) reads as
   distinctly yellow-gold in long-form pull quotes and excerpts.
   These cooler variants keep warmth without pushing into amber.
   Light/sepia variants follow the existing palette logic. */
.note-single {
    --note-quote-fg: #e2dccb;       /* cooler than --v-text (#f0e6d2) */
    --note-quote-glyph: #d8a06b;    /* lighter, warmer than --v-accent — ornamental */
    --note-excerpt-fg: #b8b0a2;     /* cooler than --v-text-secondary (#c8b48e) */
    --note-excerpt-label: #8e8576;
    --note-subtitle-fg: #d8d0bf;    /* cream-neutral; reads close to title without competing */
}

html[data-theme="light"] .note-single {
    --note-quote-fg: #2a2520;
    --note-quote-glyph: #b87b3f;    /* gold-bronze on cream */
    --note-excerpt-fg: #5a544c;
    --note-excerpt-label: #8a8175;
    --note-subtitle-fg: #4a4540;
}

html[data-theme="sepia"] .note-single {
    --note-quote-fg: #3d3329;
    --note-quote-glyph: #b8843a;
    --note-excerpt-fg: #6b6357;
    --note-excerpt-label: #998d7d;
    --note-subtitle-fg: #5a5044;
}

.note-single {
    padding: 5rem 0 4rem;
}

.note-single__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---------- Header ---------- */

.note-single__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.note-single__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-text-muted);
    margin-bottom: 1.2rem;
}

.note-single__meta-sep {
    opacity: 0.5;
}

.note-single__date,
.note-single__readtime {
    display: inline-block;
}

.note-single__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--v-text);
    margin: 0;
    line-height: 1.18;
    letter-spacing: 0.005em;
}

/* Subtitle: smaller, italic, but in a brighter neutral cream so it
   doesn't fade against the body. Sits below the H1 and carries the
   "On X, Y, and Z" sub-frame so the title proper can be short and
   punchy. */
.note-single__subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 400;
    color: var(--note-subtitle-fg);
    margin: 0.9rem 0 0;
    line-height: 1.35;
    letter-spacing: 0.005em;
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Featured image ---------- */

.note-single__featured {
    margin: 0 0 3rem;
    /* Allow breakout slightly past the reading column. */
    margin-left: calc((680px - min(820px, 92vw)) / 2);
    margin-right: calc((680px - min(820px, 92vw)) / 2);
}

.note-single__featured-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.note-single__featured-caption {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--v-text-muted);
    text-align: center;
    margin-top: 0.8rem;
}

/* ---------- Body ---------- */

.note-single__body {
    margin-bottom: 2rem;
}

.note-single__body p {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.18rem;
    line-height: 1.78;
    color: var(--v-text);
    margin: 0 0 1.4em;
}

/* Dropcap on the first paragraph of the post body.
   Stops at any block that breaks the post into sections
   so we don't get a dropcap mid-essay if the author
   leads with a quote or image. */
.note-single__body > p:first-child::first-letter {
    font-family: 'Cormorant Garamond', Georgia, serif;
    float: left;
    font-size: 4.6rem;
    line-height: 0.9;
    font-weight: 400;
    color: var(--v-accent);
    padding: 0.35rem 0.6rem 0 0;
    margin-top: 0.1rem;
}

/* Headings — restored to proper rhythm */

.note-single__body h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--v-text);
    line-height: 1.25;
    margin: 4rem 0 1.2rem;
    position: relative;
    padding-top: 1.2rem;
}

/* Thin accent rule above each H2 — signals "new section". */
.note-single__body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--v-accent);
    opacity: 0.55;
}

.note-single__body h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: var(--v-text-secondary);
    line-height: 1.3;
    margin: 2.8rem 0 0.7rem;
}

/* Links inside body */

.note-single__body a {
    color: var(--v-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 138, 80, 0.35);
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.note-single__body a:hover {
    border-color: var(--v-accent);
    opacity: 0.85;
}

/* In-body images */

.note-single__body img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    margin: 2rem 0;
}

.note-single__body figure {
    margin: 2.5rem 0;
}

.note-single__body figcaption {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--v-text-muted);
    text-align: center;
    margin-top: 0.6rem;
}

/* Default blockquote — kept restrained for inline quotation.
   For larger emphasis, use .pullquote or .excerpt below. */

.note-single__body blockquote {
    border-left: 2px solid var(--v-accent);
    padding: 0.2rem 0 0.2rem 1.4rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--v-text-secondary);
}

.note-single__body blockquote p {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ---------- Pull quote ----------
   Usage in the editor (Text tab):
   <aside class="pullquote">The line you want to amplify.</aside>

   Or, for an attribution:
   <aside class="pullquote">The line. <cite>— Derek</cite></aside>
*/

.note-single__body .pullquote {
    /* Breakout: wider than the 680px column on desktop.
       Left-aligned (literary-magazine style) with a decorative gold
       opening quote glyph hugging the upper-left. */
    position: relative;
    max-width: min(820px, 92vw);
    margin: 3.5rem auto 3.5rem;
    margin-left: calc((680px - min(820px, 92vw)) / 2);
    margin-right: calc((680px - min(820px, 92vw)) / 2);
    padding: 2.3rem 2rem 2rem 3.5rem;
    border-top: 1px solid var(--v-border-strong);
    border-bottom: 1px solid var(--v-border-strong);
    text-align: left;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 2.0rem;
    line-height: 1.36;
    color: var(--note-quote-fg);
    letter-spacing: 0.005em;
    overflow: visible;
}

/* Decorative opening quote — warm cream-gold, full alpha so the hue
   stays gold rather than blending to brown against the dark navy bg.
   Sized to sit beside the text rather than dominate it. */
.note-single__body .pullquote::before {
    content: "\201C";  /* left double quotation mark */
    position: absolute;
    top: -0.05em;
    left: 0.2rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 7.5rem;
    line-height: 1;
    color: var(--note-quote-glyph);
    pointer-events: none;
    z-index: 0;
}

/* The text itself sits above the decorative quote. */
.note-single__body .pullquote p,
.note-single__body .pullquote > * {
    position: relative;
    z-index: 1;
}

/* Pull quote and writing-guide excerpt keep their literary serif even when
   the reader has selected the sans reading font — they are typographic
   punctuation, not body prose. Highest-specificity overrides.
   font-size: inherit also defeats inline styles applied by reading.js
   when the user adjusts body font size via the toolbar. */
.note-single__body[data-font="sans"] .pullquote,
.note-single__body[data-font="sans"] .pullquote p {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
}

.note-single__body .pullquote p {
    margin: 0;
    /* Inherit the pull quote's font characteristics rather than the body's. */
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-style: inherit !important;
    color: inherit !important;
}

.note-single__body .pullquote cite {
    display: block;
    margin-top: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--note-excerpt-label);
}

/* ---------- Specimen / "from the writing guide" excerpt ----------
   Usage in the editor (Text tab):

   <div class="excerpt">
     <span class="excerpt__label">From the Vesper writing guide</span>
     <p>The actual excerpt text here…</p>
     <p>A second paragraph if needed.</p>
   </div>
*/

.note-single__body .excerpt {
    margin: 3rem 0;
    padding: 1.8rem 1.8rem 1.4rem;
    background: var(--v-bg-elevated);
    border-left: 2px solid var(--v-accent);
    border-radius: 2px;
}

.note-single__body .excerpt__label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--note-excerpt-label);
    margin-bottom: 1rem;
}

.note-single__body .excerpt p {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--note-excerpt-fg);
    margin-bottom: 0.9em;
}

.note-single__body .excerpt p:last-child {
    margin-bottom: 0;
}

/* Excerpt stays in serif even when reader has selected sans body font. */
.note-single__body[data-font="sans"] .excerpt p {
    font-family: 'EB Garamond', Georgia, serif !important;
}

/* ---------- Section divider ----------
   Usage in the editor (Text tab):
   <div class="section-break">✦</div>

   Or just <div class="section-break"></div> for the dot-row default.
*/

.note-single__body .section-break {
    text-align: center;
    color: var(--v-accent);
    opacity: 0.5;
    font-size: 1rem;
    letter-spacing: 1.4em;
    margin: 3rem 0;
    padding-left: 1.4em; /* compensate for letter-spacing pushing right */
}

.note-single__body .section-break:empty::before {
    content: "• • •";
}

/* ---------- Footer ---------- */

.note-single__footer {
    text-align: center;
    padding-top: 1rem;
}

.note-single__divider {
    width: 40px;
    height: 1px;
    background: var(--v-accent);
    margin: 0 auto 1.5rem;
    opacity: 0.4;
}

.note-single__sig {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--v-text-secondary);
    margin-bottom: 2.5rem;
}

/* Prev / Next */
.note-single__nav {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--v-border);
    border-bottom: 1px solid var(--v-border);
}

.note-single__nav-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    transition: opacity 0.3s ease;
}

.note-single__nav-link:hover {
    opacity: 0.7;
}

.note-single__nav-link--next {
    text-align: right;
}

.note-single__nav-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v-text-muted);
    margin-bottom: 0.3rem;
}

.note-single__nav-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    color: var(--v-text);
    line-height: 1.3;
}

/* Back link */
.note-single__back {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-accent);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.note-single__back:hover {
    opacity: 1;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .notes-page { padding: 4rem 0 3rem; }
    .note-single { padding: 4rem 0 3rem; }
    .notes-hero__title { font-size: 1.7rem; }
    .note-single__title { font-size: 1.9rem; }
    .note-single__subtitle { font-size: 1.15rem; margin-top: 0.7rem; }
    .notes-entry__title { font-size: 1.2rem; }

    .note-single__body p {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .note-single__body h2 {
        font-size: 1.5rem;
        margin-top: 3rem;
    }

    .note-single__body h3 {
        font-size: 1.2rem;
    }

    .note-single__body > p:first-child::first-letter {
        font-size: 3.6rem;
    }

    /* Pull quotes and featured image: drop breakout, stay in column */
    .note-single__featured,
    .note-single__body .pullquote {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .note-single__body .pullquote {
        font-size: 1.55rem;
        padding: 1.8rem 1rem 1.4rem 2.6rem;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .note-single__body .pullquote::before {
        font-size: 5rem;
        top: 0em;
        left: 0.05rem;
    }

    .note-single__body .excerpt {
        padding: 1.4rem 1.2rem 1rem;
    }

    .note-single__nav {
        flex-direction: column;
        gap: 1rem;
    }

    .note-single__nav-link--next {
        text-align: left;
    }
}