/* ==========================================================================
   Lylani theme
   1. Fonts   2. Tokens   3. Base   4. Layout   5. Header and footer
   6. Hero    7. Cards    8. Articles and Ghost content   9. Membership
   10. Forms and buttons   11. Utilities   12. Phones
   ========================================================================== */

/* 1. Fonts
   Kanit and Taviraj cover English and Thai, split by unicode-range so Thai
   glyphs only download on pages that use them. Noto covers other scripts. */

@font-face { font-family: "Kanit"; font-weight: 400; font-display: swap; src: url("../fonts/kanit-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 400; font-display: swap; src: url("../fonts/kanit-regular-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-weight: 500; font-display: swap; src: url("../fonts/kanit-medium-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 500; font-display: swap; src: url("../fonts/kanit-medium-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-weight: 600; font-display: swap; src: url("../fonts/kanit-semibold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 600; font-display: swap; src: url("../fonts/kanit-semibold-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

@font-face { font-family: "Taviraj"; font-weight: 400; font-display: swap; src: url("../fonts/taviraj-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Taviraj"; font-weight: 400; font-display: swap; src: url("../fonts/taviraj-regular-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Taviraj"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/taviraj-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Taviraj"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/taviraj-italic-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Taviraj"; font-weight: 500; font-display: swap; src: url("../fonts/taviraj-medium-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Taviraj"; font-weight: 500; font-display: swap; src: url("../fonts/taviraj-medium-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

@font-face { font-family: "Noto Sans"; font-weight: 100 900; font-display: swap; src: url("../fonts/notosans-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-045F, U+0460-052F, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif"; font-weight: 100 900; font-display: swap; src: url("../fonts/notoserif-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-045F, U+0460-052F, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif"; font-weight: 100 900; font-style: italic; font-display: swap; src: url("../fonts/notoserifitalic-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-045F, U+0460-052F, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Tokens
   Headings are black in light mode and white in dark mode. Gold (#e0b81f)
   fills buttons, highlights and the Members badge. Pink is for underlines. Links
   are white with a pink underline in dark mode, and black with a pink
   underline in light mode, where white text would be unreadable. */

:root {
    --gold: #e0b81f;
    --pink: #ff4dc9;
    --rose: #e7cdd0;
    --oxblood: #221113;

    --bg: var(--rose);
    --surface: #f1dfe1;
    --ink: var(--oxblood);
    --ink-soft: #5a3a3e;
    --caption: #000000;
    --heading: #000000;
    --link: #000000;
    --link-line: var(--pink);
    --line: rgba(34, 17, 19, 0.16);
    --button-bg: var(--gold);
    --button-ink: #000000;
    --ticker-bg: var(--oxblood);
    --ticker-ink: var(--rose);
    --ticker-mark: var(--gold);
    /* Form fields take the opposite mode's colours: oxblood in light mode,
       rose in dark mode, always with a pink outline. */
    --field-bg: var(--oxblood);
    --field-ink: var(--rose);
    --field-placeholder: rgba(231, 205, 208, 0.65);
    --field-line: 3px;

    /* If a font is picked in Ghost Admin > Design > Brand, it overrides these. */
    --font-heading: var(--gh-font-heading, "Kanit", "Noto Sans", system-ui, sans-serif);
    --font-body: var(--gh-font-body, "Taviraj", "Noto Serif", Georgia, serif);

    --gutter: clamp(16px, 4vw, 48px);
    --body-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
    /* About 68 characters of body text. Set from the body size, not in ch,
       so headings and images line up with the paragraphs. */
    --measure: calc(40.8 * var(--body-size));
    --wide: 1200px;
    --radius: 4px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--oxblood);
        --surface: #2e181b;
        --ink: var(--rose);
        --ink-soft: #c7a9ad;
        --caption: #ffffff;
        --heading: #ffffff;
        --link: #ffffff;
        --link-line: var(--pink);
        --line: rgba(231, 205, 208, 0.16);
        --ticker-bg: var(--rose);
        --ticker-ink: #000000;
        --ticker-mark: #000000;
        --field-bg: var(--rose);
        --field-ink: var(--oxblood);
        --field-placeholder: rgba(34, 17, 19, 0.6);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: var(--oxblood);
    --surface: #2e181b;
    --ink: var(--rose);
    --ink-soft: #c7a9ad;
    --caption: #ffffff;
    --heading: #ffffff;
    --link: #ffffff;
    --link-line: var(--pink);
    --line: rgba(231, 205, 208, 0.16);
    --ticker-bg: var(--rose);
    --ticker-ink: #000000;
    --ticker-mark: #000000;
    --field-bg: var(--rose);
    --field-ink: var(--oxblood);
    --field-placeholder: rgba(34, 17, 19, 0.6);
    color-scheme: dark;
}

/* 3. Base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.1;
    color: var(--heading);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

/* Thai needs more line height for stacked vowels and tone marks. */
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.35; }
:lang(th) body, body:lang(th) { line-height: 1.8; }

p { margin: 0 0 1em; }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: var(--link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    transition: background-color 0.15s, color 0.15s;
}
a:hover { text-decoration-thickness: 3px; }

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

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

::selection { background: var(--gold); color: var(--oxblood); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 4. Layout */

.site-main { min-height: 60vh; }

.section,
.page-head {
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(48px, 8vw, 112px) var(--gutter) 0;
}
.section-tight { padding-top: 24px; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 32px;
}
.section-title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0; }
.section-link { font-family: var(--font-heading); font-weight: 500; white-space: nowrap; }

.page-title { font-size: clamp(2.5rem, 7vw, 5.5rem); margin-bottom: 0.25em; }
.page-lede { font-size: 1.15em; color: var(--ink-soft); max-width: 44ch; }

.page-head-error { text-align: left; padding-bottom: 96px; }
.error-code { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.1em; color: var(--heading); }
.page-head-error .page-lede { color: var(--heading); }

.empty { color: var(--ink-soft); }

/* The Babesletter page has its own sign-up up top, so the footer one steps aside. */
.page-subscribe { max-width: 480px; margin-top: 28px; }
body:has(.page-subscribe) .footer-subscribe { display: none; }

/* Journal tag buttons (partials/tag-filter.hbs). The current one is gold. */
.tag-filter { margin-top: 28px; }
.tag-filter-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tag-filter-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--heading);
    border: 2px solid var(--pink);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.tag-filter-link:hover { background: var(--pink); color: #000000; text-decoration: none; }
.tag-filter-link[aria-current] { background: var(--gold); color: #000000; }

/* 5. Header and footer */

.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    background: var(--gold);
    color: var(--oxblood);
    padding: 8px 16px;
}
.skip-link:focus { top: 16px; }

/* Ticker. The text comes from Customize > Site wide > Ticker text and is
   hidden when that field is empty. Without JavaScript, or with reduced
   motion, it sits still and wraps. main.js repeats it and starts the scroll. */
.ticker {
    background: var(--ticker-bg);
    color: var(--ticker-ink);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    line-height: 1.4;
    overflow: hidden;
}
.ticker-track { padding: 8px var(--gutter); text-align: center; }

.ticker.is-moving .ticker-track {
    display: flex;
    width: max-content;
    padding: 8px 0;
    animation: ticker var(--ticker-duration, 30s) linear infinite;
}
.ticker.is-moving:hover .ticker-track { animation-play-state: paused; }
.ticker.is-moving .ticker-item { white-space: nowrap; padding-right: 3em; }
.ticker.is-moving .ticker-item::after { content: "\2726"; color: var(--ticker-mark); padding-left: 3em; }

@keyframes ticker { to { transform: translateX(-50%); } }

/* Solo-style header: no bar, logo on the left with the menu beside it,
   search, theme and member links pushed to the right. */
.site-header {
    position: relative;
    z-index: 50;
}

.site-header-inner {
    max-width: 1440px;
    height: 100px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 40px;
}

.site-logo { height: 40px; width: auto; }
@media (max-width: 400px) { .site-logo { height: 30px; } }

.site-wordmark {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.site-nav { display: flex; align-items: center; gap: 32px; flex: 1; }
.site-nav .nav { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.site-nav .nav a,
.site-nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--heading);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav .nav a:hover,
.site-nav .nav-current > a,
.site-nav-link:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }

.site-nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Journal dropdown (partials/navigation.hbs). Opens on hover on desktop, and
   with the arrow button everywhere, which is also the keyboard route (main.js). */
.nav-has-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-toggle {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--heading);
    cursor: pointer;
}
.nav-dropdown-toggle svg { transition: transform 0.2s; }
.nav-has-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 60;
    padding-top: 10px; /* a bridge, so the pointer can travel from the link to the list */
}
.nav-has-dropdown.is-open .nav-dropdown { display: block; }
@media (hover: hover) and (min-width: 861px) {
    .nav-has-dropdown:hover .nav-dropdown { display: block; }
}
.nav-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    min-width: 200px;
    background: var(--bg);
    border: 2px solid var(--pink);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(34, 17, 19, 0.18);
}
.site-nav .nav .nav-dropdown-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
}
.site-nav .nav .nav-dropdown-list a:hover { background: var(--surface); text-decoration: none; }
.site-nav-link { margin: 0 8px; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.icon-button:hover { background: var(--line); }

/* Everything in the header matches the menu text: black in light mode, white in dark. */
.site-header .icon-button { color: var(--heading); }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 12px 10px;
    flex-direction: column;
    justify-content: space-around;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--heading); transition: transform 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
    .site-header-inner { height: 72px; justify-content: space-between; }
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px var(--gutter) 24px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav .nav { flex-direction: column; gap: 4px; }
    .site-nav .nav a { display: block; padding: 10px 0; font-size: 1.5rem; }
    .nav-has-dropdown { flex-wrap: wrap; }
    .nav-dropdown-toggle { width: 44px; height: 44px; }
    .nav-dropdown { position: static; flex-basis: 100%; padding: 0 0 8px; }
    .nav-dropdown-list { min-width: 0; padding: 0 0 0 16px; background: none; border: 0; border-left: 2px solid var(--pink); border-radius: 0; box-shadow: none; }
    .site-nav .nav .nav-dropdown-list a { padding: 8px 0; font-size: 1.15rem; }
    .site-nav-actions { flex-wrap: wrap; margin-left: 0; }
}

.site-footer {
    margin-top: clamp(64px, 10vw, 144px);
    border-top: 1px solid var(--line);
}
.site-footer-inner {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 48px var(--gutter);
}
/* The Babesletter on the left, Membership on the right. They stack on phones,
   and whichever one is hidden lets the other take the row. */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 48px clamp(40px, 6vw, 96px);
    margin-bottom: 48px;
}
.footer-subscribe,
.footer-membership { max-width: 560px; }
.footer-title { font-size: 1.75rem; }
.footer-signin { margin: 16px 0 0; font-size: 0.95rem; }
/* No need to sell membership on the membership page. */
body:has(.tier-grid) .footer-membership { display: none; }
.footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.footer-meta p { margin: 0; }
.footer-meta .nav { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }
.footer-meta .nav a { color: var(--ink-soft); }

/* 6. Hero
   Solo-style split: headline and sign-up on the left, portrait on the right.
   On narrow screens the photo goes on top, like Solo. */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 8vw, 112px);
}

.hero-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(40px, 4vw + 1px, 64px);
}

.hero-copy {
    position: sticky;
    top: 40px;
    padding-top: clamp(8px, 3vw, 48px);
}

.hero-title {
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4.4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    max-width: 14ch;
    text-wrap: balance;
}

.hero-line {
    font-size: clamp(1.25rem, 0.36vw + 1.15rem, 1.5rem);
    line-height: 1.5;
    color: var(--heading);
    max-width: 34ch;
    margin-bottom: 32px;
}

.hero .subscribe-form { max-width: 480px; margin-bottom: 24px; }

.hero-form-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0 12px;
}

.hero-media { margin: 0; }
.hero-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
}

@media (max-width: 840px) {
    .hero-inner { display: flex; flex-direction: column-reverse; gap: 40px; }
    .hero-copy { position: static; padding-top: 0; }
    .hero-title { max-width: none; }
    /* Stacked, so a landscape crop of the portrait keeps the headline near the top. */
    .hero-image { aspect-ratio: 4 / 3; object-position: 50% 20%; }
}

/* 7. Cards */

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 3vw, 40px);
}

.work-card { position: relative; }
.work-card-link { text-decoration: none; color: inherit; display: block; }
.work-card-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.work-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.work-card-link:hover .work-card-media img { transform: scale(1.04); }
.work-card-title { font-size: 1.25rem; margin: 0 0 4px; color: var(--heading); }
.work-card-link:hover .work-card-title { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.work-card-tag { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.work-card .badge { position: absolute; top: 12px; left: 12px; }

.post-list { display: grid; gap: 0; }
.post-card { border-bottom: 1px solid var(--line); }
.post-card-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
    text-decoration: none;
    color: inherit;
}
.post-card-link:has(.post-card-media) { grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .post-card-link:has(.post-card-media) { grid-template-columns: 240px 1fr; }
}
.post-card-media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-meta { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 6px; }
.post-card-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 8px; }
.post-card-link:hover .post-card-title { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.post-card-excerpt { margin: 0; color: var(--ink-soft); max-width: 60ch; }

.badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--oxblood);
    padding: 3px 8px;
    border-radius: 999px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    font-family: var(--font-heading);
}
.page-number { color: var(--ink-soft); }

/* 8. Articles and Ghost content */

.article { padding: clamp(40px, 7vw, 96px) var(--gutter) 0; }

.article-head,
.gh-content > *,
.article-comments,
.next-post {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

.breadcrumb { font-family: var(--font-heading); font-weight: 500; margin-bottom: 16px; }
.article-title { font-size: clamp(2.25rem, 6vw, 4.5rem); margin-bottom: 0.3em; }
.article-lede { font-size: 1.25em; color: var(--ink-soft); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: var(--ink-soft); }

.article-image { max-width: var(--wide); margin: 40px auto; }
.article-image img { width: 100%; border-radius: var(--radius); }
.article-image figcaption,
.gh-content figcaption { font-size: 0.875rem; color: var(--caption); margin-top: 10px; text-align: center; }

.gh-content { margin-top: 40px; }
.gh-content > * + * { margin-top: 1.25em; margin-bottom: 0; }
.gh-content > :first-child { margin-top: 0; }
.gh-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2em; }
.gh-content h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 1.75em; }
.gh-content blockquote {
    border-left: 4px solid var(--pink);
    margin-left: auto;
    padding-left: 1.25em;
    font-style: italic;
}
.gh-content hr { border: 0; border-top: 1px solid var(--line); margin: 3em auto; }
.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content li + li { margin-top: 0.4em; }
.gh-content code { font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; border-radius: 3px; }
.gh-content pre { overflow-x: auto; background: var(--surface); padding: 1em; border-radius: var(--radius); }

/* Ghost editor card widths. gscan requires these two classes. */
.gh-content > .kg-width-wide { max-width: var(--wide); }
.gh-content > .kg-width-full { max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.kg-width-full img { border-radius: 0; }
/* Stretch smaller uploads so wide and full-width cards really fill their width. */
.gh-content .kg-image-card:is(.kg-width-wide, .kg-width-full) img { width: 100%; }

/* Work posts give galleries more room by default. */
.article-work .gh-content > .kg-gallery-card,
.article-work .gh-content > .kg-image-card { max-width: var(--wide); }

.kg-image-card img,
.kg-gallery-image img { border-radius: 2px; }
/* If an upload's recorded size is ever off, crop rather than stretch. */
.gh-content .kg-gallery-image img { object-fit: cover; }

/* Images that open in the lightbox */
.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img { cursor: zoom-in; }

/* Table of contents on journal posts (built by toc.js).
   Narrow screens: a collapsed box above the text.
   Wide screens: a sticky list in the left margin. It fades out while a
   wide image or gallery passes underneath (toc.js). */

.article-body { position: relative; }

.toc {
    max-width: var(--measure);
    margin: 40px auto 0;
    background: var(--surface);
    border-radius: var(--radius);
}
.toc-title,
.toc-list { font-family: var(--font-heading); }
.toc-title {
    padding: 14px 20px;
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); }
.toc[open] .toc-title::after { content: "\2212"; }
.toc-list { list-style: none; margin: 0; padding: 0 20px 18px; }
.toc-item { margin: 0; }
.toc-h3 { padding-left: 16px; }
.toc-list a {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.35;
}
.toc-list a:hover { color: var(--heading); }
.toc-list a[aria-current] { color: var(--heading); border-left-color: var(--pink); }

.gh-content :is(h2, h3) { scroll-margin-top: 24px; }

@media (min-width: 1400px) {
    .toc-column {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(280px, (100% - var(--measure)) / 2 - 40px);
    }
    .toc {
        position: sticky;
        top: 24px;
        margin: 0;
        background: none;
    }
    .toc-title {
        padding: 0 0 12px 14px;
        cursor: default;
        pointer-events: none;
        font-size: 0.85rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .toc-title::after { display: none; }
    .toc-list {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        padding: 0;
    }
    .toc { transition: opacity 0.2s; }
    .toc.is-covered { opacity: 0; visibility: hidden; }
}

/* Ghost editor cards
   Ghost's card stylesheet loads after this one and paints several cards
   white with white text on accent colours. These rules (one class stronger)
   put them on the theme's surfaces so they work on rose and on oxblood. */

.gh-content iframe { max-width: 100%; }
.gh-content .kg-embed-card iframe:is([src*="youtube"], [src*="vimeo"]) { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-product-card-container,
.gh-content .kg-audio-card {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.gh-content .kg-audio-card,
.gh-content .kg-product-card-container,
.gh-content .kg-toggle-card { box-shadow: inset 0 0 0 1px var(--line); }
.gh-content :is(.kg-bookmark-title, .kg-product-card-title, .kg-file-card-title, .kg-audio-title, .kg-toggle-heading-text) {
    font-family: var(--font-heading);
    color: var(--heading);
}
.gh-content :is(.kg-bookmark-description, .kg-bookmark-metadata, .kg-file-card-caption, .kg-file-card-metadata, .kg-product-card-description) { color: var(--ink-soft); }
.gh-content .kg-audio-time { color: var(--ink-soft); }
.gh-content .kg-toggle-heading svg { color: var(--ink-soft); }

/* Gold accents take oxblood text, like the theme's own buttons. */
.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-product-card a.kg-product-card-button,
.gh-content a.kg-header-card-button {
    font-family: var(--font-heading);
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
}
.gh-content .kg-callout-card-accent,
.gh-content .kg-callout-card.kg-callout-card-accent a { color: var(--oxblood); }

/* Ghost's gold buttons behave like the theme's own. */
.gh-content .kg-button-card a.kg-btn-accent,
.gh-content .kg-product-card a.kg-product-card-btn-accent {
    color: #000000;
    background-color: var(--gold);
    border: 1px solid var(--pink);
    opacity: 1;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.gh-content .kg-button-card a.kg-btn-accent:is(:hover, :focus-visible),
.gh-content .kg-product-card a.kg-product-card-btn-accent:is(:hover, :focus-visible) {
    background-color: transparent;
    color: var(--heading);
    opacity: 1;
}
.gh-content .kg-callout-card.kg-callout-card-accent a { text-decoration-color: var(--oxblood); }

/* Click-to-play YouTube (main.js). Thumbnail and gold play button until
   clicked, then the youtube-nocookie player in the same 16:9 box. */
.gh-content .yt { margin-top: 1.6em; margin-bottom: 1.6em; }
.yt-play,
.yt iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
    background: #000000;
}
.yt-play {
    position: relative;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}
.yt-play img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 0.9; }
.yt-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    background: var(--gold);
    border: 1px solid var(--pink);
    border-radius: 50%;
    transition: background-color 0.25s ease;
}
.yt-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #000000;
}
.yt-play:is(:hover, :focus-visible) .yt-icon { background-color: var(--pink); }
.yt-play:is(:hover, :focus-visible) img { opacity: 1; }
.yt-note { margin: 0.5em 0 0; font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 599px) {
    .yt-icon { width: 56px; height: 56px; }
    .yt-icon::after { border-width: 10px 0 10px 17px; }
}

/* Sign-up cards: black text whatever colour the editor picks. Ghost writes
   that colour inline, so these need !important. The button keeps its own. */
.gh-content .kg-signup-card :is(.kg-signup-card-heading, .kg-signup-card-subheading, .kg-signup-card-disclaimer, .kg-signup-card-success, .kg-signup-card-error) {
    color: #000000 !important;
}
.gh-content .kg-signup-card-input { color: #000000; }
.gh-content .kg-signup-card-input::placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; }

.next-post {
    margin-top: 80px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--font-heading);
}
.next-post-label { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.next-post a { font-size: 1.5rem; font-weight: 600; }

.article-comments { margin-top: 64px; }

/* These sit outside the padded article, so they carry their own gutter. */
.next-post,
.article-comments { width: min(var(--measure), calc(100% - 2 * var(--gutter))); }

.gh-content { overflow-wrap: break-word; }
.gh-content table { display: block; max-width: 100%; overflow-x: auto; }

/* Paywall shown by {{content}} on members-only posts */
.paywall {
    margin: 2em auto 0;
    padding: clamp(24px, 4vw, 48px);
    background: var(--surface);
    border-radius: var(--radius);
    border-top: 4px solid var(--gold);
    text-align: center;
}
.paywall-title { font-size: 1.6rem; }
.paywall-signin { margin: 16px 0 0; font-size: 0.95rem; }

/* 9. Membership */

.notice {
    padding: 16px 20px;
    background: var(--surface);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    margin-bottom: 32px;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
}
.tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.tier-name { font-size: 1.5rem; margin: 0; }
.tier-price { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 600; margin: 8px 0 0; line-height: 1; }
.tier-period { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.tier-alt { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.tier-description { margin: 8px 0 0; }
.tier-benefits { list-style: none; padding: 0; margin: 8px 0 16px; flex-grow: 1; }
.tier-benefits li { padding: 6px 0 6px 26px; position: relative; }
.tier-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
}
.tier .button { align-self: flex-start; }
.tier-signin { margin-top: 32px; }

/* 10. Forms and buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    color: var(--button-ink);
    background: var(--button-bg);
    border: 1px solid var(--pink);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}
/* Gold buttons empty out on hover: the gold fades away, leaving the pink
   outline and the text in the page's heading colour. */
.button:hover,
.button:focus-visible { background-color: transparent; color: var(--heading); text-decoration: none; }

.button-quiet { background: transparent; color: var(--ink); border: 2px solid currentColor; }
.button-quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.site-header .button { min-height: 40px; padding: 0 18px; font-size: 0.95rem; }

.subscribe-form { display: flex; flex-wrap: wrap; gap: 10px; }
.subscribe-input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    font: inherit;
    font-size: 1rem; /* 16px or more stops iOS zooming in on focus */
    color: var(--field-ink);
    background: var(--field-bg);
    border: var(--field-line) solid var(--pink);
    border-radius: 999px;
}
.subscribe-input:-webkit-autofill {
    -webkit-text-fill-color: var(--field-ink);
    box-shadow: inset 0 0 0 100px var(--field-bg);
}
.subscribe-input::placeholder { color: var(--field-placeholder); opacity: 1; }
.subscribe-input:focus { outline: none; }
.subscribe-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* The submit button keeps its gold, with an outline as thick as the field's. */
.subscribe-form .button { border-width: var(--field-line); }
.subscribe-loading,
.subscribe-message { display: none; }
.subscribe-message { flex-basis: 100%; margin: 4px 0 0; font-size: 0.95rem; }
.subscribe-form.loading .subscribe-label { display: none; }
.subscribe-form.loading .subscribe-loading { display: inline; }
.subscribe-form.success .subscribe-success { display: block; }
.subscribe-form.error .subscribe-error { display: block; }

/* 11. Utilities */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* PhotoSwipe tint to match the site */
.pswp { --pswp-bg: #221113; --pswp-icon-color: #e7cdd0; --pswp-icon-color-secondary: #221113; }
.pswp__custom-caption {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: min(90vw, 720px);
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #e7cdd0;
    background: rgba(34, 17, 19, 0.7);
    border-radius: var(--radius);
    text-align: center;
}
.pswp__custom-caption:empty { display: none; }

/* 12. Phones
   Trades a little polish for less scrolling and bigger tap targets. */

/* Touch screens have no hover, so a tap shouldn't leave an image zoomed. */
@media (hover: none) {
    .work-card-link:hover .work-card-media img { transform: none; }
}

@media (max-width: 860px) {
    /* The header stays at the top while you scroll, so the menu is always one tap away. */
    .site-header {
        position: sticky;
        top: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
    }
    .site-header-inner { height: 64px; }
    .site-nav { max-height: calc(100dvh - 64px); overflow-y: auto; }
    .gh-content :is(h2, h3) { scroll-margin-top: 88px; }
}

@media (max-width: 600px) {
    .section, .page-head { padding-top: 40px; }
    .section-head { flex-wrap: wrap; margin-bottom: 20px; }

    /* Tag buttons stay on one line and scroll sideways, edge to edge. */
    .tag-filter-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--gutter));
        padding: 2px var(--gutter);
        scrollbar-width: none;
    }
    .tag-filter-list::-webkit-scrollbar { display: none; }

    /* Hero: a square crop of the portrait, so the headline shows on the first screen. */
    .hero { padding-top: 16px; }
    .hero-inner { gap: 24px; }
    .hero-image { aspect-ratio: 1 / 1; object-position: 50% 20%; }
    .hero-line { font-size: 1.125rem; margin-bottom: 24px; }

    /* Field and button stack, both full width. */
    .subscribe-form { flex-direction: column; }
    .subscribe-input { flex: none; width: 100%; }
    .subscribe-form .button { width: 100%; }

    /* Work: two across instead of one, so a page of work isn't six screens tall. */
    .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
    .work-card-media { margin-bottom: 8px; }
    .work-card-title { font-size: 1rem; line-height: 1.2; }
    .work-card-tag { font-size: 0.8rem; }
    .work-card .badge { top: 8px; left: 8px; font-size: 0.65rem; }

    /* Journal cards: the image shrinks to a square thumbnail on the right. */
    .post-card-link,
    .post-card-link:has(.post-card-media) { grid-template-columns: 1fr 88px; gap: 16px; padding: 20px 0; align-items: start; }
    .post-card-link:not(:has(.post-card-media)) { grid-template-columns: 1fr; }
    .post-card-media { order: 2; aspect-ratio: 1 / 1; }
    .post-card-meta { font-size: 0.8rem; flex-wrap: wrap; gap: 8px; }
    .post-card-title { font-size: 1.25rem; }
    .post-card-excerpt {
        font-size: 0.95rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Feature images run edge to edge. */
    .article-image { margin: 28px calc(-1 * var(--gutter)); }
    .article-image img { border-radius: 0; }
    .article-image figcaption { padding: 0 var(--gutter); }
    .gh-content { margin-top: 28px; }
    .next-post { margin-top: 56px; }
    .next-post a { font-size: 1.25rem; }

    .tier { padding: 24px; }
    .tier .button { align-self: stretch; }
    .paywall .button { width: 100%; }

    .footer-title { font-size: 1.5rem; }
    .footer-membership .button { width: 100%; }
    .site-footer-inner { padding: 40px var(--gutter); }
}