/* =====================================================================
   Concrete — design system over Dawn
   Loaded after built/screen.css, so it wins on equal specificity.

   Dawn carries TWO variable families and both must be set:
     --*-color    Dawn's own          (--white-color)
     --color-*    shared-theme-assets (--color-white)
   The header, buttons and Koenig cards read the second. Setting only one
   leaves half the site on the old palette.

   Dawn's root font-size is 62.5%, so 1rem = 10px.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  --concrete-surface-100: #efede8;
  --concrete-surface-200: #f7f6f2;
  --concrete-ink:         #1b1a17;
  --concrete-body:        #45423b;
  --concrete-muted:       #5c574e;
  --concrete-accent:      #9a3f26;
  --concrete-on-accent:   #fff8f4;
  --concrete-rule:        #d6d1c5;
  --concrete-border:      #8a8172;

  --concrete-space-1:  4px;
  --concrete-space-2:  8px;
  --concrete-space-3:  12px;
  --concrete-space-4:  16px;
  --concrete-space-6:  24px;
  --concrete-space-8:  32px;
  --concrete-space-12: 48px;
  --concrete-space-16: 64px;

  --concrete-radius-sm: 2px;
  --concrete-radius-md: 3px;

  --primary-text-color:   var(--concrete-body);
  --secondary-text-color: var(--concrete-muted);
  --white-color:          var(--concrete-surface-100);
  --lighter-gray-color:   var(--concrete-surface-200);
  --light-gray-color:     var(--concrete-rule);
  --mid-gray-color:       var(--concrete-border);
  --dark-gray-color:      var(--concrete-body);
  --darker-gray-color:    var(--concrete-ink);

  --color-primary-text:   var(--concrete-body);
  --color-secondary-text: var(--concrete-muted);
  --color-white:          var(--concrete-surface-100);
  --color-lighter-gray:   var(--concrete-surface-200);
  --color-light-gray:     var(--concrete-rule);
  --color-mid-gray:       var(--concrete-border);
  --color-dark-gray:      var(--concrete-body);
  --color-darker-gray:    var(--concrete-ink);

  --ghost-accent-color: var(--concrete-accent);
  --brand-color:        var(--concrete-accent);

  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gh-font-heading: var(--font-serif);
  --gh-font-body:    var(--font-sans);

  --content-font-size: 1.8rem;
  --h1-size:           4.2rem;
  --content-width:     680px;
  --gap:               var(--concrete-space-16);
}

@media (max-width: 767px) {
  :root {
    --h1-size: 2.8rem !important;
    --gap: var(--concrete-space-8);
  }
}

/* ------------------------------------------------------------ 2. Dark theme
   Dawn exposes dark twice: an explicit .theme-dark class, and a
   prefers-color-scheme block guarded by html:not(.theme-light). Both need
   the same values or one of the two modes stays on Dawn's defaults.        */

.theme-dark:root,
.theme-dark {
  --concrete-surface-100: #1a1916;
  --concrete-surface-200: #24221e;
  --concrete-ink:         #edeae2;
  --concrete-body:        #c9c3b6;
  --concrete-muted:       #9a9387;
  --concrete-accent:      #d9714f;
  --concrete-on-accent:   #1a1916;
  --concrete-rule:        #332f29;
  --concrete-border:      #756e61;

  --primary-text-color: var(--concrete-body);
  --secondary-text-color: var(--concrete-muted);
  --white-color: var(--concrete-surface-100);
  --lighter-gray-color: var(--concrete-surface-200);
  --light-gray-color: var(--concrete-rule);
  --mid-gray-color: var(--concrete-border);
  --dark-gray-color: var(--concrete-body);
  --darker-gray-color: var(--concrete-ink);
  --color-primary-text: var(--concrete-body);
  --color-secondary-text: var(--concrete-muted);
  --color-white: var(--concrete-surface-100);
  --color-lighter-gray: var(--concrete-surface-200);
  --color-light-gray: var(--concrete-rule);
  --color-mid-gray: var(--concrete-border);
  --color-dark-gray: var(--concrete-body);
  --color-darker-gray: var(--concrete-ink);
  --ghost-accent-color: var(--concrete-accent);
  --brand-color: var(--concrete-accent);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light):root,
  html:not(.theme-light) {
    --concrete-surface-100: #1a1916;
    --concrete-surface-200: #24221e;
    --concrete-ink:         #edeae2;
    --concrete-body:        #c9c3b6;
    --concrete-muted:       #9a9387;
    --concrete-accent:      #d9714f;
    --concrete-on-accent:   #1a1916;
    --concrete-rule:        #332f29;
    --concrete-border:      #756e61;

    --primary-text-color: var(--concrete-body);
    --secondary-text-color: var(--concrete-muted);
    --white-color: var(--concrete-surface-100);
    --lighter-gray-color: var(--concrete-surface-200);
    --light-gray-color: var(--concrete-rule);
    --mid-gray-color: var(--concrete-border);
    --dark-gray-color: var(--concrete-body);
    --darker-gray-color: var(--concrete-ink);
    --color-primary-text: var(--concrete-body);
    --color-secondary-text: var(--concrete-muted);
    --color-white: var(--concrete-surface-100);
    --color-lighter-gray: var(--concrete-surface-200);
    --color-light-gray: var(--concrete-rule);
    --color-mid-gray: var(--concrete-border);
    --color-dark-gray: var(--concrete-body);
    --color-darker-gray: var(--concrete-ink);
    --ghost-accent-color: var(--concrete-accent);
    --brand-color: var(--concrete-accent);
  }
}

/* --------------------------------------------------------------- 3. Utility */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- 4. Wordmark
   With a logo image uploaded, the :has() guard leaves it alone. Without one,
   Dawn prints the site title as text and this builds the Formwork mark.
   Right padding is 0.16em short of the left, cancelling the trailing
   letter-space CSS adds after the final E.                                 */

.gh-head-logo img { max-height: 40px; width: auto; }

.gh-head-logo:not(:has(img)) {
  display: inline-block;
  padding: 8px 8px 6px 10px;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--concrete-ink);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 0;
}

@media (max-width: 991px) {
  #gh-head .gh-head-logo:not(:has(img)) { font-size: 1.3rem; }
}

.gh-head-logo:hover { opacity: 1; text-decoration: none; }

/* ---------------------------------------------------------------- 5. Header */

.gh-head { border-bottom: 1px solid var(--concrete-rule); }

.gh-head-menu,
.gh-head-actions {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 400;
}

.gh-head .nav a { color: var(--concrete-muted); }

.gh-head .nav li.nav-current a {
  color: var(--concrete-ink);
  border-bottom: 2px solid var(--concrete-accent);
  padding-bottom: var(--concrete-space-1);
}

/* --------------------------------------------------------------- 6. Buttons */

.gh-btn,
.gh-head-btn.gh-btn {
  min-height: 46px;
  padding: 0 var(--concrete-space-6);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--concrete-radius-sm);
  background-color: var(--concrete-ink);
  color: var(--concrete-surface-100);
}

.gh-primary-btn {
  background-color: var(--concrete-accent);
  color: var(--concrete-on-accent);
}

.gh-btn:hover { opacity: 1; text-decoration: underline; }

.button {
  min-height: 46px;
  height: auto;
  padding: 0 var(--concrete-space-6);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--concrete-ink);
  background-color: transparent;
  border: 1px solid var(--concrete-border);
  border-radius: var(--concrete-radius-sm);
}

.button:hover { border-color: var(--concrete-ink); opacity: 1; }

.members-subscribe,
.single-cta-button {
  color: var(--concrete-on-accent);
  background-color: var(--concrete-accent);
  border-color: var(--concrete-accent);
}

.members-subscribe:hover,
.single-cta-button:hover {
  border-color: var(--concrete-accent);
  text-decoration: underline;
}

.button-text,
.single-cta-footer {
  min-height: 44px;
  font-weight: 400;
  color: var(--concrete-accent);
}

/* ----------------------------------------------------------------- 7. Forms */

input,
textarea {
  min-height: 46px;
  height: auto;
  padding: 0 var(--concrete-space-4);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--concrete-ink);
  background-color: var(--concrete-surface-200);
  border: 1px solid var(--concrete-border);
  border-radius: var(--concrete-radius-sm);
}

textarea {
  padding-top: var(--concrete-space-4);
  padding-bottom: var(--concrete-space-4);
}

input::placeholder,
textarea::placeholder { color: var(--concrete-muted); }
input:focus, textarea:focus { border-color: var(--concrete-accent); }

label {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--concrete-ink);
}

.form-button {
  width: 44px;
  height: 44px;
  top: 1px;
  right: 1px;
  color: var(--concrete-on-accent);
  background-color: var(--concrete-accent);
  border-radius: 0 var(--concrete-radius-sm) var(--concrete-radius-sm) 0;
}

/* ------------------------------------------------------------- 8. Post list
   Dawn clips titles to one line with an ellipsis. These wrap instead: a
   truncated headline is one a reader cannot use. The date goes to muted
   because the accent is reserved for actions.                             */

.feed {
  align-items: flex-start;
  padding: var(--concrete-space-3) 0;
  line-height: inherit;
}

.feed + .feed { border-top: 1px solid var(--concrete-rule); }

/*
    Dawn sizes this column for "04 SEP" at min-width 45px. "04 SEP 26" needs
    more, and Dawn's own `white-space: nowrap` means a column that is too
    narrow pushes the title column rather than wrapping.
*/
.feed-calendar {
  min-width: 74px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--concrete-muted);
  text-transform: uppercase;
}

.feed-title {
  overflow: visible;
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--concrete-ink);
  text-overflow: clip;
  white-space: normal;
}

.feed-length,
.feed-icon { margin-top: 6px; color: var(--concrete-muted); }
.feed:hover .feed-title { opacity: 1; text-decoration: underline; }

/* Chapters in the mixed feed. Dawn prints {{post_class}} on .feed, so any
   post tagged expert-mode picks this up. The chapter NUMBER cannot come
   from CSS — put it in the post title. Suppressed on the serial's own
   index, where every row is a chapter and the kicker would just repeat. */
.feed.tag-expert-mode .feed-title::before {
  display: block;
  margin-bottom: var(--concrete-space-1);
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--concrete-accent);
  content: "EXPERT MODE";
}

.is-serial .feed.tag-expert-mode .feed-title::before { content: none; }

/* ----------------------------------------------------------- 9. Single post */

.single-header { text-align: left; }

.single-title {
  font-family: var(--font-serif);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.015em;
}

.single-excerpt {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.52;
  color: var(--concrete-body);
}

.single-meta {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--concrete-muted);
}

.single-meta-tag .post-tag { color: var(--concrete-accent); }

.gh-content { font-size: var(--content-font-size); line-height: 1.72; }
.gh-content a { color: var(--concrete-accent); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

blockquote:not([class]) {
  padding-left: var(--concrete-space-6);
  margin: var(--concrete-space-8) 0;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1.46;
  color: var(--concrete-ink);
  border-left: 3px solid var(--concrete-accent);
}

code, pre, .gh-content code {
  font-family: var(--font-mono);
  font-size: 1.3rem;
}

.single-cta {
  padding: var(--concrete-space-6);
  text-align: left;
  background-color: var(--concrete-surface-200);
  border: 1px solid var(--concrete-border);
  border-radius: var(--concrete-radius-md);
}

.single-cta-title {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 600;
  margin-bottom: var(--concrete-space-4) !important;
}

/* ========================================== 10. THE HOMEPAGE OPENING
   The publication states what it is, then the serial appears as the series
   currently running inside it. Scale carries that relationship: the site's
   own line is the largest thing on the page, and the serial's name is a
   section heading under it, not a masthead of its own.
   ========================================================================= */

.cover { border-bottom: 1px solid var(--concrete-rule); }

.cover-inner {
  padding-top: var(--concrete-space-12);
  padding-bottom: var(--concrete-space-12);
}

.site-statement {
  max-width: 19em;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.34;
  color: var(--concrete-ink);
  text-wrap: balance;
}

@media (max-width: 767px) {
  .site-statement { font-size: 2.6rem; }
  .cover-inner {
    padding-top: var(--concrete-space-8);
    padding-bottom: var(--concrete-space-8);
  }
}

/* The serial's band. A rule above it says "a section of this site"; without
   one the serial reads as the site's own front page. */
.em-band {
  padding-top: var(--concrete-space-8);
  margin-top: var(--concrete-space-12);
  border-top: 1px solid var(--concrete-rule);
}

/* The eyebrow. Used above the serial's name and above the post list, so
   both section openers read as the same kind of label. Keep them in one
   rule: two copies of the same intent drift apart. */
.em-kicker,
.feed-head-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--concrete-accent);
}

.em-title {
  margin: var(--concrete-space-2) 0 0;
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--concrete-ink);
}

.em-body {
  max-width: 34em;
  margin-top: var(--concrete-space-6);
}

.em-blurb {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--concrete-body);
}

.em-cadence {
  margin: var(--concrete-space-3) 0 0;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--concrete-muted);
}

.em-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--concrete-space-3);
  margin-top: var(--concrete-space-6);
}

.em-action {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--concrete-space-6);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--concrete-radius-sm);
}

.em-action-primary {
  color: var(--concrete-on-accent);
  background-color: var(--concrete-accent);
}

.em-action-secondary {
  color: var(--concrete-ink);
  border: 1px solid var(--concrete-border);
}

.em-action-primary:hover { opacity: 1; text-decoration: underline; }
.em-action-secondary:hover { opacity: 1; border-color: var(--concrete-ink); }

/* ------------------------------------------------------- 11. The strip map
   Built from elements, not one SVG: at full body width an SVG's circles
   would scale with the viewBox and inflate to the size of coins. Here the
   line stretches and the stops stay the size they were drawn.            */

.em-map {
  position: relative;
  height: 18px;
  max-width: 540px;
  margin-top: var(--concrete-space-4);
}

.em-map::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background-color: var(--concrete-ink);
  transform: translateY(-50%);
}

.em-stop {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  background-color: var(--concrete-surface-100);
  border: 3px solid var(--concrete-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Uneven on purpose. Evenly spaced stops read as a progress bar; a real
   line does not have them evenly spaced. The last stop sits short of the
   end so the line visibly runs on past it. */
.em-stop:nth-child(1) { left: 0.6%; }
.em-stop:nth-child(2) { left: 12%; }
.em-stop:nth-child(3) { left: 29%; }
.em-stop:nth-child(4) { left: 41%; }
.em-stop:nth-child(5) { left: 59%; }
.em-stop:nth-child(6) { left: 76%; }
.em-stop:nth-child(7) { left: 88%; }

.em-stop.is-here {
  width: 17px;
  height: 17px;
  background-color: var(--concrete-accent);
  border-color: var(--concrete-accent);
}

.strand-header .em-map { margin-top: var(--concrete-space-6); }

/* -------------------------------------------- 12. Body container and feed
   Dawn centres page content in .gh-canvas at the reading width, which puts
   it in the middle of a panel that runs the full body width — two left
   edges, slightly apart, which reads as a mistake rather than a choice.

   So the homepage and the serial's index share ONE container with the
   panel, and hold their text to a readable column inside it, left aligned.
   Post pages keep Dawn's centred .gh-canvas: a single article centred in
   the window is right, and it has no full-width element to line up with. */

.body-outer {
  padding-right: var(--gap);
  padding-left: var(--gap);
}

.body-inner {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  /* No top padding: Dawn's .site-content already gives this 6rem, and
     setting both doubles the gap under the panel. */
  padding-bottom: var(--concrete-space-8);
}

.col { max-width: 760px; }

.feed-head-title { margin-bottom: var(--concrete-space-2); }

.strand-empty {
  padding: var(--concrete-space-8) 0;
  font-size: 1.6rem;
  color: var(--concrete-muted);
}

/* ------------------------------------------------------------ 13. Signup */

.subscribe {
  padding-top: var(--concrete-space-8);
  margin-top: var(--concrete-space-12);
  border-top: 1px solid var(--concrete-rule);
}

.subscribe-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--concrete-ink);
}

.subscribe-blurb {
  max-width: 34em;
  margin: var(--concrete-space-2) 0 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--concrete-body);
}

.signup { margin-top: var(--concrete-space-6); }

.signup-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--concrete-space-6) var(--concrete-space-8);
  max-width: 700px;
  padding: 0;
  margin: 0 0 var(--concrete-space-6);
  border: 0;
}

@media (max-width: 600px) {
  .signup-picks { grid-template-columns: minmax(0, 1fr); }
}

/*
    Dawn's screen.css carries `label + label { margin-top: 2rem; }`. Inside this
    grid that pushed the second checkbox 20px below the first, and stretched the
    first label's box to match the row. The two blocks only ever looked
    horizontally misaligned; the offset was vertical. Keep this reset.
*/
.signup-pick {
  display: flex;
  gap: var(--concrete-space-3);
  align-items: flex-start;
  margin-top: 0;
  font-weight: 400;
  cursor: pointer;
}

/*
    Dawn's screen.css styles every input for text entry: `input, textarea`
    carries `appearance: none` along with a border, a background and a 44px
    height, and this stylesheet repeated that rule. On a checkbox,
    `appearance: none` removes the control the browser draws, so a ticked box
    renders as an empty square and no stylesheet here supplies a replacement
    tick. The boxes were checked the whole time and could not be seen to be.

    Restoring `appearance: auto` hands the control back to the browser, which
    draws the tick in `accent-color`. The other three declarations undo what
    the text-input rules imposed.
*/
.signup-pick input {
  flex-shrink: 0;
  width: 18px;
  min-height: 0;
  height: 18px;
  padding: 0;
  margin-top: 3px;
  -webkit-appearance: auto;
  appearance: auto;
  background: none;
  border: 0;
  border-radius: 0;
  accent-color: var(--concrete-accent);
}

.signup-pick-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--concrete-ink);
}

.signup-pick-cadence {
  display: block;
  font-size: 1.4rem;
  color: var(--concrete-muted);
}

.signup-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--concrete-space-3);
  align-items: stretch;
}

.signup-email { flex-grow: 1; max-width: 330px; width: auto; }

.signup-button {
  min-height: 46px;
  padding: 0 var(--concrete-space-6);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--concrete-on-accent);
  cursor: pointer;
  background-color: var(--concrete-accent);
  border: 0;
  border-radius: var(--concrete-radius-sm);
}

.signup-button:hover { text-decoration: underline; }

/* Ghost puts .loading, .success and .error on the form element. */
.signup-success,
.signup-error {
  display: none;
  margin: var(--concrete-space-4) 0 0;
  font-size: 1.5rem;
}

.signup.success .signup-picks,
.signup.success .signup-controls { display: none; }
.signup.success .signup-success { display: block; color: var(--concrete-ink); }
.signup.error .signup-error { display: block; color: var(--concrete-accent); }
.signup.loading .signup-button { opacity: 0.6; pointer-events: none; }

/* -------------------------------------------------- 14. The serial's index */

.strand-header {
  padding-bottom: var(--concrete-space-12);
  margin-bottom: var(--concrete-space-8);
  border-bottom: 1px solid var(--concrete-rule);
}

.strand-header-name {
  margin: var(--concrete-space-4) 0 0;
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--concrete-ink);
}

.strand-header-description {
  max-width: 34em;
  margin: var(--concrete-space-6) 0 0;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1.5;
  color: var(--concrete-body);
}

.strand-header-cadence {
  margin: var(--concrete-space-3) 0 0;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--concrete-muted);
}

/* The row for the chapter that is not out yet. It borrows .feed for the
   column layout, so the empty date column keeps "Next chapter" in line with
   the titles above. Muted, dashed and without a link, so it cannot be
   mistaken for a chapter that can be read. */
.feed-forthcoming { border-top: 1px dashed var(--concrete-border); }

.feed-forthcoming .feed-title {
  margin: 0;
  font-weight: 400;
  color: var(--concrete-muted);
}

.feed-forthcoming:hover .feed-title { text-decoration: none; }

.feed-status {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--concrete-muted);
  white-space: nowrap;
}

/* Ghost's pagination script removes the "load more" button once the last
   page is in, and leaves its wrapper behind with a 48px top margin. Collapse
   the wrapper so the row sits directly under the last chapter, and keep the
   row hidden while there are still chapters to load. */
.is-serial + .col .load-more:not(:has(.gh-loadmore)) { display: none; }
.body-inner:has(.gh-loadmore) .feed-forthcoming.has-more { display: none; }

/* A chapter's footer: the previous chapter, the contents, the next chapter.
   Dawn centres the three columns vertically and gives the outer two flex: 2,
   sized for bare arrows. With titles in them the columns are aligned at the
   top, so the labels line up whatever length the titles run to. */
.chapter-footer {
  gap: var(--concrete-space-6);
  align-items: flex-start;
  padding-top: var(--concrete-space-6);
  border-top: 1px solid var(--concrete-rule);
}

.chapter-footer .single-footer-left,
.chapter-footer .single-footer-right { flex: 1 1 0; min-width: 0; }

.chapter-footer .single-footer-middle { flex: 0 0 auto; }

.chapter-nav {
  display: flex;
  flex-direction: column;
  gap: var(--concrete-space-1);
  color: var(--concrete-ink);
}

.chapter-nav-next { align-items: flex-end; text-align: right; }

.chapter-nav-label,
.single-footer-contents {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chapter-nav-label { color: var(--concrete-muted); }

.chapter-nav-title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Not a link, so grey and without an arrow, like the forthcoming row on
   the contents page. */
.chapter-nav.is-forthcoming .chapter-nav-title {
  font-weight: 400;
  color: var(--concrete-muted);
}

a.chapter-nav:hover { opacity: 1; }
a.chapter-nav:hover .chapter-nav-title { text-decoration: underline; }

/* At phone width the contents link takes its own row underneath, and the
   two chapters share the row above it. */
@media (max-width: 600px) {
  .chapter-footer { flex-wrap: wrap; }
  .chapter-footer .single-footer-middle {
    flex-basis: 100%;
    order: 3;
    text-align: center;
  }
}

/* The middle of a chapter's footer, between the previous and next chapters. */
.single-footer-contents { color: var(--concrete-accent); }

.single-footer-contents:hover { opacity: 1; text-decoration: underline; }

.strand-crossover {
  padding: var(--concrete-space-6);
  margin-top: var(--concrete-space-12);
  background-color: var(--concrete-surface-200);
  border: 1px solid var(--concrete-border);
  border-radius: var(--concrete-radius-md);
}

.strand-crossover-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--concrete-ink);
}

.strand-crossover-text {
  max-width: 34em;
  margin: var(--concrete-space-2) 0 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--concrete-body);
}

/* ------------------------------------------------------------ 15. Focus etc */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.gh-btn:focus-visible,
.button:focus-visible,
.signup-button:focus-visible {
  outline: 2px solid var(--concrete-accent);
  outline-offset: 2px;
}

hr { background-color: var(--concrete-rule); }

.gh-foot { border-top: 1px solid var(--concrete-rule); }

/* -------------------------------------------- 16. Narrow screens, list rows
   Dawn's list row is date | title | read time. At phone width the read time
   squeezes the title into three or four lines, so drop it: a reader
   scanning a list on a phone needs the headline, not the minutes.        */

@media (max-width: 600px) {
  .feed-length { display: none; }
  .feed-right { margin-right: 0; }
}