/* Strait Journal — Components
   Nav, subnav, photo placeholders, grid cards, newsletter, footer, avatar,
   filter chips, list rows, pagination, tag chips, search modal. */

/* ---------- Nav ---------- */
.sj-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  padding-top: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--off-black);
}
.sj-nav .wm {
  font-family: var(--font-display);
  font-weight: 650;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--accent-rare);
  white-space: nowrap;
}
.sj-nav .wm:hover { opacity: 0.8; }
.sj-nav .wm.inv { color: var(--fg-inverse); }
.sj-nav-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}
.sj-nav-etymology {
  /* inline-block bounds selection geometry to the text width. */
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--fg-muted);
  white-space: nowrap;
}
.sj-nav-etymology em { font-style: italic; color: var(--fg); }
/* Mobile (≤768px): switch the nav from flex to a 2-column / 2-row grid.
   col 1: wordmark on row 1, etymology on row 2 (tight 4px row-gap)
   col 2: toggle button spans both rows and centers vertically against
   the combined wordmark + etymology block.
   .sj-nav-mark { display: contents } promotes its children (wordmark +
   etymology) into the grid so we can place them individually. */
@media (max-width: 768px) {
  .sj-nav-etymology { font-size: 10px; }
  .sj-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    align-items: baseline;
  }
  .sj-nav-mark { display: contents; }
  .sj-nav .wm { grid-column: 1; grid-row: 1; }
  .sj-nav-etymology {
    grid-column: 1;
    grid-row: 2;
    /* reset any flex-row leftovers */
    width: auto;
    text-align: left;
  }
  .sj-nav-toggle {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}
@media (max-width: 480px) {
  .sj-nav-etymology { font-size: 9px; white-space: normal; }
}
.sj-nav ul {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
}
.sj-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sj-nav a:hover { opacity: 0.7; }
.sj-nav a.active {
  border-bottom: 1px solid var(--rust);
  color: var(--rust);
}
.sj-nav .search-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 2px;
}
.sj-nav .search-btn:hover { opacity: 0.7; }
.sj-nav-toggle {
  display: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
@media (max-width: 900px) {
  .sj-nav { flex-wrap: wrap; }
  .sj-nav-toggle { display: inline-block; }
  .sj-nav > ul { display: none; }  /* Desktop inline list hidden on mobile */
}

/* --- Mobile drawer: top slide-down, ~65vh, compact rows --- */
.sj-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
  z-index: 90;
}
.sj-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sj-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-height: 65vh;
  background: var(--cream);
  border-bottom: 1px solid var(--off-black);
  transform: translateY(-100%);
  transition: transform 200ms var(--ease-out);
  z-index: 91;
  overflow-y: auto;
  /* Hidden by default at all widths; only revealed on mobile via media query below. */
  display: none;
}
@media (max-width: 900px) {
  .sj-drawer { display: block; }
}
.sj-drawer.open { transform: translateY(0); }

.sj-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--rule);
}
.sj-drawer__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sj-drawer__close {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--off-black);
  padding-bottom: 1px;
  cursor: pointer;
}
.sj-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.sj-drawer li {
  border-bottom: 1px solid var(--rule-muted);
}
.sj-drawer li:last-child { border-bottom: 0; }
.sj-drawer li a,
.sj-drawer li button.search-btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  min-height: 52px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg);
  text-align: left;
  background: transparent;
}
.sj-drawer li a.active {
  color: var(--rust);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .sj-drawer,
  .sj-drawer-backdrop { transition: none; }
}

.sj-subnav {
  display: flex;
  gap: 28px;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.sj-subnav .date { color: var(--fg); }
.sj-subnav a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.sj-subnav a:hover { border-bottom-color: var(--off-black); }

/* ---------- Photo placeholder (cool-graded, structural) ---------- */
.sj-photo {
  background: var(--off-black);
  position: relative;
  overflow: hidden;
}
.sj-photo--cool {
  background:
    linear-gradient(145deg, rgba(122,136,146,0.40) 0%, rgba(26,26,26,0.90) 100%),
    #1A1A1A;
}
.sj-photo--cool-2 {
  background:
    linear-gradient(200deg, rgba(122,136,146,0.55) 0%, rgba(26,26,26,0.95) 90%),
    #1A1A1A;
}
.sj-photo--mono {
  background:
    linear-gradient(180deg, rgba(239,229,211,0.05) 0%, rgba(26,26,26,0.92) 100%),
    #1A1A1A;
}
.sj-photo--river {
  background:
    linear-gradient(160deg, rgba(122,136,146,0.85) 0%, rgba(26,26,26,0.80) 100%),
    var(--river);
}
.sj-photo .ph-credit,
.sj-photo .ph-marker {
  position: absolute;
  left: 16px; bottom: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-inverse-muted);
}
/* Featured-image render: <img> fills the .sj-photo container, cropped to
   cover via object-fit. The container's gradient class still provides a
   background while the image loads. */
.sj-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photographer credit line beneath an article's lead image. */
.sj-photo-credit {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  margin: 8px 0 0;
  padding: 0 56px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.sj-photo-credit a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
@media (max-width: 768px) {
  .sj-photo-credit { padding: 0 24px; font-size: 11px; }
}
.sj-photo-caption {
  background: var(--paper);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

/* ---------- Grid cards ---------- */
.sj-grid {
  display: grid;
  gap: 48px 40px;
}
.sj-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sj-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sj-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .sj-grid--3, .sj-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sj-grid--2, .sj-grid--3, .sj-grid--4 { grid-template-columns: 1fr; }
}

/* Homepage "This week on the Journal" — keep 3-up on mobile but compact.
   Override the default mobile collapse-to-1-column from above. */
@media (max-width: 768px) {
  .sj-this-week .sj-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
  }
  .sj-this-week .sj-card { gap: 8px; }
  .sj-this-week .sj-card .thumb { aspect-ratio: 1 / 1; }
  .sj-this-week .sj-card h3 {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .sj-this-week .sj-card .deck { display: none; }
  .sj-this-week .sj-card .byline {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .sj-this-week .sj-card .sj-rubric { font-size: 10px; }
  .sj-this-week .sj-section-head .all-link { font-size: 12px; }
}

.sj-card { display: flex; flex-direction: column; gap: 14px; position: relative; }
/* Stretched-link pattern: the card title's <a> covers the whole card via
   ::after, so clicking anywhere on the card navigates to the article.
   The byline's author link sits above (z-index: 2) so it captures its
   own clicks. */
.sj-card .sj-card__media { display: block; color: inherit; }
.sj-card .sj-card__title { color: inherit; text-decoration: none; }
.sj-card .sj-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sj-card .byline a { position: relative; z-index: 2; color: inherit; }
.sj-card .thumb { aspect-ratio: 4 / 5; }
.sj-card .thumb--wide { aspect-ratio: 16 / 10; }
.sj-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  color: var(--fg);
}
.sj-card .deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg);
  max-width: 42ch;
}
.sj-card .byline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 4px;
}
.sj-card:hover .thumb { opacity: 0.9; transition: opacity var(--dur-normal) var(--ease-out); }
.sj-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --- "Latest in each section" strip ---
   Desktop (\u22651025px): all cards sit in one row (grid-auto-flow: column +
     grid-auto-columns: 1fr). At 5 cards on a 1440px viewport that's
     ~240px per card; at 1280px ~215px; at 1025px ~170px \u2014 still readable
     with the shrunk h3 below.
   Tablet + mobile (\u22641024px): horizontal scroll-snap row at 72% viewport
     per card. Swipe to browse, which is the natural pattern below laptop. */
.sj-latest-strip {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: unset !important;
  gap: 20px;
}
.sj-latest-strip .sj-card { gap: 10px; }
.sj-latest-strip .sj-card .thumb { aspect-ratio: 4 / 3; }
.sj-latest-strip .sj-card h3 {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.sj-latest-strip .sj-card .sj-rubric {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.sj-latest-strip .sj-card .deck {
  font-size: 13px;
  max-width: none;
}
.sj-latest-strip .sj-card .byline {
  font-size: 11px;
}

@media (max-width: 1024px) {
  .sj-latest-strip {
    grid-auto-columns: 72%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    /* scroll-padding aligns scroll-snap to the internal padding, so the
       first card sits 24px in from the viewport edge at scrollLeft: 0
       (matches every other element's container padding on mobile). */
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
    gap: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .sj-latest-strip .sj-card { scroll-snap-align: start; }
  .sj-latest-strip .sj-card h3 { font-size: 22px; line-height: 1.15; }
  .sj-latest-strip .sj-card .sj-rubric { font-size: 12px; letter-spacing: 0.2em; }
}

/* ---------- Avatar ---------- */
.sj-avatar {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--river);
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.sj-avatar--lg { width: 96px; height: 96px; }
.sj-avatar--xl { width: 160px; height: 160px; }
.sj-avatar--sm { width: 32px; height: 32px; }
.sj-avatar .mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
  color: var(--cream);
  letter-spacing: 0;
}
.sj-avatar--lg .mono { font-size: 34px; }
.sj-avatar--xl .mono { font-size: 56px; }
.sj-avatar--sm .mono { font-size: 12px; }
.sj-avatar .mono { font-size: 16px; }
.sj-avatar.tone-river   { background: var(--river); }
.sj-avatar.tone-offblack{ background: var(--off-black); }
.sj-avatar.tone-rust    { background: var(--rust); }
/* Photo avatars: <img> fills the circle, cropped to cover. The parent
   .sj-avatar already has border-radius: 9999px + overflow: hidden, so
   the image is clipped to the circle automatically at every size. */
.sj-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Open Position avatar: "YOU?" text in Fraunces, sized to fit the circle */
.sj-avatar .opening-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
  color: var(--cream);
  letter-spacing: 0;
  font-size: 16px;
}
/* Round 13: removed size-specific .opening-text overrides so YOU? inherits
   the base .sj-avatar .opening-text { font-size: 16px } and matches what
   the regular .mono initials actually render at — they too end up at
   16px even on .sj-avatar--lg, because the base .sj-avatar .mono rule
   sits later in the cascade and wins. Matching the de-facto size keeps
   the masthead consistent: every initial circle reads at the same scale. */

/* ---------- Newsletter block ---------- */
.sj-newsletter {
  background: var(--paper);
  padding: 72px 0;
  border-top: 1px solid var(--off-black);
  border-bottom: 1px solid var(--off-black);
}
.sj-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .sj-newsletter-inner { grid-template-columns: 1fr; gap: 32px; } }
.sj-newsletter h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.sj-newsletter p { margin: 0 0 32px; max-width: 46ch; }
@media (max-width: 768px) {
  .sj-newsletter { padding: 40px 0; }
  .sj-newsletter h2 { font-size: 30px; line-height: 1.1; margin-bottom: 12px; }
  .sj-newsletter p { font-size: 17px; line-height: 1.45; margin-bottom: 22px; }
}

.sj-email-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid var(--off-black);
  padding-bottom: 12px;
}
.sj-email-row input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--fg);
  padding: 6px 0;
}
.sj-email-row input::placeholder { color: var(--fg-muted); }
.sj-email-row .submit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sj-email-row .submit:hover { opacity: 0.7; }
.sj-email-fineprint { color: var(--fg-muted); font-size: 13px; margin-top: 12px; }

/* ---------- Filter chips (archive / category / rubric) ---------- */
.sj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--off-black);
}
.sj-filters .group {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-right: 48px;
  flex-wrap: wrap;
}
.sj-filters .label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sj-filters .chip {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--fg);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.sj-filters .chip:hover { opacity: 0.6; }
.sj-filters .chip.on {
  border-bottom: 1px solid var(--off-black);
  font-weight: 500;
}

/* Archive page mobile fixes (≤768px) — header wraps, intro grid collapses,
   filter chips wrap into rows that fit the viewport. */
@media (max-width: 768px) {
  /* Override the inline grid on the archive intro: collapse to one column. */
  .sj-archive-intro {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 40px 0 16px !important;
  }
  /* Allow the archive H1 to break and shrink so it never overflows. */
  .sj-archive-intro .sj-display {
    font-size: 40px;
    line-height: 1.05;
    text-wrap: balance;
    max-width: none;
  }
  /* Filter chips: 2 cards side-by-side (Section left | Rubric right).
     Each card is a block with label on its own line and chips flowing
     inline below. Chips wrap freely within the card width. */
  .sj-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 0;
    /* clear the desktop flex-wrap settings for predictability */
    flex-direction: initial;
  }
  .sj-filters .group {
    display: block;
    margin-right: 0;
    width: auto;
    padding: 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
  }
  .sj-filters .group .label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
  }
  .sj-filters .group .chip,
  .sj-filters .group button.chip {
    display: inline-block;
    font-size: 13px;
    padding: 3px 0;
    margin: 2px 10px 2px 0;
  }
}

/* ---------- List rows (archive) ---------- */
.sj-list { border-top: 1px solid var(--off-black); }
.sj-list-row {
  display: grid;
  grid-template-columns: 90px 1fr 110px 195px;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: opacity var(--dur-fast) var(--ease-out);
  position: relative;
}
/* Round 12: thumbnail at the right edge of each archive row. Round 13:
   landscape on desktop (3/2 → ~195×130 at the column width above). The
   mobile media query below overrides to an 80×80 square. */
.sj-list-row__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  z-index: 2; /* above the title's stretched-link ::after so it can carry its own click */
}
.sj-list-row:hover { opacity: 0.75; }
/* Stretched-link pattern (mirror of .sj-card): the title link covers
   the whole row; the author link inside the byline sits above so it
   captures its own clicks. */
.sj-list-row .sj-list-row__title { color: inherit; text-decoration: none; }
.sj-list-row .sj-list-row__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sj-list-row .sj-list-row__author { position: relative; z-index: 2; color: inherit; }
@media (max-width: 768px) {
  /* Mobile: collapse to a single column; thumb floats to the top-right
     via absolute positioning; text-content reserves a right-padding zone
     so it wraps cleanly under the thumb when the headline is short. */
  .sj-list-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 96px; /* reserve space for thumb (80px) + 16px gap */
    min-height: 96px;
  }
  .sj-list-row__thumb {
    position: absolute;
    /* Align top of thumb with top of the headline rather than the rubric
       label above it. Row top-padding (28px) + rubric height (~16px) +
       gap (~8px) ≈ 52px down to where the headline starts. */
    top: 52px;
    right: 0;
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
  }
}
.sj-list-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.sj-list-row .deck {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-muted);
  margin-bottom: 10px;
  max-width: 56ch;
  line-height: 1.5;
}
.sj-list-row .byline {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sj-list-row .when {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-align: right;
}
@media (max-width: 768px) { .sj-list-row .when { text-align: left; } }

.sj-list-empty {
  padding: 72px 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
.sj-list-empty a { color: var(--fg); border-bottom: 1px solid var(--off-black); padding-bottom: 1px; }

/* ---------- Pagination ---------- */
.sj-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0 72px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-muted);
  flex-wrap: wrap;
  gap: 16px;
}
.sj-pagination .nums { display: flex; gap: 14px; flex-wrap: wrap; }
.sj-pagination a,
.sj-pagination .current {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 2px;
}
.sj-pagination a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sj-pagination .current {
  border-bottom: 1px solid var(--off-black);
  color: var(--fg);
}
.sj-pagination .disabled { color: var(--fg-muted); cursor: default; }

/* Hub pagination state (category + rubric pages, "Load more" pattern) */
.is-paginated-hidden { display: none; }
.sj-load-more {
  display: flex;
  justify-content: center;
  padding: 32px 0 72px;
}
.sj-load-more__btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--off-black);
  padding: 8px 0 6px;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sj-load-more__btn:hover { opacity: 0.7; }
.sj-load-more__end {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px 0 6px;
}

/* Archive client-side filter + pagination state */
.sj-list-row.is-hidden { display: none; }
.sj-pagination button.link-button,
.sj-list-empty button.link-button {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}
.sj-pagination button.link-button:hover,
.sj-list-empty button.link-button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sj-pagination button.link-button:disabled {
  color: var(--fg-muted);
  cursor: default;
  text-decoration: none;
}
.sj-pagination button.link-button[data-page] {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Tag chips (article footer, tag pages) ---------- */
.sj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 0;
}
.sj-tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  padding: 6px 12px;
  border: 1px solid var(--rule);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sj-tag:hover { border-color: var(--off-black); }
.sj-tag::before { content: "#"; color: var(--fg-muted); margin-right: 2px; }

/* ---------- Footer ---------- */
.sj-footer {
  background: var(--off-black);
  color: var(--fg-inverse);
  padding: 64px 0 40px;
}
.sj-footer a { color: var(--fg-inverse); }
.sj-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sj-footer .wm {
  font-family: var(--font-display);
  font-weight: 650;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  font-size: 32px;
  color: var(--cream);
}
.sj-wm-footer-center {
  text-align: center;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--rule-inverse);
}
/* Footer wordmark is inline-block (so its selection rectangle stays bound
   to the text width and does not bleed into the surrounding gutter). The
   markup uses a <br> after the wordmark to push the etymology onto the
   next line; both elements then sit centered via the parent's text-align. */
.sj-wm-footer-center .wm { display: inline-block; }
.sj-wm-footer-center .sj-etymology {
  /* inline-block bounds selection geometry to the text width, so
     drag-selecting the etymology does not paint into the gutter. The
     parent .sj-wm-footer-center has text-align: center, which centers
     this inline-block horizontally; text-align: center inside the
     inline-block centers each wrapped line within the box. */
  display: inline-block;
  margin: 14px 0 0;
  max-width: min(56ch, 100%);
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--fg-inverse-muted);
  text-wrap: balance;
  text-align: center;
}
.sj-wm-footer-center .sj-etymology .word { color: var(--fg-inverse); }
.sj-wm-footer-center .sj-etymology em { font-style: italic; color: var(--fg-inverse); }
@media (max-width: 480px) {
  .sj-wm-footer-center .sj-etymology { font-size: 11px; padding: 0 16px; }
}
.sj-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 40px 0;
  border-top: 1px solid var(--rule-inverse);
  border-bottom: 1px solid var(--rule-inverse);
}
@media (max-width: 900px) { .sj-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sj-footer-grid { grid-template-columns: 1fr; } }

/* Default (desktop): mobile-only footer elements are hidden. */
.sj-footer-mobile-email { display: none; }
.sj-fb-mobile { display: none; }

/* Mobile (≤768px): structured 4-row footer layout.
   Row 0 (existing): wordmark + etymology center block (unchanged)
   Row 1: 2-col grid — The Journal (left) | Read (right)
   Row 2: Elsewhere centered — h4 + hello@ email + 4 social icons
   Row 3: Address centered (2 lines)
   Row 4: 2-col footer-bottom — © copyright (left) | imprint + cross-site (right) */
@media (max-width: 768px) {
  .sj-footer { padding: 32px 0 24px; }
  .sj-wm-footer-center { padding: 20px 0 16px; }

  /* The footer-grid becomes a named-area grid. Brand col uses display:contents
     so its address paragraph (the only desktop content kept) becomes a direct
     grid item we can place via grid-area. */
  .sj-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "journal  read"
      "elsewhere elsewhere"
      "addr     addr";
    gap: 28px 24px;
    padding: 24px 0;
  }
  .sj-footer-col--brand { display: contents; }
  .sj-footer-col--brand h4,
  .sj-footer-col--brand p:not(.sj-footer-addr) { display: none; }
  .sj-footer-col--brand .sj-footer-addr {
    grid-area: addr;
    text-align: center;
    margin: 0;
    max-width: none;
  }
  /* Re-show Journal + Read columns (Round 9 had hidden them) and place them. */
  .sj-footer-col--journal { display: block; grid-area: journal; }
  .sj-footer-col--read    { display: block; grid-area: read; }

  /* Elsewhere column on mobile: full-width centered.
     Order inside this column (top→bottom): h4 → cross-site UL (straitmediagroup,
     straitsounds) → social icons row. The hello@ mobile email line is dropped. */
  .sj-footer-col--elsewhere { grid-area: elsewhere; text-align: center; }
  .sj-footer .sj-footer-col--elsewhere .sj-footer-mobile-email { display: none; }
  /* Center the cross-site link list (it's a grid by base rule) */
  .sj-footer .sj-footer-col--elsewhere .sj-footer-cross { justify-items: center; }
  /* Center the social icons row inside the centered Elsewhere column. */
  .sj-footer ul.sj-socials { justify-content: center; margin-top: 14px; }

  /* Footer-bottom: 2-col grid swapping desktop spans for mobile spans.
     Selector scoped through .sj-footer so the specificity (0,2,0) outranks
     the base `.sj-footer-bottom { display: flex }` rule that sits LATER
     in the file. Without this scope-bump, source order would let the
     base flex display win at every viewport. */
  .sj-footer .sj-footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 16px;
    align-items: start;
  }
  .sj-footer .sj-footer-bottom .sj-fb-desktop { display: none; }
  .sj-footer .sj-footer-bottom .sj-fb-mobile { display: block; line-height: 1.55; }
  .sj-footer .sj-footer-bottom .sj-fb-mobile--imprint { text-align: right; }
  .sj-footer .sj-footer-bottom .sj-fb-mobile--imprint a { display: inline-block; }
}
.sj-footer h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-inverse-muted);
  margin: 0 0 18px;
}
.sj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sj-footer li { font-size: 15px; }
.sj-footer p { font-size: 14px; line-height: 1.55; margin: 0; max-width: 40ch; color: var(--fg-inverse); }
.sj-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 24px;
  color: var(--fg-inverse-muted);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}
.sj-footer-bottom a { border-bottom: 1px solid var(--rule-inverse); padding-bottom: 1px; }

/* Social icons row, footer Elsewhere column.
   Selector specificity matches `.sj-footer ul` (0,1,1) so the grid display
   from that rule does not win the cascade and force the icons to stack. */
.sj-footer ul.sj-socials {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.sj-footer ul.sj-socials li {
  display: inline-flex;
  font-size: 0;
  line-height: 0;
}
.sj-footer ul.sj-socials a {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--fg-inverse);
}
.sj-footer ul.sj-socials a:hover { color: var(--river); text-decoration: none; }
.sj-footer ul.sj-socials svg { display: block; width: 20px; height: 20px; }

/* ---------- Byline ---------- */
.sj-byline {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-transform: uppercase;
}
.sj-byline .sep { color: var(--fg-muted); font-weight: 400; }
.sj-byline .muted { color: var(--fg-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ---------- Search modal ---------- */
.sj-search-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.88);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 24px 24px;
}
.sj-search-modal.open { display: flex; }
.sj-search-modal__inner {
  width: 100%;
  max-width: 720px;
  background: var(--cream);
  padding: 32px 40px 40px;
  border: 1px solid var(--off-black);
}
@media (max-width: 640px) { .sj-search-modal__inner { padding: 24px; } }
.sj-search-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.sj-search-modal__head .label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sj-search-modal__close {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--off-black);
  padding-bottom: 1px;
}
/* Pagefind UI restyling — overrides */
.pagefind-ui {
  --pagefind-ui-primary: var(--off-black);
  --pagefind-ui-text: var(--off-black);
  --pagefind-ui-background: var(--cream);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--paper);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-font: var(--font-body);
  --pagefind-ui-scale: 0.9;
}
.pagefind-ui__search-input {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}