/* ===========================================================================
   site.css — the shared foundation for every page.

   Companion to wordmark.css, which owns the masthead lockup and nothing else.
   This file owns everything else that is genuinely identical site-wide: the
   colour tokens, the page base, the navy top bar, the footer, focus states,
   and the button system.

   Why this exists: these rules previously lived in all 49 pages' inline
   <style> blocks, so a one-line change meant a 49-file scripted pass. Anything
   added here lands everywhere at once.

   What does NOT belong here: page-specific layout, prose styles, and the
   header/footer spacing variants that still differ between page archetypes.
   Those stay inline until they are deliberately reconciled.

   Load order on every page:
       wordmark.css  ->  site.css  ->  the page's own inline <style>
   The inline block still wins, so a page can override anything below.
   =========================================================================== */


/* --- Colour tokens --------------------------------------------------------
   Identical across all 49 pages. Gold is an accent, never a background for
   body text. Resist adding a second accent hue (see brand.md §5).             */
:root {
    --dark-blue: #0d2c4f;
    --deep-navy: #132235;
    --gold: #d4b886;
    --light-gold: #c5a870;
    --text-light: #ffffff;
    --text-dark: #333333;
    --background-light: #ffffff;
    --border-light: #e0e0e0;
}


/* --- Page base ----------------------------------------------------------- */
body {
    background-color: var(--background-light);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Images carry width/height attributes so the browser can reserve their space
   before they load, which stops the page jumping. But those attributes also
   supply a used HEIGHT, so any image whose CSS sets a width and no height
   gets stretched to its full pixel height. height:auto restores the aspect
   ratio while keeping the layout-shift benefit.

   Deliberate fixed-height crops -- .card img, .serial-card img,
   .bio-image-container img, .blog-post-media-wrapper img -- all use
   higher-specificity selectors, so they override this and keep cropping.     */
img {
    height: auto;
}


/* --- Navy top bar ---------------------------------------------------------
   Two archetypes exist in the markup. The main pages use .top-bar-content
   (a three-column grid carrying socials + the newsletter CTA); the poem,
   speech and story pages use the older .top-socials (socials only, no CTA).
   Both are supported here so neither breaks.                                  */
.top-bar {
    background-color: var(--deep-navy);
    padding: 10px 0;
}

.top-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 20px;
    font-size: 1.2rem;
    justify-self: start;
}
.social-links a { color: var(--text-light); transition: color 0.3s ease; }
.social-links a:hover { color: var(--gold); }

.newsletter-link { justify-self: center; }
.newsletter-link a {
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}
.newsletter-link a:hover { color: var(--text-light); }

/* Legacy top bar: socials only. Used by the 14 poem/speech/story pages. */
.top-socials {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 1.2rem;
    display: flex;
    gap: 20px;
}
.top-socials a { color: var(--text-light); transition: color 0.3s ease; }
.top-socials a:hover { color: var(--gold); }


/* --- Navigation -----------------------------------------------------------
   Only the hover colour is shared; the nav's own spacing and borders still
   differ per archetype and stay in each page's inline block for now.          */
.main-nav a:hover { color: var(--gold); }


/* --- Footer -------------------------------------------------------------- */
.footer-socials {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 1.5rem;
}
.footer-socials a { color: var(--text-dark); transition: color 0.3s ease; }
.footer-socials a:hover { color: var(--gold); }

.copyright-text {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}


/* --- Focus states ---------------------------------------------------------
   Previously only 2 of 49 pages defined any focus style, so keyboard users
   had no visible position on the other 47.

   currentColor is deliberate: the ring inherits the element's own text
   colour, which by definition already contrasts with whatever it sits on.
   That gives a white ring on the navy bar, a dark ring on white pages, and a
   navy ring on gold buttons -- without hard-coding a colour per context.

   :focus-visible (not :focus) means mouse users never see the ring.           */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}


/* --- Buttons --------------------------------------------------------------
   One system replacing four near-identical classes that had drifted to three
   different corner radii (25px / 8px / 5px) and two colour schemes.

   The important fix is contrast. The old buttons set white text on --gold,
   which measures 1.9:1 -- far below the 4.5:1 WCAG AA needs, and the reason
   they read as washed out. Navy on the same gold measures 8.4:1.

   The legacy class names are kept as aliases so no page markup has to change.
   New work should use .btn / .btn-navy / .btn-outline.                        */
.btn,
.btn-navy,
.btn-outline,
.card-button,
.cta-button,
.serial-button,
.cta-button-small {
    display: inline-block;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Primary — gold field, navy type */
.btn,
.card-button,
.cta-button,
.serial-button {
    background-color: var(--gold);
    color: var(--deep-navy);
}
.btn:hover,
.card-button:hover,
.cta-button:hover,
.serial-button:hover {
    background-color: var(--light-gold);
    color: var(--deep-navy);
}

/* Solid navy — for use on light backgrounds beside a primary button */
.btn-navy,
.cta-button-small {
    background-color: var(--deep-navy);
    color: var(--text-light);
}
.btn-navy:hover,
.cta-button-small:hover {
    background-color: var(--dark-blue);
    color: var(--text-light);
}

/* Text action — an underlined link, not a filled box.

   Use this for navigation between pieces of writing ("Chapter One", "Chapters").
   Reserve the filled .btn for a page's single genuine call to action, like
   subscribing. A catalogue page full of filled buttons reads like a shop;
   a hairline rule under letterspaced caps reads like a book.                 */
.link-action {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--deep-navy);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gold);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.link-action::after {
    content: "\00a0\2192";
    display: inline-block;
    transition: transform 0.3s ease;
}
.link-action:hover,
.link-action:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--deep-navy);
}
.link-action:hover::after { transform: translateX(3px); }

/* Outline — quiet secondary actions */
.btn-outline {
    background-color: transparent;
    color: var(--deep-navy);
    border-color: var(--deep-navy);
}
.btn-outline:hover {
    background-color: var(--deep-navy);
    color: var(--text-light);
}


/* --- Recently added -------------------------------------------------------
   Paired with js/whats-new.js, which removes the block once its newest entry
   is older than data-stale-after-days. Styled as a quiet ledger rather than a
   banner: a returning reader should be able to scan it in two seconds.       */
.whats-new {
    max-width: 680px;
    margin: 0 auto 64px;
    padding: 26px 30px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.whats-new[hidden] { display: none; }

.whats-new-title {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
}

.whats-new-list { list-style: none; margin: 0; padding: 0; }
.whats-new-list li { margin: 0 0 12px; }
.whats-new-list li:last-child { margin-bottom: 0; }
.whats-new-list li[hidden] { display: none; }

.whats-new-date {
    display: inline-block;
    min-width: 6.5em;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #8b9199;
}
.whats-new-list a {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--deep-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.whats-new-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.whats-new-kind {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #8b9199;
}

@media (max-width: 560px) {
    .whats-new { padding: 22px 18px; }
    .whats-new-date { display: block; min-width: 0; margin-bottom: 2px; }
}


/* --- Video embeds (facade pattern) ----------------------------------------
   A static poster that swaps itself for the YouTube player on click.

   The point is that NOTHING from YouTube loads until a visitor actually asks
   for it -- no player script, no cookies, no tracking on page load. The old
   carousel instead sent people off to youtube.com in a new tab, which lost
   them from the site entirely. The iframe uses youtube-nocookie.com.

   Markup: <div class="video-embed" data-video-id="..."> with a
   .video-embed-play button inside. js/video.js does the swap.               */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background-color: #000;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.video-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-embed-play {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* height:100% + object-fit beats the global img{height:auto} on specificity,
   which is what crops an arbitrary thumbnail to a clean 16:9. */
.video-embed-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-embed-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background-color: rgba(19, 34, 53, 0.82);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.video-embed-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%; /* optical centring -- a triangle looks left-heavy at true 50% */
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--gold);
}
.video-embed-play:hover .video-embed-icon {
    background-color: var(--deep-navy);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-caption {
    margin: 14px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #6c757d;
    text-align: center;
}

@media (max-width: 560px) {
    .video-embed-icon { width: 58px; height: 58px; }
    .video-embed-icon::after { border-width: 10px 0 10px 17px; }
}


/* --- Kit (ConvertKit) subscribe form --------------------------------------
   Kit's HTML embed ships with inline style attributes on the input and button
   plus a large scoped stylesheet of its own. Both were stripped out of
   newsletter.html so the form can be styled here like any other component --
   inline styles would otherwise beat every rule below.

   The .formkit-* class names are Kit's, not ours. Do not rename them: ck.5.js
   targets them to toggle the spinner and inject the success message.          */
.formkit-form {
    max-width: 520px;
    margin: 0 auto;
}

.formkit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.formkit-field { flex: 1 1 240px; }

.formkit-input {
    width: 100%;
    padding: 13px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-dark);
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: border-color 0.3s ease;
}
.formkit-input::placeholder { color: #8b9199; }
/* No outline:none here -- the site-wide :focus-visible ring must survive. */
.formkit-input:focus { border-color: var(--gold); }

/* Matches .btn exactly: gold field, navy type, 8.41:1 */
.formkit-submit {
    position: relative;
    flex: 0 0 auto;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: var(--gold);
    color: var(--deep-navy);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}
.formkit-submit:hover { background-color: var(--light-gold); }

/* Kit sets [data-active] on the button while submitting. Dots are navy so
   they read against the gold; Kit's own version used white. */
.formkit-spinner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0 auto;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.formkit-spinner > div {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: auto;
    background-color: var(--deep-navy);
    border-radius: 100%;
    opacity: 0.4;
    animation: formkit-bounce 1.4s infinite ease-in-out both;
}
.formkit-spinner > div:nth-child(1) { animation-delay: -0.32s; }
.formkit-spinner > div:nth-child(2) { animation-delay: -0.16s; }
.formkit-submit[data-active] .formkit-spinner { width: 46px; height: 100%; }
.formkit-submit[data-active] .formkit-spinner ~ span { opacity: 0; }

@keyframes formkit-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Success and error messages Kit injects after submit */
.formkit-alert {
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    list-style: none;
    border: 1px solid;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-align: center;
}
.formkit-alert:empty { display: none; }
.formkit-alert-error { background-color: #fdeee9; border-color: #e2683c; color: #a83208; }
.formkit-alert-success { background-color: #eaf6ef; border-color: #2f8f5b; color: #1d6b40; }

@media (max-width: 560px) {
    .formkit-fields { flex-direction: column; }
    .formkit-submit { width: 100%; }
}


/* --- Piece navigation -----------------------------------------------------
   Sits at the foot of every individual story, poem, or speech, above the
   newsletter invitation. Two routes: back into the collection the reader came
   from, and out to the full catalogue. Previously this was inconsistent --
   some pieces said "Back to Works", some "Back to All Works", and the poems
   had no way back at all.                                                     */
.piece-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 800px;
    margin: 56px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--border-light);
}

@media (max-width: 480px) {
    .piece-nav { gap: 16px; flex-direction: column; align-items: center; }
}


/* --- End-of-reading newsletter invitation ---------------------------------
   Dropped in at the foot of chapter, story, poem, speech and blog pages --
   the moment a reader has just finished something and is at peak interest.

   Deliberately a LINK to newsletter.html rather than an inline signup form.
   Every provider worth using (MailerLite, beehiiv) embeds via iframe/script,
   which would mean loading third-party JavaScript on ~30 reading pages, in a
   style we cannot control from this file. Keeping the form on one page means
   the invitation is fully on-brand everywhere, the reading pages stay fast
   and tracker-free, and swapping providers touches exactly one file.         */
.newsletter-cta {
    max-width: 680px;
    margin: 72px auto 0;
    padding: 40px 32px;
    border-radius: 10px;
    background-color: var(--deep-navy);
    text-align: center;
}

.newsletter-cta-kicker {
    margin: 0 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.newsletter-cta-title {
    margin: 0 0 14px;
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-light);
}

.newsletter-cta-text {
    max-width: 46ch;
    margin: 0 auto 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

.newsletter-cta-note {
    margin: 18px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}


/* --- Shared responsive behaviour ----------------------------------------- */
@media (max-width: 768px) {
    .newsletter-cta { margin-top: 48px; padding: 32px 22px; }
    .newsletter-cta-title { font-size: 1.35rem; }

    .top-bar-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .social-links,
    .newsletter-link { justify-self: center; }
    .top-socials { justify-content: center; }
}


/* --- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}