/* And the City - theme additions to the approved test pages' styles (shared/ratc.css, pages/*.css).
   Only what the real site needs that the test pages did not: old posts' own styling on the dark reading page,
   stories without receipts, WordPress blocks, real thumbnails, the footer without the hour dial. */

/* ---------- Typed-in colours inside posts (stage 4, session 1 inventory: 47 posts) ----------
   The old posts carry colours chosen for a white page (#700404, #623657, greys). On the near-black reading page
   they would vanish, so the text takes the reading colour. Typed-in backgrounds become a night-plum box. */
.essay [style*="color"]:not([style*="background-image"]),
.essay font[color],
.essay .has-text-color,
.essay [class*="-color"]:not([class*="background"]):not(.has-background) {
  color: inherit !important;
}
.essay [style*="background-color"],
.essay [style*="background:"],
.essay .has-background {
  background: var(--night-plum) !important;
  color: var(--cream) !important;
}
.essay [style*="border-color"], .essay [style*="border:"], .essay [style*="border-left"] { border-color: var(--dusk-violet) !important; }
.essay mark { background: rgb(217 140 66 / .25); color: inherit; }

/* ---------- WordPress blocks and pasted HTML inside the reading column ---------- */
.essay h2, .essay h3, .essay h4 { color: var(--bone); margin: 1.8em 0 .6em; text-wrap: balance; }
.essay h2 { font: 400 var(--fs-h2)/1.05 var(--font-display); }
.essay h3 { font: 700 var(--fs-h3)/1.25 var(--font-body); }
.essay h4 { font: 700 1.125rem/1.3 var(--font-body); }
.essay ul, .essay ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.essay li { margin: 0 0 .45em; }
.essay blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--mustard); font-style: italic; }
.essay img { max-width: 100%; height: auto; }
.essay figure:not(.essay__fig) { margin: 2em 0; max-width: 100%; }
.essay figure:not(.essay__fig) img { border-radius: var(--radius-img); }
.essay figcaption, .essay .wp-element-caption { margin-top: 10px; font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--cream); }
.essay table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 1rem; }
.essay th, .essay td { border: 1px solid var(--dusk-violet); padding: 8px 10px; text-align: left; vertical-align: top; }
.essay th { color: var(--bone); }
.essay .wp-block-table { overflow-x: auto; }
.essay iframe, .essay video, .essay embed { max-width: 100%; }
.essay .wp-block-embed__wrapper iframe { width: 100%; }
.essay hr:not(.essay__rule) { border: 0; border-top: 2px solid var(--dusk-violet); margin: 2.4em 0; }
.essay .wp-block-button__link { display: inline-block; padding: 10px 22px; border: 2px solid var(--bone); border-radius: 24px; color: var(--cream) !important; text-decoration: none; }
.essay pre, .essay code { font-family: var(--font-mono); font-size: .9em; }
.essay pre { overflow-x: auto; padding: 14px; background: var(--ground-black); }

/* ---------- Stories without receipts: the reading column sits in the middle at every width ----------
   (the left-set column and the evidence column are for receipts; today only Act IX has them) */
@media (min-width: 1280px) {
  .js .story--plain .essay,
  .js .story--plain .sources__inner,
  .js .story--plain .tipline__inner {
    margin-inline: auto;
    width: min(100% - 2 * var(--gutter) - var(--thread-room), 66ch);
  }
  .js .story--plain .story__body { background: var(--ink-plum); }
  .js .story--plain .story__body.edge-torn::after {
    background-color: var(--ink-plum);
    background-image: url("assets/texture/grain-256.webp");
    background-size: 256px 256px;
    background-blend-mode: overlay;
  }
  .js .story--plain .story__body::before { content: none; }
}

/* ---------- Title card without a picture ---------- */
.title-card--noart .title-card__grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Latest: each row's picture is the post's own thumbnail ---------- */
.lt-row__pic--own, .tp-row__pic--own, .se-post__pic--own { background-size: cover !important; background-position: 50% 50% !important; }

/* ---------- Footer: the hour dial is gone, Still stays in its column ---------- */
.site-footer__still { justify-content: flex-start; }

/* ---------- Never scroll sideways (ratc.css clips html and body; a plugin's stylesheet on the real site resets
   body to auto, which let one page move 8px sideways on the copy) ---------- */
html body.atc { overflow-x: clip; }

/* ---------- Contact: the real Jetpack form, in the approved test page's look (pages/contact.css .ct-field) ---------- */
.ct-form--wp .contact-form { display: grid; gap: 20px; max-width: 34rem; margin: 0; }
.ct-form--wp .grunion-field-wrap { display: grid; gap: 8px; margin: 0; width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }
.ct-form--wp .grunion-field-label { margin: 0; font: 600 var(--fs-label)/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
/* the approved form has no "(required)" after each label; it stays for screen readers (and the fields are marked required) */
.ct-form--wp .grunion-label-required { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct-form--wp input.grunion-field, .ct-form--wp textarea.grunion-field {
  width: 100% !important; max-width: none !important; min-height: 52px; padding: 10px 14px; margin: 0;
  background: var(--ground-black); color: var(--cream);
  border: 2px solid var(--bone); border-radius: 0; box-shadow: none;
  font: 400 1.25rem/1.35 var(--font-body);
}
.ct-form--wp textarea.grunion-field { min-height: 9.5em; resize: vertical; }
.ct-form--wp .grunion-field:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; border-color: var(--mustard); }
.ct-form--wp .contact-submit { margin: 4px 0 0; }
.ct-form--wp .contact-submit button, .ct-form--wp .pushbutton-wide {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 9em; padding: 0 24px;
  background: var(--mustard); color: var(--ink-plum); border: 2px solid var(--mustard); border-radius: 24px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.ct-form--wp .contact-submit button:hover { background: var(--bone); border-color: var(--bone); }
.ct-form--wp .contact-form__error, .ct-form--wp .contact-form__input-error { color: var(--cream); }
.ct-form--wp .contact-form-submission { color: var(--cream); }
.ct-show__name a { color: inherit; }

/* ---------- Title pictures: every essay's picture is 3:2 (Rachel, 10 Oct 2026); special editions such as
   The Receipts keep their wide artwork (the approved 16:9 frame) ---------- */
.story:not(.story--series) .title-card__art img { aspect-ratio: 3 / 2; }

/* ---------- Latest: the pixel band at the top of the list covered "Open every month" on a computer
   (found by Rachel, 10 Oct 2026; the test page had it too). The bar now sits below the band. ---------- */
@media (min-width: 900px) {
  .lt-list__bar { position: relative; z-index: 2; margin-top: 28px; }
}

/* ---------- Latest: Find a title sits up beside the heading, in the empty space on the right
   (Rachel, 10 Oct 2026, "move the search"); on a phone it stays full width under the heading ---------- */
.lt-open__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.lt-open__top .lt-find { flex: 0 1 360px; }
@media (max-width: 899px) {
  .lt-open__top .lt-find { flex: 1 1 100%; }
}

/* ---------- Latest: the room buttons in two rows, rooms first, then the GriftMatrix and its sections ---------- */
.lt-tools { display: block; }
.lt-rooms { display: grid; gap: 10px; min-width: 0; }
/* the GriftMatrix sections: smaller, one line on a wide screen (Rachel, 10 Oct 2026). Their lettering is 11px,
   under the 14px the design used as its smallest. */
/* every button always on the page: both rows wrap onto more lines at any width, phone included
   (Rachel, 10 Oct 2026; the approved test page slid them sideways on a phone) */
.lt-rooms .lt-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
.lt-rooms .lt-chips.lt-chips--gm { gap: 5px; }
.lt-chip--sm { flex: none; }
.lt-chip--sm { min-height: 24px; padding: 0 7px; border-width: 1.5px; font-size: .6875rem; letter-spacing: .02em; }