/* ============================================================
   mobile-journal.css
   
   Mobile-only redesign for journal.html.
   Three changes:
     A) Hide standalone .j-follow section (its content has been
        merged into each .j-piece by mobile-journal.js)
     B) Slim article cards — cap decorative ornament, inline
        metadata, tighten typography
     C) Compress hero — shrink Roman numeral, constrain
        atmosphere overlays, tighter cover layout
   ============================================================ */

@media (max-width: 640px) {

  /* ============================================================
     (C) COMPRESSED HERO
     Desktop: cover-inner is 1,212px with a giant Nº 00 Roman.
     Mobile: shrink the Roman, tighten spacing, constrain the
     decorative atmosphere overlays so they don't expand scroll.
     Target: ≤ 700px.
     ============================================================ */

  html body .j-hero {
    min-height: auto !important;
    padding-top: 128px !important;    /* topnav (73) + breathing room so masthead doesn't sit pinned beneath it */
    padding-bottom: 56px !important;
    padding-left: 24px !important;     /* keep content off the screen edge */
    padding-right: 24px !important;
  }
  /* Decorative atmosphere overlays — constrain to viewport so
     they don't lengthen the document. Pointer-events already
     none, just lock the box. */
  html body .j-hero .page-header-halo,
  html body .j-hero .page-header-flash,
  html body .j-hero .page-header-sparks {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  html body .j-cover-inner {
    padding: 0 !important;
    gap: 32px !important;
  }

  /* Masthead row — thinner, tighter */
  html body .j-cover-mast {
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  /* "The Journal" wordmark */
  html body .j-cover-wordmark {
    margin-bottom: 20px !important;
    gap: 10px !important;
  }
  html body .j-cover-the {
    font-size: 18px !important;
  }
  html body .j-cover-name {
    font-size: 48px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
  }

  /* Issue block — Nº 00 inline beside the metadata, not stacked */
  html body .j-cover-issue {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 8px !important;
  }
  html body .j-cover-issue-roman {
    font-size: 56px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
  }
  html body .j-cover-issue-meta {
    text-align: left !important;
  }
  html body .j-cover-issue-lbl {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
    margin-bottom: 4px !important;
  }
  html body .j-cover-issue-date,
  html body .j-cover-issue-vol {
    font-size: 13px !important;
  }

  /* Cover art — modest size on mobile */
  html body .j-cover-art {
    max-width: 220px !important;
    margin: 12px auto 0 !important;
  }


  /* ============================================================
     (B) SLIM ARTICLE CARDS
     Desktop: 576-777px per card with a 168px decorative SVG
     ornament and lots of typographic breathing room.
     Mobile: cap ornament at 64px, tighten typography, inline
     metadata. Target: 320-400px per card.
     ============================================================ */

  /* j-first-section — tighter container */
  html body .j-first-section {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
  html body .j-first-grid {
    gap: 22px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Each piece — tighter, lower min-height */
  html body .j-piece {
    padding: 16px 18px 20px !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    /* Stack contents tightly */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* Decorative ornament — cap height. The SVG viewBox is
     "0 0 600 168" so it'd render ~96px tall at full width
     normally; pin to 56px and scale the inner SVG to match. */
  html body .j-piece-ornament {
    height: 56px !important;
    max-height: 56px !important;
    overflow: hidden !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    position: relative !important;
    border-radius: 4px !important;
  }
  html body .j-piece-ornament svg {
    width: 100% !important;
    height: 56px !important;
    display: block !important;
  }
  /* The "data-pl" badge that floats on the ornament — shrink */
  html body .j-piece-ornament::before,
  html body .j-piece-ornament::after {
    transform: scale(0.85) !important;
    transform-origin: top right !important;
  }

  /* Eyebrow + "Coming soon" — combine into one tight row */
  html body .j-piece-eyebrow,
  html body .j-piece-tag {
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.26em !important;
  }
  html body .j-piece-stamp {
    display: inline-block !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    padding: 2px 8px !important;
    margin-left: 0 !important;
    border-radius: 999px !important;
  }

  /* Title — sized so 2 lines fit a typical headline */
  html body .j-piece h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
    margin: 4px 0 !important;
    letter-spacing: -0.01em !important;
  }

  /* "With X" attribution block — single row */
  html body .j-piece-who {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-top: 1px dotted rgba(40, 28, 12, 0.18) !important;
    border-bottom: 1px dotted rgba(40, 28, 12, 0.18) !important;
    margin: 2px 0 6px !important;
  }
  html body .j-piece-who-mark {
    font-size: 16px !important;
    color: var(--filament-d, #8a6620) !important;
    line-height: 1 !important;
  }
  html body .j-piece-who-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  html body .j-piece-who-lbl {
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(40, 28, 12, 0.55) !important;
    line-height: 1.3 !important;
  }
  html body .j-piece-who-name {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  html body .j-piece-who-role {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(40, 28, 12, 0.6) !important;
    margin-top: 2px !important;
  }

  /* Description — readable but smaller */
  html body .j-piece-desc {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 4px 0 !important;
    color: rgba(40, 28, 12, 0.78) !important;
  }

  /* Foot meta — single mono line */
  html body .j-piece-foot {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    margin: 6px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(40, 28, 12, 0.12) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    color: rgba(40, 28, 12, 0.55) !important;
  }


  /* ============================================================
     (A) SUBSCRIBE CHIPS — merged in from .j-follow-col
     The JS pulls .j-follow-chips out of each follow column and
     appends it as .j-piece-subscribe inside the matching piece.
     ============================================================ */

  /* Hide the original Follow-along section entirely */
  html body .j-follow {
    display: none !important;
  }

  /* Style the merged subscribe block at the foot of each piece */
  .j-piece-subscribe {
    margin: 12px -2px 0;
    padding: 14px 0 0;
    border-top: 1px dashed rgba(182, 138, 62, 0.35);
  }
  .j-piece-subscribe-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(40, 28, 12, 0.55);
    margin-bottom: 10px;
  }
  /* The chips themselves — keep the existing layout but make
     it a tight row, 3-up */
  html body .j-piece-subscribe .j-follow-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body .j-piece-subscribe .j-follow-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 10px 8px !important;
    background: rgba(255, 247, 222, 0.5) !important;
    border: 1px solid rgba(40, 28, 12, 0.14) !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    min-height: 0 !important;
  }
  html body .j-piece-subscribe .j-follow-chip .jfc-glyph {
    width: 18px !important;
    height: 18px !important;
  }
  html body .j-piece-subscribe .j-follow-chip .jfc-glyph svg {
    width: 100% !important;
    height: 100% !important;
  }
  html body .j-piece-subscribe .j-follow-chip-body,
  html body .j-piece-subscribe .j-follow-chip .body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  html body .j-piece-subscribe .j-follow-chip-name,
  html body .j-piece-subscribe .j-follow-chip strong {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: rgba(40, 28, 12, 0.92) !important;
    font-weight: 500 !important;
  }
  html body .j-piece-subscribe .j-follow-chip-sub,
  html body .j-piece-subscribe .j-follow-chip em {
    font-family: 'JetBrains Mono', monospace !important;
    font-style: normal !important;
    font-size: 8.5px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(40, 28, 12, 0.5) !important;
    margin-top: 2px !important;
    font-weight: 400 !important;
  }


  /* ============================================================
     (D) JOURNAL SECTION HEAD — tighten
     The .j-section-head is 368px on mobile (eyebrow + giant
     italic h2 + meta). Bring it down.
     ============================================================ */
  html body .j-section-head {
    margin: 0 0 20px !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  html body .j-section-head h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.12 !important;
    margin: 8px 0 !important;
  }
  html body .j-section-head .eyebrow,
  html body .j-section-head [class*="-eyebrow"] {
    font-size: 9.5px !important;
    letter-spacing: 0.26em !important;
  }


  /* ============================================================
     (E) YEAR SECTION — slim the 3-step calendar
     Currently 249px per step. Bring to ~140-160.
     ============================================================ */
  html body .j-year-grid {
    gap: 14px !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body .j-year-step {
    padding: 16px 18px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 4px 16px !important;
    align-items: baseline !important;
    border-radius: 6px !important;
  }
  html body .j-year-step .j-year-when,
  html body .j-year-step [class*="-when"],
  html body .j-year-step time {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(40, 28, 12, 0.55) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body .j-year-step h3,
  html body .j-year-step .j-year-title {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html body .j-year-step p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 6px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(40, 28, 12, 0.72) !important;
  }

}