/* ==========================================================================
   zs-editorial.css — long-form / editorial typography for Zvjezdane Staze
   --------------------------------------------------------------------------
   Module for long reads: essays, interviews, journal posts, residency reports.
   Based on Brand Book §07 (LAST VERSIONS, 2026-05-04). Decisions locked in
   2026-05-05 brand consolidation pass:
     • Dual-body system: Cormorant 17px (essays/interviews), Space Grotesk 15px
       (informative pages). Toggle via .editorial-body--info modifier.
     • Pull-quote uses 3px gold left border (intentional emphasis exception
       to the §04.9 1px-hairline UI rule).
     • Drop-cap 4.2em forest-deep, line-height 0.85.
     • Interview Q lines in JetBrains Mono uppercase magenta.
     • Foreign quotes get 1px gold left border + lang="" attribute on the
       <blockquote>.

   Usage: include after zs-base.css. Add .editorial-body to article wrapper.
   For interviews, use .editorial-q + .editorial-a paragraph pairs.
   For info/factual pages, add .editorial-body--info to switch to sans body.
   ========================================================================== */


/* ==========================================================================
   1. EDITORIAL HERO — title block at top of an article
   ========================================================================== */

.editorial-hero {
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 0 2rem;
    text-align: center;
}

.editorial-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.editorial-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.15;
    font-weight: 400;
    color: var(--forest-deep);
    margin: 0 0 1.5rem;
}

.editorial-byline {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 13px;
    color: var(--moss);
    letter-spacing: 0.02em;
}
.editorial-byline a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}


/* ==========================================================================
   2. EDITORIAL BODY — dual-body system + dual-leading tier
   --------------------------------------------------------------------------
   Default = Cormorant 17px essay typography (long-read).
   .editorial-body--info  = Space Grotesk 15px informative typography (factual,
                            lists, FAQ-style content).
   .editorial-body--tight = Cormorant 17px @ 1.65 line-height — compact
                            register for dense critical material (eseji,
                            recenzije). Explicit opt-in only.

   Long-form leading — dual tier (BB §05, resolved 2026-05-05):
     • 1.7 "comfortable" = default. Programme detail, journal posts, founder
       note, about. Inherits site-wide body 1.7 baseline.
     • 1.65 "tighter"    = explicit override for dense critical material
       where the weight of the subject wants visual concentration.
   ========================================================================== */

.editorial-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--muted);
}

.editorial-body p { margin: 0 0 1.5em; }

/* Modifier: informational pages — switch to sans body */
.editorial-body--info {
    font-family: var(--font-sans);
    font-size: 15px;
}

/* Modifier: tighter leading — dense critical material (BB §05 tier) */
.editorial-body--tight {
    line-height: 1.65;
}

/* Tablet portrait: editorial body grows from 720px → 800px max-width.
   Reason: at 1024px tablet portrait with 720px max-width + auto margins,
   the editorial column gets 152px gutters each side — feels "trapped".
   800px reduces gutters to 112px — more comfortable proportional balance
   without losing long-form readability. (Mobile audit 2026-05-06.) */
@media (min-width: 768px) and (max-width: 1023px) {
    .editorial-body {
        max-width: 800px;
        padding: 0 2.5rem;
    }
}

/* Headings inside editorial body */
.editorial-body h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--forest-deep);
    margin: 3rem 0 1rem;
    line-height: 1.3;
}
.editorial-body h3 {
    font-family: var(--font-serif);
    /* Bumped from 1.2rem to 1.3rem for stronger H3↔body distinction on mobile.
       At 17px body, 1.2rem (19.2px) gave only 2.2px gap — too marginal at 360px
       viewport, especially with accessibility zoom. 1.3rem (20.8px) gives 3.8px
       gap which reads as a clear hierarchy step. (Mobile audit 2026-05-06.) */
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--forest);
    margin: 2.25rem 0 0.75rem;
    line-height: 1.4;
}
.editorial-body--info h2,
.editorial-body--info h3 {
    font-family: var(--font-sans);
    font-weight: 500;
}

/* Inline links — gold underline, magenta on hover */
.editorial-body a {
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
    transition: color 0.3s, border-color 0.3s;
}
.editorial-body a:hover {
    color: var(--magenta);
    border-bottom-color: var(--magenta);
}

/* Lists */
.editorial-body ul,
.editorial-body ol {
    margin: 0 0 1.5em 1.5em;
}
.editorial-body li { margin-bottom: 0.5em; }


/* ==========================================================================
   3. DROP-CAP — first letter of essay body, scaled large
   --------------------------------------------------------------------------
   Apply .has-drop-cap to the first paragraph after the title. Cormorant only
   (not used in --info variant — sans drop-caps look heavy).
   ========================================================================== */

.editorial-body .has-drop-cap::first-letter {
    font-family: var(--font-serif);
    font-size: 4.2em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.12em 0 0;
    color: var(--forest-deep);
    font-weight: 500;
}
/* Disable drop-cap when sans body is active */
.editorial-body--info .has-drop-cap::first-letter {
    all: unset;
}


/* ==========================================================================
   4. PULL-QUOTE — emphasized inline excerpt
   --------------------------------------------------------------------------
   3px gold left border is an intentional exception to the §04.9 1px-hairline
   UI rule. Pull-quotes are content emphasis, not interface chrome — the
   thicker rule is a print-rooted convention (margin rule) and reads as such.
   ========================================================================== */

.editorial-pull {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--forest-deep);
    margin: 2.5rem 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-left: 3px solid var(--gold);
}

/* Float-right variant — pull-quote sitting beside body text */
@media (min-width: 720px) {
    .editorial-pull--right {
        float: right;
        width: 280px;
        margin: 0.5rem 0 1.5rem 2rem;
        font-size: 1.25rem;
        padding-left: 1.25rem;
    }
}


/* ==========================================================================
   5. INTERVIEW Q / A FORMAT
   --------------------------------------------------------------------------
   Q lines: JetBrains Mono 0.85rem uppercase magenta — looks like a margin
   marker, sets up the question typographically.
   A lines: regular body type.
   ========================================================================== */

.editorial-q {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--magenta);
    font-weight: 500;
    margin: 2.5rem 0 0.75rem;
    line-height: 1.5;
}
.editorial-q::before {
    content: 'Q · ';
    color: var(--gold);
    font-weight: 600;
}

.editorial-a {
    /* Inherits body styles. Marker comes from typographic context, not class. */
}
.editorial-a::before {
    content: 'A · ';
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-right: 0.4em;
    vertical-align: 0.05em;
}


/* ==========================================================================
   6. FOREIGN-LANGUAGE QUOTE
   --------------------------------------------------------------------------
   When a quote is in a different language than the surrounding article (e.g.,
   Bachelard in French inside a BHS essay), wrap it in <blockquote lang="fr">
   with .editorial-quote--foreign. Italic + 1px gold left border (the hairline
   here is correct — quote frame is interface, not emphasis).
   ========================================================================== */

.editorial-quote--foreign {
    font-style: italic;
    color: var(--forest-deep);
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--gold);
    line-height: 1.6;
}
.editorial-quote--foreign cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85em;
    font-style: normal;
    color: var(--moss);
    letter-spacing: 0.02em;
}
.editorial-quote--foreign cite::before { content: '— '; }


/* ==========================================================================
   7. FOOTNOTES
   --------------------------------------------------------------------------
   Inline reference is JetBrains Mono superscript gold. Footnote list at
   bottom of article is smaller body type with hairline top border.
   ========================================================================== */

.editorial-footnote-ref {
    font-family: var(--font-mono);
    font-size: 0.7em;
    color: var(--gold);
    vertical-align: super;
    line-height: 0;
    text-decoration: none;
    border-bottom: none;
    padding: 0 0.1em;
}
.editorial-footnote-ref:hover { color: var(--magenta); }

.editorial-footnotes {
    max-width: 720px;
    margin: 4rem auto 2rem;
    padding: 1.5rem 2rem 0;
    border-top: 1px solid rgba(196, 160, 80, 0.30);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--moss);
}
.editorial-footnotes ol {
    list-style: decimal;
    margin: 0 0 0 1.25rem;
    padding: 0;
}
.editorial-footnotes li {
    margin-bottom: 0.5rem;
}
.editorial-footnotes a { color: var(--teal); }


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
    .editorial-body         { font-size: 16px; padding: 0 1.5rem; }
    .editorial-body--info   { font-size: 14px; }
    .editorial-pull         { font-size: 1.25rem; }
    .editorial-pull--right  { float: none; width: auto; margin: 2rem 0; }
    .editorial-body .has-drop-cap::first-letter { font-size: 3.6em; }
    .editorial-hero         { padding: 0 1.5rem; }
}