/**
 * Journal styles.
 *
 * Hand-written plain CSS, enqueued from app/setup.php on Journal pages only.
 * Not part of the Bud build: do not move this into resources/ or public/.
 * All class names are namespaced `journal-`.
 *
 * Selectors that style headings, paragraphs or lists use two classes on
 * purpose: the theme sets `.main h1, .main h2, .main p, .main ul`
 * { padding-bottom: 1.75rem } (specificity 0,1,1), which a single class
 * would lose to.
 */

:root {
  --journal-navy: #031646;
  --journal-cream: #fffbf5;
  --journal-forest: #5a5c54;
  --journal-gold: #e3c892;
  --journal-sand: #f3eee8;
  --journal-white: #fff;
  --journal-serif: 'PP Fragment', Georgia, 'Times New Roman', Garamond, serif;
  --journal-sans: 'PP Mori', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Shared inner container: 1133px content, 24px gutters below 1200px. */
.journal-inner {
  max-width: 1133px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Masthead
 *
 * Full viewport, as on the Turkey destination page: the same `min-height`
 * and the same -80px pull up under the header, with Turkey's 655px below
 * 768px. Unlike the article header image (see `.journal-hero`), the title
 * sits on the photo, so a full screen masthead still says where you are.
 * The image's `sizes` in masthead.blade.php assumes this height: change
 * one and change the other.
 */

.journal-masthead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  margin-top: -80px;
  overflow: hidden;
  background-color: var(--journal-cream);
  text-align: center;
}

.journal-masthead .journal-masthead__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.journal-masthead__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  color: var(--journal-cream);
}

.journal-masthead .journal-masthead__eyebrow {
  padding: 0;
  font-family: var(--journal-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: inherit;
}

.journal-masthead .journal-masthead__title {
  padding: 0;
  font-family: var(--journal-serif);
  font-size: 49.7px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: inherit;
  overflow-wrap: anywhere;
}

/* No image set anywhere: cream band, so the cream text would vanish. */
.journal-masthead--no-image .journal-masthead__content {
  color: var(--journal-navy);
}

/* Filter pills */

.journal-filters {
  padding: 36px 0;
  background-color: var(--journal-cream);
}

.journal-filters .journal-filters__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  padding: 12px 16px;
  border: 0.5px solid var(--journal-forest);
  border-radius: 48px;
  background-color: var(--journal-white);
  font-family: var(--journal-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 13px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--journal-navy);
}

.journal-pill:hover {
  border-color: var(--journal-navy);
}

.journal-pill:focus-visible {
  outline: 2px solid var(--journal-navy);
  outline-offset: 2px;
}

/* Active: navy fill. Border stays, in navy, so the pill does not change size. */
.journal-pill.is-active {
  border-color: var(--journal-navy);
  background-color: var(--journal-navy);
  color: var(--journal-cream);
}

/* Divider */

.journal-divider {
  height: 1px;
  background-color: var(--journal-navy);
}

/* Article row */

.journal-row {
  padding: 52px 0;
  background-color: var(--journal-cream);
}

.journal-row__link {
  display: block;
  color: var(--journal-navy);
}

.journal-row__link:focus-visible {
  outline: 2px solid var(--journal-navy);
  outline-offset: 4px;
}

.journal-row__link:hover .journal-row__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.journal-row__inner {
  display: flex;
  align-items: center;
  gap: 65px;
}

.journal-row .journal-row__image {
  display: block;
  flex: 0 0 378px;
  width: 378px;
  height: 345px;
  object-fit: cover;
}

.journal-row__text {
  display: flex;
  flex: 1 1 690px;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  max-width: 690px;
}

.journal-row__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.journal-row .journal-row__category {
  padding: 0;
  font-family: var(--journal-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--journal-navy);
}

.journal-row .journal-row__title {
  max-width: 589px;
  padding: 0;
  font-family: var(--journal-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--journal-navy);
  overflow-wrap: anywhere;
}

.journal-row .journal-row__excerpt {
  padding: 0;
  font-family: var(--journal-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.64px;
  color: var(--journal-navy);
}

/* Empty state */

.journal-empty {
  padding: 52px 0;
  background-color: var(--journal-cream);
  text-align: center;
}

.journal-empty .journal-empty__text {
  padding: 0;
  font-family: var(--journal-sans);
  color: var(--journal-navy);
}

/* Pagination */

.journal-pagination {
  padding: 40px 0;
  background-color: var(--journal-cream);
}

/* The Figma's row: 18px items on a 31px pitch, so 13px apart, and five
   pages make a 142px group. That passes WCAG 2.2 AA's 24 x 24 target size
   through its spacing exception: a 24px circle centred on each item stays
   clear of its neighbour's. Items are 44px tall for an easier hit, and the
   negative margin takes that extra 20px back out, so the band is as tall as
   it would be with 24px items. Below 768px the row widens for fingers. */
.journal-pagination__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin-top: -10px;
  margin-bottom: -10px;
}

.journal-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--journal-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--journal-navy);
}

.journal-pagination .page-numbers.current {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* !important for the same Customizer rule as body links: see the note on
   `.journal-article .journal-content a` further down. */
.journal-pagination a.page-numbers:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/*
 * Article: header image
 *
 * The Figma's 650px in a 1425px frame, kept as a ratio so a wider screen
 * crops no more of the photo than the design does. `min-height` keeps every
 * width up to 1425px at 650px, as it was with a fixed height, but only on a
 * viewport at least 800px tall. On a shorter one (a laptop at 1024 x 768, a
 * phone on its side) the floor would push the date and title below the
 * fold, so the ratio alone governs there. The floor only binds below 1425px
 * wide, so wide screens are unaffected either way. `max-height`
 * is a guard against ultrawide monitors, not a layout rule: it does not
 * bind below about 2630px wide (1200 x 1425/650), so the ratio governs on
 * every ordinary screen. It is in pixels, not viewport units, so the crop
 * does not depend on the height of the viewer's window.
 * The image is positioned, not sized by a percentage of a ratio-derived
 * height. The listing masthead is full viewport instead: see its note.
 *
 * `width: 100%` is load-bearing. With an auto width the browser carries
 * `max-height` and `min-height` through the ratio into the width, so the box
 * can stop short of the page edge or run past it. A stated width is not
 * adjusted that way: the height follows the width, then is clamped.
 */

.journal-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1425 / 650;
  max-height: 1200px;
  overflow: hidden;
  background-color: var(--journal-cream);
}

@media (min-height: 800px) {
  .journal-hero {
    min-height: 650px;
  }
}

.journal-hero .journal-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/*
 * Article: date, author and title, left aligned at the full container.
 * The standfirst that follows them is the first paragraph of the body, so
 * this band has no bottom padding and the body band's top padding is the
 * gap between the title and the standfirst.
 */

.journal-article__header {
  padding: 52px 0 0;
  background-color: var(--journal-cream);
}

.journal-article__header-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Two 219px columns: date, then author. They shrink on narrow screens. */
.journal-article .journal-article__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 219px));
  padding: 0;
  font-family: var(--journal-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--journal-navy);
}

.journal-article__date {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.journal-article .journal-article__title {
  padding: 0;
  font-family: var(--journal-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 2px;
  text-transform: none;
  color: var(--journal-navy);
  overflow-wrap: anywhere;
}

/**
 * Article: body.
 *
 * Core block styles are disabled site wide, so everything the editor can put
 * in the body is styled here. `.journal-content` is the 1133px container.
 * A block fills it by default, with the media rhythm above and below. Only
 * the text blocks listed below sit in a 755px column flush with its right
 * edge, so a block type nobody thought of comes out full width, not stuck in
 * the text column. The standfirst overrides both.
 */

.journal-article__body {
  padding: 40px 0 52px;
  background-color: var(--journal-cream);
}

.journal-content {
  font-family: var(--journal-sans);
  color: var(--journal-navy);
  overflow-wrap: break-word;
  --journal-text-column: 755px;
  --journal-text-margin-left: auto;
  --journal-text-margin-right: 0;
}

.journal-content > * {
  margin-top: 96px;
  margin-bottom: 96px;
}

/*
 * Text blocks. Elements cover paragraph, heading, list, footnotes and
 * whatever the Classic and Custom HTML blocks output; classes cover the
 * rest, including the theme's own Accordion and Body Text blocks. The margin
 * reset undoes the default above: each text block sets its own further down.
 * The separator is deliberately not here: it runs the full container width.
 */
.journal-content > p,
.journal-content > h1,
.journal-content > h2,
.journal-content > h3,
.journal-content > h4,
.journal-content > h5,
.journal-content > h6,
.journal-content > ul,
.journal-content > ol,
.journal-content > dl,
.journal-content > blockquote,
.journal-content > pre,
.journal-content > table,
.journal-content > details,
.journal-content > .wp-block-accordion,
.journal-content > .wp-block-buttons,
.journal-content > .wp-block-file,
.journal-content > .wp-block-math,
.journal-content > .wp-block-anchour-accordion,
.journal-content > .wp-block-anchour-body-text {
  max-width: var(--journal-text-column);
  margin: 0 var(--journal-text-margin-right) 0 var(--journal-text-margin-left);
}

/* A spacer is its own height: no rhythm on top of it. */
.journal-content > .wp-block-spacer {
  margin-top: 0;
  margin-bottom: 0;
}

.journal-article .journal-content p,
.journal-article .journal-content ul,
.journal-article .journal-content ol {
  margin-bottom: 24px;
  padding: 0;
  font-family: var(--journal-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0.64px;
  color: var(--journal-navy);
}

/*
 * Standfirst: the body's first block, only if it is a paragraph. Not
 * `:first-of-type`, which would promote a paragraph from further down when
 * an article opens with an image or a heading. A call to action is never
 * the standfirst, even as the first block.
 */
.journal-article .journal-content > p:first-child:not(.journal-cta) {
  max-width: 1059px;
  margin-left: 0;
  margin-bottom: 56px;
  font-family: var(--journal-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
}

.journal-article .journal-content h2,
.journal-article .journal-content h3,
.journal-article .journal-content h4,
.journal-article .journal-content h5,
.journal-article .journal-content h6 {
  padding: 0;
  font-family: var(--journal-serif);
  font-weight: 400;
  text-transform: none;
  color: var(--journal-navy);
}

.journal-article .journal-content h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 28px;
  line-height: 38px;
}

/* The theme's h4 to h6 sizes are larger than this h2, so they follow h3. */
.journal-article .journal-content h3,
.journal-article .journal-content h4,
.journal-article .journal-content h5,
.journal-article .journal-content h6 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 30px;
}

.journal-article .journal-content blockquote {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0 0 0 40px;
  border-left: 2px solid var(--journal-gold);
  font-family: var(--journal-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: var(--journal-navy);
}

.journal-article .journal-content blockquote p {
  margin-bottom: 20px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.journal-article .journal-content blockquote > :last-child {
  margin-bottom: 0;
}

.journal-article .journal-content blockquote cite {
  display: block;
  font-family: var(--journal-sans);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

/* Not button blocks, which keep the theme's own colours. */
.journal-article .journal-content a:not(.wp-block-button__link) {
  color: var(--journal-navy);
  text-underline-offset: 4px;
}

/*
 * Underline on links in the article body, except the call to action, which
 * has its arrow instead. The !important exists solely to beat a rule the
 * client entered in the Customizer's Additional CSS,
 * `a:not(.wp-element-button) { text-decoration: none !important; }`, which
 * would otherwise leave these links the same navy as the text with no cue.
 * The listing's pagination hover beats the same rule the same way. Neither
 * is a licence for !important anywhere else in this file.
 */
.journal-article .journal-content a:not(.wp-block-button__link, .journal-cta a) {
  text-decoration: underline !important;
}

/*
 * Call to action: a paragraph that is only a link, given `.journal-cta` by
 * a render_block filter in app/filters.php. It stays in the text column.
 * Type as the article meta row. The arrow is the Figma's 12 x 12.59 with a
 * 2px stroke, its two strokes inset 8.33% left and right, 8.82% top and
 * 11.75% bottom. 13px after the text, as in the Figma. `vertical-align`
 * centres it on PP Mori's cap height, measured at 12px for 600 at 16px:
 * (12 - 12.59) / 2. Hover is the homepage map link's colour.
 */
.journal-article .journal-content > p.journal-cta {
  font-family: var(--journal-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* A 44px tap target: 10px of padding above and below the 24px line, taken
   back out by the negative margin so the line, and the arrow on it, stay
   where they were. */
.journal-article .journal-content > p.journal-cta a:not(.wp-block-button__link) {
  display: inline-block;
  margin: -10px 0;
  padding: 10px 0;
  color: var(--journal-navy);
  text-decoration: none;
}

.journal-article .journal-content > p.journal-cta a:not(.wp-block-button__link)::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12.59px;
  margin-left: 13px;
  vertical-align: -0.3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12.59' viewBox='0 0 12 12.59' fill='none' stroke='%23031646' stroke-width='2'%3E%3Cpath d='M1 11.11 11 1.11M1 1.11h10v10'/%3E%3C/svg%3E") no-repeat center / contain;
}

.journal-article .journal-content > p.journal-cta a:not(.wp-block-button__link):hover {
  color: #687390;
}

.journal-article .journal-content > p.journal-cta a:not(.wp-block-button__link):hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12.59' viewBox='0 0 12 12.59' fill='none' stroke='%23687390' stroke-width='2'%3E%3Cpath d='M1 11.11 11 1.11M1 1.11h10v10'/%3E%3C/svg%3E");
}

/* Lists: native markers. Preflight removes them from every list. */
.journal-article .journal-content ul,
.journal-article .journal-content ol {
  padding-left: 24px;
}

.journal-article .journal-content ul {
  list-style: disc;
}

.journal-article .journal-content ol {
  list-style: decimal;
}

.journal-article .journal-content li > ul,
.journal-article .journal-content li > ol {
  margin-top: 8px;
  margin-bottom: 0;
}

/**
 * The theme draws its own bullet on `ul.wp-block-list li` with a `:before`
 * and resets the item's size and spacing (specificity 0,3,2 and 0,3,3).
 * These match that specificity and win by loading later.
 */
.journal-article .journal-content li,
.journal-article .journal-content ul.wp-block-list li {
  margin-bottom: 8px;
  padding-left: 0;
  font-size: inherit;
}

.journal-article .journal-content ul.wp-block-list li::before {
  content: none;
}

.journal-content .wp-block-image img,
.journal-content .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
}

/**
 * Embeds (YouTube and Vimeo). The iframe arrives with a fixed pixel width
 * and height, which neither fills the container nor fits a phone. Sized here
 * from the `wp-embed-aspect-*` class the editor saves, 16:9 without one.
 * Core's own responsive embed CSS pads a `:before` and positions the iframe
 * absolutely; these selectors outrank it so the result is the same whether
 * or not that stylesheet is printed.
 */
.journal-article .journal-content .wp-block-embed .wp-block-embed__wrapper::before {
  content: none;
}

.journal-article .journal-content .wp-block-embed iframe {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--journal-embed-ratio, 16 / 9);
}

.journal-content .wp-embed-aspect-21-9 {
  --journal-embed-ratio: 21 / 9;
}

.journal-content .wp-embed-aspect-18-9 {
  --journal-embed-ratio: 18 / 9;
}

.journal-content .wp-embed-aspect-4-3 {
  --journal-embed-ratio: 4 / 3;
}

.journal-content .wp-embed-aspect-1-1 {
  --journal-embed-ratio: 1 / 1;
}

.journal-content .wp-embed-aspect-9-16 {
  --journal-embed-ratio: 9 / 16;
}

.journal-content .wp-embed-aspect-1-2 {
  --journal-embed-ratio: 1 / 2;
}

/* The bands' own padding sets the space above and below the body. */
.journal-article .journal-content > :first-child {
  margin-top: 0;
}

.journal-article .journal-content > :last-child {
  margin-bottom: 0;
}

/* More Stories */

/*
 * Four or more articles: a Splide carousel, mounted by the theme's existing
 * initialiser through the `featured-events-js` hook class (no Journal JS).
 * It mounts 500ms after window load, so the rules below reproduce what
 * Splide will set inline (slide widths, track padding) to avoid a jump.
 * Three or fewer: `.journal-more__row`, a plain grid.
 */

.journal-more {
  padding: 52px 0 37px;
  overflow: hidden;
  background-color: var(--journal-cream);
}

.journal-more .journal-more__heading {
  margin-bottom: 50px;
  padding: 0;
  font-family: var(--journal-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: 2px;
  text-transform: none;
  color: var(--journal-navy);
}

/* 24px wider than the container to absorb the track padding Splide adds,
   so three 360px cards and their 18px gaps fill the 1133px container.
   The bottom padding reserves room for the pagination bar. */
.journal-more .journal-more__carousel {
  position: relative;
  margin-right: -24px;
  padding-bottom: 68px;
  visibility: visible;
}

/* Later cards run off to the right, up to the edge of the band. The clip
   hides cards that have scrolled off to the left. */
.journal-more .splide__track {
  padding-right: 1.5rem;
  overflow: visible;
  clip-path: inset(-8px -100vw -8px -8px);
}

.journal-more .splide__list {
  display: flex;
  list-style: none;
}

.journal-more .splide__slide {
  width: 33.3333%;
}

.journal-more .splide__slide .journal-more__card {
  margin-right: 18px;
}

.journal-more .journal-more__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  gap: 40px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-more .journal-more__item {
  padding: 0;
}

.journal-more__card {
  display: block;
  color: var(--journal-navy);
}

.journal-more__card:focus-visible {
  outline: 2px solid var(--journal-navy);
  outline-offset: 4px;
}

.journal-more__card:hover .journal-more__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.journal-more .journal-more__image {
  display: block;
  width: 100%;
  max-width: 336px;
  height: auto;
  margin-bottom: 22px;
  aspect-ratio: 336 / 353;
  object-fit: cover;
}

.journal-more__date {
  display: block;
  margin-bottom: 8px;
  font-family: var(--journal-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--journal-navy);
}

.journal-more .journal-more__title {
  display: -webkit-box;
  padding: 0;
  overflow: hidden;
  font-family: var(--journal-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 2px;
  text-transform: none;
  color: var(--journal-navy);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Pagination bar, injected by Splide. Same look as the theme's other
   carousels: equal segments, a 2px line, the active one in navy. */
.journal-more .splide__pagination {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.journal-more .splide__pagination > li {
  display: block;
  flex: 1 1 0%;
  margin: 0;
  padding: 0;
}

.journal-more .splide__pagination__page {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.journal-more .splide__pagination__page::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background-color: var(--journal-sand);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.journal-more .splide__pagination__page.is-active::before {
  background-color: var(--journal-navy);
}

.journal-more .splide__pagination__page:focus-visible {
  outline: 2px solid var(--journal-navy);
  outline-offset: 2px;
}

/* Below 1200px: side gutters on the inner container. */
@media (max-width: 1199px) {
  .journal-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Below 1096px: the article text column keeps its 755px measure but moves
   from the right of the container to the left, so it starts at the same x
   as the date and title above it. The carousel hook drops to 2 per page. */
@media (max-width: 1095px) {
  .journal-content {
    --journal-text-margin-left: 0;
    --journal-text-margin-right: auto;
  }

  .journal-more .splide__slide {
    width: 50%;
  }

  .journal-more .journal-more__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-more .journal-more__image {
    max-width: none;
  }
}

/* Below 1024px: stack the row, image full width. The image is 16:9 here,
   not its desktop 378:345, so a full width photo at tablet widths does not
   make each row a screen tall; phones go back to 378:345 below 768px.
   Smaller More Stories type. */
@media (max-width: 1023px) {
  .journal-row {
    padding: 40px 0;
  }

  .journal-row__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .journal-row .journal-row__image {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .journal-row__text {
    flex: none;
    max-width: none;
  }

  /* The excerpt keeps its desktop measure, as the title keeps its 589px. */
  .journal-row .journal-row__excerpt {
    max-width: 690px;
  }

  .journal-more .journal-more__heading,
  .journal-more .journal-more__title {
    font-size: 36px;
    line-height: 44px;
  }
}

/* Below 768px: the listing image back to its near square 378:345. Smaller
   masthead and type. The masthead takes Turkey's 655px; the article header
   image is a fixed 420px, with the ratio and its limits off. */
@media (max-width: 767px) {
  .journal-masthead {
    min-height: 655px;
  }

  .journal-masthead .journal-masthead__eyebrow {
    font-size: 14px;
    line-height: 20px;
  }

  .journal-masthead .journal-masthead__title {
    font-size: 36px;
    line-height: 43px;
  }

  /* Pills on one row that scrolls sideways, as the destination pages' filter
     does below 768px: the scroller runs edge to edge with the 24px gutter
     inside it, so pills slide under the page edge rather than stopping at
     the gutter. Same `overflow-x: scroll` as there, but the scrollbar is
     hidden, which deliberately diverges from the destination pages: they
     leave it visible, so platforms with persistent scrollbars (Android, a
     narrowed desktop browser, macOS set to always show them) draw a track
     under the pills. The partly visible pill at the right edge is the cue
     that the row scrolls, so nothing is lost. The 4px of vertical padding,
     taken back by the margin, keeps the focus outline from being clipped
     by the scroller; the items are flex so each is exactly as tall as its
     pill and none of that padding is lost. `ul` in the selector matches
     the specificity of the theme's
     `.main ... ul:last-child { padding-bottom: 0 }`, which otherwise takes
     the bottom 4px; this file prints later, so it wins the tie. */
  .journal-filters .journal-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .journal-filters ul.journal-filters__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: -4px 0;
    padding: 4px 24px;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .journal-filters .journal-filters__list::-webkit-scrollbar {
    display: none;
  }

  .journal-filters .journal-filters__list > li {
    display: flex;
  }

  .journal-row {
    padding: 32px 0;
  }

  .journal-row .journal-row__image {
    aspect-ratio: 378 / 345;
  }

  .journal-row .journal-row__title {
    font-size: 24px;
    line-height: 32px;
  }

  .journal-row .journal-row__excerpt {
    font-size: 16px;
    line-height: 24px;
  }

  /* Every target at least 24 x 44, so the row passes 24 x 24 outright
     rather than through the spacing exception. */
  .journal-pagination__inner {
    gap: 16px;
  }

  .journal-pagination .page-numbers {
    min-width: 24px;
  }

  .journal-hero {
    aspect-ratio: auto;
    height: 420px;
    min-height: 0;
    max-height: none;
  }

  .journal-article__header {
    padding: 32px 0 0;
  }

  .journal-article .journal-article__title {
    font-size: 36px;
    line-height: 45px;
  }

  .journal-article__body {
    padding: 40px 0 32px;
  }

  .journal-more {
    padding: 32px 0;
  }

  .journal-more .journal-more__heading {
    margin-bottom: 32px;
  }

  .journal-more .journal-more__heading,
  .journal-more .journal-more__title {
    font-size: 28px;
    line-height: 36px;
  }

  .journal-more .journal-more__carousel {
    padding-bottom: 44px;
  }

  .journal-more .splide__pagination {
    width: 83.3333%;
  }
}

/* Below 750px, where the carousel hook drops to 1 per page. */
@media (max-width: 749px) {
  .journal-article__header-inner {
    gap: 24px;
  }

  .journal-article__body {
    padding-top: 24px;
  }

  .journal-article .journal-content > p:first-child:not(.journal-cta) {
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 28px;
  }

  .journal-content > * {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .journal-more .splide__slide {
    width: 100%;
  }

  .journal-more .journal-more__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below 430px: date and author in a wrapping row instead of two fixed
   219px columns, which the date outgrows at 320. Each moves to its own line
   whole before breaking inside itself. */
@media (max-width: 429px) {
  .journal-article .journal-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
  }
}