/* =============================================================================
   moocat.net — main.css
   Source of truth for all site styles. Edit this file directly.
   ============================================================================= */


/* =============================================================================
   1. FONTS & IMPORTS
   ============================================================================= */

@import 'https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Gelasio:wght@400;700&family=Kranky&family=Oswald:wght@400;700&family=Courier+Prime:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap';
@import 'https://fonts.cdnfonts.com/css/w95fa';

@font-face {
    font-family: 'Nimbus Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/nimbus-mono.regular.otf) format('opentype');
}

@font-face {
    font-family: 'Nimbus Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/nimbus-mono.bold.otf) format('opentype');
}

/* Noto Serif — Latin Extended subset only (pinyin diacriticals).
   Restricted to U+0100+ so Georgia handles all basic Latin text. */
@font-face {
    font-family: noto serif latext;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/fonts/notoserif-latinext-regular.woff2) format('woff2');
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: noto serif latext;
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url(/fonts/notoserif-latinext-italic.woff2) format('woff2');
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}


/* =============================================================================
   2. GLOBAL VARIABLES
   ============================================================================= */

:root {
    --header-height: 48px;
    --nav-anchor-width: 40rem;
    --bg-main: #fcfbf8;
    --text-main: #2b2b2b;

    --font-ui: "Verdana", "Segoe UI", sans-serif;
    --font-primary: 'Crimson Pro', serif;
    --font-display: 'Crimson Pro', serif;
    --current-accent: #15041f;
    --current-tint: var(--bg-main)
}


/* =============================================================================
   3. CATEGORY IDENTITY
   Per-section CSS custom property overrides, background gradients,
   and reading font sizes. One subsection per category.
   ============================================================================= */

/* --- Essays (category-e) --- */
body.category-e {
    --current-accent: #521212;
    --current-tint: #f9f5f5;
    --current-accent-prominent: #800000;
    --font-display: 'Oswald', sans-serif;
    --font-primary: 'Crimson Pro', serif;
    background: linear-gradient(180deg, #f9f5f5 0%, var(--bg-main) 600px) fixed
}

body.category-e .asym-container,
body.category-e .asym-content {
    font-size: 1.35rem
}

body.category-e .category-list {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2
}

body.category-e .asym-content a { color: #a03030 }
body.category-e .author-bio a { color: #a03030 }

/* --- Poetry (category-p) --- */
body.category-p {
    --current-accent: #15041f;
    --current-tint: #f6f4f7;
    --current-accent-prominent: #7b51a6;
    --font-display: 'Crimson Pro', serif;
    --font-primary: 'Crimson Pro', serif;
    background: linear-gradient(180deg, #f6f4f7 0%, var(--bg-main) 600px) fixed
}

body.category-p .asym-container,
body.category-p .asym-content {
    max-width: 55rem;
    font-size: clamp(1rem, 3.5vw, 1.35rem)
}

body.category-p .asym-header {
    max-width: 35rem
}

body.category-p .content-feedback-row {
    max-width: 35rem
}

body.category-p .dinkus,
body.category-p .inter-para-divider {
    max-width: 35rem
}

body.category-p .category-list {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2
}

body.category-p .asym-content a { color: #1a6b8a }
body.category-p .author-bio a { color: #1a6b8a }

body.category-p .asym-content.submit-page {
    max-width: 35rem
}

body.category-p .asym-content p {
    margin-bottom: .5rem
}

body.category-p .asym-content p.wide-line {
    max-width: none;
    margin-right: -20rem;
    white-space: nowrap
}

/* --- Travelogs (category-t) --- */
body.category-t {
    --current-accent: #065f46;
    --current-tint: #f4f7f5;
    --current-accent-prominent: #0a8a5a;
    --font-display: 'Courier Prime', monospace;
    --font-primary: 'Noto Serif LatExt', 'Georgia', serif;
    background: linear-gradient(180deg, #f4f7f5 0%, var(--bg-main) 600px) fixed
}

body.category-t .asym-container,
body.category-t .asym-content {
    font-size: 1.2rem;
    line-height: 1.8;
}

body.category-t .category-list {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2
}

body.category-t .asym-content a { color: #1a7a5a }
body.category-t .author-bio a { color: #1a7a5a }

/* --- Comedy (category-c) --- */
body.category-c {
    --current-accent: #030c18;
    --current-tint: #f9f4f6;
    --current-accent-prominent: #1a4a9a;
    --font-display: 'Kranky', 'Roboto Condensed', sans-serif;
    --font-primary: 'Crimson Pro', serif;
    background: linear-gradient(180deg, #f9f4f6 0%, var(--bg-main) 600px) fixed
}

body.category-c .asym-container,
body.category-c .asym-content {
    font-size: 1.25rem
}

body.category-c .category-list {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4
}

body.category-c .asym-content a { color: #2255aa }
body.category-c .author-bio a { color: #2255aa }

/* --- Fiction (category-f) --- */
body.category-f {
    --current-accent: #15041f;
    --current-tint: #f4f7f5;
    --current-accent-prominent: #7b51a6;
    --font-display: 'Bitter', serif;
    --font-primary: 'Bitter', serif;
    background: linear-gradient(180deg, #f4f7f5 0%, var(--bg-main) 600px) fixed
}

body.category-f .asym-container,
body.category-f .asym-content {
    font-size: 1.15rem;
    line-height: 1.8;
}

body.category-f .category-list {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2
}

body.category-f .asym-content a { color: #1a6b8a }
body.category-f .author-bio a { color: #1a6b8a }

body.category-f h1,
body.category-f h2,
body.category-f h3,
body.category-f h4 {
    margin-bottom: 0
}

body.category-f h1 + p,
body.category-f h2 + p,
body.category-f h3 + p,
body.category-f h4 + p {
    margin-top: 0
}

/* --- Art (category-a) --- */
body.category-a {
    --current-accent: #1f1105;
    --current-tint: #f7f6f5;
    --current-accent-prominent: #b05a10;
    --font-display: 'Gelasio', serif;
    --font-primary: 'Gelasio', serif;
    background: linear-gradient(180deg, #f7f6f5 0%, var(--bg-main) 600px) fixed
}

body.category-a .category-page-heading {
    font-style: italic
}


body.category-a .asym-container,
body.category-a .asym-content {
    font-size: 1.2rem
}

body.category-a .category-list {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2
}

body.category-a .asym-content a { color: #7a4a20 }
body.category-a .author-bio a { color: #7a4a20 }

/* --- Home (category-h) --- */
body.category-h {
    --current-accent: #000;
    --font-display: 'Crimson Pro', serif;
    --font-primary: 'Crimson Pro', serif
}

body.category-h .asym-container,
body.category-h .asym-content {
    font-size: 1.35rem
}

/* --- Pages / misc (category-o) --- */
body.category-o {
    --current-accent: #0a3d3d;
    --current-accent-prominent: #0d5c5c;
    --current-tint: #f2f7f7;
    background: linear-gradient(180deg, #f2f7f7 0%, var(--bg-main) 600px) fixed
}

body.category-o .asym-container,
body.category-o .asym-content {
    font-size: 1.35rem
}

body.category-o h1 { font-size: 2.5rem }
body.category-o h2 { font-size: 2.2rem }
body.category-o h3 { font-size: 1.5rem }
body.category-o h4 { font-size: 1.15rem }


/* =============================================================================
   4. BASE RESET & TYPOGRAPHY
   ============================================================================= */

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    background-attachment: scroll;
    background-repeat: no-repeat;
    color: var(--text-main);
    font-family: var(--font-ui);
    line-height: 1.6
}

h1,
.asym-header h1,
.category-page-heading {
    color: var(--current-accent);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1
}

body.category-c .category-page-heading,
body.category-c h2,
body.category-c h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700
}

body.category-c .category-page-heading {
    font-size: 2.3rem
}

body.category-c .asym-container:has(.submit-page) h1.article-title,
body.category-c .asym-container:has(.submit-page) .other-cat-row {
    font-family: 'Roboto Condensed', sans-serif
}

h1.article-title,
h1.category-page-heading {
    margin-top: 0;
    margin-bottom: 0
}

h2,
.asym-header h2 {
    color: var(--current-accent);
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0
}

h3,
.asym-header h3 {
    color: var(--current-accent);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0
}

h4,
.asym-header h4 {
    color: var(--current-accent);
    font-family: var(--font-display);
    font-size: 1.3rem;
}

h2 + p,
h3 + p,
h4 + p {
    margin-top: 0
}

body.category-h h1,
body.category-p h1 {
    font-style: italic;
    font-weight: 400
}

/* Home page h1 size */
body.category-h h1 {
    font-size: 38px
}

blockquote {
    font-style: normal;
    margin: 0 0 0.5rem 0
}

ol ol {
    list-style-type: lower-alpha
}

footer.site-footer {
    border-top: 1px dotted #2b2b2b;
    margin-top: 1rem;
    padding: 2rem 3rem 2rem
}

.footer-panel {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.6fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.footer-col .footer-col-heading {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-main);
    margin: 0 0 .5rem
}

.footer-col a {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-main);
    text-decoration: none
}

.footer-col a:hover {
    text-decoration: underline
}

.footer-social-link {
    display: flex;
    align-items: center;
    gap: .4rem
}

.footer-social-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    vertical-align: middle
}

.footer-copyright {
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 1rem
}

.footer-copyright p {
    font-size: .8rem;
    color: #2b2b2b;
    margin: 0
}

@media (max-width: 768px) {
    .footer-panel {
        grid-template-columns: 1fr 1fr
    }
}


/* =============================================================================
   5. SPECIAL TEXT ELEMENTS
   Verse, quip lists, sidenotes, bylines, datelines, footnotes, etc.
   ============================================================================= */

/* Traditional Chinese characters — wrap in <span class="zh"> in content */
.zh {
    font-family: noto serif tc, serif
}

/* Verse block — poems and song lyrics; preserves line breaks */
.verse {
    margin: 1em 0 1em 2em;
    white-space: pre-line;
    font-family: inherit;
    line-height: 1.3
}

@media (max-width: 768px) {
    .verse {
        margin-left: 0
    }
}

.quip-list li {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--current-accent);
    text-align: left;
    margin-bottom: 1rem
}

.quip-list ul {
    margin-top: -1rem
}

.poem-indent {
    display: inline-block;
    padding-left: 80px
}

aside.sidenote {
    float: right;
    clear: right;
    margin-right: -300px;
    width: 250px;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-top: 10px solid var(--current-accent);
    border-bottom: 10px solid var(--current-accent);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    position: relative
}

@media (max-width: 900px) {
    aside.sidenote {
        float: none;
        margin-right: 0;
        width: auto
    }
}

.section-label {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: lowercase;
    color: #444;
    margin: 0 0 .4rem;
    width: 100%
}

.section-label a {
    color: inherit;
    text-decoration: none
}

.byline,
.metadata,
.post-date,
.date {
    display: inline-block;
    font-family: var(--font-ui);
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--text-main);
    letter-spacing: .05em;
    margin: 0
}

.metadata,
.post-date,
.date {
    text-align: right
}

.story-dateline {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-main)
}

.footnotes {
    margin-top: 2rem
}

.footnotes hr {
    width: 12rem;
    margin: 0 0 .75rem;
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--current-accent) 40%, transparent)
}

.footnotes ol {
    list-style: none;
    counter-reset: footnote;
    padding-left: 0;
    margin: 0
}

.footnotes li {
    counter-increment: footnote;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-main);
    margin-bottom: .5rem;
    text-indent: 1em
}

.footnotes li::before {
    content: counter(footnote);
    font-size: .75em;
    vertical-align: super;
    line-height: 1;
    margin-right: .15em;
    text-indent: 0
}

.footnotes li p {
    margin: 0;
    display: inline
}

.footnotes a {
    color: var(--current-accent)
}

.table-notes {
    margin-top: .5rem;
    margin-bottom: 1rem
}

.table-notes p {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-main);
    margin: .2rem 0
}

.table-notes sup {
    font-size: .75em;
    margin-right: .2em
}

/* Chinese exchange blocks (englishhua) */
.cn-exchange {
    margin: 1.5rem 0
}

.cn-exchange .cn-chars {
    font-size: 1.15em;
    margin: 0 0 .5rem
}

.cn-exchange .cn-row {
    display: grid;
    grid-template-columns: 9em 1fr;
    margin: .2rem 0 0;
    font-size: .9em
}

.cn-exchange .cn-label {
    display: block;
    font-family: var(--font-ui);
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: .15em;
    text-align: right;
    padding-right: .6em
}

.cn-exchange p:nth-child(2) .cn-label {
    opacity: .55
}

.cn-exchange p:nth-child(3) {
    font-family: mansalva, cursive;
    font-size: calc(.9em + .5pt)
}

.cn-exchange p:nth-child(3) .cn-label {
    opacity: 1;
    color: #000
}

.cn-exchange p:nth-child(2) {
    background: linear-gradient(to right, transparent 9em, color-mix(in srgb, var(--current-accent) 4%, transparent) 9em);
    padding: .15rem .4rem .15rem 0
}


/* =============================================================================
   6. HEADER & NAVIGATION
   ============================================================================= */

/* Reading progress bar */
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 12px;
    background: linear-gradient(to right, var(--current-accent), color-mix(in srgb, var(--current-accent) 50%, #fff));
    z-index: 1000;
    transition: width .1s linear
}

/* Sticky top bar */
#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    background: var(--bg-main);
    border-bottom: none;
    box-shadow: 0 1px rgba(0, 0, 0, .3)
}

#site-header-inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
    align-items: center
}

#nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-main);
    padding: .25rem .5rem;
    line-height: 1
}

#mobile-nav {
    display: none
}

#sticky-header-main {
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: var(--nav-anchor-width)
}

#sticky-site-nav {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem 1.5rem
}

#sticky-site-nav a {
    font-family: 'Crimson Pro', serif;
    text-decoration: none;
    color: #000;
    letter-spacing: .04em;
    text-transform: lowercase
}

#sticky-site-nav a:hover {
    color: var(--current-accent)
}

.site-title {
    font-family: courier new, Courier, monospace;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .35em;
    text-transform: lowercase
}

.site-title a {
    text-decoration: none;
    color: var(--text-main)
}

.site-title a:hover {
    color: var(--current-accent)
}

/* Large desktop header (visible before sticky header scrolls in) */
#large-site-header {
    padding: 0 0 1.25rem;
    margin-top: calc(-1 * var(--header-height) + 1.5rem);
    margin-bottom: -2rem
}

body.category-o #large-site-header {
    margin-bottom: 0
}

.large-site-title {
    font-family: courier new, Courier, monospace;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: .5em;
    text-transform: lowercase;
    margin: 0;
    line-height: 1
}

.large-site-title a {
    text-decoration: none;
    color: var(--text-main)
}

.large-site-title a:hover {
    color: var(--current-accent)
}

.large-site-rule {
    border: none;
    border-top: 1px solid #000;
    margin: .5rem 0 .75rem
}

.large-site-nav-container {
    max-width: var(--nav-anchor-width);
    position: relative;
    z-index: 1
}

.large-site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-left: 5rem;
    gap: .25rem 1.5rem
}

.large-site-nav a {
    font-family: 'Crimson Pro', serif;
    font-size: 1.15rem;
    text-decoration: none;
    color: #000;
    letter-spacing: .04em;
    text-transform: lowercase
}

.large-site-nav a:hover {
    color: var(--current-accent)
}

/* Desktop: sticky header hidden until large header scrolls out */
@media (min-width: 769px) {
    #site-header {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease
    }

    #site-header.header-visible {
        opacity: 1;
        pointer-events: auto
    }
}


/* =============================================================================
   7. SIDEBAR LAYOUT
   ============================================================================= */

.site-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
    min-height: 100vh
}

.site-grid > main {
    padding-top: 0;
    min-width: 0;
    overflow-x: clip;
    align-self: start
}

.sidebar {
    display: flex;
    flex-direction: column;
    overflow: visible !important
}

.sidebar-sticky {
    position: sticky;
    top: var(--header-height);
    background: linear-gradient(180deg, var(--current-tint) 0%, var(--bg-main) 600px) fixed;
    z-index: 1
}

.sidebar-top {
    display: flex;
    justify-content: center
}

/* Moocat badge */
.moocat-home {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.moocat-badge-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible
}

.moocat-ring {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer
}

.moocat-ascii-svg {
    display: block;
    overflow: visible
}

.moocat-ascii-text {
    font-family: 'Nimbus Mono', 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 13.7px;
    fill: var(--text-main)
}

/* Badge spin animation */
.badge-rotate {
    width: 240px;
    cursor: pointer
}

.spin-active {
    animation: badge-spin var(--spin-duration, 0.8s) linear
}

.spin-continuous {
    animation: badge-spin 0.53s linear infinite
}

@keyframes badge-spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(var(--spin-degrees, 360deg)) }
}

/* Left nav menu */
#leftmenu,
.search-container {
    font-family: var(--font-ui);
    font-size: .95rem;
    margin-top: 2rem
}

#leftmenu a {
    color: var(--text-main);
    text-decoration: none;
    display: block;
    padding: .25rem .4rem;
    margin-left: -.4rem;
    border-radius: 3px
}

#leftmenu a:hover {
    color: var(--text-main);
    background-color: color-mix(in srgb, var(--current-accent) 10%, transparent)
}

#leftmenu a.active {
    color: #fff;
    background-color: var(--current-accent);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .15)
}

/* Back to top button */
.sidebar-back-to-top {
    position: fixed;
    left: calc((100vw - min(1200px, 100vw)) / 2 + 220px - 2.5rem);
    z-index: 50;
    pointer-events: none
}

.sidebar-back-to-top.visible {
    pointer-events: auto
}

#back-to-top {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--current-accent);
    background: none;
    color: var(--current-accent);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease
}

#back-to-top:hover {
    background: var(--current-accent);
    color: #fff
}

#back-to-top-mobile {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--current-accent);
    background: var(--bg-main);
    color: var(--current-accent);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease
}

#back-to-top-mobile:hover {
    background: var(--current-accent);
    color: #fff
}

@media (max-width: 768px) {
    #back-to-top-mobile {
        display: block
    }
}

/* Subcategory accordion */
.sidebar-subcategories {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.subcategory-accordion {
    background-color: color-mix(in srgb, var(--current-accent) 5%, transparent);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color .2s ease
}

.subcategory-accordion summary {
    padding: .75rem 2.5rem .75rem 1rem;
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--current-accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.subcategory-subheading {
    font-size: .75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-main);
    line-height: 1.4
}

.subcategory-accordion summary::-webkit-details-marker {
    display: none
}

.subcategory-accordion summary::after {
    content: "▼";
    position: absolute;
    right: 1rem;
    top: .85rem;
    font-size: .7rem;
    transition: transform .2s ease
}

.subcategory-accordion[open] summary::after {
    transform: rotate(180deg)
}

.subcategory-accordion ul {
    margin: 0;
    padding: 0 1rem 1rem;
    list-style: none
}

.subcategory-accordion li {
    margin-bottom: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 12%, transparent)
}

.subcategory-accordion li:last-child {
    border-bottom: none
}

.subcategory-accordion a {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--text-main);
    text-decoration: none;
    display: block;
    padding: .35rem .5rem;
    margin-left: -.5rem;
    border-radius: 3px
}

.subcategory-accordion a:hover {
    color: var(--current-accent);
    background-color: color-mix(in srgb, var(--current-accent) 15%, transparent);
    text-decoration: none
}

/* Archive link under section heading */
.sidebar-archive-link {
    display: block;
    font-size: .75rem;
    color: var(--current-accent);
    text-decoration: none;
    margin-top: -10px;
    padding-bottom: 4px;
    letter-spacing: .03em
}

.sidebar-archive-link:hover {
    color: var(--text-main)
}

/* Donate card */
.sidebar-donate-card {
    margin-top: 1rem;
    padding: .5rem 0
}

.sidebar-donate-bowl {
    text-align: center;
    margin-bottom: .5rem
}

.donate-bowl-img {
    width: 110px;
    height: auto;
    display: block;
    margin: 0 auto
}

.sidebar-donate-tagline {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--text-main);
    margin: 0 0 .75rem;
    line-height: 1.4
}

.sidebar-donate-btn {
    display: block;
    text-align: center;
    font-family: 'Schoolbell', cursive;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .02em;
    color: #800000 !important;
    background: none;
    border: none;
    text-decoration: none;
    padding: 0;
    margin-bottom: .6rem;
    transition: color .15s ease, transform .15s ease
}

.sidebar-donate-btn:hover {
    color: #600000 !important;
    transform: translateY(-1px)
}

.sidebar-donate-policy {
    display: block;
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--text-main);
    text-align: center;
    text-decoration: underline
}

.sidebar-donate-policy:hover {
    color: #800000
}

/* Submit CTA card */
.sidebar-submit-card {
    margin-top: 1rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--current-accent) 15%, #dfdfdf);
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--current-accent) 3%, transparent)
}

.sidebar-submit-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem
}

.sidebar-submit-icon {
    width: 14px;
    height: 14px;
    color: var(--current-accent);
    flex-shrink: 0;
    stroke: var(--current-accent)
}

.sidebar-submit-at {
    width: auto;
    height: auto;
    stroke: none;
    font-family: courier new, Courier, monospace;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    border: 2px solid var(--current-accent);
    border-radius: 50%;
    padding: .1em .15em
}

.sidebar-submit-heading {
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--current-accent);
    text-transform: uppercase
}

.sidebar-submit-tagline {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--text-main);
    font-style: italic;
    margin: 0 0 .75rem;
    line-height: 1.4
}

.sidebar-submit-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--current-accent) !important;
    background: color-mix(in srgb, var(--current-accent) 12%, transparent);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 4px;
    transition: background-color .15s ease, transform .15s ease
}

.sidebar-submit-btn a {
    text-transform: none
}

.sidebar-submit-btn:hover {
    background: color-mix(in srgb, var(--current-accent) 20%, transparent);
    transform: translateY(-1px);
    font-weight: 700 !important
}


/* =============================================================================
   8. CONTENT STRUCTURE
   Asym container/content, headers, bylines, list pages, editor's note, etc.
   ============================================================================= */

.asym-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    max-width: 46rem;
    margin-bottom: 2rem;
    margin-top: 0%
}

.asym-header h1 {
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 0%;
    position: relative
}

.asym-container,
.asym-content {
    max-width: 35rem;
    margin-left: 0;
    font-family: var(--font-primary);
    font-size: 1.15rem
}

.asym-content {
    display: block;
    position: relative
}

.asym-content pre,
.asym-content code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1.5rem;
    white-space: pre-wrap;
    line-height: inherit
}

/* List page layout */
section .category-page {
    display: flex;
    flex-wrap: wrap;
    max-width: 40rem
}

.category-heading {
    max-width: 55rem;
    margin-left: 0
}

.category-list {
    color: var(--current-accent);
    font-family: var(--font-display);
    margin-bottom: 0
}

.list-card a,
.category-list a {
    text-decoration: none !important;
    color: inherit !important
}

div .category-count {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    font-weight: 500;
    color: #2b2b2b;
    margin-top: 0%;
    padding-top: 0%
}

div .list-card .excerpt .date .byline {
    text-transform: none
}

.list-description {
    margin: 0.35rem 0 0 0;
    font-size: 0.92em;
    color: #000000
}

.excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small
}

/* Issue group / row layout on list pages */
.issue-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 2.2rem 0 0 0
}

.issue-row {
    display: flex;
    flex-direction: row;
    gap: 0
}

.issue-col {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0.8rem
}

.issue-thumb {
    width: 80px;
    height: auto;
    border: 1px solid color-mix(in srgb, var(--current-accent) 25%, transparent);
    margin-bottom: 0.5rem
}

.issue-thumb-cropped {
    width: 80px;
    height: 100px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid color-mix(in srgb, var(--current-accent) 25%, transparent);
    margin-bottom: 0.6rem
}

.issue-divider {
    display: none
}

.issue-card {
    padding: 0 0 0 1.2rem
}

.issue-card-area {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 1px solid color-mix(in srgb, var(--current-accent-prominent) 30%, transparent)
}

.issue-card .list-card:first-child .category-list {
    margin-top: 0.5rem
}

@media (max-width: 950px) {
    .issue-col {
        display: none
    }
    .issue-card-area {
        border-left: none
    }
}

@media (max-width: 520px) {
    .issue-row {
        flex-direction: column
    }
    .issue-card {
        padding-left: 0
    }
}

.date-heading {
    margin: 1.6rem 0 0.5rem 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: bold;
    font-variant: small-caps;
    color: var(--current-accent);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding-bottom: 0.2rem
}

.issue-heading {
    margin: 0;
    padding: 0.3rem 0.6rem 0 1.2rem;
    font-family: Oswald;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--current-accent-prominent);
    border-top: 1px solid color-mix(in srgb, var(--current-accent-prominent) 30%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--current-accent-prominent) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent-prominent) 30%, transparent)
}

/* Poetry title adjustments */

body.category-p h1.article-title,
body.category-p h1.category-page-heading {
    font-size: 2.5rem;
    letter-spacing: .02em
}

/* Dividers */
.dinkus {
    display: flex;
    justify-content: center;
    gap: 3.2rem;
    margin: 2rem 0
}

.dinkus span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--current-accent);
    opacity: .4
}

.inter-para-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 2rem 0
}

.divider__rule {
    flex: 1;
    border: none;
    border-top: 1px solid;
    opacity: .3
}

.four-petal-lozenge {
    flex-shrink: 0;
    color: var(--current-accent)
}

.piece_title_rule {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .25);
    margin: .5rem 0 0;
    padding-bottom: 0;
    width: 100%
}

.rule-soft {
    border-top-color: #ccc;
    border-top-style: dotted;
    max-width: 55rem
}

/* Advance excerpt badge & popover */
.advance-excerpt-group {
    border: 1px solid color-mix(in srgb, var(--current-accent) 35%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--current-accent) 8%, white);
    padding: 1rem 1.25rem;
    margin-top: 2rem
}

.advance-excerpt-group .editors-note {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 25%, transparent)
}

.badge-excerpt {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .48em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--current-accent) 60%, #888);
    background: color-mix(in srgb, var(--current-accent) 7%, var(--bg-main));
    border: 1px solid color-mix(in srgb, var(--current-accent) 30%, transparent);
    border-radius: 2px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: .4em;
    white-space: nowrap
}

.asym-header h1 .badge-excerpt {
    position: absolute;
    top: 100%;
    left: 0;
    margin: .15em 0 0;
    cursor: pointer
}

.excerpt-popover {
    position: fixed;
    z-index: 200;
    background: color-mix(in srgb, var(--current-accent) 6%, var(--bg-main));
    border: 1px solid color-mix(in srgb, var(--current-accent) 35%, transparent);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .13), 0 1px 4px rgba(0, 0, 0, 7%);
    padding: .875rem 1.1rem .75rem;
    max-width: 22rem;
    width: max-content
}

.excerpt-popover[hidden] {
    display: none
}

.excerpt-popover-body {
    font-family: var(--font-primary);
    font-size: .9rem;
    font-style: normal;
    color: var(--text-main);
    margin: 0
}

.excerpt-popover-rule {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--current-accent) 20%, transparent);
    margin: .65rem 0 .5rem
}

.excerpt-popover-link {
    display: block;
    font-family: var(--font-ui);
    font-size: .75rem;
    color: color-mix(in srgb, var(--current-accent) 60%, #888);
    text-decoration: none
}

.excerpt-popover-link:hover {
    color: var(--current-accent);
    text-decoration: underline
}

/* Editor's note box */
.editors-note {
    background: color-mix(in srgb, var(--current-accent) 12%, white);
    border: 1px solid color-mix(in srgb, var(--current-accent) 35%, transparent);
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem
}

.editors-note-label {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--current-accent);
    margin: 0 0 .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 25%, transparent)
}

.editors-note-body {
    font-family: var(--font-ui);
    font-size: 0.85rem
}

.editors-note-body p {
    margin: 0
}

.editors-note-body p + p {
    margin-top: .75rem
}

.callout-critical,
.callout-note {
    font-family: var(--font-ui);
    font-size: .88rem;
    color: var(--text-main);
    line-height: 1.5;
    padding: .75rem 1rem;
    border-radius: 0 4px 4px 0;
    margin: 1rem 0
}

.callout-critical {
    background: color-mix(in srgb, #c0392b 6%, transparent);
    border-left: 5px solid #c0392b
}

.callout-note {
    background: color-mix(in srgb, #2471a3 6%, transparent);
    border-left: 4px solid #2471a3
}

.callout-critical p,
.callout-note p {
    margin: 0
}

.callout-critical p + p,
.callout-note p + p {
    margin-top: .5rem
}

.callout-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem
}


/* =============================================================================
   9. ARTICLE CONTENT, LIGHTBOX & MODALS
   ============================================================================= */

.asym-content a {
    color: #2255aa
}

.asym-content a:not(.feedback-link) {
    text-decoration: none
}

.asym-content a:hover {
    color: inherit;
    text-decoration: underline
}

/* Clearfix after floated elements */
.asym-content::after {
    content: "";
    display: table;
    clear: both
}

/* Ensure floats don't bleed into structural elements */
.asym-content h1,
.asym-content h2,
.asym-content h3,
.asym-content h4,
.bio-divider,
.author-bio {
    clear: both
}

/* Tables */
.asym-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-family: var(--font-ui);
    font-size: .95rem
}

.asym-content th,
.asym-content td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left
}

.asym-content th {
    background-color: #f2f2f2;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    border-top: 3px solid var(--current-accent)
}

.asym-content tbody tr:nth-child(even) {
    background-color: #f9f9f9
}

@media (max-width: 768px) {
    .asym-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%
    }

    .asym-content td,
    .asym-content th {
        font-size: .8rem;
        padding: 6px 8px
    }
}

/* Suppress top margin on first several article paragraphs */
body > div > main > article > div > p:nth-child(1),
body > div > main > article > div > p:nth-child(2),
body > div > main > article > div > p:nth-child(3),
body > div > main > article > div > p:nth-child(4),
body > div > main > article > div > p:nth-child(5),
body > div > main > article > div > p:nth-child(6),
body > div > main > article > div > p:nth-child(7),
body > div > main > article > div > p:nth-child(8),
body > div > main > article > div > p:nth-child(9),
body > div > main > article > div > p:nth-child(10) {
    margin-top: 0%
}

/* First bulleted list item top margin */
body > div > main > article > div > ul > li:nth-child(1) > p {
    margin-top: -1.5rem;
    padding-top: 0%
}

/* All bulleted list items vertical tightening */
body > div > main > article > div > ul > li > p {
    margin-top: -.5rem;
    padding-top: 0%
}

/* Author bio */
.author-bio {
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--text-main);
    max-width: 35rem;
    margin-top: 0%
}

.author-bio a {
    color: #2255aa;
    text-decoration: underline
}

.author-bio-photo {
    float: left;
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 1rem .5rem 0
}

.content-feedback-row {
    display: flex;
    justify-content: flex-end;
    max-width: 46rem;
    margin-top: 1rem;
    margin-bottom: 0;
    clear: both
}

.content-feedback-row a {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: #888;
    text-decoration: none
}

.content-feedback-row a:hover {
    color: var(--current-accent)
}

.bio-divider {
    display: block;
    text-align: center;
    margin-top: 1rem;
    max-width: 35rem;
    width: 100%;
    position: relative
}

.bio-divider img {
    max-width: 580px;
    height: auto
}

/* Figures */
figure {
    border: #000;
    border-width: 1px;
    border-style: solid;
    margin-top: 12pt
}

figure.lightbox-figure {
    border: #000;
    border-width: 1px;
    border-style: solid;
    margin-top: 12pt
}

figure.float-right {
    float: right;
    margin: 0 0 0 15px;
    max-width: 40%
}

figure.float-left {
    float: left;
    margin-left: 15px;
    max-width: 40%
}

figure.float-right img,
figure.float-left img {
    max-width: 100%;
    height: auto
}

figcaption h4 {
    font-family: var(--font-ui);
    font-size: .85rem;
    line-height: .85rem;
    color: var(--text-main);
    text-align: center;
    margin-top: 0;
    padding-top: 0
}

.img-figure.full-width {
    float: none;
    width: 100%;
    margin: 1em 0
}

/* Inline article imagery */
.asym-content p img {
    float: left;
    margin: .5rem 1.75rem 1.25rem 0;
    max-width: 50%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 8%);
    cursor: default;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1)
}

/* Shared layout for lightbox and plain image figures */
figure.lightbox-figure,
figure.img-figure {
    float: left;
    width: fit-content;
    max-width: 50%;
    margin: .5em 1.75rem 1.25rem 0;
    border: none
}

figure.img-figure.full-width {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1em 0
}

figure.lightbox-figure.float-right,
figure.img-figure.float-right {
    float: right;
    margin: .5em 0 1.25rem 1.75rem
}

figure.lightbox-figure a {
    display: block
}

figure.lightbox-figure img,
figure.img-figure img {
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    box-shadow: none
}

figure.lightbox-figure img {
    cursor: zoom-in
}

figure.lightbox-figure:hover img {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22)
}

figure.lightbox-figure figcaption,
figure.img-figure figcaption {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--current-accent);
    margin-top: .35rem;
    line-height: 1.4;
    width: 0;
    min-width: 100%;
    overflow-wrap: break-word;
    text-align: center
}

/* Thumbnail row */
.thumbnail-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
    clear: both
}

.thumbnail-row:last-of-type {
    margin-bottom: 2.5rem
}

.thumbnail-row a img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #888;
    display: block;
    cursor: zoom-in;
    transition: transform .15s ease
}

.thumbnail-row a:hover img {
    transform: scale(1.08)
}

/* Global lightbox overlay */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .93);
    backdrop-filter: blur(8px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem
}

.lightbox-overlay.active {
    display: flex
}

.lightbox-overlay img {
    max-height: 85vh;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 4px
}

#lightbox-caption {
    font-family: var(--font-ui);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-top: 1.25rem
}

#lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: rgba(0, 0, 0, .55);
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    transition: background .15s
}

#lightbox-close:hover {
    background: rgba(255, 255, 255, .2)
}

.lightbox-overlay.video-mode {
    background: rgba(0, 0, 0, .72)
}

.lightbox-video-wrap {
    width: min(560px, 65vw);
    aspect-ratio: 16/9;
    position: relative;
    isolation: isolate;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12)
}

.lightbox-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

/* Scooter grid — 2-column [img][caption] layout */
.scooter-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: .5rem;
    width: 100%;
    margin-bottom: 1.5rem
}

.scooter-grid figure {
    display: contents
}

.scooter-grid img {
    max-width: 120px;
    height: auto;
    border: 1px solid #888;
    display: block
}

.scooter-grid a,
.scooter-grid figure.lightbox-figure figcaption {
    border-bottom: 1px solid #dad7d7;
    padding-bottom: .4rem
}

.scooter-grid figure.lightbox-figure figcaption {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--current-accent);
    text-align: left;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: unset
}

/* Cartoon grid — 4-column [img][title][img][title] per row */
.cartoon-grid {
    display: grid;
    grid-template-columns: 60px 1fr 60px 1fr;
    column-gap: 5px;
    row-gap: .6rem;
    width: 100%;
    margin-bottom: 1.5rem
}

.cartoon-grid figure {
    display: contents
}

.cartoon-grid img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border: 1px solid #888;
    display: block
}

.cartoon-grid figcaption {
    font-weight: 700;
    font-family: var(--font-ui) !important;
    font-size: .9rem !important;
    line-height: 1.3;
    display: flex;
    align-items: center;
    padding: 0 5px;
    margin: 0 !important
}

/* Cartoon exhibition layout — ai-transformations piece */
.cartoon-intro {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 20%, transparent)
}

.cartoon-intro p {
    color: var(--text-muted);
    font-style: italic;
    font-size: 1.1rem
}

.cartoon-section-heading {
    text-align: center;
    padding: 1.25rem 0 1rem;
    margin: 1.5rem 0 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--current-accent) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 15%, transparent);
    clear: both
}

.cartoon-intro + .cartoon-section-heading {
    border-top: none;
    padding-top: 0;
    margin-top: 0
}

.cartoon-section-heading h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text-main);
    margin: 0 0 .5rem;
    letter-spacing: .05em
}

.cartoon-section-heading .accent-bar {
    width: 2.5rem;
    height: 3px;
    background: var(--current-accent);
    margin: 0 auto;
    border-radius: 2px
}

.cartoon-item {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 10%, transparent)
}

.cartoon-item::after {
    content: "";
    display: table;
    clear: both
}

.cartoon-item:last-child,
.cartoon-item:has(+ .cartoon-section-heading) {
    border-bottom: none
}

.cartoon-image-pair {
    float: right;
    width: 55%;
    margin: 0 0 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem
}

.cartoon-item-text h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-main);
    margin: 0 0 .5rem;
    padding-top: .25rem;
    clear: none
}

.cartoon-item-text .accent-bar {
    width: 2rem;
    height: 3px;
    background: var(--current-accent);
    border-radius: 2px;
    margin-bottom: 1rem
}

.cartoon-item-text p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1rem
}

.cartoon-item-text blockquote {
    border-left: 2px solid var(--current-accent);
    padding-left: .75rem;
    color: var(--text-muted);
    font-style: italic;
    font-size: .9rem;
    margin: .75rem 0
}

.art-card {
    cursor: zoom-in
}

.art-card-label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .4rem
}

.art-card-label.ai {
    color: var(--current-accent)
}

.art-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--current-accent) 20%, transparent);
    background: #1a1a1a;
    transition: transform .3s ease, box-shadow .3s ease
}

.art-card:hover img {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .3)
}

/* Portrait grid — flex gallery */
.portrait-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: calc(4 * 80px + 3 * 4px);
    margin-bottom: 1.5rem
}

.portrait-grid figure {
    flex: none;
    margin: 0
}

.portrait-grid figure img {
    width: 80px;
    height: 80px;
    object-fit: cover
}

.portrait-grid figcaption {
    display: none
}

/* Photo essay grid — 5 cols desktop */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 1.5rem
}

.photo-grid figure {
    display: contents
}

.photo-grid a {
    display: block
}

.photo-grid img {
    width: 100%;
    height: auto;
    display: block
}

/* 6-column variant for square-thumbnail grids */
.photo-grid-6 {
    grid-template-columns: repeat(6, 1fr)
}

@media (max-width: 768px) {
    .photo-grid,
    .photo-grid-6 {
        grid-template-columns: 1fr
    }

    .cartoon-image-pair {
        float: none;
        width: 100%;
        margin: 1.5rem 0 0 0;
        grid-template-columns: 1fr
    }
}

/* Art list cards with thumbnail */
.list-card-art {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem
}

.art-thumb {
    flex: 0 0 100px
}

.art-thumb img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block;
    border: 1px solid color-mix(in srgb, var(--current-accent) 20%, transparent)
}

.art-card-body {
    flex: 1;
    min-width: 0
}

.art-card-body .category-list {
    margin-top: 0
}

/* Homepage old/new comparison grid */
.moo-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--current-accent) 30%, transparent);
    margin-bottom: 1em
}

.moo-compare-header {
    font-weight: 700;
    text-align: center;
    padding: .3rem .5rem;
    background: color-mix(in srgb, var(--current-accent) 10%, transparent);
    border-bottom: 2px solid var(--current-accent);
    font-family: var(--font-ui);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase
}

.moo-compare-header:first-child {
    border-right: 1px solid var(--current-accent)
}

.moo-compare-divider {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    padding: .5rem 0 .25rem
}

.moo-compare-divider::before,
.moo-compare-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor
}

.moo-compare-divider span {
    padding: 0 .6rem;
    white-space: nowrap
}

.moo-compare img {
    width: 100%;
    display: block
}

/* Travelog map — ghost column, desktop only */
.travelog-map {
    position: absolute;
    top: 0;
    left: calc(35rem + 1.5rem);
    z-index: 1;
    width: 300px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    overflow: hidden
}

#travelog-map-canvas {
    width: 100%;
    height: 265px
}

.map-pin {
    background: none;
    border: none;
    cursor: default !important
}

.travelog-map .leaflet-control-zoom a {
    text-decoration: none
}

.map-label {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    color: #222;
    white-space: nowrap
}

.map-label::before {
    display: none
}

.map-pin div {
    height: 40px;
    width: 22px;
    background-image: url(/img/map_pointer.png)
}

@media (max-width: 900px) {
    .travelog-map {
        display: none
    }
}

/* Prose-essay poems (page-lacing): narrow content, restore paragraph spacing */
body.page-lacing .asym-content {
    max-width: 38rem
}

body.page-lacing .asym-content p {
    margin-bottom: 1em
}

.prose-section {
    max-width: 38rem
}

.prose-section p {
    margin-bottom: 1em
}

body.page-lacing .haiku-pair {
    display: flex;
    gap: 2em;
    margin: .5em 0;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding: .75em 0
}

body.page-lacing .haiku-left,
body.page-lacing .haiku-right {
    flex: 1
}

body.page-lacing .haiku-left .verse,
body.page-lacing .haiku-right .verse {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: .25em;
    font-family: 'Crimson Pro', serif;
    font-size: 1.1rem;
    letter-spacing: .02em
}

body.page-lacing .haiku-attr {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: .02em;
    text-align: right
}

body.page-lacing .verse.whitman {
    font-family: 'Crimson Pro', serif;
    font-size: 1.1rem;
    letter-spacing: .02em;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin: 0;
    padding: 0 3em 1em
}


/* =============================================================================
   10. FEEDBACK DRAWER
   ============================================================================= */

.feedback-link {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--current-accent) !important;
    background: color-mix(in srgb, var(--current-accent) 12%, transparent);
    text-decoration: none;
    padding: .45rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease
}

.feedback-link:hover {
    background: color-mix(in srgb, var(--current-accent) 22%, transparent);
    transform: translateY(-1px)
}

.letter-trigger-wrapper.feedback-link:hover {
    transform: translateY(-1px)
}

.letter-trigger-wrapper {
    position: static;
    transform: none;
    width: auto;
    text-align: left
}

/* Older initial hidden state — superseded by the block below but kept for JS compat */
#letter-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 25rem;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, .2);
    transition: right .4s ease;
    z-index: 9999;
    padding: 2rem
}

#letter-drawer.active {
    right: 0
}

body.drawer-open .asym-container {
    opacity: .7
}

/* Current drawer styles (override the block above) */
#letter-drawer {
    position: fixed;
    right: -450px;
    top: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--bg-main);
    box-shadow: -4px 0 15px rgba(0, 0, 0, .15);
    transition: right .4s cubic-bezier(.16, 1, .3, 1);
    z-index: 9999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 4rem
}

#letter-drawer.open {
    right: 0
}

.drawer-header {
    padding: 1.5rem 2rem;
    background-color: color-mix(in srgb, var(--current-accent) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 15%, #eee);
    border-top: 1px solid color-mix(in srgb, var(--current-accent) 15%, #eee)
}

#drawer-title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.35rem;
    color: var(--current-accent);
    font-weight: 700;
    line-height: 1.2
}

#close-drawer-icon {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, transform .15s ease
}

#close-drawer-icon:hover {
    color: var(--current-accent);
    transform: scale(1.05)
}

.drawer-form {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column
}

.drawer-context {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-family: var(--font-primary);
    font-size: .95rem;
    color: var(--text-main);
    line-height: 1.4;
    padding: .75rem;
    background: color-mix(in srgb, var(--current-accent) 4%, transparent);
    border-left: 3px solid var(--current-accent);
    border-radius: 0 4px 4px 0
}

.drawer-form .form-group {
    margin-bottom: 1.5rem
}

.drawer-form .form-group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem
}

.drawer-form .form-group--checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: .18em;
    accent-color: var(--current-accent)
}

.drawer-form .form-group--checkbox .checkbox-label {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-main);
    cursor: pointer;
    line-height: 1.45
}

.drawer-form label {
    display: block;
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: .6rem
}

.drawer-form input,
.drawer-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-size: 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--current-accent) 15%, #dfdfdf);
    border-radius: 4px;
    background-color: #fdfdfd;
    color: var(--text-main);
    transition: all .2s ease
}

.drawer-form input:focus,
.drawer-form textarea:focus {
    outline: none;
    border-color: var(--current-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--current-accent) 15%, transparent)
}

.drawer-form input::placeholder,
.drawer-form textarea::placeholder {
    color: #bbb;
    font-style: italic
}

.drawer-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1rem
}

.drawer-footnote {
    margin: .75rem 0 0;
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--text-main)
}

.drawer-btn {
    flex: 1;
    padding: .9rem;
    font-family: var(--font-ui);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s ease;
    text-align: center
}

.drawer-btn.primary {
    background-color: var(--current-accent);
    color: #fff;
    border: 1px solid var(--current-accent)
}

.drawer-btn.primary:hover {
    background-color: color-mix(in srgb, var(--current-accent) 85%, black);
    transform: translateY(-1px)
}

.drawer-btn.secondary {
    background-color: initial;
    color: var(--text-main);
    border: 1px solid #ccc
}

.drawer-btn.secondary:hover {
    border-color: var(--text-main);
    color: var(--text-main)
}


/* =============================================================================
   11. SPECIAL COMPONENTS
   Cassette player, Win95 dialog, issue slider, legacy content, etc.
   ============================================================================= */

/* Culture Report interactive cassette player */
.cr-player-wrap {
    margin: 1.5rem 0 1rem
}

.cr-yt-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 30em;
    margin: 0 auto .75rem
}

.cr-yt-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.cr-sketch-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    margin: 0 0 1.5rem
}

.cr-side-label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-main);
    margin: 0 0 .4rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--current-accent) 20%, transparent)
}

.cr-sketches {
    list-style: none;
    margin: 0;
    padding: 0
}

.sketch-item {
    display: flex;
    align-items: center;
    gap: .35em;
    margin: 0;
    padding: .1rem 0
}

.cr-cassette-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
    color: var(--current-accent);
    opacity: .4;
    transition: opacity .15s
}

.cr-cassette-btn:hover {
    opacity: .7
}

.sketch-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: .2rem .25rem;
    cursor: pointer;
    text-align: left;
    border-radius: 3px;
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: .82rem;
    line-height: 1.3;
    transition: background .15s
}

.sketch-link:hover {
    background: color-mix(in srgb, var(--current-accent) 8%, transparent)
}

span.sketch-link {
    cursor: default
}

span.sketch-link:hover {
    background: none
}

.sketch-item.active .sketch-link {
    color: var(--current-accent)
}

.sketch-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: roboto, sans-serif;
    font-size: 12px
}

.sketch-time {
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--text-main);
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: .4em
}

.sketch-item.active .sketch-time {
    color: var(--current-accent)
}

.cr-audio {
    display: none
}

.cr-cassette {
    color: currentColor
}

.cr-reel {
    transform-box: fill-box;
    transform-origin: center
}

@keyframes cr-reel-spin {
    to { transform: rotate(360deg) }
}

.cr-cassette--playing .cr-reel {
    animation: cr-reel-spin 1.2s linear infinite
}

.cr-cassette-btn.playing {
    opacity: 1
}

@media (max-width: 500px) {
    .cr-sketch-list {
        grid-template-columns: 1fr
    }
}

/* Win95 GDPR/cookie dialog */
#sdgdpr_modal_wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(-300px - 1.5rem);
    z-index: 1000;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 2rem;
    padding-left: 2rem
}

.win95-window {
    font-family: Tahoma, sans-serif;
    background-color: silver;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2v//PwMTAwMDBiAsDAAAHAcEAg7188UAAAAASUVORK5CYII=);
    width: 625px;
    height: 250px;
    max-width: 95%;
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 12px 12px rgba(0, 0, 0, .5);
    padding: 2px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box
}

.win95-title-bar {
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff;
    padding: 3px 4px 3px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0
}

.win95-title-left {
    display: flex;
    align-items: center
}

.win95-title {
    font-family: w95fa, Tahoma, sans-serif !important;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    text-shadow: 1px 0 0 #fff;
    letter-spacing: .5px;
    -webkit-font-smoothing: none
}

.win95-btn-close {
    background: silver;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 18px;
    height: 16px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    padding: 0;
    cursor: pointer;
    font-family: Tahoma, sans-serif
}

.win95-content {
    padding: 0 40px 20px;
    font-family: w95fa, Tahoma, sans-serif;
    color: #000;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: none
}

.win95-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: auto 0
}

.win95-warning-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin-top: 0
}

.win95-text-block {
    display: flex;
    flex-direction: column
}

.win95-main-text {
    font-size: 1.1rem;
    margin: 0 0 .75rem;
    line-height: 1.2;
    text-shadow: 1px 0 0 #000
}

.win95-sub-text p,
.win95-sub-text li {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2
}

.win95-sub-text ul {
    list-style-type: disc;
    margin: 3px 0 0 25px;
    padding: 0
}

.win95-footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding: 0
}

.win95-btn-action {
    background: silver;
    font-family: w95fa, Tahoma, sans-serif;
    font-size: 1.1rem;
    min-width: 130px;
    padding: 5px 15px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    box-shadow: inset 1px 1px #dfdfdf;
    cursor: pointer;
    -webkit-font-smoothing: none;
    position: relative
}

.win95-btn-action:hover {
    background-color: #d0d0d0
}

.win95-btn-action:hover::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px dotted #000;
    pointer-events: none
}

.win95-btn-action:active {
    border: 1px solid gray;
    box-shadow: inset 1px 1px 1px #000;
    padding: 6px 14px 4px 16px;
    background-color: silver
}

@media (max-width: 900px) {
    #sdgdpr_modal_wrapper {
        right: 0;
        padding-left: 0;
        justify-content: center
    }
}

/* Issues index page */
.issues-index-page {
    max-width: 100%;
    min-width: 0;
    margin-left: 0
}

.issues-intro {
    max-width: 46rem;
    margin-bottom: 2.5rem;
    font-family: var(--font-primary);
    font-size: 1.15rem
}

.issues-intro a {
    color: var(--current-accent);
    text-decoration: none
}

.issues-intro a:hover {
    color: color-mix(in srgb, var(--current-accent) 70%, #000)
}

.issues-intro p {
    margin-bottom: 1.25rem
}

/* Issue slider */
.issue-slider-wrap {
    max-width: 100%;
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem;
    overflow-x: clip;
    box-sizing: border-box
}

.issue-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .5rem .25rem;
    -webkit-overflow-scrolling: touch;
    min-width: 0
}

.issue-slider::-webkit-scrollbar {
    height: 6px
}

.issue-slider::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px
}

.issue-slider::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px
}

.issue-slide {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 150px;
    text-decoration: none;
    text-align: center;
    opacity: .75;
    transform: scale(.9);
    transform-origin: center center;
    transition: transform .25s cubic-bezier(.25, .46, .45, .94), opacity .25s ease
}

.issue-slide:hover {
    opacity: 1;
    transform: scale(1.08);
    z-index: 1
}

.issue-slide img {
    display: block;
    width: 150px;
    height: 200px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: box-shadow .25s ease
}

.issue-slide:hover img {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3)
}

.issue-slide--spacer {
    pointer-events: none;
    visibility: hidden
}

.issue-slide span {
    display: block;
    margin-top: .4rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    color: #555;
    line-height: 1.3
}

/* Legacy issue intro pages */
.legacy-content {
    --lc-title-font: Verdana, Helvetica, Geneva, Arial, sans-serif;
    --lc-title-size: 14pt;
    --lc-title-weight: normal;
    --lc-td-border: transparent;
    --lc-td-border-size: 1px;
    --lc-text: #cccccc;
    --lc-link: #F57382;
    --lc-link-visited: #C57982;
    --lc-td-odd: #cccccc;
    --lc-td-even: #f7f7f7;
    --lc-td-text: maroon;
    --lc-td-link: maroon;
    --lc-td-link-visited: #6b0000;
    padding: 1.25rem;
    font-family: Arial, Helvetica, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    color: var(--lc-text);
    background-repeat: repeat
}

.legacy-content p {
    color: var(--lc-text);
    font-family: inherit
}

.legacy-content a {
    color: var(--lc-link);
    text-decoration: none
}

.legacy-content a:visited {
    color: var(--lc-link-visited)
}

.legacy-content a:hover {
    text-decoration: underline
}

.legacy-content em {
    font-style: italic;
    color: var(--lc-text)
}

.issue-photos {
    float: left;
    margin: 0 1rem .75rem 0
}

.issue-photos + p {
    margin-top: 0
}

.issue-photos-row {
    display: flex;
    gap: .25rem
}

.issue-photos img {
    display: block
}

.issue-photos-caption {
    text-align: center;
    font-size: 9pt;
    font-weight: bold;
    color: var(--lc-text);
    margin: .25rem 0 0
}

.legacy-content::after {
    content: "";
    display: table;
    clear: both
}

.legacy-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border: var(--lc-td-border-size) solid var(--lc-td-border)
}

.legacy-content thead {
    display: none
}

.legacy-content tbody td {
    font-size: 8pt;
    font-family: Arial, Helvetica, Geneva, Verdana, sans-serif;
    padding: 3px 4px;
    vertical-align: top;
    color: var(--lc-td-text);
    border: var(--lc-td-border-size) solid var(--lc-td-border)
}

.legacy-content tbody tr:nth-child(odd) td {
    background-color: var(--lc-td-odd)
}

.legacy-content tbody tr:nth-child(even) td {
    background-color: var(--lc-td-even)
}

.legacy-content tbody td strong {
    color: inherit
}

.legacy-content tbody td em {
    color: inherit;
    font-style: italic
}

.legacy-content tbody td a {
    color: var(--lc-td-link)
}

.legacy-content tbody td a:visited {
    color: var(--lc-td-link-visited)
}

.archive-notice {
    display: flex;
    align-items: stretch;
    border: 1px solid #bbb;
    overflow: hidden;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8.5pt;
    margin: 2rem 0 1rem
}

.archive-notice-label {
    background: #333333;
    color: #F57382;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .07em;
    padding: .4rem .75rem;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.archive-notice-text {
    padding: .4rem .75rem;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    flex: 1;
    font-size: .9rem;
    white-space: nowrap
}

.legacy-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .75rem
}

.legacy-content .legacy-header .legacy-title {
    margin-bottom: 0
}

.legacy-byline {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: var(--lc-text);
    margin: 0
}

.legacy-content .delinked {
    color: var(--lc-link)
}

.legacy-content td .delinked {
    color: var(--lc-td-link)
}

.legacy-content table caption {
    color: var(--lc-text);
    font-family: Verdana, Arial, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    caption-side: top
}

.legacy-content .contributor {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 8pt
}

.legacy-content .contributed {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt
}

.legacy-content th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    padding: 3px 4px;
    color: inherit;
    background-color: transparent;
    text-transform: none
}

.legacy-content .cathead {
    font-family: Courier, Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bolder;
    border-bottom: 1px solid var(--lc-text);
    margin: 1.5rem 0 .5rem;
    display: block
}

.legacy-content p.list {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: .9em;
    margin-bottom: .5rem
}

.legacy-content .list_title {
    font-weight: bold
}


/* =============================================================================
   12. FORM ELEMENTS
   Submission form and related inputs.
   ============================================================================= */

.submit-intro {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 2rem
}

/* Submit-all section cards */
body.page-submit-all .asym-container,
body.page-submit-all .asym-content {
    max-width: 60rem
}

.submit-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 1.75rem
}

.submit-cards-row2 {
    grid-template-columns: repeat(2, 1fr);
    width: calc(66.666% + .467rem);
    margin-left: auto;
    margin-right: auto
}

.submit-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #999;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease
}

.submit-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    transform: translateY(-3px)
}

.submit-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.4rem 1rem
}

.submit-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%
}

.submit-card-icon svg {
    width: 1.4rem;
    height: 1.4rem
}

.submit-card h2.submit-card-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--text-main);
    margin: 0;
    line-height: 1.1
}

.submit-card-body {
    padding: 0 1.4rem 1.25rem;
    flex: 1
}

.submit-card-desc {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.6
}

.submit-card-footer {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.4rem 1.25rem;
    border-top: 1px solid #eee;
    min-height: 4.5rem
}

.submit-card-stat {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--text-main);
    margin: 0 0 .5rem
}

.submit-card a.submit-card-link {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-style: italic;
    color: #0d5c5c;
    text-decoration: none;
    margin-top: auto
}

.submit-card a.submit-card-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px
}

.submit-cards-action {
    margin-top: 2.25rem;
    text-align: center
}

.submit-page .submit-cards-action a.submit-button {
    border-radius: 24px;
    padding-left: 2.25rem;
    padding-right: 2.25rem
}

@media (max-width: 760px) {
    .submit-cards,
    .submit-cards-row2 {
        grid-template-columns: repeat(2, 1fr);
        width: auto;
        margin-left: 0;
        margin-right: 0
    }
}

@media (max-width: 480px) {
    .submit-cards,
    .submit-cards-row2 {
        grid-template-columns: 1fr
    }
}

.submit-page .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem
}

.submit-page .form-group label:not(.radio-label) {
    font-family: var(--font-ui);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-main);
    margin-bottom: .35rem
}

.submit-page .req {
    color: #cc0000;
    font-style: normal
}

.submit-page .form-group .note {
    font-size: .78rem;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    color: var(--text-main)
}

.submit-page .form-group input[type=text],
.submit-page .form-group input[type=email],
.submit-page .form-group input[type=url],
.submit-page .form-group select,
.submit-page .form-group textarea {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--text-main);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: .5rem .65rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease
}

.submit-page .form-group input:focus,
.submit-page .form-group select:focus,
.submit-page .form-group textarea:focus {
    outline: none;
    border-color: var(--current-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--current-accent) 15%, transparent)
}

.submit-page .form-group.form-group--check {
    flex-direction: row;
    align-items: flex-start;
    gap: .5rem
}

.submit-page .form-group.form-group--check label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    color: var(--text-main);
    margin-bottom: 0
}

.submit-page .form-group.form-group--check input[type=checkbox] {
    width: auto;
    margin-top: .15rem;
    flex-shrink: 0;
    accent-color: var(--current-accent)
}

.submit-page .submission-type-group {
    border: none;
    padding: 0;
    margin: 0
}

.submit-page .submission-type-group legend {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .5rem
}

.submit-page .radio-label {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .9rem;
    color: var(--text-main);
    margin-bottom: .4rem;
    cursor: pointer;
    position: relative
}

.submit-page .radio-term {
    position: relative;
    cursor: default
}

.submit-page .radio-term[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + .25rem);
    bottom: calc(100% - 1em);
    background: #fff;
    color: var(--text-main);
    border: 1px solid #ccc;
    font-size: .78rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    padding: .2rem .45rem;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity .1s ease
}

.submit-page .radio-term[data-tooltip]:hover::after {
    opacity: 1
}

.submit-page .radio-label input[type=radio] {
    width: auto;
    flex-shrink: 0;
    accent-color: var(--current-accent)
}

.form-submit-row {
    margin-top: 1.5rem
}

.word-count-display {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    margin-top: 0.3rem
}

.req-note {
    font-family: var(--font-ui);
    font-size: .85rem;
    margin: 0 0 .75rem
}

.submit-page .submit-button,
.submit-page a.submit-button,
a.submit-button {
    font-family: var(--font-ui);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--current-accent);
    color: #fff !important;
    text-decoration: none !important;
    border: none;
    display: inline-block;
    padding: .65rem 2rem;
    cursor: pointer;
    border-radius: 2px;
    transition: opacity .15s ease
}

.submit-page .submit-button:hover,
a.submit-button:hover {
    opacity: .85;
    text-decoration: none !important
}

.submit-page .submit-button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.submit-success {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--current-accent);
    padding: 2rem 0
}

.other-cat-row {
    text-align: center;
    font-family: var(--font-display);
    letter-spacing: .04em;
    color: var(--text-main);
    margin-bottom: 2rem
}


/* =============================================================================
   13. RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 768px) {

    /* Grid collapses to single column */
    .site-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: .75rem
    }

    /* Sidebar hidden on mobile */
    .sidebar {
        display: none
    }

    /* Header inner switches from grid to flex */
    #site-header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem
    }

    .site-title {
        grid-column: unset
    }

    #sticky-header-main {
        grid-column: unset;
        flex: 1;
        min-width: 0
    }

    /* Show hamburger button, hide sticky nav */
    #nav-toggle {
        display: block
    }

    #sticky-site-nav {
        display: none
    }

    /* Mobile nav dropdown */
    #mobile-nav {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: var(--header-height);
        z-index: 99;
        background: var(--bg-main);
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease, padding .25s ease;
        padding: 0 1.5rem
    }

    #mobile-nav.open {
        max-height: 320px;
        padding: .5rem 1.5rem 1rem
    }

    #mobile-nav a {
        font-family: var(--font-ui);
        font-size: .95rem;
        text-decoration: none;
        color: var(--text-main);
        padding: .5rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 5%);
        display: block
    }

    #mobile-nav a:last-child {
        border-bottom: none
    }

    #mobile-nav a.active {
        color: var(--current-accent);
        font-weight: 700
    }

    /* Letter/feedback drawer fills most of screen width */
    #letter-drawer {
        width: 90vw
    }

    /* Large desktop header hidden on mobile */
    #large-site-header {
        display: none
    }

    /* Inline images stack on mobile */
    .asym-content p img {
        float: none;
        display: block;
        margin: 1.5rem auto;
        max-width: 100%
    }

    /* Archive notice: allow text to wrap on mobile */
    .archive-notice {
        flex-wrap: wrap
    }

    .archive-notice-label,
    .archive-notice-text {
        white-space: normal
    }

    /* Feedback button: left-align and add clearance on mobile */
    .content-feedback-row {
        justify-content: flex-start;
        margin-top: 1.5rem
    }

    /* Bio divider: hide ornate graphic, substitute simple rule */
    .bio-divider img {
        display: none
    }

    .bio-divider::after {
        content: '';
        display: block;
        margin: 1rem auto 0;
        width: 60%;
        border-top: 1px solid currentColor;
        opacity: 0.3
    }
}


/* =============================================================================
   14. UTILITY & ACCESSIBILITY
   ============================================================================= */

/* Responsive video wrapper */
.video-container {
    position: relative;
    max-width: 30em;
    margin: 2rem auto;
    aspect-ratio: 16/9;
    background: #000
}

.video-container video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    border: 3px solid rgba(255, 255, 255, .85);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    z-index: 2
}

.video-play-btn:hover {
    background: rgba(0, 0, 0, .75)
}