/* Towards Life — site-wide unification rules.
 *
 * Every page is an independent Framer export and its class names are per-build
 * hashes, so there is nothing stable to hang a rule on. js/tl-site.js tags the
 * few things that need to look the same everywhere; this file is what those
 * tags mean. Keeping it CSS-only matters: Framer's runtime re-renders its own
 * subtrees after hydration and throws away DOM edits, but never touches
 * stylesheets.
 *
 * Breakpoint 1199.98px is Framer's own phone/tablet cutoff, reused here so
 * these rules switch at the same width the export does.
 */

/* Framer writes font-size and text-alignment into the element's own style
   attribute AND ships !important rules of its own at two-class specificity
   (.framer-hash .framer-text). So these overrides need both !important and
   enough specificity to outrank that, which is what the repeated class does —
   .tl-caption.tl-caption.tl-caption is one element, counted three times.
   It stays deliberately scoped to the tagged elements: an earlier unscoped
   !important in this repo ended up fighting the real responsive CSS. */

/* ---------------------------------------------------------------- captions */
/* Image credits were a mix of 13px/16px/18.4px and left/center/right across
   pages. One size, one alignment, everywhere. */
.tl-caption.tl-caption.tl-caption,
.tl-caption.tl-caption.tl-caption *,
.tl-hero-credit.tl-hero-credit.tl-hero-credit {
  --framer-text-alignment: left !important;
  text-align: left !important;
}

.tl-caption.tl-caption.tl-caption,
.tl-caption.tl-caption.tl-caption *:not(a),
.tl-hero-credit.tl-hero-credit.tl-hero-credit {
  --framer-font-size: 16px !important;
  font-size: 16px !important;
}

@media (max-width: 1199.98px) {
  .tl-caption.tl-caption.tl-caption,
  .tl-caption.tl-caption.tl-caption *:not(a),
  .tl-hero-credit.tl-hero-credit.tl-hero-credit {
    --framer-font-size: 13px !important;
    font-size: 13px !important;
  }
}

/* -------------------------------------------------------------- footnotes */
/* Authored at 17px, i.e. larger than the 16px body it annotates. */
.tl-footnote.tl-footnote.tl-footnote,
.tl-footnote.tl-footnote.tl-footnote *:not(a) {
  --framer-font-size: 14px !important;
  font-size: 14px !important;
}

@media (max-width: 1199.98px) {
  .tl-footnote.tl-footnote.tl-footnote,
  .tl-footnote.tl-footnote.tl-footnote *:not(a) {
    --framer-font-size: 13px !important;
    font-size: 13px !important;
  }
}

/* ------------------------------------------------------------- pull-quotes */
/* 25px is fine in a 1380px column and far too loud in a 360px one; desktop is
   deliberately left alone. */
@media (max-width: 1199.98px) {
  .tl-pullquote.tl-pullquote.tl-pullquote,
  .tl-pullquote.tl-pullquote.tl-pullquote * {
    --framer-font-size: 20px !important;
    font-size: 20px !important;
    line-height: 1.35;
  }
}

/* ------------------------------------------------------ paragraph rhythm */
/* Spacing on these pages comes from three competing sources: margins on the
   paragraphs, row-gap on the containers holding them, and vertical padding on
   the containers holding those. Any of the three can be zero or large on any
   given page, which is why the same document reads squeezed in one place and
   gappy in another.
   So all three are set here rather than patched where they look wrong:

     paragraph to paragraph ...... PARA (16px), from the paragraph's own margin
     container to container ...... PARA, by making the gap match
     section to section .......... SECTION (32px), on outermost text blocks only

   The first attempt at this zeroed the section padding too, which is what
   pulled body text up against the hero images — nested blocks must collapse to
   zero, but the outermost one has to keep real separation. */

/* The paragraph's own margin is the ONLY thing that spaces one paragraph from
   the next. Containers contribute zero below, so it does not matter whether two
   paragraphs are siblings, cousins, or three containers apart — the reader sees
   the same 16px either way.
   There is deliberately no :last-child exception. That was tried and it is what
   produced 0px gaps in the reading lists, where every entry is a lone paragraph
   in its own container and so was always the last child. */
p.framer-text.framer-text.framer-text {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Tag pills are flex boxes with align-items:center holding a single paragraph.
   A bottom margin is part of what gets centred, so the 16px above pushed every
   tag's text to the top of its grey box. Body rhythm does not apply inside a
   pill — there is never a second paragraph to be spaced from. */
[data-framer-name="Tag"] p.framer-text.framer-text.framer-text,
[data-framer-name="Tags"] p.framer-text.framer-text.framer-text,
[data-framer-name="Additional Tags"] p.framer-text.framer-text.framer-text {
  margin-bottom: 0 !important;
}

/* Authored blank lines. A trailing <br> adds an empty line box on top of the
   margin, and some paragraphs contain nothing else at all. Hidden, not removed,
   so hydration has nothing to undo. */
p.framer-text > br:last-child {
  display: none;
}

p.framer-text:has(> br:only-child) {
  display: none;
}

/* Containers add nothing. With the paragraph margin above doing all the work,
   a container's own gap would stack on top of it and reintroduce the very
   inconsistency this is meant to remove. */
.tl-stack.tl-stack.tl-stack {
  row-gap: 0 !important;
}

/* Nested blocks contribute nothing either — this is what stops 30px of padding
   at two levels compounding into the 92px gap on mapping_the_magical. */
.tl-stack-inner.tl-stack-inner.tl-stack-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Only the outermost text block of a section adds space, and only above it.
   This is the gap between a hero image and the text beneath it (32px), and,
   added to the previous paragraph's own margin, between one section and the
   next (16 + 32 = 48px) — so a section break always reads as clearly larger
   than a paragraph break, on every page. */
.tl-stack-root.tl-stack-root.tl-stack-root {
  padding-top: 32px !important;
  padding-bottom: 0 !important;
}

/* ------------------------------------------------------------ audio blocks */
/* AUDIO_BLOCK_PAD_Y is deliberately larger than the 16px paragraph rhythm: the
   client asked for audio to stay visibly separated from the text. */
.tl-audio-block.tl-audio-block.tl-audio-block {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  /* griefandimagination's block is authored 256px wide where every other page
     gives it the full column, so the block is stretched too; the player's own
     max-width is what actually decides how wide it draws. */
  width: 100% !important;
  max-width: none !important;
}

.tl-audio-slot.tl-audio-slot.tl-audio-slot {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ------------------------------ griefandimagination: title sits too far down */
/* This page's main column is taller than its content and centres it vertically,
   so the free space splits above and below and drops the article title 42px
   below where the other eleven article pages put it (45px under the nav).
   Aligning to the top makes it match; the leftover space moves to the bottom of
   the column, where nothing is drawn. Class hash checked against all 17 pages —
   it exists only in griefandimagination.html. */
.framer-1wv7tay {
  justify-content: flex-start !important;
}

/* ------------------------------- radical-imagination: Watery Worlds section */
/* The sections above it are left-aligned; this one was authored centred, which
   is the mismatch the client marked. Both class hashes exist only in
   radical-imagination.html, checked across all 17 pages — if that page is ever
   re-exported from Framer these two names change and this rule goes quiet
   rather than misfiring somewhere else. */
.framer-12v3xw1 .framer-text,
.framer-19ejwg7 .framer-text {
  --framer-text-alignment: left !important;
  text-align: left !important;
}

/* -------------------------------------------- image-placeholder hatch */
.tl-no-hatch.tl-no-hatch.tl-no-hatch {
  background-image: none !important;
}

/* ------------------------------------------------- tactical lexicon entry 4 */
/* Entries 1-3 are <li> in an <ol>; this one was authored as a bare paragraph
   outside the list, so it lost both its number and the list indent. */
.tl-lex4.tl-lex4.tl-lex4 {
  padding-left: 20px !important;
  text-indent: -20px !important;
}

.tl-lex4.tl-lex4.tl-lex4 > strong::before {
  content: "4.";
  display: inline-block;
  width: 20px;
  text-indent: 0;
}