/* =============================================================
   Palaimon Capital — Harbor Book stylesheet
   Hand-written. No framework. No build step. One file.
   See brainstorming.md for the why.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   Palette — parchment & ink. The full palette is six colors.
   ---------------------------------------------------------------- */
:root {
    --parchment:    #f4ecd8;
    --vellum:       #ebe2c8;
    --ink:          #0c2340;
    --burgundy:     #6b1f1f;
    --gold:         #a8853f;
    --faded:        #5a5a5a;
    /* Stronger "faded" tone for secondary text that still must be
       legible at arm's length on a cream paper at age 70+. Used on
       chapter folios, subtitles, figcaptions, and epigraphs. */
    --faded-strong: #3a3a3a;

    --measure:      660px;
    --measure-wide: 780px;
}

/* Bump the rem baseline ~6% so every rem-based size scales up
   together  ==  a single dial for whole-book legibility. */
html { font-size: 17px; }

/* ----------------------------------------------------------------
   Reset (minimal — we want browser defaults for typography mostly)
   ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--parchment);
    color: var(--ink);
    font-family: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
    /* Fluid: 20px on small screens, up to 22px on wide screens.
       The audience reads at arm's length, often with reading glasses;
       this is the single most important readability setting on the site. */
    font-size: clamp(20px, 0.55vw + 18px, 22px);
    line-height: 1.65;
    font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Full-bleed hero figures use 100vw with a negative-margin
       breakout (see .figure--watercolour.figure--hero). On viewports
       where a vertical scrollbar takes a few pixels off the visible
       width, 100vw is slightly wider than the body  ==  this safety
       net stops the spurious horizontal scrollbar that would otherwise
       appear. */
    overflow-x: hidden;
}

/* The faintest possible paper grain — a single radial blot, not a noise SVG. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(168, 133, 63, 0.05), transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(107, 31, 31, 0.04), transparent 60%);
    z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

/* ----------------------------------------------------------------
   Page frame
   ---------------------------------------------------------------- */
.page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 64px 32px 96px;
}

.page--cover {
    max-width: var(--measure-wide);
    padding-top: 96px;
    text-align: center;
}

/* ----------------------------------------------------------------
   The cover
   ---------------------------------------------------------------- */
.seal {
    width: 132px;
    height: 132px;
    margin: 0 auto 28px;
    display: block;
}

.wordmark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 1.4vw + 1.9rem, 3rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}

.wordmark-rule {
    border: 0;
    width: 80px;
    height: 1px;
    background: var(--gold);
    margin: 28px auto;
}

.motto {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.22em;
    color: var(--burgundy);
    font-size: 1.05rem;
    margin: 0;
}

.motto-line {
    margin-top: 22px;
    font-style: italic;
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.5;
}

.dedication {
    margin: 56px auto 0;
    max-width: 540px;
    color: var(--faded-strong);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Table of contents on the cover */
.toc {
    list-style: none;
    padding: 0;
    margin: 56px auto 0;
    max-width: 420px;
    text-align: left;
}

.toc li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    font-size: 1.2rem;
}

.toc .toc-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold);
    width: 36px;
    flex-shrink: 0;
}

.toc .toc-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(12, 35, 64, 0.25);
    transform: translateY(-4px);
}

.toc a {
    color: var(--ink);
    text-decoration: none;
}

.toc a:hover { color: var(--burgundy); }

/* ----------------------------------------------------------------
   Chapter pages
   ---------------------------------------------------------------- */
.chapter-folio {
    text-align: right;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--faded-strong);
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.chapter-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 1.2vw + 2rem, 3rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0 0 12px;
    color: var(--ink);
}

.chapter-subtitle {
    text-align: center;
    font-style: italic;
    color: var(--faded-strong);
    margin: 0 0 44px;
    font-size: 1.18rem;
}

.epigraph {
    margin: 0 auto 52px;
    max-width: 540px;
    font-style: italic;
    color: var(--faded-strong);
    text-align: center;
    line-height: 1.7;
    font-size: 1.1rem;
}

.epigraph cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.92rem;
    /* Burgundy reads materially better than gold on cream for older
       eyes  ==  the gold #a8853f only carries ~3.6:1 contrast vs the
       parchment, the burgundy carries ~6.8:1. */
    color: var(--burgundy);
}

/* Drop cap on the first paragraph of a chapter */
.chapter-body > p:first-of-type::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: var(--burgundy);
    float: left;
    font-size: 4.6rem;
    line-height: 0.85;
    padding: 6px 12px 0 0;
    margin-top: 6px;
}

.chapter-body p {
    margin: 0 0 1.1em;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.chapter-body em {
    font-style: italic;
}

.chapter-body strong {
    font-weight: 600;
    color: var(--ink);
}

/* The meander divider */
.meander {
    display: block;
    margin: 56px auto;
    height: 16px;
    width: 200px;
    opacity: 0.6;
}

/* Signature block */
.signature {
    margin: 56px 0 0;
    text-align: right;
    font-family: 'Cormorant Garamond', serif;
}

.signature .signed-name {
    font-style: italic;
    font-size: 1.5rem;
    color: var(--burgundy);
    display: block;
    line-height: 1.1;
}

.signature .signed-meta {
    margin-top: 8px;
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.92rem;
    color: var(--faded-strong);
    font-style: normal;
}

/* ----------------------------------------------------------------
   Logbook
   ---------------------------------------------------------------- */
.logbook {
    list-style: none;
    margin: 0;
    padding: 0;
}

.log-entry {
    background: var(--vellum);
    border-left: 2px solid var(--gold);
    padding: 28px 32px 24px;
    margin: 0 0 36px;
}

.log-entry header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dotted rgba(12, 35, 64, 0.2);
    padding-bottom: 10px;
}

.log-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    color: var(--ink);
    letter-spacing: 0.04em;
}

.log-kind {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.92rem;
    color: var(--burgundy);
}

.log-place {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    color: var(--faded-strong);
}

.log-entry p {
    margin: 0 0 0.9em;
    text-align: justify;
    hyphens: auto;
}

.log-entry p:last-of-type { margin-bottom: 0; }

.log-sign {
    margin-top: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--burgundy);
    font-size: 1.08rem;
    text-align: right;
}

.log-note {
    margin-top: 56px;
    text-align: center;
    color: var(--faded-strong);
    font-style: italic;
    font-size: 1.05rem;
}

/* ----------------------------------------------------------------
   Sprechstunde
   ---------------------------------------------------------------- */
.appointment {
    margin: 0 0 36px;
}

.appointment dt {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 1rem;
    color: var(--burgundy);
    margin-top: 28px;
}

.appointment dd {
    margin: 8px 0 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink);
}

.appointment dd .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
}

.short-letter {
    margin-top: 56px;
    background: var(--vellum);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    padding: 32px;
}

.short-letter h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.6rem;
    margin: 0 0 18px;
    color: var(--ink);
    text-align: center;
}

.short-letter form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.short-letter label {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: var(--burgundy);
    margin-bottom: 6px;
    display: block;
}

.short-letter input,
.short-letter textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(12, 35, 64, 0.4);
    padding: 10px 0;
    font-family: 'EB Garamond', serif;
    font-size: 1.15rem;
    color: var(--ink);
    outline: none;
}

.short-letter input:focus,
.short-letter textarea:focus {
    border-bottom-color: var(--burgundy);
}

.short-letter textarea {
    resize: vertical;
    min-height: 120px;
}

.short-letter button {
    align-self: flex-end;
    margin-top: 8px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 12px 32px;
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.short-letter button:hover {
    background: var(--ink);
    color: var(--parchment);
}

.short-letter .closing {
    margin-top: 18px;
    text-align: right;
    font-style: italic;
    color: var(--faded-strong);
    font-size: 1.05rem;
}

/* ----------------------------------------------------------------
   Footer / colophon
   ---------------------------------------------------------------- */
.colophon {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 48px 32px 64px;
    text-align: center;
    color: var(--faded-strong);
    font-size: 0.95rem;
    line-height: 1.7;
}

.colophon .seal-mini {
    width: 36px;
    height: 36px;
    opacity: 0.55;
    margin: 0 auto 14px;
    display: block;
}

.colophon a {
    color: var(--faded-strong);
    text-decoration: none;
    border-bottom: 1px dotted rgba(58, 58, 58, 0.55);
}

.colophon a:hover { color: var(--ink); }

.colophon .colophon-line {
    font-style: italic;
    margin: 6px 0;
}

.colophon .lang-switch {
    margin-top: 14px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
}

/* ----------------------------------------------------------------
   Top navigation — a book's running head.
   Static, not sticky. Scrolls with the page, like a real book.
   Never used on the cover (index.html) — books don't put running
   heads on title pages.
   ---------------------------------------------------------------- */
.running-head {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 22px 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.88rem;
    color: var(--faded-strong);
}

.running-head a {
    color: var(--faded-strong);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.running-head a:hover {
    color: var(--ink);
    border-bottom-color: var(--gold);
}

.running-head .rh-wordmark {
    letter-spacing: 0.22em;
}

.running-head .rh-chapters {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-variant: normal;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
}

.running-head .rh-chapters a.current {
    color: var(--burgundy);
    border-bottom-color: var(--burgundy);
}

/* ----------------------------------------------------------------
   Bottom navigation — like a book's running foot
   ---------------------------------------------------------------- */
.foot-nav {
    max-width: var(--measure);
    margin: 56px auto 0;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--faded-strong);
    font-size: 1.15rem;
}

.foot-nav a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.foot-nav a:hover { border-bottom-color: var(--burgundy); }

.foot-nav .prev::before { content: "← "; color: var(--gold); }
.foot-nav .next::after  { content: " →"; color: var(--gold); }

/* ----------------------------------------------------------------
   Die Karte — the chart chapter
   A Hafenbuch-frontispiece. Centre anchor, six vignettes, Vaduz inset.
   The SVG itself ships with all line work; CSS handles only:
     · the page-level frame (parchment plate, sepia border)
     · the on-load rhumb-line draw animation
     · the on-scroll vignette stagger fade-in
     · the pulsing red anchor on the inset map
     · hover lift on the vignette discs
   ---------------------------------------------------------------- */

.page--chart {
    max-width: 940px;
    padding: 32px 24px 80px;
}

.chart-plate {
    margin: 24px auto 0;
    background: var(--vellum);
    border: 1px solid var(--gold);
    box-shadow:
        0 1px 0 rgba(168, 133, 63, 0.5) inset,
        0 0 0 6px var(--parchment) inset,
        0 0 0 7px rgba(168, 133, 63, 0.55) inset,
        0 24px 60px -28px rgba(12, 35, 64, 0.35);
    padding: 28px 28px 32px;
    position: relative;
}

.karte {
    display: block;
    width: 100%;
    height: auto;
    max-width: 880px;
    margin: 0 auto;
}

/* Caption under the plate (the "plate VIII" type line) */
.chart-caption {
    margin: 18px auto 0;
    text-align: center;
    color: var(--faded-strong);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 620px;
}

.chart-caption .plate-mark {
    display: inline-block;
    font-family: 'EB Garamond', serif;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.2em;
    color: var(--burgundy);
    font-size: 0.92rem;
    margin-right: 10px;
}

/* ---- Animations ---- */

/* Rhumb lines: drawn on load.  Each path's path-length is normalised to 1
   so a single keyframe works for all six. */
.karte .rhumbs path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    pathLength: 1;
    animation: rhumb-draw 2.4s cubic-bezier(.6, .04, .2, 1) 0.4s forwards;
}
.karte .rhumbs path#rhumb-N  { animation-delay: 0.30s; }
.karte .rhumbs path#rhumb-NE { animation-delay: 0.55s; }
.karte .rhumbs path#rhumb-SE { animation-delay: 0.80s; }
.karte .rhumbs path#rhumb-S  { animation-delay: 1.05s; }
.karte .rhumbs path#rhumb-SW { animation-delay: 1.30s; }
.karte .rhumbs path#rhumb-NW { animation-delay: 1.55s; }

@keyframes rhumb-draw {
    to { stroke-dashoffset: 0; }
}

/* Vignettes: fade-and-rise stagger on load (mirrors the rhumb sequence) */
.karte .vignette {
    opacity: 0;
    transform: translateY(8px);
    animation: vignette-rise 0.9s cubic-bezier(.2, .8, .2, 1) forwards;
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.35s ease, filter 0.35s ease;
}
.karte .vignette[data-pos="N"]  { animation-delay: 0.55s; }
.karte .vignette[data-pos="NE"] { animation-delay: 0.80s; }
.karte .vignette[data-pos="SE"] { animation-delay: 1.05s; }
.karte .vignette[data-pos="S"]  { animation-delay: 1.30s; }
.karte .vignette[data-pos="SW"] { animation-delay: 1.55s; }
.karte .vignette[data-pos="NW"] { animation-delay: 1.80s; }

@keyframes vignette-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* Subtle hover lift (desktop, fine pointers only) */
@media (hover: hover) and (pointer: fine) {
    .karte .vignette:hover {
        filter: drop-shadow(0 6px 14px rgba(12, 35, 64, 0.18));
        transform: translateY(-3px);
    }
}

/* Compass rose appears with the rhumbs */
.karte .compass {
    opacity: 0;
    animation: compass-fade 1.2s ease 0.2s forwards;
}
@keyframes compass-fade {
    to { opacity: 1; }
}

/* Central anchor (Stammhaus): fades in first, before the rhumbs unfurl */
.karte .anchor {
    opacity: 0;
    animation: anchor-fade 1.4s ease 0s forwards;
}
@keyframes anchor-fade {
    to { opacity: 1; }
}

.karte .wheel-wordmark,
.karte .vaduz-map,
.karte .coords {
    opacity: 0;
    animation: bottom-fade 1.2s ease 2.0s forwards;
}
@keyframes bottom-fade {
    to { opacity: 1; }
}

/* Pulsing red anchor on the inset map (the Herrengasse 30 marker) */
.karte .map-anchor-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: map-pulse 3.2s ease-in-out 2.6s infinite;
}

@keyframes map-pulse {
    0%   { transform: scale(0.6); opacity: 0.55; }
    50%  { transform: scale(1.6); opacity: 0;    }
    100% { transform: scale(0.6); opacity: 0;    }
}

/* Honour reduced-motion preferences: disable all chart animations */
@media (prefers-reduced-motion: reduce) {
    .karte .rhumbs path,
    .karte .vignette,
    .karte .compass,
    .karte .anchor,
    .karte .wheel-wordmark,
    .karte .vaduz-map,
    .karte .coords,
    .karte .map-anchor-pulse {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
        transform: none;
    }
}

/* Chart-page-only running head colouring tweak (so it doesn't fight the plate) */
.page--chart + footer .colophon { border-top: 0; }


/* Section heading inside a chapter body  ==  used as the small
   sub-divider in chapter prose (e.g. the Arosa or Singapore section
   on Die Karte). Set in display caps, hairline gold rule above. */
.chapter-section-h {
    margin: 56px 0 24px;
    padding-top: 30px;
    border-top: 1px solid var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-align: center;
}


/* ================================================================
   Watercolour figures (.figure--watercolour and variants)
   ----------------------------------------------------------------
   The book has hand-painted plates throughout the chapters.  The
   illustrations are placeholders for now (see _moodboard/), but
   the styling treats them as if they were finished colour plates
   in a fine letter-press book.  Conventions:

     * a 1px sepia hairline frame, with a 6px parchment inset
       (the same hand-press double rule used on the chart plate)
     * an italic figcaption beneath, set in the page faded ink
     * subtle drop-shadow allowed (this is a documented exception
       to the "no shadows" rule  ==  see DESIGN.md: components.figure)
     * three layout variants:
         .figure--full    full-column width, centred
         .figure--right   floats right, ~280px wide, body wraps
         .figure--inset   small (~180px), floats right, no caption
   ================================================================ */

/* ----------------------------------------------------------------
   Watercolour figure family  ==  the painted plates that appear
   throughout the book (cows, desk, parasol, marmot, Anna Jelen,
   Singapore views, etc.).

   Design rule (rebuilt 2026-04-22):  the paintings are good enough
   to *be* the page, not to sit on top of it. The previous treatment
   placed every illustration inside a sepia mat with an inset gold
   border and a soft drop shadow; readable but the mat was so loud
   it competed with the image. We now strip every painting back to
   its bare rectangle, give it generous space, and use the parchment
   itself as its frame. Wide variants (--full, --lead, --hero,
   --tailpiece) get a soft horizontal mask-image fade so the
   painting's edge dissolves into the page rather than meeting it
   on a hard line.

   Variants:
     .figure--full        full-viewport-bleed lead/banner plate
     .figure--lead        synonym, opens a chapter
     .figure--hero        Vorstellung-page hero (see further below)
     .figure--right       floats right, ~380px, body wraps
     .figure--portrait    floats right, 3:2 portrait crop (Anna)
     .figure--inset       small ~240px inset inside dl/dd
     .figure--tailpiece   centred end-of-chapter mark, no caption frame
   ---------------------------------------------------------------- */

.figure--watercolour {
    margin: 48px auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
}

.figure--watercolour > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
}

.figure--watercolour > figcaption {
    /* Caption sits in book measure under the painting, set in italic
       faded-strong with a small-caps "Tafel" mark. The mark is the
       only typographic frame the painting receives. */
    max-width: 620px;
    margin: 18px auto 0;
    padding: 0 24px;
    text-align: center;
    color: var(--faded-strong);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
}

.figure--watercolour > figcaption .plate-mark {
    display: inline-block;
    font-family: 'EB Garamond', serif;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.2em;
    color: var(--burgundy);
    font-size: 0.88rem;
    margin-right: 8px;
}

/* Reusable horizontal-fade mask  ==  applied to the IMAGE element
   of every wide variant so the painted edge dissolves softly into
   the parchment. ~8 % fade band on each side: enough to dissolve,
   narrow enough to preserve composition. */
.figure--watercolour.figure--full > img,
.figure--watercolour.figure--lead > img,
.figure--watercolour.figure--tailpiece > img,
.figure--watercolour.figure--hero > img {
    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0,
            #000 8%, #000 92%,
            transparent 100%);
    mask-image:
        linear-gradient(to right,
            transparent 0,
            #000 8%, #000 92%,
            transparent 100%);
}

/* ---- Variant: full / lead  ==  chapter opener, full-viewport-bleed
   The painting becomes the banner of the chapter. Same breakout
   trick as the hero, with a slightly more generous height cap so
   landscape-oriented plates (cows, bay view) feel like a panorama
   rather than a postcard. */
.figure--watercolour.figure--full,
.figure--watercolour.figure--lead {
    width: 100vw;
    max-width: none;
    margin: 8px 0 40px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.figure--watercolour.figure--full > img,
.figure--watercolour.figure--lead > img {
    width: 100%;
    max-height: 68vh;
    object-fit: cover;
    object-position: center center;
}

/* ---- Variant: floats right of the body column.  No frame; the
   painting rests on the parchment and the body wraps around it.
   On narrow viewports it falls back to a centred block (see the
   responsive override at the foot of this file). */
.figure--watercolour.figure--right {
    float: right;
    width: 46%;
    max-width: 380px;
    margin: 6px 0 22px 32px;
    shape-outside: margin-box;
}

/* The figcaption under a side-float should not span 620 px  ==
   constrain it to the figure's own width so it tracks the image. */
.figure--watercolour.figure--right > figcaption,
.figure--watercolour.figure--inset > figcaption,
.figure--watercolour.figure--portrait > figcaption {
    max-width: 100%;
    padding: 0;
    margin-top: 12px;
}

/* ---- Variant: portrait crop, used for single-figure plates such as
   Anna Jelen. Same float behaviour as --right; the additional rule
   crops the source 3:2 with the face roughly in the upper third. */
.figure--watercolour.figure--portrait > img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 22%;
}

/* ---- Variant: small inset, used inside dl/dd or short letters.
   Smaller than --right, no frame, tighter caption. */
.figure--watercolour.figure--inset {
    float: right;
    width: 32%;
    max-width: 240px;
    margin: 4px 0 14px 24px;
}

.figure--watercolour.figure--inset > figcaption {
    font-size: 0.92rem;
}

/* ---- Variant: tail-piece, the small whimsical end-mark of a
   chapter (e.g. the marmot at the foot of Logbuch). Generously
   sized and centred  ==  the previous 220 px crop turned the
   marmot into a postage stamp; 480 px gives the painting room to
   actually be looked at. */
.figure--watercolour.figure--tailpiece {
    margin: 64px auto 0;
    max-width: 480px;
}

.figure--watercolour.figure--tailpiece > img {
    filter: saturate(0.95);
}

.figure--watercolour.figure--tailpiece > figcaption {
    margin-top: 14px;
    font-size: 0.95rem;
}

/* Hero variant: full-viewport-bleed, used at the top of a
   Vorstellung (introduction) page where the painting *is* the
   header. Unlike every other figure variant, the hero deliberately
   discards the sepia mat, the inset border and the drop shadow ==
   we want the photograph to "float" on the parchment, not to sit
   on a side-table behind glass. The horizontal mask-image fade
   dissolves the left and right edges so there is no hard line
   meeting the page background, even on very wide monitors. */
.figure--watercolour.figure--hero {
    /* Break out of the page measure to span the entire viewport.
       The negative margin trick is the standard "full-bleed"
       pattern; combined with body { overflow-x: hidden } it never
       triggers a horizontal scrollbar. */
    width: 100vw;
    max-width: none;
    margin: 0 0 36px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: center;
}

.figure--watercolour.figure--hero > img {
    display: block;
    width: 100%;
    height: auto;
    /* Cap the height so the photograph never dominates a tall
       monitor. On very wide screens (e.g. 21:9 ultra-wide), object-fit
       cover trims top/bottom rather than letterboxing on the sides. */
    max-height: 72vh;
    object-fit: cover;
    object-position: center 32%;   /* favour his face over the foam */
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* Soft horizontal vignette  ==  the photograph bleeds into the
       parchment on the left and the right. Roughly an 8 % fade band
       on each side: enough to dissolve the edge, narrow enough to
       preserve the composition. Vendor-prefixed for older Safari. */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 8%,
            #000 92%,
            transparent 100%);
    mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 8%,
            #000 92%,
            transparent 100%);
}

/* Caption returns to body measure  ==  read as a book line beneath
   a Tafel, not as a billboard subtitle. */
.figure--watercolour.figure--hero > figcaption {
    max-width: 620px;
    margin: 22px auto 0;
    padding: 0 24px;
    font-size: 1rem;
}

/* Phones: the hero is already 100vw, but the height cap should
   relax so a portrait phone shows the full chest-up composition
   instead of cropping his face. */
@media (max-width: 640px) {
    .figure--watercolour.figure--hero > img {
        max-height: none;
        object-position: center center;
    }
}


/* ================================================================
   Vorstellung (introduction) pages  ==  e.g. pistorio.html
   ----------------------------------------------------------------
   Same typographic universe as the chapter pages, but slightly
   narrower (this is a calling card, not a chapter), no Roman-folio,
   and a centred name-card under the hero image.
   ================================================================ */
.page--vorstellung {
    max-width: 760px;
    padding: 32px 24px 80px;
}

.vorstellung-tag {
    text-align: center;
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.32em;
    font-size: 0.92rem;
    color: var(--burgundy);
    margin: 0 0 22px;
}

.vorstellung-namecard {
    text-align: center;
    margin: 8px auto 36px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--gold);
    max-width: 580px;
}

.vorstellung-namecard .name {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 1vw + 2.1rem, 2.8rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin-bottom: 12px;
}

.vorstellung-namecard .role {
    display: block;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--faded-strong);
    font-size: 1.18rem;
    line-height: 1.45;
}

.vorstellung-namecard .role .sep {
    display: inline-block;
    margin: 0 8px;
    color: var(--gold);
}

.page--vorstellung .chapter-body > p:first-of-type::first-letter {
    /* keep the drop-cap convention */
    color: var(--burgundy);
}

/* Inline body links inside chapter prose  ==  same italic/gold-underline
   treatment used on the Vorstellung closing-call and on the .elsewhere
   list, so internal cross-references (e.g. anna.html, pistorio.html) and
   external citations (Yahoo Finance, Forbes, Reuters) sit on the
   parchment as part of the body face rather than as default-browser
   blue-and-underlined web links. The rule is scoped to .chapter-body
   prose containers (p, dd, li) so it does NOT touch the running head,
   the foot-nav, the closing-call, the colophon, the .papers archive or
   the .elsewhere block, each of which already carries its own link
   treatment. */
.chapter-body p a,
.chapter-body dd a,
.chapter-body li a {
    color: var(--ink);
    text-decoration: none;
    font-style: italic;
    border-bottom: 1px solid var(--gold);
    transition: color 120ms ease, border-color 120ms ease;
}
.chapter-body p a:hover,
.chapter-body dd a:hover,
.chapter-body li a:hover {
    color: var(--burgundy);
    border-bottom-color: var(--burgundy);
}
/* External references get a small superscript "↗" so the reader can tell
   which links leave the book without a colour change. Marker is faded
   gold, set in IBM Plex Mono so it reads as a typographic footnote-mark
   rather than an emoji glyph. */
.chapter-body p a[rel~="external"]::after,
.chapter-body dd a[rel~="external"]::after,
.chapter-body li a[rel~="external"]::after {
    content: "\2197"; /* north-east arrow */
    font-family: 'IBM Plex Mono', monospace;
    font-style: normal;
    font-size: 0.72em;
    color: var(--gold);
    margin-left: 2px;
    vertical-align: super;
    line-height: 0;
}

/* The closing call is the small invitational paragraph at the end of a
   chapter or Vorstellung page. Originally introduced for the Vorstellung
   pages (Pistorio, Anna), it now also closes the Geleitbrief. The styling
   is body-page-agnostic on purpose: on a Vorstellung it picks up the
   parchment around it; on a chapter page it serves as the soft "cadence"
   between the last article and the signature. */
.chapter-body .closing-call {
    margin: 40px auto 0;
    max-width: 580px;
    text-align: center;
    font-style: italic;
    color: var(--faded-strong);
    font-size: 1.1rem;
    line-height: 1.6;
    border-top: 1px solid var(--gold);
    padding-top: 24px;
}

.chapter-body .closing-call a {
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}
.chapter-body .closing-call a:hover {
    color: var(--ink);
}

/* ----------------------------------------------------------------
   Papers archive  ==  used on the Vorstellung pages to list the
   PDFs we mirror from a contact's own website. Set as a small
   bibliographic catalogue: roman numeral, italic title, plain
   meta line. Visually the cousin of the cover .toc, but without
   the dotted leaders (these are not chapters of our own book). */
.papers {
    list-style: none;
    margin: 24px auto 8px;
    padding: 0;
    max-width: 580px;
}

.papers > li {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px dotted rgba(12, 35, 64, 0.18);
}

.papers > li:last-child {
    border-bottom: 0;
}

.papers .pn {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold);
    text-align: right;
    font-size: 1.05rem;
}

.papers a.pt {
    display: block;
    color: var(--ink);
    text-decoration: none;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.4;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.papers a.pt:hover {
    border-bottom-color: var(--burgundy);
}

.papers .pm {
    display: block;
    margin-top: 4px;
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    color: var(--faded-strong);
    font-size: 0.85rem;
}

.papers-note {
    max-width: 580px;
    margin: 14px auto 0;
    text-align: center;
    color: var(--faded-strong);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
}

/* Compact "elsewhere on the web" list used under the bio for
   blog/Substack/LinkedIn-style links. */
.elsewhere {
    margin: 28px auto 0;
    max-width: 580px;
    padding: 18px 22px;
    background: var(--vellum);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}

.elsewhere h3 {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    color: var(--burgundy);
    text-align: center;
    margin: 0 0 12px;
}

.elsewhere ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
}

.elsewhere a {
    color: var(--ink);
    text-decoration: none;
    font-style: italic;
    border-bottom: 1px solid var(--gold);
}

.elsewhere a:hover {
    color: var(--burgundy);
    border-bottom-color: var(--burgundy);
}

/* Honour reduced-motion: nothing animates here, but on responsive
   collapse, all floated figures fall back to centred blocks. */
@media (max-width: 700px) {
    .figure--watercolour.figure--right,
    .figure--watercolour.figure--inset {
        float: none;
        width: 100%;
        max-width: 420px;
        margin: 24px auto;
    }
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Body still set via clamp() at the root; keep desktop minimum
       on phones so older readers don't lose the new larger baseline. */
    .page { padding: 40px 22px 64px; }
    .wordmark { font-size: 2rem; letter-spacing: 0.24em; }
    .chapter-title { font-size: 2rem; }
    .chapter-subtitle { font-size: 1.1rem; }
    .chapter-body > p:first-of-type::first-letter { font-size: 3.8rem; }
    .epigraph { font-size: 1.05rem; }
    .log-entry { padding: 20px 22px; }
    .foot-nav { flex-direction: column; gap: 14px; padding: 0 22px; font-size: 1.1rem; }
    .running-head { padding: 16px 22px 0; font-size: 0.85rem; }
    .running-head .rh-chapters { gap: 14px; font-size: 1rem; }
    .page--chart  { padding: 24px 12px 56px; }
    .chart-plate  { padding: 14px 10px 18px; }
}