/*
Theme Name: DarkerSpace
Theme URI: https://darkerspace.com
Author: IOMartinC
Description: World Mythology. World Stories. World Sci-Fi. The writer's space for IOMartinC — research, fiction, and the discovery of the world's story structures.
Version: 2.7.0
Text Domain: darkerspace
*/

/* ─────────────────────────────────────────────
   VARIABLES
───────────────────────────────────────────── */
:root {
    --ds-bg:          #0A0814;
    --ds-bg-mid:      #0F0D1C;
    --ds-bg-surface:  #13112A;
    --ds-bg-hover:    #17152F;
    --ds-teal:        #4ECDC4;
    --ds-amber:       #C8923A;
    --ds-violet:      #9D8FE8;
    --ds-teal-dim:    rgba(78, 205, 196, 0.12);
    --ds-amber-dim:   rgba(200, 146, 58, 0.12);
    --ds-violet-dim:  rgba(157, 143, 232, 0.12);
    --ds-border:      rgba(78, 205, 196, 0.1);
    --ds-border-mid:  rgba(78, 205, 196, 0.22);
    --ds-text:        #D4D0E8;
    --ds-text-bright: #EDEAF8;
    --ds-text-muted:  #7A7494;
    --ds-text-dim:    #3A3550;
    --font-serif:     'Playfair Display', Georgia, serif;
    --font-body:      'Merriweather', Georgia, serif;
    --font-ui:        'DM Mono', 'Courier New', monospace;
    --max-prose:      780px;
    --max-wide:       1200px;
    --radius:         4px;
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

::selection { background: var(--ds-teal); color: var(--ds-bg); }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--ds-teal);
    outline-offset: 2px;
}

body {
    background-color: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ds-teal); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--ds-text-bright); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--ds-text-bright);
    font-weight: 400;
    line-height: 1.2;
}

/* ─────────────────────────────────────────────
   LAYOUT UTILITIES
───────────────────────────────────────────── */
.ds-container { max-width: var(--max-wide); margin: 0 auto; padding: 0 32px; }
.ds-container--narrow { max-width: var(--max-prose); margin: 0 auto; padding: 0 32px; }

.ds-eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-teal);
    margin-bottom: 0.6rem;
}
.ds-eyebrow--amber { color: var(--ds-amber); }
.ds-eyebrow--violet { color: var(--ds-violet); }

/* ─────────────────────────────────────────────
   SITE HEADER
───────────────────────────────────────────── */
.ds-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 8, 20, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ds-border);
    padding: 0;
}

.ds-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.ds-logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
}
.ds-logo .darker { color: var(--ds-teal); }
.ds-logo .space  { color: var(--ds-amber); }

.ds-primary-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.ds-primary-nav a {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: color 0.2s, background 0.2s;
}
.ds-primary-nav a:hover {
    color: var(--ds-text-bright);
    background: var(--ds-teal-dim);
}
.ds-primary-nav a.current-menu-item {
    color: var(--ds-teal);
}

.ds-nav-divider {
    width: 1px;
    height: 20px;
    background: var(--ds-border-mid);
    margin: 0 8px;
    flex-shrink: 0;
}

.ds-nav-cta {
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    color: var(--ds-amber) !important;
    border: 1px solid rgba(200, 146, 58, 0.35) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius) !important;
    transition: background 0.2s, color 0.2s !important;
}
.ds-nav-cta:hover {
    background: var(--ds-amber-dim) !important;
    color: var(--ds-text-bright) !important;
}

/* Mobile nav toggle */
.ds-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.ds-nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ds-text-muted);
    margin: 5px 0;
    transition: 0.3s;
}

/* ─────────────────────────────────────────────
   HERO — HOMEPAGE ONLY
───────────────────────────────────────────── */
.ds-hero {
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ds-border);
}

.ds-hero-logo {
    margin: 0 auto 32px;
    max-width: 860px;
}

.ds-hero-wordmark {
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}
.ds-hero-wordmark .darker { color: var(--ds-teal); }
.ds-hero-wordmark .space  { color: var(--ds-amber); }

.ds-hero-pillars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.ds-hero-pillars span {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.ds-hero-pillars .teal { color: rgba(78, 205, 196, 0.85); }
.ds-hero-pillars .amber { color: rgba(200, 146, 58, 0.85); }
.ds-hero-pillars .violet { color: rgba(157, 143, 232, 0.85); }
.ds-hero-pillars .sep { color: rgba(200, 146, 58, 0.35); font-size: 0.5rem; }

.ds-hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 700px;
}
.ds-hero-divider .line-left  { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(78, 205, 196, 0.3)); }
.ds-hero-divider .line-right { flex: 1; height: 1px; background: linear-gradient(to left, transparent, rgba(200, 146, 58, 0.3)); }
.ds-hero-divider .tagline {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.ds-hero-byline {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 6px;
}

.ds-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.ds-btn {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--radius);
    transition: 0.2s;
    text-decoration: none;
}
.ds-btn--primary {
    background: var(--ds-teal);
    color: var(--ds-bg);
    font-weight: 600;
}
.ds-btn--primary:hover { background: #6ee6de; color: var(--ds-bg); }

.ds-btn--secondary {
    border: 1px solid rgba(200, 146, 58, 0.45);
    color: var(--ds-amber);
}
.ds-btn--secondary:hover { background: var(--ds-amber-dim); color: var(--ds-text-bright); }

/* ─────────────────────────────────────────────
   SECTION HEADERS
───────────────────────────────────────────── */
.ds-section { padding: 80px 0; }
.ds-section + .ds-section { border-top: 1px solid var(--ds-border); }

.ds-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ds-border);
}
.ds-section-header h2 { font-size: 2.2rem; }
.ds-section-header .ds-see-all {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    flex-shrink: 0;
    margin-left: 24px;
}
.ds-section-header .ds-see-all:hover { color: var(--ds-teal); }

/* ─────────────────────────────────────────────
   POST CARDS
───────────────────────────────────────────── */
.ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.ds-card {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius);
    padding: 36px;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
}
.ds-card:hover {
    border-color: var(--ds-border-mid);
    background: var(--ds-bg-hover);
}

.ds-card__cat {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}
.ds-card__cat--mythology  { color: var(--ds-teal); }
.ds-card__cat--origins   { color: var(--ds-violet); }
.ds-card__cat--scifi      { color: var(--ds-amber); }
.ds-card__cat--architecture { color: rgba(200, 146, 58, 0.7); }

.ds-card__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--ds-text-bright);
    margin-bottom: 14px;
    line-height: 1.3;
}
.ds-card__title a { color: inherit; text-decoration: none; }
.ds-card__title a:hover { color: var(--ds-teal); }

.ds-card__excerpt {
    color: var(--ds-text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 20px;
}

.ds-card__meta {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--ds-text-dim);
    text-transform: uppercase;
    border-top: 1px solid var(--ds-border);
    padding-top: 16px;
    margin-top: auto;
}

/* Featured post (full-width lead) */
.ds-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.ds-card--featured .ds-card__content { padding: 48px; }
.ds-card--featured .ds-card__title { font-size: 2rem; }

/* ─────────────────────────────────────────────
   ARCHITECTURE STRIP
───────────────────────────────────────────── */
.ds-arch-strip {
    padding: 60px 0;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}

.ds-arch-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    margin-top: 32px;
}

.ds-arch-item {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    padding: 20px 12px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    border-radius: var(--radius);
    transition: 0.2s;
    cursor: default;
}
.ds-arch-item:hover {
    background: var(--ds-teal-dim);
    border-color: var(--ds-border-mid);
    color: var(--ds-teal);
}
.ds-arch-item strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ds-text-bright);
    font-weight: 400;
    margin-bottom: 6px;
    letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   ACADEMY SECTION
───────────────────────────────────────────── */
.ds-academy-section {
    background: var(--ds-bg-mid);
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    padding: 80px 0;
}

.ds-academy-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.ds-video-frame {
    background: #000;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ds-border-mid);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-dim);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}
.ds-video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ─────────────────────────────────────────────
   SINGLE POST — THE READING EXPERIENCE
───────────────────────────────────────────── */
.ds-post-header {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 64px;
}

.ds-post-cat-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 24px;
}
.ds-post-cat-badge--mythology   { background: var(--ds-teal-dim);  color: var(--ds-teal); }
.ds-post-cat-badge--origins     { background: var(--ds-violet-dim); color: var(--ds-violet); }
.ds-post-cat-badge--scifi       { background: var(--ds-amber-dim); color: var(--ds-amber); }
.ds-post-cat-badge--architecture{ background: var(--ds-amber-dim); color: var(--ds-amber); }

.ds-post-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 400;
    color: var(--ds-text-bright);
    line-height: 1.15;
    margin-bottom: 28px;
    max-width: var(--max-prose);
}

.ds-post-meta {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-text-dim);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ds-post-meta .author { color: var(--ds-text-muted); }
.ds-post-meta .sep { color: var(--ds-text-dim); }

/* The prose reader */
.ds-prose {
    max-width: var(--max-prose);
    font-size: 1.1rem;
    line-height: 2;
    color: var(--ds-text);
}

.ds-prose p { margin-bottom: 1.8em; }

.ds-prose h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--ds-text-bright);
    margin: 2.5em 0 0.8em;
    padding-left: 20px;
    border-left: 3px solid var(--ds-teal);
}

.ds-prose h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--ds-text-bright);
    margin: 2em 0 0.6em;
}

.ds-prose blockquote {
    border-left: 2px solid var(--ds-amber);
    margin: 2em 0;
    padding: 0 0 0 28px;
    color: var(--ds-text-muted);
    font-style: italic;
}

.ds-prose a { color: var(--ds-teal); border-bottom: 1px solid rgba(78, 205, 196, 0.3); }
.ds-prose a:hover { color: var(--ds-text-bright); border-color: transparent; }

.ds-prose ul, .ds-prose ol { padding-left: 24px; margin-bottom: 1.8em; }
.ds-prose li { margin-bottom: 0.4em; }

.ds-prose hr {
    border: none;
    border-top: 1px solid var(--ds-border);
    margin: 3em auto;
    max-width: 120px;
}

.ds-prose img { border-radius: var(--radius); margin: 2em auto; }

/* Post navigation */
.ds-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 80px;
    border-top: 1px solid var(--ds-border);
    padding-top: 40px;
}
.ds-post-nav a {
    background: var(--ds-bg-surface);
    padding: 28px 32px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius);
    display: block;
    color: var(--ds-text-muted);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.2s;
}
.ds-post-nav a:hover { border-color: var(--ds-border-mid); color: var(--ds-text-bright); }
.ds-post-nav a strong { display: block; font-family: var(--font-serif); font-size: 1rem; color: var(--ds-text-bright); margin-top: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ds-post-nav__next { text-align: right; }

/* ─────────────────────────────────────────────
   TAGS
───────────────────────────────────────────── */
.ds-tag {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 2px;
    color: var(--ds-text-muted);
    text-decoration: none;
    transition: 0.2s;
}
.ds-tag:hover { border-color: var(--ds-teal); color: var(--ds-teal); }

/* ─────────────────────────────────────────────
   NEWSLETTER — site-wide band above footer
───────────────────────────────────────────── */
.ds-newsletter {
    background: var(--ds-bg-mid);
    border-top: 1px solid var(--ds-border-mid);
    padding: 64px 0;
    position: relative;
}
.ds-newsletter::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ds-teal), var(--ds-amber), transparent);
    opacity: 0.5;
}
.ds-newsletter-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}
.ds-newsletter-copy h2 {
    font-size: 1.9rem;
    margin: 8px 0 12px;
}
.ds-newsletter-copy p {
    color: var(--ds-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 44ch;
}
.ds-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ds-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 13px 16px;
    background: var(--ds-bg);
    border: 1px solid var(--ds-border-mid);
    border-radius: var(--radius);
    color: var(--ds-text-bright);
    font-family: var(--font-body);
    font-size: 0.92rem;
}
.ds-newsletter-form input[type="email"]::placeholder { color: var(--ds-text-dim); }
.ds-newsletter-form .ds-btn { border: none; cursor: pointer; }

/* ─────────────────────────────────────────────
   CATEGORY ARCHIVE
───────────────────────────────────────────── */
.ds-archive-header {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 64px;
}
.ds-archive-title { font-size: 3rem; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.ds-site-footer {
    background: var(--ds-bg-mid);
    border-top: 1px solid var(--ds-border);
    padding: 64px 0 40px;
    margin-top: 0;
}

.ds-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 32px;
}

.ds-footer-brand .ds-logo { display: inline-block; margin-bottom: 16px; }
.ds-footer-brand p {
    color: var(--ds-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 320px;
}

.ds-footer-col h4 {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ds-text-dim);
    margin-bottom: 16px;
}
.ds-footer-col a {
    display: block;
    color: var(--ds-text-muted);
    font-size: 0.88rem;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.2s;
}
.ds-footer-col a:hover { color: var(--ds-teal); }

.ds-copyright {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─────────────────────────────────────────────
   FEED PAGE (index.php)
───────────────────────────────────────────── */
.ds-feed-header {
    padding: 80px 0 48px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 64px;
}

.ds-feed-filters {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.ds-filter-btn {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 2px;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    text-decoration: none;
    transition: 0.2s;
}
.ds-filter-btn:hover, .ds-filter-btn--active {
    border-color: var(--ds-teal);
    color: var(--ds-teal);
    background: var(--ds-teal-dim);
}
.ds-filter-btn--amber:hover {
    border-color: var(--ds-amber);
    color: var(--ds-amber);
    background: var(--ds-amber-dim);
}
.ds-filter-btn--violet:hover {
    border-color: var(--ds-violet);
    color: var(--ds-violet);
    background: var(--ds-violet-dim);
}

/* Pagination */
.ds-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 64px;
}
.ds-pagination a, .ds-pagination .current {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius);
    color: var(--ds-text-muted);
    text-decoration: none;
    transition: 0.2s;
}
.ds-pagination a:hover { border-color: var(--ds-teal); color: var(--ds-teal); }
.ds-pagination .current { border-color: var(--ds-teal); color: var(--ds-teal); background: var(--ds-teal-dim); }

/* ─────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────── */
.ds-about-header {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 64px;
}
.ds-about-body {
    display: grid;
    grid-template-columns: var(--max-prose) 1fr;
    gap: 80px;
    align-items: start;
}
.ds-about-sidebar {
    position: sticky;
    top: 100px;
}
.ds-about-sidebar .ds-card { margin-bottom: 16px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ds-arch-grid { grid-template-columns: repeat(3, 1fr); }
    .ds-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ds-academy-inner { grid-template-columns: 1fr; gap: 40px; }
    .ds-about-body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ds-container { padding: 0 20px; }
    .ds-container--narrow { padding: 0 20px; }
    .ds-primary-nav.is-open a { padding: 13px 12px; border-bottom: 1px solid var(--ds-border); border-radius: 0; }
    .ds-primary-nav.is-open a:last-of-type { border-bottom: none; }
    .ds-primary-nav.is-open .ds-nav-divider { display: none; }
    .ds-primary-nav.is-open .ds-nav-cta { border: 1px solid rgba(200, 146, 58, 0.35) !important; margin-top: 8px; text-align: center; }
    .ds-hero { padding: 64px 0 56px; }
    .ds-section { padding: 56px 0; }
    .ds-newsletter { padding: 48px 0; }
    .ds-newsletter-inner { grid-template-columns: 1fr; gap: 28px; }
    .ds-post-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .ds-primary-nav { display: none; }
    .ds-nav-toggle { display: block; }
    .ds-primary-nav.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: rgba(10, 8, 20, 0.98);
        border-bottom: 1px solid var(--ds-border);
        padding: 16px;
        gap: 4px;
    }
    .ds-hero-wordmark { font-size: 2.8rem; }
    .ds-grid { grid-template-columns: 1fr; }
    .ds-card--featured { grid-template-columns: 1fr; }
    .ds-arch-grid { grid-template-columns: repeat(3, 1fr); }
    .ds-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .ds-post-nav { grid-template-columns: 1fr; }
    .ds-section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 480px) {
    .ds-container, .ds-container--narrow { padding: 0 16px; }
    .ds-arch-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-hero-actions { flex-direction: column; align-items: stretch; }
    .ds-hero-actions .ds-btn { text-align: center; }
    .ds-hero-wordmark { font-size: 2.3rem; letter-spacing: 0.1em; }
    .ds-hero-divider .tagline { white-space: normal; font-size: 0.6rem; }
    .ds-prose { font-size: 1.03rem; }
    .ds-archive-title { font-size: 2.2rem; }
    .ds-newsletter-form { flex-direction: column; }
    .ds-newsletter-form input[type="email"] { min-width: 0; }
}

/* ─────────────────────────────────────────────
   v1.5 — STORY WORLD LIBRARY + MYTHOLOGY CATALOG
───────────────────────────────────────────── */
.ds-sw-chip {
    font-size: 0.8rem; padding: 5px 16px; border-radius: 20px;
    background: transparent; border: 1px solid var(--ds-border-mid);
    color: var(--ds-text-dim, #8a86a8); cursor: pointer;
    font-family: inherit; transition: all .15s ease;
}
.ds-sw-chip:hover { border-color: var(--ds-teal); color: var(--ds-teal); }
.ds-sw-chip.is-active { background: var(--ds-amber); border-color: var(--ds-amber); color: #241703; }
.ds-sw-badge {
    display: inline-block; font-size: 0.72rem; padding: 2px 12px;
    border-radius: 20px; background: var(--ds-amber-dim);
    border: 1px solid var(--ds-amber); color: var(--ds-amber);
}
.ds-sw-living {
    display: inline-block; font-size: 0.72rem; padding: 2px 10px;
    border-radius: 20px; background: var(--ds-teal-dim); color: var(--ds-teal);
}
.ds-sw-entry-head { border-bottom: 2px solid var(--ds-amber); padding-bottom: 18px; margin-bottom: 26px; }
.ds-sw-entry-body { display: flex; gap: 28px; align-items: flex-start; }
.ds-sw-entry-main { flex: 1; min-width: 0; }
.ds-sw-entry-side { width: 230px; flex-shrink: 0; }
.ds-sw-h {
    font-size: 0.85rem; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--ds-amber); margin: 26px 0 12px;
}
.ds-sw-prose { color: #CFCBE2; line-height: 1.75; margin: 0 0 12px; }
.ds-sw-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.ds-sw-figure { background: var(--ds-bg-surface); border: 1px solid var(--ds-border-mid); border-radius: 10px; padding: 12px 14px; }
.ds-sw-figure-name { color: #EDEAF8; font-size: 0.95rem; margin-bottom: 3px; }
.ds-sw-figure-note { color: var(--ds-text-dim, #8a86a8); font-size: 0.85rem; line-height: 1.55; }
.ds-sw-quote {
    border-left: 3px solid var(--ds-amber); background: var(--ds-bg-surface);
    margin: 18px 0; padding: 14px 20px; font-style: italic; color: var(--ds-amber);
    line-height: 1.7;
}
.ds-sw-respect {
    border: 1px solid var(--ds-border-mid); border-radius: 10px;
    background: var(--ds-bg-mid); padding: 14px 18px; margin-top: 28px;
    color: var(--ds-text-dim, #8a86a8); font-size: 0.88rem; line-height: 1.65;
}
.ds-sw-side-card { background: var(--ds-bg-surface); border: 1px solid var(--ds-border-mid); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.ds-sw-side-label { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ds-teal); margin-bottom: 8px; }
.ds-sw-side-facts { font-size: 0.85rem; color: #CFCBE2; line-height: 1.9; }
@media (max-width: 780px) {
    .ds-sw-entry-body { flex-direction: column; }
    .ds-sw-entry-side { width: 100%; }
}

/* ═══ MAGAZINE REBUILD v2.0 — new components ═══ */

/* Masthead */
.ds-masthead{text-align:center;padding:32px 20px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
.ds-masthead-pillars{font-size:.75rem;letter-spacing:3px;text-transform:uppercase;opacity:.6;margin-bottom:10px;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-masthead-pillars a{color:inherit;text-decoration:none;opacity:.8;}
.ds-masthead-pillars a:hover{opacity:1;}
.ds-masthead-sep{margin:0 10px;opacity:.4;}
.ds-masthead-name{font-size:2.8rem;font-weight:700;letter-spacing:4px;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-masthead-tagline{font-size:.85rem;opacity:.5;margin-top:8px;letter-spacing:1px;}

/* Featured hero */
.ds-featured-hero{padding:40px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.ds-featured-inner{display:flex;gap:32px;align-items:flex-start;}
.ds-featured-image{flex:0 0 45%;max-width:45%;}
.ds-featured-image img{width:100%;border-radius:6px;display:block;}
.ds-featured-content{flex:1;}
.ds-featured-label{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;opacity:.6;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-featured-title{font-size:2rem;line-height:1.2;margin:10px 0 14px;}
.ds-featured-title a{color:inherit;text-decoration:none;}
.ds-featured-title a:hover{opacity:.8;}
.ds-featured-excerpt{opacity:.75;line-height:1.7;margin-bottom:18px;}
.ds-featured-hero--empty{background:linear-gradient(160deg,rgba(255,255,255,.03) 0%,transparent 100%);}
@media(max-width:680px){.ds-featured-inner{flex-direction:column;}.ds-featured-image{flex:none;max-width:100%;}}

/* Three section feeds */
.ds-section-feeds{padding:48px 0;}
.ds-feeds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media(max-width:780px){.ds-feeds-grid{grid-template-columns:1fr;}}
.ds-feed-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.15);padding-bottom:10px;margin-bottom:20px;}
.ds-feed-all{font-size:.8rem;opacity:.6;text-decoration:none;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-feed-all:hover{opacity:1;}
.ds-feed-item{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.ds-feed-item:last-child{border-bottom:none;}
.ds-feed-title{font-size:1rem;margin:0 0 6px;line-height:1.35;}
.ds-feed-title a{color:inherit;text-decoration:none;}
.ds-feed-title a:hover{opacity:.8;}
.ds-feed-excerpt{font-size:.85rem;opacity:.65;line-height:1.6;margin:0 0 6px;}
.ds-feed-date{font-size:.75rem;opacity:.45;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-feed-empty{font-size:.9rem;opacity:.55;line-height:1.7;font-style:italic;}
.ds-feed--cosmological .ds-feed-header{border-color:rgba(218,165,32,.3);}
.ds-feed--scifi .ds-feed-header{border-color:rgba(139,92,246,.3);}

/* Library entry */
.ds-library-entry{padding:48px 0;border-top:1px solid rgba(255,255,255,.08);}
.ds-library-inner{display:flex;gap:32px;align-items:center;justify-content:space-between;}
.ds-library-text h2{font-size:1.6rem;margin:8px 0 10px;}
.ds-library-text p{margin-bottom:16px;}
.ds-library-stats{display:flex;gap:24px;flex-shrink:0;}
.ds-stat{text-align:center;}
.ds-stat-n{display:block;font-size:2.4rem;font-weight:700;line-height:1;}
.ds-stat-l{font-size:.75rem;opacity:.55;letter-spacing:1px;text-transform:uppercase;font-family:var(--ds-font-ui,Inter,sans-serif);}
@media(max-width:640px){.ds-library-inner{flex-direction:column;}}

/* Channel section */
.ds-channel-section{padding:48px 0;border-top:1px solid rgba(255,255,255,.08);}
.ds-channel-section h2{font-size:1.5rem;margin:10px 0 12px;}

/* Newsletter */
.ds-newsletter-section{padding:48px 0;border-top:1px solid rgba(255,255,255,.08);}
.ds-newsletter-inner{display:flex;gap:32px;align-items:center;justify-content:space-between;}
.ds-newsletter-inner h2{font-size:1.4rem;margin:8px 0 6px;}
.ds-newsletter-form{display:flex;gap:8px;flex-shrink:0;}
.ds-newsletter-form input{padding:10px 14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:inherit;border-radius:4px;font-family:inherit;}
.ds-newsletter-form button{padding:10px 18px;background:var(--ds-teal,#1D9E75);color:#fff;border:none;border-radius:4px;cursor:pointer;font-family:inherit;}
@media(max-width:640px){.ds-newsletter-inner{flex-direction:column;}.ds-newsletter-form{width:100%;}.ds-newsletter-form input{flex:1;}}

/* Section fronts */
.ds-section-front{padding:48px 0;}
.ds-section-front-header{text-align:center;max-width:700px;margin:0 auto 40px;}
.ds-section-front-header h1{font-size:2.2rem;margin:10px 0 14px;}
.ds-section-front-deck{opacity:.75;line-height:1.8;}
.ds-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.ds-archive-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;}
.ds-archive-thumb img{width:100%;display:block;}
.ds-archive-body{padding:16px;}
.ds-archive-title{font-size:1.1rem;margin:0 0 8px;line-height:1.3;}
.ds-archive-title a{color:inherit;text-decoration:none;}
.ds-archive-title a:hover{opacity:.8;}
.ds-archive-excerpt{font-size:.88rem;opacity:.65;line-height:1.6;margin-bottom:8px;}
.ds-archive-date{font-size:.75rem;opacity:.45;font-family:var(--ds-font-ui,Inter,sans-serif);}
.ds-empty-section{opacity:.6;font-style:italic;line-height:1.8;padding:32px 0;}

/* Submissions page */
.ds-page-content{padding:48px 0;}
.ds-container--narrow{max-width:760px;}
.ds-page-header{margin-bottom:40px;}
.ds-page-header h1{font-size:2.2rem;margin:10px 0 14px;}
.ds-page-deck{opacity:.75;line-height:1.8;font-size:1.05rem;}
.ds-sub-section{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);}
.ds-sub-section:last-child{border-bottom:none;}
.ds-sub-section h2{font-size:1.3rem;margin-bottom:14px;}
.ds-sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px;}
.ds-sub-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:16px;}
.ds-sub-card h3{font-size:1rem;margin:0 0 8px;}
.ds-sub-card p{font-size:.88rem;opacity:.75;line-height:1.6;margin:0;}
.ds-rates-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem;}
.ds-rates-table th{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.15);opacity:.6;font-weight:500;}
.ds-rates-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.ds-sub-list{padding-left:20px;line-height:2;opacity:.8;}

/* ═══ THE SHELF — v2.1 ═══ */
.ds-shelf-page{padding:48px 0}
.ds-shelf-section{margin-bottom:44px}
.ds-shelf-head{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:11px;margin-bottom:20px;border-bottom:2px solid var(--ds-border-mid)}
.ds-shelf--cosmological-record .ds-shelf-head{border-color:rgba(200,146,58,.3)}
.ds-shelf--world-scifi .ds-shelf-head{border-color:rgba(157,143,232,.3)}

.ds-book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.ds-book-grid--compact{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ds-book-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.ds-book-card.is-compact{flex-direction:row;align-items:flex-start;padding:13px;gap:12px}
.ds-book-cover{aspect-ratio:2/3;overflow:hidden;background:var(--ds-bg-surface)}
.ds-book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ds-book-body{padding:14px;flex:1}
.ds-book-card.is-compact .ds-book-body{padding:0}
.ds-book-title{font-size:.95rem;margin:0 0 5px;line-height:1.35}
.ds-book-title a{color:inherit;text-decoration:none}
.ds-book-title a:hover{color:var(--ds-teal)}
.ds-book-author{font-family:var(--font-ui);font-size:.7rem;color:var(--ds-text-muted);margin:0 0 9px}
.ds-book-buy{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.5px;color:var(--ds-teal);
  text-decoration:none;border:1px solid var(--ds-border-mid);border-radius:3px;
  padding:5px 11px;display:inline-block;transition:background .15s}
.ds-book-buy:hover{background:var(--ds-teal-dim)}

/* Sources on an essay */
.ds-sources{padding:36px 0;margin-top:36px;border-top:1px solid var(--ds-border)}
.ds-sources-h{font-size:.76rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ds-teal);margin:0 0 5px;font-family:var(--font-ui)}
.ds-sources-deck{font-size:.85rem;color:var(--ds-text-muted);margin-bottom:18px}

/* Front-page shelf band */
.ds-shelf-band{padding:44px 0;border-top:1px solid var(--ds-border);background:var(--ds-bg-mid)}
.ds-shelf-band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:8px}
.ds-shelf-band-head h2{font-size:1.5rem;margin-top:6px}
.ds-shelf-band-deck{font-size:.9rem;color:var(--ds-text-muted);max-width:560px;margin-bottom:22px}
.ds-shelf-band-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:780px){.ds-shelf-band-cols{grid-template-columns:1fr;gap:22px}}

/* Single book */
.ds-book-single{padding:44px 0}
.ds-book-single-head{padding-bottom:20px;margin-bottom:26px;border-bottom:2px solid var(--ds-border-mid)}
.ds-book-single-head h1{font-size:2rem;margin:8px 0 8px;line-height:1.15}
.ds-book-single-author{font-family:var(--font-ui);font-size:.8rem;color:var(--ds-text-muted)}
.ds-book-single-body{display:flex;gap:30px;align-items:flex-start}
.ds-book-single-cover{flex:0 0 200px;max-width:200px}
.ds-book-single-cover img{width:100%;border-radius:6px;display:block}
.ds-book-single-text{flex:1;min-width:0}
.ds-book-trads{font-size:.85rem;color:var(--ds-text-muted);margin-top:16px}
.ds-book-trads a{color:var(--ds-teal);text-decoration:none;margin-right:8px}
.ds-book-citing{margin-top:38px;padding-top:26px;border-top:1px solid var(--ds-border)}
@media(max-width:680px){.ds-book-single-body{flex-direction:column}.ds-book-single-cover{flex:none;max-width:160px}}

/* Disclosure */
.ds-disclosure{font-family:var(--font-ui);font-size:.68rem;line-height:1.7;
  color:var(--ds-text-dim);margin-top:20px}
.ds-footer-disclosure{border-top:1px solid var(--ds-border);margin-top:16px;padding-top:14px;text-align:center}
.ds-footer-disclosure .ds-disclosure{margin-top:0}

/* ═══ SCI-FI CATALOG — v2.2 ═══ */
.ds-catalog{padding:48px 0}
.ds-catalog-stats{display:flex;gap:26px;justify-content:center;margin-top:18px;font-size:.82rem;color:var(--ds-text-muted)}
.ds-catalog-stats strong{display:block;font-size:1.5rem;color:var(--ds-text-bright);font-family:var(--font-serif)}
.ds-catalog-controls{margin:28px 0 24px}
.ds-catalog-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ds-cat-chip{font-size:.7rem;font-family:var(--font-ui);padding:5px 13px;border-radius:20px;cursor:pointer;
  background:transparent;border:1px solid var(--ds-border-mid);color:var(--ds-text);transition:all .15s}
.ds-cat-chip:hover,.ds-cat-chip.active{background:var(--ds-violet);border-color:var(--ds-violet);color:var(--ds-bg)}
.ds-cat-region{margin-bottom:36px}
.ds-cat-region-head{font-size:1.05rem;padding-bottom:9px;margin-bottom:16px;
  border-bottom:2px solid rgba(157,143,232,.3);display:flex;justify-content:space-between;align-items:baseline}
.ds-cat-region-n{font-family:var(--font-ui);font-size:.7rem;color:var(--ds-text-muted)}
.ds-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ds-cat-item{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--ds-violet);border-radius:8px;padding:15px}
.ds-cat-title{font-size:.98rem;margin:0 0 4px;line-height:1.3}
.ds-cat-byline{font-family:var(--font-ui);font-size:.7rem;color:var(--ds-text-muted);margin:0 0 8px}
.ds-cat-note{font-size:.85rem;color:var(--ds-text);opacity:.78;line-height:1.6;margin:0 0 9px}
.ds-cat-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ds-cat-tag{font-family:var(--font-ui);font-size:.63rem;letter-spacing:.5px;padding:2px 8px;border-radius:3px;
  border:1px solid var(--ds-border-mid);color:var(--ds-text-muted)}
.ds-cat-tag--tradition{border-color:rgba(78,205,196,.4);color:var(--ds-teal)}
.ds-cat-empty{text-align:center;opacity:.5;padding:36px 0}
.ds-cat-foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--ds-border);
  font-size:.85rem;color:var(--ds-text-muted);line-height:1.7}
.ds-cat-foot a{color:var(--ds-violet);text-decoration:none}
/* ═══════════════════════════════════════════════════════════════════════
   DARKERSPACE v2.3 — THE NIGHT SKY AS A READING SURFACE
   ───────────────────────────────────────────────────────────────────────
   The three pillars share one thing: the same sky, read differently by
   every people. That is the design.

   1. Ground is deep indigo, not black. Real night sky is blue.
   2. A sparse three-layer starfield, fixed — depth without noise.
   3. Constellation strokes as the section motif — different peoples drew
      different figures between the same points.
   4. Essays sit on a light panel. Nobody reads 2,000 words on black.
   5. Pillar colour at scale, not as a 10px label.

   Appended after the v2.2 rules — everything here overrides.
═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── ground: indigo, with steps you can actually see ── */
    --ds-bg:          #080B1A;   /* deep sky */
    --ds-bg-mid:      #0E1330;   /* +8 lightness — a visible plane */
    --ds-bg-surface:  #151B42;   /* +7 again */
    --ds-bg-hover:    #1D2455;

    /* ── the page: essays read here ── */
    --ds-page:        #F4F1E8;   /* warm paper */
    --ds-page-ink:    #1A1A2E;
    --ds-page-muted:  #5A5A6E;
    --ds-page-rule:   #D8D2C2;

    /* ── pillars, unchanged in hue, brought up in presence ── */
    --ds-teal:        #4ECDC4;
    --ds-amber:       #E0A63F;
    --ds-violet:      #A99BF0;

    --ds-teal-wash:   rgba(78, 205, 196, 0.09);
    --ds-amber-wash:  rgba(224, 166, 63, 0.09);
    --ds-violet-wash: rgba(169, 155, 240, 0.09);

    --ds-border:      rgba(160, 180, 255, 0.10);
    --ds-border-mid:  rgba(160, 180, 255, 0.20);

    --ds-text:        #C9CEEA;
    --ds-text-bright: #F0F2FF;
    --ds-text-muted:  #8189B5;
    --ds-text-dim:    #454C78;

    --ds-star:        rgba(255, 255, 255, 0.85);
}

/* ═══ 1 · THE SKY ═══════════════════════════════════════════════════════
   z-index -1 so it sits BEHIND content. The theme has no <main> wrapper,
   so nothing can be lifted above a z-index:0 overlay — the field has to
   go under instead.
   Two tiled layers at 300px and 170px: dense enough to read as a sky.
═══════════════════════════════════════════════════════════════════════ */

/* Ground goes on <html>. If it sits on <body> it propagates to the canvas
   and paints over any z-index:-1 pseudo-element on that same body. */
html { background-color: var(--ds-bg); }

body {
    background-color: transparent;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        /* bright field — 300px tile */
        radial-gradient(1.9px 1.9px at  38px  52px, rgba(255,255,255,.95), transparent 100%),
        radial-gradient(1.5px 1.5px at 141px  19px, rgba(255,255,255,.80), transparent 100%),
        radial-gradient(2.1px 2.1px at 232px 118px, rgba(255,255,255,.92), transparent 100%),
        radial-gradient(1.4px 1.4px at  84px 176px, rgba(214,230,255,.78), transparent 100%),
        radial-gradient(1.7px 1.7px at 268px 231px, rgba(255,255,255,.86), transparent 100%),
        radial-gradient(1.3px 1.3px at  12px 264px, rgba(255,240,220,.74), transparent 100%),
        radial-gradient(1.8px 1.8px at 186px 287px, rgba(255,255,255,.88), transparent 100%),
        radial-gradient(1.5px 1.5px at 108px  96px, rgba(210,225,255,.76), transparent 100%),
        /* fine field — 170px tile */
        radial-gradient(1px 1px at  22px  31px, rgba(255,255,255,.55), transparent 100%),
        radial-gradient(1px 1px at  97px  14px, rgba(200,215,255,.48), transparent 100%),
        radial-gradient(1px 1px at 148px  73px, rgba(255,255,255,.52), transparent 100%),
        radial-gradient(1px 1px at  57px 119px, rgba(255,235,215,.44), transparent 100%),
        radial-gradient(1px 1px at 129px 152px, rgba(255,255,255,.50), transparent 100%),
        radial-gradient(1px 1px at   8px  88px, rgba(200,215,255,.42), transparent 100%),
        /* the galactic band */
        linear-gradient(152deg,
            rgba(110,135,225,.10)  0%,
            rgba(110,135,225,.03) 26%,
            rgba(150,120,225,.09) 55%,
            rgba(110,135,225,.02) 78%,
            transparent          100%);
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
                       repeat, repeat, repeat, repeat, repeat, repeat,
                       no-repeat;
    background-size:   300px 300px, 300px 300px, 300px 300px, 300px 300px,
                       300px 300px, 300px 300px, 300px 300px, 300px 300px,
                       170px 170px, 170px 170px, 170px 170px,
                       170px 170px, 170px 170px, 170px 170px,
                       100% 100%;
}

@media (prefers-reduced-motion: reduce) { body::before { background-image: none; } }

/* ═══ 2 · CONSTELLATION DIVIDERS ════════════════════════════════════════
   The motif. Points joined by a thin line — the same stars, a different
   figure drawn between them.
═══════════════════════════════════════════════════════════════════════ */

.ds-section + .ds-section { border-top: none; }

.ds-section + .ds-section::before {
    content: "";
    display: block;
    height: 1px;
    max-width: var(--max-wide);
    margin: 0 auto 64px;
    background:
        radial-gradient(2.5px 2.5px at 12%  50%, var(--ds-teal),   transparent 100%),
        radial-gradient(2.5px 2.5px at 34%  50%, var(--ds-violet), transparent 100%),
        radial-gradient(2.5px 2.5px at 58%  50%, var(--ds-amber),  transparent 100%),
        radial-gradient(2.5px 2.5px at 81%  50%, var(--ds-teal),   transparent 100%),
        linear-gradient(90deg,
            transparent 0%,
            var(--ds-border-mid) 12%,
            var(--ds-border-mid) 81%,
            transparent 100%);
    background-repeat: no-repeat;
}

/* ═══ 3 · SECTION PLANES ════════════════════════════════════════════════
   Alternating grounds that actually differ, so a section reads as a
   surface rather than more of the same void.
═══════════════════════════════════════════════════════════════════════ */

.ds-section:nth-of-type(even) {
    background: linear-gradient(180deg,
        rgba(21, 27, 66, 0)   0%,
        rgba(21, 27, 66, .55) 12%,
        rgba(21, 27, 66, .55) 88%,
        rgba(21, 27, 66, 0)   100%);
}

/* ═══ 4 · PILLAR COLOUR AT SCALE ════════════════════════════════════════
   Each section front carries its pillar as a real presence: a top rule,
   a wash behind the header, and a glow. Not a 10px eyebrow.
═══════════════════════════════════════════════════════════════════════ */

.ds-section-front { position: relative; padding-top: 64px; }

.ds-section-front::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(var(--max-wide), 92vw);
    height: 2px;
    border-radius: 2px;
}

.ds-section-front-header {
    position: relative;
    padding: 40px 28px 32px;
    border-radius: 10px;
    overflow: hidden;
}

.ds-section-front-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 50% 0%, currentColor 0%, transparent 68%);
    opacity: .12;
}

/* — World Mythology — */
.ds-catalog--mythology .ds-section-front::before,
.ds-front--mythology  .ds-section-front::before { background: var(--ds-teal); }
.ds-catalog--mythology .ds-section-front-header,
.ds-front--mythology  .ds-section-front-header { color: var(--ds-teal); background: var(--ds-teal-wash); }

/* — The Cosmological Record — */
.ds-catalog--record .ds-section-front::before,
.ds-front--record   .ds-section-front::before { background: var(--ds-amber); }
.ds-catalog--record .ds-section-front-header,
.ds-front--record   .ds-section-front-header { color: var(--ds-amber); background: var(--ds-amber-wash); }

/* — World Sci-Fi — */
.ds-catalog--scifi .ds-section-front::before,
.ds-front--scifi   .ds-section-front::before { background: var(--ds-violet); }
.ds-catalog--scifi .ds-section-front-header,
.ds-front--scifi   .ds-section-front-header { color: var(--ds-violet); background: var(--ds-violet-wash); }

/* headings inside the header return to normal text colour */
.ds-section-front-header h1,
.ds-section-front-header h2 { color: var(--ds-text-bright); }
.ds-section-front-deck     { color: var(--ds-text); opacity: .85; }

/* ═══ 5 · THE PAGE — essays read on paper ═══════════════════════════════
   The magazine move. A light panel floating on the sky. Long-form is
   unreadable on near-black and this is a magazine before it is anything.
═══════════════════════════════════════════════════════════════════════ */

.ds-prose {
    background: var(--ds-page);
    color: var(--ds-page-ink);
    padding: 64px 56px 56px;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow:
        0 2px 0 rgba(255,255,255,.06) inset,
        0 30px 90px rgba(0,0,0,.55),
        0 0 0 1px rgba(160,180,255,.10);
    font-family: var(--font-body);
    font-size: 1.03rem;
    line-height: 1.85;
}

.ds-prose > *:first-child { margin-top: 0; }
.ds-prose > *:last-child  { margin-bottom: 0; }

.ds-prose h2,
.ds-prose h3,
.ds-prose h4 { font-family: var(--font-serif); color: var(--ds-page-ink); line-height: 1.25; }
.ds-prose h2 { font-size: 1.6rem; margin: 2.4em 0 .7em; padding-bottom: .35em; border-bottom: 1px solid var(--ds-page-rule); }
.ds-prose h3 { font-size: 1.25rem; margin: 2em 0 .6em; }

.ds-prose p  { margin: 0 0 1.4em; }
.ds-prose a  { color: #1B5E77; text-decoration: underline; text-underline-offset: 2px; }
.ds-prose a:hover { color: #0F3D4F; }

.ds-prose blockquote {
    margin: 2em 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--ds-amber);
    font-style: italic;
    color: var(--ds-page-muted);
}

.ds-prose img { max-width: 100%; height: auto; border-radius: 4px; margin: 2em 0; }
.ds-prose hr  { border: 0; border-top: 1px solid var(--ds-page-rule); margin: 2.6em 0; }

.ds-prose ul, .ds-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.ds-prose li { margin-bottom: .5em; }

.ds-prose code {
    background: rgba(0,0,0,.06);
    padding: 2px 6px; border-radius: 3px;
    font-family: var(--font-ui); font-size: .88em;
}

.ds-prose table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .92rem; }
.ds-prose th, .ds-prose td { padding: 10px 12px; border: 1px solid var(--ds-page-rule); text-align: left; }
.ds-prose th { background: rgba(0,0,0,.04); font-family: var(--font-ui); font-size: .78rem;
               letter-spacing: 1px; text-transform: uppercase; }

/* the Sources box at the foot of an essay stays on the page, tinted */
.ds-prose + .ds-sources,
.ds-sources {
    background: var(--ds-page);
    color: var(--ds-page-ink);
    border-radius: 6px;
    border-top: 3px solid var(--ds-amber);
    padding: 32px 40px;
    margin-top: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(160,180,255,.10);
}
.ds-sources a { color: #1B5E77; }
.ds-sources h3 { font-family: var(--font-serif); margin: 0 0 14px; color: var(--ds-page-ink); }

@media (max-width: 720px) {
    .ds-prose  { padding: 40px 24px; border-radius: 4px; }
    .ds-sources { padding: 26px 24px; }
}

/* ═══ 6 · CARDS AND SURFACES ════════════════════════════════════════════ */

.ds-card {
    background: rgba(21, 27, 66, .55);
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    backdrop-filter: blur(2px);
    transition: border-color .2s, transform .2s, background .2s;
}
.ds-card:hover {
    border-color: var(--ds-border-mid);
    background: rgba(29, 36, 85, .68);
    transform: translateY(-2px);
}

/* ═══ 7 · HEADER AND FOOTER ═════════════════════════════════════════════ */

.ds-site-header, .ds-header {
    background: rgba(8, 11, 26, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ds-border);
}

.ds-footer, footer.ds-footer {
    background: linear-gradient(180deg, transparent 0%, rgba(8,11,26,.9) 40%);
    border-top: 1px solid var(--ds-border);
}

/* ═══ 8 · THE HERO ══════════════════════════════════════════════════════
   The masthead sits on open sky. No box, no panel — the strap line is
   the point and the stars carry it.
═══════════════════════════════════════════════════════════════════════ */

.ds-hero, .ds-front-hero {
    background: radial-gradient(80% 120% at 50% 0%,
        rgba(78,205,196,.07) 0%,
        rgba(169,155,240,.05) 42%,
        transparent 72%);
    border-bottom: 1px solid var(--ds-border);
}

/* ═══ 9 · LET THE SKY THROUGH ═══════════════════════════════════════════
   Any full-width band with an opaque ground hides the field. These carry
   translucent grounds instead so the stars read behind them.
═══════════════════════════════════════════════════════════════════════ */
.ds-section, .ds-hero, .ds-front-hero, .ds-section-front { background-color: transparent; }
.ds-section:nth-of-type(even) {
    background: linear-gradient(180deg,
        rgba(21,27,66,0)   0%,
        rgba(21,27,66,.62) 10%,
        rgba(21,27,66,.62) 90%,
        rgba(21,27,66,0)  100%);
}
/* ═══════════════════════════════════════════════════════════════════════
   DARKERSPACE v2.4 — THE MAGAZINE FRONT
   ───────────────────────────────────────────────────────────────────────
   The scaffold was an index: equal columns, one type size, no lead, no
   images. A magazine front needs four things this didn't have.

   1. A LEAD. One story unmistakably the biggest thing on the page.
   2. TYPOGRAPHIC RANGE. 0.68rem eyebrows against 4.2rem headlines.
      That 6x jump is what makes a page read as edited.
   3. IMAGES — with a real fallback, since a mythology essay often has
      no photograph. The fallback is a generated star-chart plate.
   4. MODULE RHYTHM. Modules of different shapes and weights, so the
      page has a cadence instead of a grid.
═══════════════════════════════════════════════════════════════════════ */

:root {
    --lede:      clamp(2.6rem, 5.2vw, 4.2rem);
    --lede-sub:  clamp(1.05rem, 1.6vw, 1.3rem);
    --eyebrow:   .68rem;
    --plate-1:   #101733;
    --plate-2:   #1B2350;
}

/* ═══ 1 · THE MASTHEAD ══════════════════════════════════════════════════
   Tighter. It is a masthead, not a hero — the lead story is the hero.
═══════════════════════════════════════════════════════════════════════ */

.ds-masthead { padding: 54px 20px 40px; text-align: center; }

.ds-masthead-pillars {
    font-family: var(--font-ui);
    font-size: var(--eyebrow);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    margin-bottom: 20px;
}
.ds-masthead-sep { opacity: .35; margin: 0 .6em; }

.ds-masthead-name {
    font-family: var(--font-ui);
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    font-weight: 400;
    letter-spacing: .22em;
    color: var(--ds-text-bright);
    line-height: 1;
}

.ds-masthead-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: .96rem;
    color: var(--ds-text-muted);
    margin-top: 16px;
}

/* ═══ 2 · THE LEAD ══════════════════════════════════════════════════════
   Full-bleed. Image left, story right on desktop; stacked on mobile.
   The headline is the largest thing on the page by a wide margin.
═══════════════════════════════════════════════════════════════════════ */

.ds-featured-hero {
    padding: 0 0 72px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 0;
}

.ds-featured-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.ds-featured-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--plate-1), var(--plate-2));
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(160,180,255,.12);
}
.ds-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the plate — what shows when an essay has no photograph.
   a star chart drawn in CSS: field, a constellation, a horizon arc. */
.ds-featured-image--plate::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(2.4px 2.4px at 22% 28%, rgba(255,255,255,.92), transparent 100%),
        radial-gradient(1.8px 1.8px at 41% 19%, rgba(255,255,255,.80), transparent 100%),
        radial-gradient(2.8px 2.8px at 58% 37%, rgba(255,255,255,.95), transparent 100%),
        radial-gradient(1.9px 1.9px at 74% 24%, rgba(255,255,255,.82), transparent 100%),
        radial-gradient(2.2px 2.2px at 66% 58%, rgba(255,255,255,.88), transparent 100%),
        radial-gradient(1.7px 1.7px at 35% 52%, rgba(214,230,255,.78), transparent 100%),
        radial-gradient(1.4px 1.4px at 12% 62%, rgba(255,255,255,.62), transparent 100%),
        radial-gradient(1.2px 1.2px at 86% 70%, rgba(255,240,220,.60), transparent 100%),
        radial-gradient(1px 1px at 50% 12%, rgba(255,255,255,.5), transparent 100%),
        radial-gradient(1px 1px at 28% 78%, rgba(200,215,255,.45), transparent 100%),
        radial-gradient(1px 1px at 78% 44%, rgba(255,255,255,.48), transparent 100%);
}
/* the constellation strokes joining those points */
.ds-featured-image--plate::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to bottom right, transparent 49.6%, rgba(78,205,196,.30) 49.8%, rgba(78,205,196,.30) 50.2%, transparent 50.4%),
        linear-gradient(to top right,    transparent 49.6%, rgba(169,155,240,.24) 49.8%, rgba(169,155,240,.24) 50.2%, transparent 50.4%);
    background-size: 42% 34%, 34% 26%;
    background-position: 22% 28%, 58% 40%;
    background-repeat: no-repeat;
    opacity: .9;
}

.ds-featured-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 22px;
}
.ds-featured-label { color: var(--ds-teal);   background: var(--ds-teal-wash); }
.ds-featured-hero[data-pillar="record"] .ds-featured-label { color: var(--ds-amber);  background: var(--ds-amber-wash); }
.ds-featured-hero[data-pillar="scifi"]  .ds-featured-label { color: var(--ds-violet); background: var(--ds-violet-wash); }

.ds-featured-title {
    font-family: var(--font-serif);
    font-size: var(--lede);
    line-height: 1.03;
    letter-spacing: -.015em;
    margin: 0 0 22px;
}
.ds-featured-title a { color: var(--ds-text-bright); text-decoration: none; }
.ds-featured-title a:hover { color: var(--ds-teal); }

.ds-featured-excerpt {
    font-family: var(--font-body);
    font-size: var(--lede-sub);
    line-height: 1.72;
    color: var(--ds-text);
    opacity: .88;
    max-width: 46ch;
    margin: 0 0 28px;
}

.ds-featured-hero .ds-btn {
    font-family: var(--font-ui);
    font-size: .74rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 13px 30px;
    border: 1px solid var(--ds-teal);
    color: var(--ds-teal);
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    transition: background .2s, color .2s;
}
.ds-featured-hero .ds-btn:hover { background: var(--ds-teal); color: var(--ds-bg); }

@media (max-width: 900px) {
    .ds-featured-inner { grid-template-columns: 1fr; gap: 32px; }
    .ds-featured-image { aspect-ratio: 16 / 9; }
}

/* ═══ 3 · MODULE RHYTHM ═════════════════════════════════════════════════
   The three pillar feeds are not three equal columns any more. The first
   carries a lead item at weight; the other two run as compact lists.
═══════════════════════════════════════════════════════════════════════ */

.ds-feeds-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.ds-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ds-border-mid);
}

.ds-feed-header .ds-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
}
.ds-feed:nth-child(1) .ds-feed-header { border-bottom-color: rgba(169,155,240,.45); }
.ds-feed:nth-child(1) .ds-eyebrow     { color: var(--ds-violet); }
.ds-feed:nth-child(2) .ds-feed-header { border-bottom-color: rgba(224,166,63,.45); }
.ds-feed:nth-child(2) .ds-eyebrow     { color: var(--ds-amber); }
.ds-feed:nth-child(3) .ds-feed-header { border-bottom-color: rgba(78,205,196,.45); }
.ds-feed:nth-child(3) .ds-eyebrow     { color: var(--ds-teal); }

.ds-feed-all {
    font-family: var(--font-ui);
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--ds-text-muted);
    text-decoration: none;
}
.ds-feed-all:hover { color: var(--ds-text-bright); }

.ds-feed-item { padding: 20px 0; border-bottom: 1px solid rgba(160,180,255,.07); }
.ds-feed-item:last-child { border-bottom: none; }

.ds-feed-title { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.3; margin: 0 0 8px; }
.ds-feed-title a { color: var(--ds-text-bright); text-decoration: none; }
.ds-feed-title a:hover { color: var(--ds-teal); }

.ds-feed-excerpt { font-size: .88rem; line-height: 1.65; color: var(--ds-text-muted); margin: 0 0 8px; }
.ds-feed-date { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .1em;
                text-transform: uppercase; color: var(--ds-text-dim); }

/* the first feed's first item runs at lead weight */
.ds-feed:nth-child(1) .ds-feed-item:first-child .ds-feed-title { font-size: 1.68rem; line-height: 1.18; }
.ds-feed:nth-child(1) .ds-feed-item:first-child .ds-feed-excerpt { font-size: .96rem; }
.ds-feed:nth-child(1) .ds-feed-item:first-child { padding-bottom: 28px; }

@media (max-width: 1000px) {
    .ds-feeds-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .ds-feed:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 680px) {
    .ds-feeds-grid { grid-template-columns: 1fr; }
    .ds-feed:nth-child(1) { grid-column: span 1; }
}

/* ═══ 4 · THE COUNTS ════════════════════════════════════════════════════
   Numbers at real scale. These are the property's proof.
═══════════════════════════════════════════════════════════════════════ */

.ds-stat-n, .ds-library-stat-n {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 4.4vw, 3.6rem);
    line-height: 1;
    color: var(--ds-text-bright);
}
.ds-stat-l, .ds-library-stat-l {
    font-family: var(--font-ui);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    margin-top: 10px;
    display: block;
}

/* ═══ 5 · SECTION HEADINGS ══════════════════════════════════════════════ */

.ds-section h2,
.ds-library-title,
.ds-shelf-title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--ds-text-bright);
    margin: 0 0 16px;
}

.ds-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

/* ═══ 6 · THE CHANNEL BAND ══════════════════════════════════════════════
   Was a wall of centred grey. Now a plate with the sky showing through.
═══════════════════════════════════════════════════════════════════════ */

.ds-channel-section, .ds-academy-section {
    text-align: center;
    padding: 84px 20px;
    background: radial-gradient(70% 120% at 50% 50%,
        rgba(224,166,63,.07) 0%, transparent 68%);
}
.ds-channel-section h2, .ds-academy-section h2 { max-width: 22ch; margin-inline: auto; }
.ds-channel-section p,  .ds-academy-section p  {
    max-width: 54ch; margin: 14px auto 30px;
    color: var(--ds-text-muted); line-height: 1.75;
}

/* ═══ TRADITION OF THE DAY — the lead when no post is featured ═══ */
.ds-featured-people {
    font-family: var(--font-ui);
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--ds-teal);
    margin: 0 0 18px;
}
.ds-featured-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 26px;
}
.ds-featured-meta span {
    font-family: var(--font-ui);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border-mid);
    border-radius: 3px;
    padding: 5px 11px;
}

/* ═══ THE WRITERS · THE CROSS-LINK ══════════════════════════════════════
   Forty-eight writers, and the join between the two libraries.
═══════════════════════════════════════════════════════════════════════ */

.ds-writer-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 28px;
}
.ds-writer-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 16px 18px; border-radius: 7px; text-decoration: none;
    background: rgba(169,155,240,.055);
    border: 1px solid rgba(169,155,240,.18);
    border-left: 3px solid var(--ds-violet);
    transition: background .18s, transform .18s;
}
.ds-writer-card:hover { background: rgba(169,155,240,.12); transform: translateY(-2px); }
.ds-writer-name {
    font-family: var(--font-serif);
    font-size: 1.05rem; line-height: 1.25;
    color: var(--ds-text-bright);
}
.ds-writer-sub, .ds-writer-trad {
    font-family: var(--font-ui);
    font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ds-text-muted);
}
.ds-writer-trad { color: var(--ds-teal); opacity: .85; }

.ds-writer-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ds-chip {
    font-family: var(--font-ui);
    font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ds-text-muted); text-decoration: none;
    border: 1px solid var(--ds-border-mid); border-radius: 3px; padding: 6px 12px;
    transition: color .18s, border-color .18s;
}
.ds-chip:hover { color: var(--ds-text-bright); border-color: var(--ds-violet); }
.ds-chip--tradition { color: var(--ds-teal); border-color: rgba(78,205,196,.35); }
.ds-chip--tradition:hover { color: var(--ds-teal); border-color: var(--ds-teal); }

/* the fiction block on a tradition entry */
.ds-fiction-from { border-top: 1px solid var(--ds-border); }
.ds-fiction-from .ds-cat-item { border-left-color: var(--ds-violet); }
.ds-cat-byline a { color: var(--ds-violet); text-decoration: none; }
.ds-cat-byline a:hover { text-decoration: underline; }
a.ds-cat-tag--tradition { text-decoration: none; }
a.ds-cat-tag--tradition:hover { border-color: var(--ds-teal); color: var(--ds-teal); }