/* ============================================================
     ARTICLE TEMPLATE — Bipolarist
     Hybrid reader: dark masthead + cover-echo hero on top,
     light long-form body below, dark footer.
     Designed first for "Man Beyond Society"; intended to be
     reused for the Feeling Time series and other essays.
     ============================================================ */

  @import url('/assets/css/nav.css');

  :root {
    /* DARK PALETTE (masthead, hero, footer) */
    --grey-050: #f4f4f3;
    --grey-100: #e8e8e6;
    --grey-200: #d0d0cc;
    --grey-300: #a8a8a3;
    --grey-500: #6b6b66;
    --grey-700: #3a3a37;
    --grey-900: #1a1a18;
    --ink-deep: #0a0a08;
    --neon: #d4ff00;
    --neon-dim: #a8cc00;

    /* LIGHT PALETTE (reading body) */
    --cream: #e8e8e6;
    --paper: #dcdcd9;
    --ink: #1c1c28;
    --ink-soft: #3d3d4e;
    --ink-mute: #6b6b7b;
    --rule: #a8a8a5;
    --rule-soft: #bcbcb9;

    /* TYPE STACK */
    --display: 'Fraunces', Georgia, serif;
    --read: 'Newsreader', Georgia, serif;
    --ui: 'Archivo Narrow', 'Oswald', sans-serif;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* ===========================================================
     ACCESSIBILITY — focus ring + skip link
     =========================================================== */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 2px;
    border-radius: 1px;
  }
  .a-article a:focus-visible,
  .a-series-link:focus-visible {
    outline-offset: 4px;
    border-color: transparent;
  }
  .skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 1000;
    background: var(--neon);
    color: var(--ink);
    padding: 10px 16px;
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-radius: 3px;
    transition: top 0.18s ease;
  }
  .skip-link:focus { top: 12px; outline: 2px solid var(--ink); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .skip-link { transition: none; }
  }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--read);
    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  /* ===========================================================
     TOP NAV — provided by /assets/css/nav.css (shared)
     Legacy .a-nav-* rules removed; unified .top-nav handles all pages.
     =========================================================== */

  /* ===========================================================
     HERO — short wide cover: mimics slide 4 (atm-layout reverse)
     dot-grid backdrop, neon figure on the left, type on the right
     =========================================================== */
  .a-hero {
    background: linear-gradient(to bottom, #050410 0%, #0a0815 50%, #15101a 100%);
    color: var(--grey-050);
    padding: 52px 0 36px;
    border-bottom: 1px solid var(--grey-700);
    position: relative;
    overflow: hidden;
  }
  /* Full-bleed atmospheric backdrop — dot grid + figure all in one SVG */
  .a-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .a-hero-grid {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 40px;
    align-items: start;
    min-height: 0;
  }
  .a-hero-side {
    max-width: 480px;
  }
  .a-hero-side .a-hero-dek {
    margin-bottom: 28px;
  }
  .a-hero-text {
    max-width: 560px;
  }
  .a-kicker {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--neon);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .a-kicker::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--neon);
  }
  .a-headline {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(3rem, 5.6vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.026em;
    color: var(--grey-050);
    font-variation-settings: "opsz" 100, "SOFT" 30;
    margin-bottom: 30px;
  }
  .a-headline em {
    font-style: normal;
    font-weight: 400;
    color: var(--neon);
  }
  .a-hero-dek {
    font-family: var(--read);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--grey-100);
    margin-bottom: 32px;
    border-left: 2px solid var(--neon);
    padding-left: 22px;
    max-width: 600px;
    font-weight: 300;
    letter-spacing: -0.005em;
  }
  .a-meta {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--grey-300);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
  }
  .a-meta strong {
    color: var(--grey-050);
    font-weight: 600;
  }
  .a-meta .sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--grey-500);
    display: inline-block;
  }

  /* ===========================================================
     READING BODY — cream, optical Newsreader, generous measure
     =========================================================== */
  .a-body {
    padding: 84px 28px 56px;
  }
  .a-article {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--read);
    font-size: 23px;
    line-height: 1.65;
    color: var(--ink);
    font-variation-settings: "opsz" 20;
  }
  .a-article > p {
    margin-bottom: 1.4em;
    text-wrap: pretty;
    hyphens: auto;
  }

  /* Drop cap on the first paragraph */
  .a-article > p.lede::first-letter {
    font-family: var(--display);
    font-weight: 500;
    font-size: 4.2em;
    line-height: 0.85;
    float: left;
    padding: 0.08em 0.12em 0 0;
    color: var(--ink);
  }

  /* Inline emphasis */
  .a-article em { font-style: italic; }
  .a-article cite { font-style: italic; }

  /* Inline citation links — subtle underline, hover to neon-dim */
  .a-article a {
    color: inherit;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.18s ease, color 0.18s ease;
  }
  .a-article a:hover { border-color: var(--neon-dim); color: var(--neon-dim); }
  .a-article a strong { font-weight: 600; }

  /* Light disclaimer / canon framing note */
  .a-disclaimer {
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--ink-mute);
    border-left: 2px solid var(--rule);
    padding: 0.4em 0 0.4em 1em;
    margin: 1.6em 0 1.6em 0;
  }
  .a-disclaimer em { font-style: italic; }

  /* Pull quotes — set in display serif, neon left rule */
  .a-pull {
    margin: 2.4em 0 2.4em -28px;
    padding-left: 28px;
    border-left: 3px solid var(--neon);
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--ink);
    max-width: 700px;
  }
  .a-pull p { margin: 0; }

  /* Indented blockquote (preserved from source) */
  .a-blockquote {
    margin: 2em 0;
    padding: 1.5em 1.75em;
    background: var(--paper);
    border-left: 2px solid var(--rule);
    font-family: var(--read);
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--ink-soft);
    border-radius: 2px;
  }
  .a-blockquote p { margin: 0; }
  .a-blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-family: var(--ui);
    font-style: normal;
    font-size: 0.7em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
  }

  /* Section divider — between essay and endnote */
  .a-rule {
    width: 64px;
    height: 1px;
    background: var(--rule);
    margin: 3em auto;
    border: none;
  }

  /* h3 section heading inside the article */
  .a-article h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 2em 0 0.6em;
  }

  /* Info card — bordered, paper-cream background, used for parallel concepts (e.g. the four jobs) */
  .a-card {
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper);
    padding: 1.1em 1.3em;
    margin: 0.85em 0;
  }
  .a-card h4 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.3em;
  }
  .a-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95em;
    line-height: 1.65;
  }

  /* Two-column comparison grid (e.g. "in mania" vs "in depression") */
  .a-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2em;
    margin: 1.2em 0;
  }
  .a-compare > div {
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.1em 1.2em;
    background: var(--paper);
  }
  .a-compare h4 {
    font-family: var(--ui);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--burgundy, #7B2D26);
    margin: 0 0 0.6em;
  }
  .a-compare p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95em;
    line-height: 1.65;
  }

  /* Bullet/numbered list inside article */
  .a-article ul,
  .a-article ol {
    margin: 0.9em 0;
    padding-left: 1.4em;
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .a-article ul li,
  .a-article ol li { margin-bottom: 0.4em; }

  /* Series navigation footer (Continue to Part II →) */
  .a-series {
    max-width: 760px;
    margin: 4em auto 0;
    padding: 2em 0;
    border-top: 1px solid var(--rule);
  }
  .a-series-eyebrow {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: 14px;
  }
  .a-series-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--display);
    font-weight: 500;
    color: var(--ink);
    transition: opacity 0.2s ease;
  }
  .a-series-link:hover { opacity: 0.7; }
  .a-series-link + .a-series-link { border-top: none; }
  .a-series-cue {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    flex-shrink: 0;
  }
  .a-series-title {
    font-size: 1.15rem;
    line-height: 1.25;
    text-align: right;
    font-style: italic;
  }

  @media (max-width: 600px) {
    .a-compare { grid-template-columns: 1fr; }
    .a-series-link { flex-wrap: wrap; }
    .a-series-title { text-align: left; }
  }

  /* Endnote / footnote — small, set apart */
  .a-endnote {
    font-family: var(--read);
    font-size: 0.92em;
    line-height: 1.65;
    color: var(--ink-mute);
    font-style: italic;
    border-top: 1px solid var(--rule-soft);
    padding-top: 2em;
    margin-top: 3em;
  }
  .a-endnote em { font-style: normal; font-weight: 500; color: var(--ink-soft); }

  /* ===========================================================
     About-the-author bio block — per-article E-E-A-T signal.
     Included via SSI from /inc/author-bio.html below the body.
     =========================================================== */
  .a-author-bio {
    max-width: 760px;
    margin: 3.6em auto 1em;
    padding: 2em 2em 2em;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--neon-dim);
    border-radius: 2px;
  }
  .a-author-bio-inner {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 22px;
    align-items: start;
  }
  .a-author-bio-thumb {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ink-deep);
  }
  .a-author-bio-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .a-author-bio-label {
    display: block;
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
    margin-bottom: 4px;
  }
  .a-author-bio-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 10px;
    font-variation-settings: "opsz" 100;
  }
  .a-author-bio-text {
    font-family: var(--read);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 10px;
  }
  .a-author-bio-text a {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
  }
  .a-author-bio-text a:hover { color: var(--ink); border-color: var(--ink); }
  .a-author-bio-links {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
  }
  .a-author-bio-links a { color: var(--ink-soft); }
  .a-author-bio-links a:hover { color: var(--ink); }
  .a-author-bio-links .a-sep { color: var(--rule); }
  .a-author-bio-crisis {
    margin: 1.4em 0 0;
    padding-top: 1.4em;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--read);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-mute);
  }
  .a-author-bio-crisis strong { color: var(--ink-soft); }
  .a-author-bio-crisis a {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
  }
  .a-author-bio-crisis a:hover { color: var(--ink); }
  @media (max-width: 520px) {
    .a-author-bio { padding: 1.5em 1.4em; }
    .a-author-bio-inner { grid-template-columns: 72px 1fr; gap: 16px; }
    .a-author-bio-thumb { width: 72px; height: 72px; }
    .a-author-bio-name { font-size: 1.2rem; }
    .a-author-bio-crisis { font-size: 0.88rem; }
  }

  /* Coda — closing flourish: byline reprise + share/back */
  .a-coda {
    max-width: 760px;
    margin: 4em auto 0;
    padding: 2em 0;
    border-top: 1px solid var(--rule);
    font-family: var(--ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .a-coda a:hover { color: var(--ink); }

  /* ===========================================================
     FOOTER — dark, minimal
     =========================================================== */
  .a-foot {
    background: var(--ink-deep);
    color: var(--grey-300);
    padding: 36px 28px;
    border-top: 1px solid var(--grey-700);
    font-family: var(--ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .a-foot-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .a-foot a:hover { color: var(--neon); }

  /* ===========================================================
     HERO THUMBNAIL — featured article image in the header
     Mirrors the article tile thumb on /articles, per-article color.
     =========================================================== */
  .a-hero-thumb {
    width: 280px;
    aspect-ratio: 1;
    margin-bottom: 32px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-deep);
  }
  .a-hero-thumb svg {
    width: 65%;
    max-width: 220px;
    height: auto;
  }
  .a-hero-thumb .a-hero-thumb-label {
    position: absolute;
    top: 14px; left: 14px;
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--neon);
    background: rgba(0, 0, 0, 0.55);
    padding: 5px 10px;
    border-radius: 2px;
  }
  /* All thumbnails use uniform black via the default .a-hero-thumb bg above.
     The manifesto bp-logo inherits neon via .post-image-bp on the tile page;
     when adding a hero thumb on the manifesto article, mirror that color. */

  /* ===========================================================
     RESPONSIVE
     =========================================================== */
  @media (max-width: 880px) {
    .a-hero { padding: 44px 0 52px; min-height: 220px; }
    .a-hero-grid {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 0 28px;
      min-height: 0;
    }
    .a-hero-text { max-width: none; }
    .a-hero-side { max-width: none; }
    .a-hero-thumb { width: 240px; margin-bottom: 24px; }
    .a-body { padding: 56px 24px 40px; }
    .a-pull {
      margin-left: 0;
      font-size: 1.65rem;
    }
    .a-article { font-size: 21px; }
    .a-foot { padding: 28px 20px; }
    .a-foot-inner { font-size: 10px; }
  }
  @media (max-width: 520px) {
    body { font-size: 18px; }
    .a-hero { padding: 36px 0 40px; }
    .a-hero-grid { padding: 0 22px; gap: 24px; }
    .a-hero-thumb { width: 200px; margin-bottom: 20px; }
    .a-hero-dek { font-size: 1.2rem; padding-left: 18px; }
    .a-body { padding: 44px 22px 32px; }
    .a-article { font-size: 19.5px; line-height: 1.65; }
    .a-article > p.lede::first-letter { font-size: 3.6em; }
    .a-pull { font-size: 1.45rem; padding-left: 22px; margin: 1.8em 0; }
    .a-blockquote { padding: 1.2em 1.3em; }
    .a-meta { font-size: 10px; gap: 8px 16px; }
    .a-article h3 { font-size: 1.55rem; }
    .a-series-link { padding: 14px 0; }
    .a-series-title { font-size: 1.05rem; }
  }
  @media (max-width: 380px) {
    .a-hero-grid { padding: 0 18px; }
    .a-body { padding: 36px 18px 28px; }
    .a-pull { font-size: 1.3rem; padding-left: 18px; }
    .a-blockquote { padding: 1em 1.1em; }
    .a-article > p.lede::first-letter { font-size: 3.2em; }
  }