/* ───────────────────────────────────────────────
   Layout
   ─────────────────────────────────────────────── */
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: auto;
    flex-grow: 1;
    /* Desktop: the archive sits centred in the viewport. "safe center" is the
       same centring, except it falls back to flex-start once the content is
       taller than the container — without it the top of the archive gets
       clipped into unreachable overflow. The plain "center" line above is the
       fallback for browsers that do not understand the safe keyword. */
    justify-content: center;
    justify-content: safe center;
    max-height: 100vh; /* Limits height to viewport */
    overflow-y: auto; /* Allows scrolling for content overflow */
    width: 100%;
}

#haiku-content-container {
    max-width: 800px; /* Restrict width for better readability */
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ───────────────────────────────────────────────
   Page header
   ─────────────────────────────────────────────── */
.haiku-header-container {
    padding: 22px 0 8px;
    position: relative;
}

.haiku-page-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #28282B;
    margin: 0;
}

.haiku-page-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1rem;
    color: #8a8a85;
    margin: 8px 0 0;
}

.haiku-header-container::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin: 14px auto 0;
    background: linear-gradient(to right,
        rgba(184, 134, 11, 0),
        rgba(184, 134, 11, 0.8),
        rgba(184, 134, 11, 0));
}

/* ───────────────────────────────────────────────
   Haiku cards (shared)
   ─────────────────────────────────────────────── */
.haiku-card {
    position: relative;
    background-color: #fffefa;
    border: 1px solid rgba(40, 40, 43, 0.08);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(40, 40, 43, 0.06);
    padding: 30px 20px;
    margin: 20px auto;
    box-sizing: border-box;
}

.haiku-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    color: #28282B;
    margin: 0 0 12px;
}

/* A hairline under the title, fading out at both ends, so the title reads as a
   heading rather than as a fourth line of the poem. Same gold as the page rule
   but fainter — the header rule should stay the louder of the two. */
.haiku-title::after {
    content: "";
    display: block;
    height: 1px;
    margin: 10px auto 0;
    background: linear-gradient(to right,
        rgba(184, 134, 11, 0),
        rgba(184, 134, 11, 0.45),
        rgba(184, 134, 11, 0));
}

.featured-haiku .haiku-title::after {
    width: 90px;
}

.previous-haiku .haiku-title::after {
    width: 64px;
}

.haiku-lines p {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: #3d3d40;
    margin: 8px 0;
}

/* Attribution sits under the poem, in the traditional em-dash form. The dash
   is a pseudo-element so itemprop="name" stays exactly the author's name. */
.haiku-author {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #8a8a85;
    margin: 12px 0 0;
}

.haiku-author::before {
    content: "— ";
}

.haiku-date {
    display: block; /* it is a <time> element, which is inline by default */
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a0a09a;
    margin-top: 18px;
}

/* ───────────────────────────────────────────────
   Featured haiku
   ─────────────────────────────────────────────── */
.featured-haiku {
    max-width: 560px;
    padding: 38px 30px 30px;
    overflow: hidden;
    animation: haikuFadeIn 0.8s ease both;
}

/* gold accent line across the top of the featured card */
.featured-haiku::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right,
        rgba(184, 134, 11, 0),
        rgba(218, 165, 32, 0.9),
        rgba(184, 134, 11, 0));
}

.haiku-kicker {
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: darkgoldenrod;
    margin-bottom: 15px;
}

.featured-haiku .haiku-title {
    font-size: 1.7rem;
}

.featured-haiku .haiku-lines p {
    font-size: 1.35rem;
    line-height: 1.7;
    margin: 10px 0;
}

/* small red ink seal, a quiet nod to traditional haiku stamps */
.haiku-seal {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(178, 34, 34, 0.75);
    margin: 22px auto 0;
}

@keyframes haikuFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ───────────────────────────────────────────────
   Previous haikus
   ─────────────────────────────────────────────── */
.previous-haikus {
    /* Tightened so the collapsed view (featured + two cards + toggle)
       clears a 900px-tall laptop viewport without scrolling. */
    margin: 28px 0 8px;
}

.previous-haikus-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #8a8a85;
    margin: 0 0 5px;
}

.previous-haikus-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.previous-haiku {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 25px 20px;
    opacity: 0.92;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.previous-haiku:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(40, 40, 43, 0.1);
}

.previous-haiku .haiku-title {
    font-size: 1.15rem;
}

.previous-haiku .haiku-lines p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ───────────────────────────────────────────────
   Archive toggle ("See more")
   ───────────────────────────────────────────────
   Collapsed is the shipped state. Everything past the second card is hidden
   with display:none rather than removed, so the whole archive is still in the
   HTML on first load and search engines index all of it. */
.previous-haikus.is-collapsed .previous-haiku:nth-child(n+3) {
    display: none;
}

/* Only the cards revealed by the toggle fade in; the first two are already
   on screen and would otherwise flicker on every collapse. */
.previous-haikus:not(.is-collapsed) .previous-haiku:nth-child(n+3) {
    animation: haikuFadeIn 0.5s ease both;
}

.haiku-archive-toggle {
    display: inline-block;
    margin: 10px auto 0;
    padding: 11px 28px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8a8a85;
    background-color: transparent;
    border: 1px solid rgba(184, 134, 11, 0.35);
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* Fewer than three archived haikus means "See more" has nothing to reveal, so
   the button must never paint at all.

   This is done in CSS rather than JS because CSS applies on the first frame,
   whereas the script runs at DOMContentLoaded -- late enough that the button
   paints, then vanishes. The selector reads: a list with no third card hides
   the toggle that follows it. Nothing counts the haikus, so it stays correct
   as the archive grows. */
.previous-haikus-list:not(:has(.previous-haiku:nth-child(3))) ~ .haiku-archive-toggle {
    display: none;
}

/* Fallback for browsers without :has(). There the script's [hidden] is the
   only guard, and this rule is what lets it win -- .haiku-archive-toggle sets
   display at the same specificity as the browser's [hidden] default, and an
   author sheet beats the UA sheet, so without this the button would stay
   visible doing nothing. */
.haiku-archive-toggle[hidden] {
    display: none;
}

.haiku-archive-toggle:hover {
    color: #28282B;
    border-color: rgba(184, 134, 11, 0.8);
    background-color: rgba(184, 134, 11, 0.06);
}

.haiku-archive-toggle:focus-visible {
    outline: 2px solid rgba(184, 134, 11, 0.9);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .previous-haikus:not(.is-collapsed) .previous-haiku:nth-child(n+3),
    .featured-haiku {
        animation: none;
    }
}

/* ───────────────────────────────────────────────
   Media queries (mobile portrait and landscape)
   ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .haiku-header-container {
        padding-top: 20px;
    }
    .haiku-page-title {
        font-size: 2rem;
    }
    .featured-haiku {
        padding: 35px 20px 30px;
    }
    .featured-haiku .haiku-title {
        font-size: 1.45rem;
    }
    .featured-haiku .haiku-lines p {
        font-size: 1.2rem;
    }
}

@media (max-width: 1000px) and (orientation: landscape) {
    #haiku-content-container {
        width: 600px;
        padding: 0;
    }
}