/* ═══════════════════════════════════════════════════════
       ABORTION STORIES PAGE — as- namespace
       Design tokens inherited from site palette:
         navy   #0C0A3E
         lime   #CCFF33
         purple #A89CED
         cream  #EEEBD3
         font   DM Sans 800/700/400
    ═══════════════════════════════════════════════════════ */

    /* ── HERO ─────────────────────────────────────────── */
    .as-hero {
      background: #EEEBD3;
      padding: 80px 24px 0;
      position: relative;
      overflow: hidden;
    }

    .as-hero-bg-shape {
      position: absolute;
      top: -40px;
      right: -80px;
      width: 480px;
      height: 480px;
      background: #A89CED;
      border-radius: 50%;
      opacity: 0.12;
      pointer-events: none;
    }

    .as-hero-inner {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 1;
    }

    .as-back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font: 600 12px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(12,10,62,0.5) !important;
      text-decoration: none !important;
      margin-bottom: 48px;
      transition: color 0.2s;
    }
    .as-back-link:hover {
      color: #0C0A3E !important;
    }
    .as-back-arrow {
      font-size: 16px;
      transition: transform 0.2s;
    }
    .as-back-link:hover .as-back-arrow {
      transform: translateX(-3px);
    }

    .as-hero-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #A89CED;
      margin-bottom: 24px;
    }
    .as-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #A89CED;
      flex-shrink: 0;
    }

    .as-hero-title {
      font: 800 clamp(72px, 14vw, 128px)/0.85 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.05em !important;
      margin: 0 0 32px;
    }
    .as-hero-title em {
      font-style: italic;
      color: #A89CED !important;
      font-weight: 700 !important;
    }

    .as-hero-intro {
      font: 400 20px/1.5 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.6) !important;
      max-width: 440px;
      margin: 0 0 64px;
    }

    .as-hero-accent-bar {
      height: 6px;
      background: linear-gradient(to right, #CCFF33 0%, #A89CED 50%, #0C0A3E 100%);
      margin-top: 0;
    }

    /* ── SECTIONS ─────────────────────────────────────── */
    .as-section {
      padding: 80px 24px;
    }
    .as-section--cream { background: #EEEBD3; }
    .as-section--white { background: #ffffff; }
    .as-section--navy  { background: #0C0A3E; }

    .as-content {
      max-width: 840px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .as-content--wide {
      max-width: 1020px;
    }

    .as-section-heading {
      font: 800 clamp(36px, 6vw, 56px)/0.9 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.04em !important;
      margin: 0 0 56px;
    }

    /* ── FRAMING ──────────────────────────────────────── */
    .as-framing {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 64px;
      align-items: start;
    }

    .as-framing-pull {
      position: sticky;
      top: 32px;
    }

    .as-pull-statement {
      font: 700 clamp(22px, 3.5vw, 32px)/1.15 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.03em;
      margin: 0 0 16px;
      padding: 0;
      border: none;
      quotes: none;
    }
    .as-pull-statement::before,
    .as-pull-statement::after { content: none; }

    .as-pull-cite {
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #A89CED;
      font-style: normal;
    }

    .as-framing-body p {
      font: 400 18px/1.65 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.75) !important;
      margin: 0 0 20px;
    }
    .as-framing-body p:last-child { margin-bottom: 0; }

    /* ── STORY CARDS ──────────────────────────────────── */
    .as-stories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }

    /* Base story card */
    .as-story {
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
    }

    .as-story-number {
      font: 800 11px/1 'DM Sans', sans-serif;
      letter-spacing: 0.1em;
      opacity: 0.25;
      color: currentColor;
    }

    .as-story-quote {
      font: 400 18px/1.7 'DM Sans', sans-serif !important;
      margin: 0 !important;
      flex: 1;
    }

    .as-story-overline {
      font: 700 13px/1 'DM Sans', sans-serif !important;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0 !important;
    }

    .as-story-footer {
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid currentColor;
      opacity: 0.3;
    }
    .as-story-tag {
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* Card 01 — Cream ground, navy text, lime left border */
    .as-story--one {
      background: #EEEBD3;
      color: #0C0A3E;
      border-left: 4px solid #CCFF33;
      grid-column: 1;
      grid-row: 1;
    }
    .as-story--one .as-story-quote {
      color: #0C0A3E !important;
      font-size: 20px !important;
    }
    .as-story--one .as-story-number {
      color: #0C0A3E;
    }

    /* Card 02 — Navy ground, cream text, lime accent number */
    .as-story--two {
      background: #0C0A3E;
      color: #EEEBD3;
      grid-column: 2;
      grid-row: 1 / span 2;
      padding: 48px 40px;
    }
    .as-story--two .as-story-quote {
      color: rgba(238,235,211,0.85) !important;
      font-size: 17px !important;
    }
    .as-story--two .as-story-overline {
      color: #CCFF33 !important;
      opacity: 1;
    }
    .as-story--two .as-story-number {
      color: #CCFF33 !important;
      opacity: 1;
      font-size: 13px;
    }
    .as-story--two .as-story-footer {
      border-top-color: rgba(238,235,211,0.2);
      opacity: 1;
    }
    .as-story--two .as-story-tag {
      color: rgba(238,235,211,0.45);
    }

    /* Card 03 — Purple ground, navy/cream text, italic drop cap */
    .as-story--three {
      background: #A89CED;
      color: #0C0A3E;
      grid-column: 1;
      grid-row: 2;
    }
    .as-story--three .as-story-quote {
      color: #0C0A3E !important;
      font-size: 16px !important;
      line-height: 1.75 !important;
    }
    .as-story--three .as-story-number {
      color: #0C0A3E;
    }
    .as-story--three .as-story-footer {
      border-top-color: rgba(12,10,62,0.25);
      opacity: 1;
    }
    .as-story--three .as-story-tag {
      color: rgba(12,10,62,0.5);
    }

    /* Drop cap on card 03 */
    .as-story-quote--dropcap::first-letter {
      float: left;
      font: 800 88px/0.7 'DM Sans', sans-serif;
      margin: 4px 12px 0 0;
      color: #0C0A3E;
      opacity: 0.18;
    }

    /* Card 04 — White ground with navy, large typographic quote mark */
    .as-story--four {
      background: #ffffff;
      color: #0C0A3E;
      grid-column: 1 / span 2;
      grid-row: 3;
      border-top: 4px solid #CCFF33;
      padding: 48px 40px;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 0 32px;
      align-items: start;
    }
    .as-story--four .as-story-number {
      grid-column: 1;
      grid-row: 1;
      font-size: 48px !important;
      letter-spacing: -0.04em;
      opacity: 0.08;
      color: #0C0A3E;
      line-height: 1;
    }
    .as-story--four .as-story-body {
      grid-column: 2;
      grid-row: 1;
    }
    .as-story--four .as-story-footer {
      grid-column: 2;
      grid-row: 2;
    }
    .as-story--four .as-story-quote {
      color: #0C0A3E !important;
      font-size: clamp(18px, 2.5vw, 22px) !important;
      font-weight: 400 !important;
      font-style: italic;
    }

    /* ── STORIES COLLECTING EMPTY STATE ──────────────── */
    .as-stories-collecting {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    .as-collecting-body {
      font: 400 18px/1.65 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.75) !important;
      margin: 0 0 20px !important;
    }
    .as-collecting-body:last-child { margin-bottom: 0 !important; }

    .as-collecting-empty {
      background: #EEEBD3;
      border: 1.5px dashed rgba(12,10,62,0.18);
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .as-empty-icon {
      font-size: 28px;
      color: #A89CED;
      line-height: 1;
    }

    .as-empty-heading {
      font: 700 22px/1.1 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.02em;
      margin: 0 !important;
    }

    .as-empty-body {
      font: 400 16px/1.6 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.6) !important;
      margin: 0 !important;
    }

    .as-empty-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: flex-start;
      margin-top: 8px;
      font: 700 13px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #0C0A3E !important;
      text-decoration: none !important;
      border-bottom: 2px solid #CCFF33;
      padding-bottom: 4px;
      transition: border-color 0.2s, color 0.2s;
    }
    .as-empty-link:hover {
      color: #A89CED !important;
      border-color: #A89CED;
    }

    @media (max-width: 900px) {
      .as-stories-collecting {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* ── SOLIDARITY STATEMENT ─────────────────────────── */
    .as-solidarity {
      background: #CCFF33;
      padding: 56px 24px;
    }
    .as-solidarity-inner {
      max-width: 840px;
      margin: 0 auto;
      padding: 0 24px;
      text-align: center;
    }
    .as-solidarity-text {
      font: 400 clamp(20px, 3.5vw, 30px)/1.4 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      margin: 0 !important;
      letter-spacing: -0.02em;
    }
    .as-solidarity-text strong {
      font-weight: 800 !important;
      color: #0C0A3E !important;
      display: block;
      font-size: 1.15em;
      letter-spacing: -0.03em;
    }

    /* ── SHARE YOUR STORY ─────────────────────────────── */
    .as-share-layout {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 64px;
      align-items: start;
    }

    .as-label-tag {
      display: inline-block;
      font: 600 10px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #A89CED;
      margin-bottom: 20px;
    }

    .as-share-heading {
      font: 800 clamp(48px, 8vw, 72px)/0.85 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.05em !important;
      margin: 0 0 16px;
    }

    .as-share-sub {
      font: 400 16px/1.4 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.5) !important;
      margin: 0;
    }

    .as-share-body {
      font: 400 17px/1.65 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.75) !important;
      margin: 0 0 20px;
    }
    .as-share-body:last-of-type { margin-bottom: 32px; }

    /* Form prompt */
    .as-form-prompt {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .as-form-legend {
      font: 700 14px/1 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0 !important;
    }

    .as-form-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .as-form-label {
      font: 600 12px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(12,10,62,0.55);
    }

    .as-form-textarea,
    .as-form-input {
      font: 400 16px/1.5 'DM Sans', sans-serif;
      color: #0C0A3E;
      background: #ffffff;
      border: 1.5px solid rgba(12,10,62,0.15);
      padding: 16px 18px;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: vertical;
      outline: none;
      border-radius: 0;
      -webkit-appearance: none;
      appearance: none;
    }
    .as-form-textarea::placeholder,
    .as-form-input::placeholder {
      color: rgba(12,10,62,0.3);
    }
    .as-form-textarea:focus,
    .as-form-input:focus {
      border-color: #A89CED;
      box-shadow: 0 0 0 3px rgba(168,156,237,0.15);
    }

    .as-form-hint {
      font: 400 13px/1.5 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.4) !important;
      margin: 0 !important;
    }

    .as-form-submit {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      align-self: flex-start;
      background: #0C0A3E;
      color: #CCFF33 !important;
      font: 700 13px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border: 2px solid #0C0A3E;
      padding: 18px 32px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .as-form-submit:hover {
      background: #CCFF33;
      color: #0C0A3E;
      border-color: #CCFF33 !important;
    }
    .as-form-arrow {
      font-size: 18px;
      transition: transform 0.2s;
    }
    .as-form-submit:hover .as-form-arrow {
      transform: translateX(4px);
    }

    /* Two-column row for name + email */
    .as-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 600px) {
      .as-form-row { grid-template-columns: 1fr; }
    }

    /* Checkboxes */
    .as-form-checks {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .as-form-check {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
    }
    .as-check-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .as-check-box {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(12,10,62,0.25);
      background: #fff;
      margin-top: 2px;
      transition: border-color 0.2s, background 0.2s;
      position: relative;
    }
    .as-check-input:checked + .as-check-box {
      background: #0C0A3E;
      border-color: #0C0A3E;
    }
    .as-check-input:checked + .as-check-box::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 1px;
      width: 6px;
      height: 10px;
      border: 2px solid #CCFF33;
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
    }
    .as-check-label {
      font: 400 14px/1.5 'DM Sans', sans-serif;
      color: rgba(12,10,62,0.7);
    }

    .as-form-note {
      font: 400 13px/1.5 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.45) !important;
      margin: 0 !important;
    }
    .as-form-link {
      color: #A89CED !important;
      text-decoration: underline !important;
      text-underline-offset: 2px;
    }
    .as-form-link:hover {
      color: #0C0A3E !important;
    }

    /* ── NAVIGATION SECTION ───────────────────────────── */
    .as-nav-heading {
      font: 700 12px/1 'DM Sans', sans-serif !important;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(238,235,211,0.35) !important;
      margin: 0 0 32px;
    }

    .as-nav-links {
      display: flex;
      gap: 3px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .as-nav-link {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: rgba(238,235,211,0.05);
      border: 1px solid rgba(238,235,211,0.08);
      padding: 28px 32px;
      text-decoration: none !important;
      color: #EEEBD3 !important;
      min-width: 240px;
      flex: 1;
      max-width: 340px;
      transition: background 0.2s, border-color 0.2s;
    }
    .as-nav-link:hover {
      background: rgba(204,255,51,0.06);
      border-color: rgba(204,255,51,0.25);
    }
    .as-nav-link-label {
      font: 700 18px/1.1 'DM Sans', sans-serif;
      color: #EEEBD3;
    }
    .as-nav-link-desc {
      font: 400 13px/1.4 'DM Sans', sans-serif;
      color: rgba(238,235,211,0.4);
    }
    .as-nav-arrow {
      font-size: 20px;
      color: #CCFF33 !important;
      margin-top: 8px;
    }

    /* ── CTA ──────────────────────────────────────────── */
    .as-cta {
      background: #0C0A3E;
      padding: 80px 24px;
    }
    .as-cta-heading {
      font: 800 clamp(32px, 5vw, 44px)/0.9 'DM Sans', sans-serif !important;
      color: #CCFF33 !important;
      letter-spacing: -0.04em !important;
      margin: 0 0 16px;
    }
    .as-cta-body {
      font: 400 17px/1.5 'DM Sans', sans-serif !important;
      color: rgba(238,235,211,0.55) !important;
      max-width: 440px;
      margin: 0 auto 32px !important;
    }

    .as-btn-primary {
      display: inline-block;
      background: #CCFF33;
      color: #0C0A3E !important;
      font: 700 13px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 18px 40px;
      text-decoration: none !important;
      transition: background 0.2s, color 0.2s;
    }
    .as-btn-primary:hover {
      background: #ffffff;
      color: #0C0A3E !important;
    }

    /* ── MORE VOICES GRID ─────────────────────────────── */
    .as-voices-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .as-voice {
      background: #ffffff;
      padding: 32px 28px;
      border-left: 3px solid #A89CED;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .as-voice:nth-child(3n+2) { border-left-color: #CCFF33 !important; }
    .as-voice:nth-child(3n+3) { border-left-color: #0C0A3E; }
    .as-voice-quote {
      font: 400 16px/1.65 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.75) !important;
      margin: 0 !important;
      font-style: italic;
      flex: 1;
    }
    .as-voice-tag {
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(12,10,62,0.35);
      margin-top: auto;
    }

    /* ── RESPONSIVE ───────────────────────────────────── */
    @media (max-width: 900px) {
      .as-framing {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .as-framing-pull {
        position: static;
      }
      .as-voices-grid {
        grid-template-columns: 1fr 1fr;
      }
      .as-stories-grid {
        grid-template-columns: 1fr;
      }
      .as-story--two {
        grid-column: 1;
        grid-row: auto;
      }
      .as-story--four {
        grid-column: 1;
        grid-template-columns: 1fr;
      }
      .as-story--four .as-story-number {
        grid-column: 1;
        display: none;
      }
      .as-story--four .as-story-body,
      .as-story--four .as-story-footer {
        grid-column: 1;
      }
      .as-share-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .as-nav-links {
        flex-direction: column;
        align-items: stretch;
      }
      .as-nav-link {
        max-width: 100%;
      }
    }

    @media (max-width: 600px) {
      .as-hero {
        padding: 60px 24px 0;
      }
      .as-story {
        padding: 32px 24px;
      }
      .as-story--four {
        padding: 32px 24px;
      }
      .as-solidarity {
        padding: 40px 24px;
      }
      .as-voices-grid {
        grid-template-columns: 1fr;
      }
    }