/* Keep headings, explanations and their examples on the same reading axis. */
@media screen {
  :is(.about-page, .editorial-page, .contact-page, .privacy-page, .journal, .glossary-page, .story) {
    --text-column: 40rem;
    --article-size: clamp(1rem, .94rem + .24vw, 1.1rem);
    font-size: var(--article-size);
    line-height: 1.65;
  }
  main:has(> :is(.about-page,.editorial-page,.contact-page,.privacy-page)) > .crumbs,
  :is(.about-page,.editorial-page,.contact-page,.privacy-page) {
    max-width: 40rem;
    margin-inline: auto;
  }
  :is(.about-page,.editorial-page,.contact-page,.privacy-page) p {
    max-width: none;
    text-align: start;
  }
  :is(.editorial-page,.about-page,.privacy-page,.contact-page) h2 {
    margin: 0 0 .65em;
  }
  .about-page .about-intro, .about-page .about-decisions, .about-page .about-decision,
  .about-page .about-end, .editorial-page, .editorial-page .editorial-intro,
  .editorial-page .editorial-followup, .editorial-page .editorial-check,
  .privacy-page, .privacy-page .support-intro, .privacy-page .privacy-actions,
  .contact-page .support-intro, .contact-page .contact-example {
    display: block;
  }
  :is(.editorial-page,.privacy-page,.contact-page) > header > p:not(.page-updated):first-of-type,
  .about-page .about-intro-copy > p:not(.page-updated) {
    margin: .8rem 0;
  }
  .about-renewal {
    max-width: none;
    margin: 1.25rem 0 0;
  }
  .about-page .about-decision, .about-publisher, .about-contact {
    padding-block: 1rem;
  }
  .about-page .about-decision h3 { margin: 0 0 .35rem; }
  .editorial-contents, .privacy-contents {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .2rem 1.1rem;
    margin: 1rem 0 1.75rem;
    padding-block: .35rem;
    border-block: 1px solid var(--rule);
  }
  .editorial-contents a { border: 0; padding-inline: 0; }
  .editorial-page .editorial-body dl > div, .editorial-page .editorial-responsibility,
  .privacy-page .privacy-actions > div { display: block; }
  .editorial-body :is(dt,.editorial-responsibility h3), .privacy-actions dt {
    margin-bottom: .35em;
  }
  .editorial-body .editorial-followup > section, .privacy-page > section,
  .contact-page .contact-example {
    margin: 1.6rem 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
  }
  .contact-desk { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .contact-example blockquote { margin: 1rem 0; }
  .contact-example p { margin-block: .7rem; }

  .story { display: block; width: 100%; }
  .story h1, .journal h1, .glossary-intro h1 {
    font-size: clamp(2rem, 1.55rem + 2vw, 3.1rem);
  }
  .story-feature { margin: 1.4rem auto; }
  .story-feature .reading-photo { max-height: 19rem; object-fit: cover; }
  .story .story-layout { display: block; font-size: inherit; }
  .story .story-outline {
    position: static;
    border-block: 1px solid var(--rule);
    padding-block: .65rem;
    margin-bottom: 1.65rem;
  }
  .story-outline ul { display: flex; flex-wrap: wrap; gap: .12rem 1rem; }
  .story .story-outline li { border: 0; }
  .story .story-outline li a { padding-block: .25rem; }
  .story-outline .story-tool {
    display: inline-block;
    margin-top: .75rem;
    font-size: .95rem;
    font-weight: 650;
  }
  .story-body > section:first-child { border-top: 0; padding-top: 0; }
  .story .story-body section > p, .story-term .term-provisions dd {
    text-align: start;
    hyphens: manual;
  }
  .journal, main:has(> .journal) > .crumbs { max-width: 54rem; margin-inline: auto; }
  .journal-head, .journal-dictionary { display: block; }
  .journal-head > p, .journal-dictionary > p {
    max-width: var(--text-column);
    margin-top: .7rem;
  }
  .journal-stories { display: block; padding-block: 0; }
  .journal-entry, .journal-entry:first-child {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 1rem;
    padding-block: clamp(1.2rem,3vw,1.8rem);
    border-bottom: 1px solid var(--rule);
    align-items: center;
  }
  .journal-copy { padding: 0; }
  .journal-entry h2, .journal-entry:first-child h2 { font-size: clamp(1.4rem,1.15rem + 1.15vw,1.95rem); }
  .journal-dictionary { padding-block: 1.4rem; border-top: 0; }

  /* Each definition and its example stay together, even for a single match. */
  .glossary-page, main:has(> .glossary-page) > .crumbs {
    max-width: 42rem;
    margin-inline: auto;
  }
  .glossary-intro, .glossary-tools { display: block; }
  .glossary-intro > p:not(.page-updated) { margin: .75rem 0; max-width: var(--text-column); }
  .glossary-compare { margin-block-end: .7rem; }
  .glossary-compare summary { font-weight: 650; }
  .glossary-groups { max-width: none; }
  .glossary-group { display: block; padding-block: 1.15rem; }
  .glossary-group > h2 { margin: 0 0 .75rem; }
  .glossary-page #terms .glossary-entry:not([hidden]) {
    display: block;
    padding: 1.1rem 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
  }
  .glossary-links { border-top: 0; padding: 0; }
}
@media screen and (min-width: 56rem) {
  .story {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3.5rem);
  }
  .story > header { padding-block: 0; }
  .story .story-feature { width: 100%; margin: 0; }
  .story .story-feature img { aspect-ratio: 16 / 9; max-height: none; }

  .story .story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 26%, 24rem);
    grid-template-areas: "body outline";
    gap: clamp(2rem, 4vw, 4rem);
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: 1px solid var(--rule);
    align-items: start;
  }
  .story-body { grid-area: body; font-size: clamp(1.075rem, .7rem + .69vw, 1.45rem); }
  .story .story-outline {
    grid-area: outline;
    margin: 0;
    border: 0;
    border-inline-start: 2px solid var(--blue-mid);
    padding: 0 0 0 clamp(1rem, 1.7vw, 1.65rem);
  }
  .story-outline ul { display: block; }
  .story .story-outline li + li { border-block-start: 1px solid var(--rule); }
  .story .story-outline li a { padding-block: .6rem; }
}
@media screen and (min-width: 56rem) and (min-height: 36rem) {
  .story .story-outline { position: sticky; top: 1.25rem; }
}
@media screen and (min-width: 44rem) {
  .journal-entry, .journal-entry:first-child {
    grid-template-columns: minmax(12rem, 17rem) minmax(0,1fr);
    gap: clamp(1.4rem, 3vw, 2rem);
  }
}
@media screen and (max-width: 35rem) {
  .story-outline ul { display: grid; grid-template-columns: minmax(0,1fr); }
}

/* Use the available shell for distinct topics, keeping each introduction with its heading. */
@media screen {
  :is(.editorial-page, .privacy-page) .topics-heading {
    flex-basis: 100%;
    color: var(--ink);
  }
  .editorial-check > section > h3 { margin: .75rem 0 .35rem; }
  .editorial-check > section > p:first-of-type { margin-top: .35rem; }
}

@media screen and (min-width: 48rem) {
  #main > :is(.about-page, .editorial-page, .contact-page, .privacy-page, .journal, .glossary-page),
  #main:has(> :is(.about-page, .editorial-page, .contact-page, .privacy-page, .journal, .glossary-page)) > .crumbs {
    max-width: none;
  }
  #main > :is(.about-page, .editorial-page, .contact-page, .privacy-page, .journal, .glossary-page) {
    --section-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .journal-head > p, .journal-dictionary > p, .contact-page > header > .support-lead {
    max-width: 72ch;
  }

  .about-page .about-intro, .contact-page .contact-desk {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--section-gap);
  }
  .about-page .about-renewal { margin: 0; }
  .about-page .about-decision { display: block; }
  .about-page .about-end, .contact-page .contact-example {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--section-gap);
    align-items: start;
  }
  .contact-page .contact-example h2 { grid-column: 1 / -1; }
  .contact-page .contact-example blockquote {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin: 0;
  }
  .contact-page .contact-example p {
    grid-column: 1;
    margin: 0 0 .8rem;
  }

  .glossary-page {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 1rem var(--section-gap);
    align-items: start;
  }
  .glossary-page .glossary-intro { border-bottom: 0; }
  .glossary-page .glossary-tools { padding-block-start: 0; }
  .glossary-page .glossary-filter { margin-block-start: 0; }
  .glossary-page .glossary-groups { grid-column: 1 / -1; }
  .glossary-page .glossary-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--section-gap);
  }
  .glossary-page .glossary-group > h2 { grid-column: 1 / -1; }
  .glossary-page .glossary-group > .glossary-entry { grid-column: auto; }
  /* An unpaired term still has a definition on the left and an example on the right. */
  .glossary-page #terms .glossary-entry:nth-child(odd of .glossary-entry:not([hidden])):nth-last-child(1 of .glossary-entry:not([hidden])) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--section-gap);
    align-items: start;
  }
  .glossary-page #terms .glossary-entry > h3 { grid-column: 1 / -1; }
  .glossary-page .glossary-links { grid-column: 1 / -1; }

  .editorial-page, .privacy-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--section-gap);
    align-items: start;
  }
  .editorial-page > header, .privacy-page > header { grid-column: 1; }
  .editorial-page .editorial-intro { border-bottom: 0; }
  :is(.editorial-page, .privacy-page) > nav {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: 0 1rem;
    margin: 0;
    padding: .65rem 1rem;
    border-block: 1px solid var(--blue-mid);
    background: var(--blue-soft);
  }
  :is(.editorial-page, .privacy-page) .topics-heading { grid-column: 1 / -1; }
  .editorial-page .editorial-body, .privacy-page > #worksheet-inputs { grid-column: 1 / -1; }
  .editorial-page .editorial-body { max-width: none; }
  .editorial-page .editorial-sources, .editorial-page .editorial-check,
  .editorial-page .editorial-followup, .privacy-page .privacy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--section-gap);
    align-items: start;
  }
  .editorial-check > h2 { grid-column: 1 / -1; }
  .editorial-check section > :last-child { margin-bottom: 0; }
  .editorial-page .editorial-responsibility {
    max-width: 78ch;
    padding-top: 1rem;
  }
  .privacy-page > section { margin-bottom: .75rem; }
}

@media screen and (min-width: 60rem) {
  .journal .journal-stories, .about-page .about-decisions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem var(--section-gap);
  }
  .journal .journal-stories { padding-block: 1.75rem; }
  .journal .journal-entry {
    display: block;
    grid-column: auto;
    padding: 0;
    border-bottom: 0;
  }
  .journal .journal-copy { padding-top: 1rem; }
  .journal .journal-dictionary { border-top: 1px solid var(--rule); }
}