/* ============================================================
   LANDING — the Stoa's front page: the painted backdrop, the
   masthead, and a card for each mural.
   Load after colors.css; footer.css may come anywhere after it.
   ============================================================ */

:root {
    /* Page */
    --measure:     46rem;  /* line length of the content column */
    --page-font:   'Cormorant Garamond', serif;
    --page-ink:    var(--parchment);
    --page-ground: var(--charcoal);

    /* Backdrop veil over the painting. Give opaque colors: the veil
       applies its own transparency. */
    --veil-glow:     var(--umber);     /* warm Theban light, top left, at 30% */
    --veil-water:    var(--harbor);    /* deep Nantucket water, bottom right, at 45% */
    --veil-vignette: var(--black);     /* darkened edges, at 45% */
    --veil-tint:     var(--charcoal);  /* overall wash, at 20% */

    /* Masthead */
    --masthead-font: 'Cormorant SC', serif;
    --masthead-ink:  var(--ivory);
    --masthead-rule: var(--gold);      /* the ornament under the title */
    --masthead-subtitle-ink: var(--sandstone);

    /* Section Labels */
    --section-label-font: 'Cormorant SC', serif;
    --section-label-ink:  var(--gold);
    --section-label-rule: color-mix(in srgb, var(--gold) 55%, transparent);

    /* Cards. Each card sets its own tint, accent, and title face
       below; these are the defaults. Give an opaque tint: the card
       applies its own transparency. */
    --card-gap:          1.5rem;
    --card-tint:         var(--page-ground);
    --card-accent:       var(--gold);  /* short bar above the title */
    --card-border:       color-mix(in srgb, var(--gold) 25%, transparent);
    --card-border-hover: color-mix(in srgb, var(--gold) 55%, transparent);
    --card-focus:        var(--gold);

    /* Card Titles */
    --card-title-font:      var(--page-font);
    --card-title-weight:    400;
    --card-title-style:     normal;
    --card-title-tracking:  0.02em;
    --card-title-ink:       var(--ivory);
    --card-title-ink-hover: var(--gold);

    /* Card Authors */
    --card-author-ink: var(--sandstone);

    /* Footer */
    --footer-link-hover: var(--gold);
}

/* ============================================================
   RESET / BASE
   ============================================================ */

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

/* Only the browser defaults the landing page's markup actually meets. */
h1, h2, h3, p, ul { margin: 0; padding: 0; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--page-ground);
    color: var(--page-ink);
    font-family: var(--page-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   BACKDROP (the Painted Stoa, under a veil)
   ============================================================ */

/* Fixed like the murals' scene layers, but a single still image:
   no script, no crossfade. */
.backdrop,
.backdrop-veil {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100lvh;
    pointer-events: none;
}

.backdrop {
    z-index: 0;
}

/* Phones see a narrow slice: 40% keeps the painted panels and the
   bands of light on the floor in it. */
.backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
}

/* Warm Theban glow above, deep Nantucket water below, over the
   painting's own warm-to-cool light; grain as on the murals. Lighter
   than the murals' 70% wash: this painting is dark already. */
.backdrop-veil {
    z-index: 1;
    background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
            radial-gradient(ellipse 60% 50% at 15% 0%, color-mix(in srgb, var(--veil-glow) 30%, transparent), transparent 70%),
            radial-gradient(ellipse 60% 50% at 85% 100%, color-mix(in srgb, var(--veil-water) 45%, transparent), transparent 70%),
            radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--veil-vignette) 45%, transparent) 100%),
            color-mix(in srgb, var(--veil-tint) 20%, transparent);
}

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

.content {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
    text-align: center;
    margin-bottom: 4.5rem;
}

.masthead h1 {
    font-family: var(--masthead-font);
    font-weight: 500;
    font-size: clamp(2.75rem, 8vw, 4.2rem);
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: var(--masthead-ink);
    text-shadow: 0 2px 24px color-mix(in srgb, var(--black) 80%, transparent);
}

.masthead-rule {
    width: 140px;
    height: 1px;
    margin: 1.5rem auto;
    background: linear-gradient(to right, transparent, var(--masthead-rule), transparent);
}

.masthead-subtitle {
    font-style: italic;
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    color: var(--masthead-subtitle-ink);
}

/* ============================================================
   SECTION LABEL (flanked by hairlines)
   ============================================================ */

.section-label {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    font-family: var(--section-label-font);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.16em;
    color: var(--section-label-ink);
}

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

.section-label::before { background: linear-gradient(to right, transparent, var(--section-label-rule)); }
.section-label::after  { background: linear-gradient(to left,  transparent, var(--section-label-rule)); }

/* ============================================================
   SHELVES (one per kind of work: plays, novels, …)
   ============================================================ */

.shelf + .shelf {
    margin-top: 4rem;
}

/* ============================================================
   MURAL CARDS
   ============================================================ */

/* Two across, more rows as murals arrive. Flex rather than grid, so a
   card alone on its row centers under the label instead of leaving an
   empty column beside it. Cards in a row match heights (stretch). */
.murals {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-gap);
}

.murals > li {
    flex: 0 0 calc((100% - var(--card-gap)) / 2);  /* half the row, less the gap */
}

.mural {
    display: block;
    height: 100%;
    padding: 2.25rem 1.75rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--card-tint) 75%, transparent);
    border: 1px solid var(--card-border);
    transition: border-color 0.3s ease, transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mural:hover {
    border-color: var(--card-border-hover);
    transform: translateY(-2px);
}

.mural:focus-visible {
    outline: 1px solid var(--card-focus);
    outline-offset: 4px;
}

.mural-accent {
    width: 2.5rem;
    height: 2px;
    margin: 0 auto 1.25rem;
    background: var(--card-accent);
}

.mural-title {
    font-family:    var(--card-title-font);
    font-weight:    var(--card-title-weight);
    font-style:     var(--card-title-style);
    letter-spacing: var(--card-title-tracking);
    color:          var(--card-title-ink);
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.mural:hover .mural-title,
.mural:focus-visible .mural-title {
    color: var(--card-title-ink-hover);
}

.mural-author {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--card-author-ink);
}

/* Each card borrows its mural's scene ground, its accent, and its
   title face. The modifier sets only tokens. */
.mural--antigone {
    --card-tint:         var(--lamp-black);  /* Antigone's scene ground */
    --card-accent:       var(--wine);        /* Antigone's own name color */
    --card-title-weight: 500;
    --card-title-style:  italic;
}

.mural--birds {
    --card-tint:           var(--dusk);      /* Birds' scene ground */
    --card-accent:         var(--cinnamon);  /* the hoopoe's crest: Birds' headings */
    --card-title-font:     'IM Fell English SC', serif;  /* the face's only weight */
    --card-title-tracking: 0.04em;
}

.mural--as-you-like-it {
    --card-tint:       var(--greenwood);     /* As You Like It's scene ground */
    --card-accent:     var(--rose);          /* Rosalind's own name color, and its headings */
    --card-title-font: 'IM Fell English', serif;
}

.mural--moby-dick {
    --card-tint:           var(--deep-sea);  /* Moby-Dick's scene ground */
    --card-accent:         var(--brass);     /* Moby-Dick's headings */
    --card-title-font:     'Cormorant SC', serif;
    --card-title-weight:   500;
    --card-title-tracking: 0.06em;
}

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

@media (max-width: 40rem) {
    .content { padding: 3.5rem 1rem 3rem; }
    .masthead { margin-bottom: 3rem; }
    .shelf + .shelf { margin-top: 3rem; }
    .murals > li { flex-basis: 100%; }  /* one card per row */
}

@media (prefers-reduced-motion: reduce) {
    .mural, .mural-title { transition: none; }
    .mural:hover { transform: none; }
}