/*
 *  Casa Cavallo — Shared Design System
 *  ====================================
 *
 *  Typography:  Coelacanth (OFL), a Centaur/Jenson revival by Ben
 *  Whitmore.  Self-hosted WOFF2 files in /fonts/.  Four optical sizes:
 *    Display  → h1 document titles
 *    Subhd    → h2, h3 section headings
 *    (Text)   → body copy, default 'Coelacanth' family
 *    Caption  → footnotes, bibliography, captions
 *
 *  ITALIC POLICY:  The base 'Coelacanth' family has true italic
 *  faces at both weight 400 (CoelacanthItalic.woff2) and weight 700
 *  (CoelacanthBoldItalic.woff2).  Display, Subhd, and Caption have
 *  NO italic @font-face.  Never use font-style: italic with those
 *  families — it produces a synthetic oblique.  If italic is needed,
 *  switch to the base 'Coelacanth' family.
 *
 *  DISCRETIONARY LIGATURES:  Coelacanth Italic contains custom
 *  dlig glyphs for c_t, s_t, and s_p (added by Daniel in FontLab).
 *  These are activated via font-feature-settings: 'dlig' 1 and are
 *  used on blockquote.period-quote for period source quotations.
 *  Coelacanth Regular does not yet have these glyphs — when added,
 *  they will work automatically through the base blockquote rule.
 *
 *  NO external font service required.  No <link> to Google Fonts.
 *
 *  FONT MAPPING (from Historical Research → web):
 *    Jenson Display    → Coelacanth Display
 *    Jenson Subhead    → Coelacanth Subhd
 *    Jenson Text       → Coelacanth (text)
 *    Jenson Caption    → Coelacanth Caption
 *    Gill Sans MT Pro  → system sans stack
 *
 *  Colour palette merged from the casacavallo.net landing page and the
 *  Historical Research series.
 *
 *  DARK MODE:  "Dark room, light parchment."  The body surround goes
 *  dark; the .page card stays warm and readable.  Activated via
 *  prefers-color-scheme: dark.
 */


/* ===================================================================
   @font-face — Coelacanth optical sizes (self-hosted WOFF2)
   =================================================================== */

/* -- Text size (body copy) ----------------------------------------- */
@font-face {
    font-family: 'Coelacanth';
    src: url('/fonts/Coelacanth.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth';
    src: url('/fonts/CoelacanthItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth';
    src: url('/fonts/CoelacanthSemibd.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth';
    src: url('/fonts/CoelacanthBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth';
    src: url('/fonts/CoelacanthBoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* -- Display size (h1 titles) -------------------------------------- */
@font-face {
    font-family: 'Coelacanth Display';
    src: url('/fonts/CoelacanthDisplay.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth Display';
    src: url('/fonts/CoelacanthDisplayBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -- Subheading size (h2, h3) -------------------------------------- */
@font-face {
    font-family: 'Coelacanth Subhd';
    src: url('/fonts/CoelacanthSubhd.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coelacanth Subhd';
    src: url('/fonts/CoelacanthSubhdBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -- Caption size (footnotes, bib entries) ------------------------- */
@font-face {
    font-family: 'Coelacanth Caption';
    src: url('/fonts/CoelacanthCaption.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ===================================================================
   Reset
   =================================================================== */

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


/* ===================================================================
   Custom Properties — merged palette
   =================================================================== */

:root {
    /* ── Backgrounds ── */
    --parchment:    #f4efe4;  /* body / surround background */
    --cream:        #FAF6F0;  /* .page card background */
    --amber:        #F5E6D3;  /* recipe card fill */
    --light-sage:   #E8EDE4;  /* note box fill */

    /* ── Text ── */
    --ink:          #2C1810;  /* primary body text */
    --deep-red:     #7B1A1A;  /* h1, h2 headings, recipe titles */
    --medium-brown: #5D4037;  /* h3 headings, blockquotes */
    --caption-brown:#6D4C41;  /* captions, subtitles, footers */
    --sage:         #6B7F5E;  /* h4 headings, note box borders */

    /* ── Links ── */
    --rust:         #8b4513;  /* unvisited links */
    --sepia:        #6b5a3e;  /* visited links */

    /* ── Decorative ── */
    --gold:         #C9A84C;  /* rules, dividers, borders */
    --warm-amber:   #A1887F;  /* thin rules, subtle borders */
    --rule:         #c4b699;  /* legacy compat — simple borders, hr */
}


/* ===================================================================
   Body
   =================================================================== */

body {
    font-family: 'Coelacanth', 'Georgia', serif;
    font-size: 19px;
    line-height: 1.55;
    color: var( --ink );
    background-color: var( --parchment );
    min-height: 100vh;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1, 'pnum' 1;
}


/* ===================================================================
   .page — the light-card container
   =================================================================== */

.page {
    max-width: 780px;
    width: 100%;
    margin: 40px auto;
    padding: 3rem 2.5rem;
    background: var( --cream );
    border: 1px solid var( --rule );
    box-shadow: 0 2px 20px rgba( 44, 36, 22, 0.08 );
    position: relative;
    overflow: hidden;
    text-align: justify;
}

/* Vintage paper texture overlay */
.page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/img/pgtex01.webp');
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    opacity: 1.0;
    pointer-events: none;
    z-index: 0;
}

/* Ensure page content sits above the texture */
.page > * {
    position: relative;
    z-index: 1;
}

/* Disable texture when card is too tall — scaling artifacts */
.page.no-texture::before {
    display: none;
}

@media ( max-width: 500px ) {
    .page {
        padding: 2rem 1.5rem;
        margin: 0 auto;
    }
}


/* ===================================================================
   Headings — Coelacanth optical sizes, project colours, lining figs
   =================================================================== */

h1, h2, h3, h4, h5, h6 {
    text-align: left;
    font-feature-settings: 'kern' 1, 'liga' 1, 'lnum' 1;
}

/* Document title — Coelacanth Display */
h1 {
    font-family: 'Coelacanth Display', 'Georgia', serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: var( --deep-red );
    margin: 0.6em 0 0.15em;
    letter-spacing: 0.01em;
}

/* Thin gold rule after h1 — echoing the research series title page */
h1::after {
    content: '';
    display: block;
    width: 50%;
    height: 0.75pt;
    background: var( --gold );
    margin: 14px auto 20px;
}

/* Section headings — Coelacanth Subhd */
h2 {
    font-family: 'Coelacanth Subhd', 'Georgia', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: var( --deep-red );
    margin: 1.6em 0 0.15em;
    padding-bottom: 4px;
    border-bottom: 0.4pt solid var( --warm-amber );
}

/* Subsections — Coelacanth Subhd, medium weight */
h3 {
    font-family: 'Coelacanth Subhd', 'Georgia', serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.35;
    color: var( --medium-brown );
    margin: 1.4em 0 0.15em;
}

/* Tertiary — text-size bold italic, sage */
h4 {
    font-family: 'Coelacanth', 'Georgia', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: var( --sage );
    margin: 1.2em 0 0.1em;
}

h5 {
    font-family: 'Coelacanth', 'Georgia', serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
    color: var( --medium-brown );
    margin: 1em 0 0.1em;
}

/* Editorial apparatus heading — sans-serif, uppercase */
h6 {
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
    color: var( --caption-brown );
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1em 0 0.1em;
}


/* ===================================================================
   Paragraphs
   =================================================================== */

p {
    margin-bottom: 0.65em;
}


/* ===================================================================
   Links
   =================================================================== */

a {
    color: var( --rust );
    text-decoration: underline;
    text-decoration-color: var( --gold );
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

a:visited {
    color: var( --sepia );
}

a:hover {
    color: var( --medium-brown );
    text-decoration-color: var( --warm-amber );
}

a img {
    border: none;
}


/* ===================================================================
   Section page elements — shared across index & content pages
   =================================================================== */

.section-title {
    text-align: center;
    font-feature-settings: 'smcp' 1, 'kern' 1, 'liga' 1;
}

.section-intro {
    font-style: italic;
    color: var( --sepia );
    text-align: center;
    margin-bottom: 2em;
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 2.5em;
    font-size: 0.95em;
}


/* ===================================================================
   Download buttons — PDF links on research & edition pages
   =================================================================== */

.download-block {
    text-align: center;
    margin: 2em 0;
}

.download-link {
    display: inline-block;
    font-family: 'Coelacanth Subhd', 'Georgia', serif;
    font-size: 1.1em;
    font-weight: 700;
    color: var( --rust );
    text-decoration: none;
    border: 1.5px solid var( --rule );
    padding: 0.6em 1.8em;
    transition: border-color 0.2s, color 0.2s;
}

.download-link:hover {
    border-color: var( --rust );
    color: var( --deep-red );
}

.download-link + .download-link {
    margin-left: 1em;
}

.download-meta {
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-size: 0.72em;
    color: var( --caption-brown );
    margin-top: 0.6em;
}


/* ===================================================================
   Catalog — dot-leader directory listing for section index pages
   =================================================================== */

.catalog {
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog li {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: baseline;
    gap: 0 0.25rem;
    padding: 0.6rem 0;
}

.catalog a {
    font-family: 'Coelacanth Subhd', 'Georgia', serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.catalog a::after {
    position: absolute;
    padding-left: 0.25ch;
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
             " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right;
    color: var( --sepia );
    font-weight: 400;
    letter-spacing: 0.15em;
}

.catalog .desc {
    font-family: 'Coelacanth', 'Georgia', serif;
    font-size: 0.9rem;
    color: var( --sepia );
    font-style: italic;
    white-space: nowrap;
}

/* Short-title swap.  When a long catalog title would overflow on
 * narrow screens, wrap the link text in two spans:
 *
 *     <a href="..."><span class="long">Full Title</span><span class="short">Short Title</span></a>
 *
 * The .short variant displays only at <=500px; .long displays only
 * above.  Items without these spans (bare text in the <a>) render
 * identically at all widths and are unaffected by these rules. */
.catalog .short { display: none; }

@media ( max-width: 500px ) {
    .catalog li {
        display: block;
        text-align: center;
    }

    .catalog a {
        white-space: normal;   /* allow wrap if even the short title is too wide */
    }

    .catalog a::after {
        display: none;
    }

    .catalog .desc {
        display: none;
    }

    .catalog .long  { display: none; }
    .catalog .short { display: inline; }
}


/* ===================================================================
   Horizontal rules
   =================================================================== */

hr {
    border: none;
    border-top: 1px solid var( --rule );
    margin: 1.5em 0;
}


/* ===================================================================
   Gold rules — decorative variants
   =================================================================== */

.gold-rule {
    border: none;
    text-align: center;
    margin: 1.5em auto;
    height: 0.75pt;
    width: 50%;
    background: var( --gold );
}

.gold-rule-wide {
    border: none;
    text-align: center;
    margin: 1.5em auto;
    height: 0.75pt;
    width: 80%;
    background: var( --gold );
}

.thin-rule {
    border: none;
    margin: 1.2em 0;
    height: 0.4pt;
    background: var( --warm-amber );
}


/* ===================================================================
   ✦ Ornament divider
   =================================================================== */

.divider {
    text-align: center;
    margin: 1.5em 0;
    font-size: 16px;
    color: var( --gold );
    letter-spacing: 0;
}

.divider::after {
    content: '\2726';   /* ✦ Black Four Pointed Star */
}


/* ===================================================================
   Blockquotes — italic, gold left border
   =================================================================== */

blockquote {
    font-style: italic;
    color: var( --medium-brown );
    font-size: 16px;
    line-height: 1.50;
    border-left: 2.5px solid var( --gold );
    margin: 1em 20px 1em 16px;
    padding: 4px 8px 4px 12px;
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1, 'pnum' 1;
}

blockquote p {
    font-size: inherit;
    font-weight: normal;
    line-height: inherit;
    margin-bottom: 0.4em;
    font-style: italic;
    color: inherit;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Period-voice blockquotes — discretionary ligatures (c_t, s_t, s_p)
 *
 *  Use class="period-quote" on any <blockquote> that quotes a period
 *  source verbatim.  The base blockquote rule already sets font-style:
 *  italic, so this inherits Coelacanth Italic where the dlig glyphs
 *  live.  When dlig glyphs are added to Coelacanth Regular, inline
 *  period quotations will pick them up automatically through the base
 *  blockquote font-feature-settings — no class change needed.
 *
 *  Do NOT use period-quote for modern quotations or editorial
 *  commentary, even if set in italic.  The class signals "this text
 *  was written in a historical register."
 */
blockquote.period-quote {
    font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'onum' 1, 'pnum' 1;
}


/* ===================================================================
   Recipe card — amber background, gold border
   =================================================================== */

.recipe-card {
    background: var( --amber );
    border: 1px solid var( --gold );
    border-radius: 2px;
    padding: 1.5em 1.8em;
    margin: 1.5em 0;
}

.recipe-card h3,
.recipe-card h4 {
    color: var( --deep-red );
    margin-top: 0;
}


/* ===================================================================
   Note box — sage green
   =================================================================== */

.note-box {
    background: var( --light-sage );
    border: 1px solid var( --sage );
    border-radius: 2px;
    padding: 1.2em 1.5em;
    margin: 1.5em 0;
    font-size: 16px;
}

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


/* ===================================================================
   Bibliography entries
   =================================================================== */

.bib-entry {
    font-family: 'Coelacanth Caption', 'Georgia', serif;
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 0.6em;
    font-size: 16px;
    line-height: 1.45;
    color: var( --caption-brown );
}


/* ===================================================================
   Tables — warm palette
   =================================================================== */

table {
    margin: 1em 0 1.5em;
    border-collapse: collapse;
    font-family: 'Coelacanth Caption', 'Georgia', serif;
    font-size: 15px;
    line-height: 1.4;
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1, 'pnum' 1;
}

td, th {
    border: 0.5pt solid var( --warm-amber );
    padding: 5px 10px;
    text-align: left;
}

th {
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var( --medium-brown );
    background-color: var( --amber );
    padding: 6px 10px;
}


/* ===================================================================
   Code — monospace with project colours
   =================================================================== */

code, pre {
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
}

code {
    background-color: var( --amber );
    color: var( --ink );
    padding: 1px 4px;
    font-size: 0.85em;
    border-radius: 3px;
}

pre {
    display: block;
    padding: 14px 16px;
    margin: 1em 0 1.5em;
    line-height: 1.45;
    font-size: 13px;
    background-color: #FAF0E6;
    border: 0.5pt solid var( --warm-amber );
    border-radius: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var( --ink );
}

pre code {
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    padding: 0;
    border-radius: 0;
}


/* ===================================================================
   Images — centred, responsive
   =================================================================== */

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


/* ===================================================================
   Lists
   =================================================================== */

ul, ol {
    margin: 0.5em 0 1em 1.5em;
    padding: 0;
}

li {
    margin-bottom: 0.3em;
}

li > p {
    margin-bottom: 0.3em;
}


/* ===================================================================
   Superscripts — footnote markers
   =================================================================== */

sup {
    font-size: 0.78em;
    vertical-align: super;
    line-height: 0;
    font-feature-settings: 'kern' 1, 'liga' 1, 'lnum' 1;
}


/* ===================================================================
   Footnotes section
   =================================================================== */

.footnotes {
    font-family: 'Coelacanth Caption', 'Georgia', serif;
    font-size: 14px;
    line-height: 1.4;
    color: var( --caption-brown );
    margin-top: 2em;
    padding-top: 0.8em;
    border-top: 0.5pt solid var( --warm-amber );
}

.footnotes ol {
    margin-left: 1.2em;
}

.footnotes li {
    margin-bottom: 0.4em;
}

.footnotes p {
    margin-bottom: 0.2em;
}

/* Italic fallback: Caption has no italic face, so <em>/<i> inside
   Caption-styled contexts fall back to base Coelacanth (real italic) */
.footnotes em, .footnotes i,
.bib-entry em, .bib-entry i,
table em, table i {
    font-family: 'Coelacanth', 'Georgia', serif;
}


/* ===================================================================
   Dark mode — dark room, light parchment card
   =================================================================== */

@media ( prefers-color-scheme: dark ) {
    :root {
        --parchment: #1a1612;
        --cream:     #d4cdc0;
    }

    .page {
        box-shadow: 0 2px 30px rgba( 0, 0, 0, 0.4 );
    }

    /*
     *  Card-interior colours stay warm and readable.
     *  --ink, --deep-red, --medium-brown, --rust, --sepia, --gold
     *  all remain unchanged — they were chosen to work on both
     *  the light (#FAF6F0) and dimmed (#d4cdc0) card backgrounds.
     *
     *  Component backgrounds dim slightly for contrast:
     */
    .recipe-card {
        background: #E3DCD0;
        border-color: var( --gold );
    }

    .note-box {
        background: #D0D6CA;
        border-color: var( --sage );
    }

    pre {
        background-color: #DCD7CE;
    }

    code {
        background-color: #E3DCD0;
    }
}


/* ===================================================================
   Print
   =================================================================== */

@media print {
    body {
        font-size: 10.5pt;
        line-height: 1.45;
        color: var( --ink );
        background-color: white;
        margin: 0;
        padding: 0;
    }

    .page {
        max-width: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    @page {
        margin: 1in 1in 0.85in 1in;
    }

    table, pre, blockquote {
        page-break-inside: avoid;
    }

    h2, h3, h4 {
        page-break-after: avoid;
    }
}