/* ============================================
   Google Fonts Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap');

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --primary-color: #9ABDDC;
  --bg-color: #fdfdfd;
  --dark-grey-color: rgb(128, 128, 128);
  --grey-color: #E2E2E2;
  --text-color: #1a1a1a;

  --body-font: Inter;
  /* Code blocks only. Not self-hosted: Berkeley Mono is commercially licensed,
     so readers get whichever of these they already have. To ship a webfont
     instead, put it in static/ (the only dir rheo.toml copies verbatim) and
     reference it as /static/fonts/<name>.woff2 with font-display: swap. */
  --mono-font: ui-monospace, "SF Mono", "Cascadia Mono", "Berkeley Mono", Menlo, Consolas, monospace;
  --font-size: 16pt;
  --line-height: 1.4;
  --small-font-size: 9pt;

  --blog-width: 36em;
}

/* ============================================
   Base Styles
   ============================================ */
body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-weight: 400;
  line-height: var(--line-height);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  overflow-x: hidden;
  color: var(--text-color);
}

.content {
  max-width: var(--blog-width);
  margin: 0 auto;
  padding: 50px 50px;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--body-font);
  font-weight: 700;
  margin: 1.5em 0 0.5em 0;
}

h1 {
  font-size: 1.5em;
  color: var(--primary-color);
}

h2 {
  text-align: left;
}

h2, h3, h4 {
  text-align: left;
  font-size: 1.2em;
  margin: 0;
}

h4 {
  font-size: 1em;
}

p {
  margin: 1em 0;
}

a {
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-color: var(--dark-grey-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s ease;
}

a:hover {
  text-decoration-thickness: 3px;
}

/* Long unbreakable tokens push the page wider than a narrow phone, because none
   of them offers a break opportunity: a bare URL in prose, an inline
   `[cite:@key]`, and rookery's own `[idea:<slug>]` permalink label. MEASURED at
   a 320px viewport: 18px of horizontal overflow, all three contributing. This
   only breaks a token that cannot otherwise fit, so wider screens are
   unaffected. */
a,
code,
.idea-label {
  overflow-wrap: break-word;
}

/* ============================================
   Lists
   ============================================ */
ul {
  list-style-type: circle;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

li {
  margin: 0.25em 0;
}

/* ============================================
   Images
   ============================================ */
img {
  max-width: 100%;
  height: auto;
}

.video-embed {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}

/* ============================================
   Code
   ============================================ */
pre {
  max-width: 100%;
  margin: 1em 0;
}

code {
  font-family: var(--mono-font);
  background-color: #f0f0f0;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre code {
  display: block;
  padding: 1em;
  background-color: #fff;
  border: 1px solid var(--grey-color);
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ============================================
   Blockquotes
   ============================================ */
blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 3px solid var(--grey-color);
  background-color: #fff;
}

/* ============================================
   Rookery
   ============================================ */

/* A post's title is rendered by its `#post` idea now, not by a
   `= #document.title` heading, so the `h1` treatment that used to carry the
   page title moves onto the idea that replaced it. `.idea-tag-post` is on the
   heading itself — rookery puts one class per tag on every element it names —
   which is what tells a post's own title apart from its sections'. */
.idea-tag-post .idea-title {
  font-size: 1.5em;
  color: var(--primary-color);
}

/* Every idea here is a post, so a `post` pill on all 43 rows says nothing and
   only dilutes the stream colour beside it. Hidden as a PILL only — the class
   stays on the heading and the box, where the rule above and `#window(tags:
   "post")` still rely on it. Delete this block to bring the pill back. */
span.idea-tag.idea-tag-post {
  display: none;
}

/* Search modal, themed blue. The properties hang on `.site-header`, not on the
   trigger: the trigger and its `<dialog>` are siblings, so they need a common
   ancestor. (Top-layer paint order does not affect inheritance.) */
.site-header {
  --rookery-search-fg: var(--text-color);
  --rookery-search-bg: var(--bg-color);
  --rookery-search-border: var(--primary-color);
  --rookery-search-hover: rgba(154, 189, 220, 0.16);
  --rookery-search-name-color: var(--dark-grey-color);
  --rookery-search-mark: rgba(154, 189, 220, 0.3);
  /* Neutral rather than the site's blue: a backdrop dims the whole page, and a
     blue dim would tint every colour the theme never touches. */
  --rookery-search-backdrop: rgba(0, 0, 0, 0.4);
}

/* `.subscribe-btn` is pinned to the right of the centered title, so the search
   trigger mirrors it on the left. Both are out of flow, which is what keeps
   `.site-title { flex: 1 }` centered on the header rather than on whatever
   space is left between two controls of unequal width. */
.rookery-search-trigger {
  position: absolute;
  left: 0;
  opacity: 0.4;
  color: inherit;
  transition: opacity 0.2s;
}

.rookery-search-trigger:hover {
  opacity: 1;
}

/* `.site-header` sets `font-variant: small-caps` for the wordmark, and
   `#search-modal` emits its `<dialog>` as a CHILD of that header — so the whole
   modal, results and all, inherited small-caps. Reset it on the dialog rather
   than on the header: the wordmark still wants it. (`.subscribe-dialog` carries
   its own `font-variant: normal` for exactly the same reason.) The trigger's
   `Ctrl K` hint is reset alongside it, being the one part outside the dialog. */
.rookery-search-modal,
.rookery-search-key {
  font-variant: normal;
}

.rookery-search-input {
  font-family: var(--body-font);
}

.rookery-search-id {
  font-family: var(--mono-font);
}

/* The package already asks for an undecorated result row, but from inside
   `@layer rookery-search` — and `a { text-decoration: underline }` above is
   unlayered, so it would win regardless of order. */
.rookery-search-row {
  text-decoration: none;
}

/* UPSTREAM BUG, @rookery/search:
   `renderRow` appends `.rookery-search-title` and `.rookery-search-id` as
   adjacent siblings with NO whitespace between them, and the id is
   `white-space: nowrap` — so a title's last word and the whole `[idea:<slug>]`
   are one unbreakable run. A bracketed slug never fits in what is left of the
   line, so the breaker falls back to the last opportunity it has, the space
   before the title's final word, and takes that word down with the id:
   `Jane Gallop: Reading` / `Lacan`, `Terry Eagleton: Why Marx Was` / `Right`,
   `Taming jagged intelligence with beads and` / `jj`. MEASURED at a 1280px
   viewport: `Amanda Holmes and Adrian Johnston` is 229px wide in a 329px row and
   still broke at 169px.

   A generated space is the break opportunity the markup is missing. It is NOT
   `overflow-wrap` — forcing `overflow-wrap: normal` on the row changes nothing —
   and not this site's doing either: the row breaks the same way with this whole
   stylesheet disabled. Upstream will use `<wbr>` instead, which adds no advance
   width where this adds a word space on a row whose id shares the title's line;
   drop this rule when that version lands. */
.rookery-search-title::after {
  content: " ";
}

/* UPSTREAM BUG, still present in @rookery/core (re-checked: all 43 built
   pages carry one, every one empty): with a bibliography configured, every page
   gets a page-level references block whether or not it cites anything outside
   an idea. Drop the empty ones; a page that really does cite outside an idea
   still shows its references, the list not being empty then. */
.idea-page-refs:has(ul:empty) {
  display: none;
}

/* ============================================
   Footnotes
   ============================================ */
[role="doc-endnotes"] {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid var(--grey-color);
  font-size: 0.9em;
}

[role="doc-endnotes"] ol {
  padding-left: 1.5em;
}

a[role="doc-backlink"] {
  margin-right: 0.2em;
}

.site-header {
  padding: .4rem 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--grey-color);
  font-family: var(--body-font);
  font-variant: small-caps;
  font-size: 0.9em;
  position: sticky;
  top: 0;
  background-color: var(--bg-color);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header h2 {
  margin: 0.5em;
}

.site-title h2 {
  text-align: center;
}

.site-header a {
  color: black;
}

.site-title {
  flex: 1;
  text-align: center;
}

/* The modal itself comes from @rheo/feeds (`feeds-modal`), which ships its own
   layered defaults. Only what is specific to THIS header stays here: the
   trigger's placement and small-caps, and the dialog's colours, handed over as
   the package's `--feeds-modal-*` custom properties. Unlayered, so these beat
   the package's `@layer feeds-modal` without `!important`. */
.subscribe-btn {
  position: absolute;
  right: 0;
  font-variant: small-caps;
  gap: 0.35em;
  opacity: 0.4;
}

.subscribe-dialog {
  --feeds-modal-font: var(--body-font);
  --feeds-modal-fg: var(--text-color);
  --feeds-modal-muted: var(--dark-grey-color);
  --feeds-modal-border: var(--grey-color);
  --feeds-modal-accent: var(--primary-color);
  --feeds-modal-hover: rgba(154, 189, 220, 0.1);
  --feeds-modal-small: var(--small-font-size);
  background: var(--bg-color);
}

.site-footer {
  margin-top: 3rem;
  padding: .5rem 0;
  border-top: 2px solid var(--grey-color);
  text-align: center;
  width: 100%;
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  margin-bottom: 2rem;
}

.site-footer p {
  margin: 0;
  margin-bottom: 0.2em;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  display: inline-block;
  margin: 0 1rem;
}



/* ============================================
   Mobile Styles
   ============================================ */
@media (max-width: 600px) {
  body {
    font-size: 14pt;
  }

  /* No justified text on mobile. index.js tags the content container with
     `.rheo-kp-skip` so the KP client leaves paragraphs alone (natural wrapping).
     This `!important` is the no-JS fallback: it beats the package's
     `.rheo-kp { text-align: justify }` (which loads after this stylesheet). */
  .rheo-kp {
    text-align: left !important;
  }

  .content {
    padding: 12px;
  }

  /* rookery lays a window row out as one non-wrapping flex line — rule, title,
     tag pills, date — which overflows a phone. MEASURED at a 375px viewport:
     84px of horizontal overflow, 31px of it from long titles alone and the rest
     added by the stream pills. Letting the line wrap takes it to 0 and keeps the
     pills, where hiding them would only have recovered the 53px they cost. */
  .idea-tab {
    flex-wrap: wrap;
  }

  /* rookery keeps a permalink id on one line (`white-space: nowrap`), which is
     right on a desktop and impossible on a phone: this site's longest slug,
     `[idea:zizek-sublime-object-of-ideology-chapter-1-part-1]`, is 311px inside
     a 305px row. Ellipsis does not help — the label is already on its own
     wrapped line and simply too wide — so let it break. MEASURED: the last 18px
     of overflow at 320px, gone.

     `.idea-tab .idea-label`, not `.idea-label`: this stylesheet is linked BEFORE
     `core.css`, so at equal specificity the package's `nowrap` wins on source
     order. The descendant selector outranks it. Same trap as the `!important`
     on `.rheo-kp` below. */
  .idea-tab .idea-label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* The search trigger keeps its icon but drops the `Ctrl K` hint: there is no
     physical keyboard to press it on, and the label collides with the centered
     site title once the header is this tight. @rheo/feeds hides the subscribe
     button's own label at this breakpoint, for the same reason. */
  .rookery-search-key {
    display: none;
  }

}