/* ============================================================
   loose leaf
   ============================================================ */

:root {
    --paper: #fbfaf6;
    --ink: #221f1b;
    --meta: #66604f;

    --faint: #e7ded4;

    --accent: #a2385f;
    --accent-deep: #83294a;

    --sakura: #d17ba0;
    --sakura-outline: #9c4166;

    --petal: #e0a7bf;
    --petal-deep: #cf7a9e;

    --measure: 60rem;

    --serif: "Spectral", Georgia, "Times New Roman", serif;
    --display: "Cormorant", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    line-height: 1.62;
    font-feature-settings: "liga", "onum", "kern";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
    transition:
        text-decoration-color 120ms ease,
        color 120ms ease;
}
a:hover {
    color: var(--accent-deep);
    text-decoration-color: var(--accent-deep);
}

::selection {
    background: color-mix(in srgb, var(--petal) 45%, transparent);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.5rem 0.9rem;
    z-index: 10;
}
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.masthead {
    text-align: center;
    padding: 3.5rem 1.5rem 0;
}
.masthead__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}
.masthead__title:hover {
    color: var(--ink);
}
.masthead__mark {
    width: 0.78em;
    height: 0.78em;
    background: url("/img/blossom.svg") center / contain no-repeat;
    transform: translateY(0.04em) rotate(-8deg);
    transition: transform 300ms ease;
}
.masthead__title:hover .masthead__mark {
    transform: translateY(0.04em) rotate(12deg);
}
.masthead__tagline {
    margin: 0.65rem 0 0;
    font-style: italic;
    letter-spacing: 0.02em;
    font-size: 0.92rem;
    color: var(--meta);
}

#main {
    padding: 5rem 1.5rem 2rem;
}

.contents {
    max-width: 40rem;
    margin: 0 auto;
}
.contents__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* delicate centered divider between entries */
.contents__item + .contents__item::before {
    content: "";
    display: block;
    width: 4rem;
    margin: 0 auto;
    border-top: 2px dotted var(--petal);
}
.contents__link {
    display: block;
    padding: 2.4rem 0;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.contents__link:hover {
    color: inherit;
}
.contents__link:hover .contents__title {
    color: var(--accent-deep);
}
.contents__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.35rem);
    line-height: 1.05;
    margin: 0;
    transition: color 120ms ease;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum", "kern";
}
.contents__dek {
    margin: 0.5rem 0 0;
    font-style: italic;
    color: var(--meta);
    font-size: 1.02rem;
}
.contents__date {
    display: block;
    margin-top: 0.7rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    color: var(--meta);
}

.essay {
    max-width: var(--measure);
    margin: 0 auto;
}

/* ============================================================
   Table of contents (js/toc.js)
   A "map" (minimap on desktop / barcode on mobile) and a "panel"
   (the full labelled list) crossfade between collapsed and expanded.
   Without JS the <details> is just a plain collapsible link list.
   ============================================================ */
.toc {
    max-width: var(--measure);
    margin: 0 auto 2.5rem;
    border-bottom: 1px solid var(--faint);
}
/* follow behaviour (sticky/fixed) is off in static mode (site.tocFollow) */
.toc:not(.toc--static) {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
}
/* transitions suppressed while the initial state is applied on load */
.toc--no-anim,
.toc--no-anim *,
.toc--no-anim *::before {
    transition: none !important;
}
.toc__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: var(--meta);
}
.toc__title::-webkit-details-marker {
    display: none;
}
.toc__title::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: url("/img/blossom.svg") center / contain no-repeat;
    transition: transform 200ms ease;
}
.toc[open] .toc__title::before {
    transform: rotate(45deg);
}
/* map is built by JS; without JS it never appears */
.toc__map {
    display: none;
}
.toc__tick {
    background: var(--faint);
    border-radius: 1px;
    transition: background 160ms ease;
}
.toc__tick.is-current {
    background: var(--petal-deep);
}
.toc__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.9rem;
}
.toc__item {
    margin: 0.35rem 0;
    line-height: 1.35;
}
.toc__item--h3 {
    padding-left: 1.1rem;
    font-size: 0.94em;
}
.toc__link {
    text-decoration: none;
    color: var(--ink);
}
.toc__item--h3 .toc__link {
    font-style: italic;
    color: #4a443c;
}
.toc__link:hover {
    color: var(--accent-deep);
}
.toc__link.is-current {
    color: var(--accent);
}

@media (min-width: 1400px) {
    /* Fixed in the left margin. The panel (title + list) sits in flow; the map
       overlays it, and the two crossfade between expanded and collapsed. */
    .toc:not(.toc--static) {
        position: fixed;
        top: 6rem;
        left: 1.75rem;
        width: 12rem;
        max-height: 80vh;
        margin: 0;
        border: 0;
        background: none;
        overflow: visible;
    }
    /* static: same left-margin index, but absolute so it scrolls away */
    .toc--static {
        position: absolute;
        top: 6rem;
        left: 1.75rem;
        width: 12rem;
        margin: 0;
        border: 0;
        background: none;
    }
    .toc__title {
        padding: 0 0 0.7rem;
        transition: opacity 250ms ease;
    }
    .toc__title::before {
        display: none;
    }
    .toc__list {
        padding: 0;
        transition: opacity 250ms ease;
    }
    .toc__item {
        margin: 0.5rem 0;
        font-size: 0.82rem;
    }
    .toc__link {
        display: block;
        margin-left: -0.9rem;
        padding-left: 0.9rem;
        border-left: 2px solid transparent;
        color: var(--meta);
        transition:
            color 150ms ease,
            border-color 150ms ease;
    }
    .toc__link.is-current {
        color: var(--accent);
        border-left-color: var(--petal-deep);
    }

    /* MAP: a vertical minimap overlaying the panel, hidden until collapsed. */
    .toc__map {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 250ms ease;
    }
    .toc__tick {
        width: 1.5rem;
        height: 3px;
    }
    .toc__tick--h3 {
        width: 0.9rem;
        /* overlap the h2 in x: left half tucks under it, right half extends past */
        margin-left: 1.05rem;
    }

    /* collapsed (scrolled): show the map, fade the panel out */
    .toc--collapsed .toc__map {
        opacity: 1;
    }
    .toc--collapsed .toc__title,
    .toc--collapsed .toc__list {
        opacity: 0;
        pointer-events: none;
    }
    /* hover brings the labelled panel back */
    .toc--collapsed:hover .toc__map {
        opacity: 0;
    }
    .toc--collapsed:hover .toc__title,
    .toc--collapsed:hover .toc__list {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 1399px) {
    /* MAP: a horizontal barcode as the sticky header. */
    .js .toc:not(.toc--static) .toc__title {
        display: none; /* the barcode is the header once JS is on */
    }
    .js .toc:not(.toc--static) .toc__map {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 1.6rem;
        padding: 0.55rem 0;
        overflow-x: auto;
        cursor: pointer;
    }
    .js .toc:not(.toc--static) .toc__tick {
        flex: none;
        width: 3px;
        height: 1rem;
    }
    .js .toc:not(.toc--static) .toc__tick--h3 {
        height: 0.55rem;
    }

    /* PANEL: a dropdown card that slides down over the article. */
    .js .toc:not(.toc--static) .toc__list {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0;
        padding: 0.6rem 0.25rem 0.9rem;
        background: var(--paper);
        border-bottom: 1px solid var(--faint);
        box-shadow: 0 12px 26px rgba(34, 31, 27, 0.13);
        max-height: 70vh;
        overflow-y: auto;
        transition:
            opacity 220ms ease,
            transform 220ms ease;
    }
    .js .toc--collapsed .toc__list {
        opacity: 0;
        transform: translateY(-0.5rem);
        pointer-events: none;
    }
}

.essay__head {
    text-align: center;
    margin-bottom: 3.75rem;
}
.essay__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
    line-height: 1.03;
    letter-spacing: 0.005em;
    margin: 0;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum", "kern";
}
.essay__meta {
    margin: 1.1rem 0 0;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 0.86rem;
    color: var(--meta);
}
.essay__dek {
    display: block;
    font-variant: normal;
    letter-spacing: 0;
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.5;
    color: #3f392f;
    margin-top: 0.7rem;
}

.essay__body {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.essay__body > p {
    margin: 0 0 1.35rem;
}

.essay__body > p:first-of-type::first-letter {
    font-family: var(--display);
    font-weight: 600;
    color: var(--sakura);
    -webkit-text-stroke: 1px var(--sakura-outline);
    paint-order: stroke fill;
    float: left;
    font-size: 3.6em;
    line-height: 0.72;
    padding: 0.08em 0.08em 0 0;
}

.essay__body h2,
.essay__body h3 {
    font-family: var(--display);
    font-weight: 600;
    text-align: center;
    hyphens: none;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum", "kern";
    scroll-margin-top: 4rem; /* anchor jumps clear the sticky mobile toc bar */
}
.essay__body h2 {
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem);
    margin: 5rem 0 2rem;
    padding-bottom: 0rem;
    background: linear-gradient(var(--petal-deep), var(--petal-deep)) bottom
        center / 6rem 2px no-repeat;
}
.essay__body h3 {
    font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.8rem);
    font-weight: 500;
    font-style: italic;
    margin: 4rem 0 1.3rem;
}

.essay__body h2::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: url("/img/blossom.svg") center / contain no-repeat;
    margin-left: 0.12em;
    margin-right: -0.72em;
    transform: translateY(-0.55em) rotate(10deg);
    vertical-align: baseline;
    text-decoration: none;
}

.essay__body strong {
    font-weight: 600;
}
.essay__body em {
    font-style: italic;
}

.essay__body blockquote {
    margin: 1.8rem 0;
    padding: 0.1rem 0 0.1rem 1.4rem;
    border-left: 2px solid var(--petal);
    font-style: italic;
    color: #3a352e;
    text-align: left;
    hyphens: none;
}
.essay__body blockquote p {
    margin: 0.4rem 0;
}

.essay__body ul,
.essay__body ol {
    padding-left: 1.4rem;
    text-align: left;
    hyphens: none;
}
.essay__body li {
    margin: 0.35rem 0;
}
.essay__body ul {
    list-style: none;
    padding-left: 0;
}
.essay__body ul > li {
    position: relative;
    padding-left: 1.4rem;
}
.essay__body ul > li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.72em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--petal-deep);
}

.essay__body hr {
    border: 0;
    height: 1.1rem;
    background: url("/img/blossom.svg") center / contain no-repeat;
    opacity: 0.8;
    margin: 2.6rem 0;
}

.essay__body code {
    font-family: var(--mono);
    font-size: 0.86em;
}
.essay__body :not(pre) > code {
    background: color-mix(in srgb, var(--faint) 55%, transparent);
    padding: 0.1em 0.35em;
    border-radius: 2px;
}
.essay__body pre {
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: left;
    hyphens: none;
    background: #f5f2ea;
    border-left: 2px solid var(--petal-deep);
    padding: 1rem 1.15rem;
    margin: 1.8rem 0;
    overflow-x: auto;
    tab-size: 2;
}
.essay__body pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #9a917f;
    font-style: italic;
}
.token.punctuation {
    color: #8a8272;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol {
    color: var(--accent);
}
.token.boolean,
.token.number {
    color: var(--petal-deep);
}
.token.string,
.token.char,
.token.attr-value {
    color: #4f6b45;
}
.token.keyword,
.token.function {
    color: #3a352e;
    font-weight: 500;
}
.token.operator,
.token.entity,
.token.url {
    color: #8a8272;
}

.essay__foot {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--faint);
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}
.essay__foot a {
    text-decoration: none;
}

.sn-wrap {
    display: inline;
}
.sn-ref {
    font-family: var(--mono);
    font-size: 0.62em;
    color: var(--accent);
    vertical-align: super;
    line-height: 0;
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 0 0.12em;
    margin: 0;
    cursor: pointer;
}
.sn-ref:hover {
    color: var(--accent-deep);
}
.sn-ref:focus-visible {
    outline: 2px solid var(--petal-deep);
    outline-offset: 2px;
    border-radius: 3px;
}
.sn-marker {
    font-family: var(--mono);
    font-size: 0.85em;
    font-weight: 500;
    color: var(--accent);
    margin-right: 0.35em;
}
.sn-marker::after {
    content: ".";
}
/* footnote content comes wrapped in <p>; keep the first paragraph inline so
   the "N." marker starts the text rather than sitting on its own line */
.sidenote p {
    margin: 0 0 0.6rem;
}
.sidenote p:last-child {
    margin-bottom: 0;
}
.sidenote > p:first-of-type {
    display: inline;
}
/* Sidenote / footnote popover — identical at every width. Opens on hover
   (pointer devices) or click/tap; dismissed on mouse-leave, outside click,
   or Escape (see js/sidenotes.js). Sizes to its content up to ~22rem, then
   wraps; clamped to the viewport on small screens. */
.sidenote {
    display: none;
    position: fixed;
    z-index: 50;
    max-width: min(22rem, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: left;
    hyphens: none;
    /* don't inherit bold/italic from the text the marker sits in */
    font-weight: 400;
    font-style: normal;
}
.sidenote.is-open {
    display: block;
}
/* In the margin (room to the side): plain text, no box — as it was before. */
.sidenote.sn-margin {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--meta);
}
/* Over the text (no room in the margin): a floating popover that evokes the
   blockquote — a rule down the left side. Opaque paper + a soft shadow keep it
   legible above the article without reflowing it. */
.sidenote.sn-popover {
    padding: 0.5rem 0.9rem 0.5rem 1.1rem;
    background: var(--paper);
    border: 1px solid #d8d6d0; /* thin light-grey frame on top/right/bottom */
    border-left: 2px solid var(--petal); /* blockquote-style rule on the left */
    box-shadow: 0 6px 20px rgba(34, 31, 27, 0.13);
    color: #3a352e;
}

/* Bottom footnotes: the no-JS baseline. Markers link down to this list, each
   note has a return arrow back to its reference. When JS is available it
   rebuilds these as popovers and this whole block is hidden (below). */
.essay__body .footnote-ref a {
    font-family: var(--mono);
    font-size: 0.72em;
    color: var(--accent);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
    padding-left: 0.12em;
}
.essay__body hr.footnotes-sep {
    height: 1px;
    border: 0;
    background: var(--faint);
    opacity: 1;
    margin: 2.75rem 0 1.4rem;
}
.essay__body .footnotes {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--meta);
    text-align: left;
    hyphens: none;
}
.essay__body .footnotes-list {
    padding-left: 1.3rem;
}
.essay__body .footnote-item {
    margin: 0.45rem 0;
}
.essay__body .footnote-item p {
    margin: 0;
}
.essay__body .footnote-backref {
    color: var(--accent);
    text-decoration: none;
    margin-left: 0.3em;
}
/* JS present → hide the bottom list; the notes become popovers instead. */
.js .footnotes-sep,
.js .footnotes {
    display: none;
}

.colophon {
    max-width: var(--measure);
    margin: 4rem auto 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--faint);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--meta);
}
.colophon a {
    text-decoration: none;
    color: var(--meta);
}
.colophon a:hover {
    color: var(--accent);
}
.colophon > * + *::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    background: url("/img/blossom.svg") center / contain no-repeat;
    opacity: 0.7;
    margin-right: 0.65rem;
    transform: translateY(0.05rem);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

@media print {
    .sidenote {
        display: block !important;
        position: static !important;
        max-width: none !important;
        max-height: none !important;
        box-shadow: none !important;
        margin: 0.5rem 0 !important;
        color: #333 !important;
    }
    .sn-ref {
        color: #333;
    }
}