/* ============================================================
   MURAL — structure shared by every mural in the Stoa.
   Load after colors.css and before the mural's own stylesheet,
   which supplies its palette, type, and reading layout.
   ============================================================ */

:root {
    /* The frame: line length of the reading column, the gutters
       beside it, how far down the page the eyebrow sits, and the
       space left after the last line. Every mural shares these, so
       the back link holds its place from one mural to the next and
       every page ends the same way. */
    --measure:      42rem;
    --gutter:       3rem;
    --frame-top:    3.5rem;
    --frame-bottom: 8.75rem;   /* 140px */

    /* Reading rhythm: the gaps between the shared blocks of the reading
       body. What sits inside a header, heading, or excerpt is the mural's. */
    --space-after-header:     5rem;      /* 80px: header to first passage */
    --space-between-passages: 5.25rem;   /* 84px */
    --space-after-heading:    1.75rem;   /* 28px: heading to its first excerpt */
    --space-around-divider:   2.625rem;  /* 42px above and below a divider */

    --title-font:   "IM Fell English", serif;
    --title-size:   clamp(2.75rem, 7vw, 4.2rem);
    --title-style:  normal;
    --title-weight: 400;
    --title-ink:    var(--ivory);

    --author-font:      "Inter", sans-serif;
    --author-size:      1.3rem;
    --author-weight:    400;
    --author-style:     normal;
    --author-transform: none;
    --author-ink:       var(--sandstone);

    --translator-font:  "Inter", sans-serif;
    --translator-ink:   var(--sandstone);

    --passage-heading-font:       "IM Fell English", serif;
    --passage-heading-weight:     400;
    --passage-heading-style:      normal;
    --passage-heading-size:       clamp(1.4rem, 0.7rem + 1.75vw, 1.75rem);
    --passage-heading-transform:  none;
    --passage-heading-ink:        var(--gold);
    --passage-heading-ink-hover:  var(--ivory);
    --passage-heading-rule:       color-mix(in srgb, var(--passage-heading-ink) 50%, transparent);
    --passage-heading-rule-short: 8.75rem;  /* 140px: the single line on narrow screens */

    /* body and excerpts */
    --passage-font: "Crimson Pro", serif;
    --passage-ink:  var(--parchment);
    --passage-rule: color-mix(in srgb, var(--passage-heading-ink) 40%, transparent);

    /* The stoa link. */
    --stoa-link-font:       "Inter", sans-serif;
    --stoa-link-ink:        var(--ivory);
    --stoa-link-ink-hover:  var(--sandstone);
}

/* Murals should put their own mobile rules at this same breakpoint,
   so the frame and the reading layout change together. */
@media (max-width: 40rem) {
    :root {
        --gutter:       1.5rem;
        --frame-top:    1.75rem;
        --frame-bottom: 5.625rem;  /* 90px */
        --space-between-passages: 4rem;  /* 64px */
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}
/* Only the browser defaults the murals' markup actually meets. */
h1, h2, p, blockquote, figure, hr { margin: 0; padding: 0; }

/* On <html>, not <body>: gallery mode sets overflow on <html>, which would
   stop body's overflow propagating and turn <body> into a scroll container. */
html {
    overflow-x: hidden;
}

/* min-height keeps the body box filling the viewport on a short page,
   so `body:hover` (which reveals the gallery buttons) fires anywhere. */
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--passage-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--passage-ink);
}

/* ============================================================
   CONTENT WRAPPER (the frame)
   ============================================================ */

/* Each mural sets everything inside the frame, and should end its last block with
   no trailing margin or padding, so --frame-bottom is the whole gap above the footer. */
.content {
    position: relative;
    z-index: 2;
    max-width: calc(var(--measure) + 2 * var(--gutter)); /* text column is exactly --measure */
    margin-inline: auto;
    padding: var(--frame-top) var(--gutter) var(--frame-bottom);
    transition: opacity 0.7s ease;
}

/* ============================================================
   TITLE BLOCK (the page header every mural shares)
   ============================================================ */

.title-block {
    text-align: center;
}

/* clamp() carries the narrow-screen size: no breakpoint rule needed. */
.work-title {
    font-family: var(--title-font);
    font-size:   var(--title-size);
    font-weight: var(--title-weight);
    font-style:  var(--title-style);
    color:       var(--title-ink);
    line-height: 1.1;
    letter-spacing: 0.04em;
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--black) 80%, transparent);
}

.author {
    font-family: var(--author-font);
    font-size: var(--author-size);
    font-weight: var(--author-weight);
    font-style:  var(--author-style);
    text-transform:  var(--author-transform);
    color: var(--author-ink);
    letter-spacing: 0.08em;
}

/* The gap sits above the translator rather than below the author, so a
   mural without one ends its header on the author line, nothing trailing. */
.translator {
    font-family: var(--translator-font);
    color: var(--translator-ink);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    margin-top: 0.45rem;
}

/* ============================================================
   READING BODY (the skeleton every mural shares)
   ============================================================ */

.reading {
    margin-top: var(--space-after-header);
}

/* flow-root, so a leading divider's margin-top adds to the gap above
   instead of collapsing into it. */
.passage {
    display: flow-root;
}

.passage + .passage {
    margin-top: var(--space-between-passages);
}

.excerpt {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.65;
    font-weight: 300;
    color: var(--passage-ink);
}

.excerpt p {
    margin-bottom: 16px;
}

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

.excerpt + .divider {
    margin-block: var(--space-around-divider);
}

.divider {
    height: 2px;
    border: none;
    background: linear-gradient(to right, transparent, var(--passage-rule), transparent);
}

/* A jumped-to heading lands where the eyebrow sits at the top of the page. */
.passage-heading {
    font-family: var(--passage-heading-font);
    font-size: var(--passage-heading-size);
    font-weight: var(--passage-heading-weight);
    font-style:  var(--passage-heading-style);
    text-transform:  var(--passage-heading-transform);
    margin: 0 0 var(--space-after-heading);
    scroll-margin-top: var(--frame-top);
}

.passage-heading a {
    color: var(--passage-heading-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.passage-heading a:hover,
.passage-heading a:focus-visible {
    color: var(--passage-heading-ink-hover);
}

/* The label between two hairlines that fade outward. */
.passage-heading {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    text-wrap: balance;  /* if a label must break, break it evenly */
    letter-spacing: 0.03em;
}

.passage-heading::before,
.passage-heading::after {
    content: "";
    flex: 1;
    min-width: 1.5rem;
    height: 2px;
}

.passage-heading::before {
    background: linear-gradient(to right, transparent, var(--passage-heading-rule));
}

.passage-heading::after {
    background: linear-gradient(to left, transparent, var(--passage-heading-rule));
}

/* Too narrow for flanking lines: most labels would wrap or leave stubs
   that read as dashes. Stack one short hairline above the label instead.
   Same breakpoint as the frame tokens above. */
@media (max-width: 40rem) {
    .passage-heading {
        flex-direction: column;
        gap: 1.125rem;  /* 18px */
    }

    .passage-heading::before {
        flex: none;
        width: var(--passage-heading-rule-short);
        background: linear-gradient(to right, transparent, var(--passage-heading-rule), transparent);
    }

    .passage-heading::after {
        display: none;
    }
}