/* Strait Journal — Base
   Reset, typography baseline, container, measure, utilities, a11y. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
/* Site-wide hover color: river (secondary accent). Applies to any <a>.
   Existing per-component hover rules (opacity, underline, background) still
   compose \u2014 this only adds the color swing. */
a:hover { color: var(--river); }
/* River is already close-to-river on the off-black ground, so lighten the
   hover a touch for contrast in the footer / inverse contexts. */
.sj-footer a:hover { color: var(--river); }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
input, textarea { font: inherit; color: inherit; }

::selection { background: var(--off-black); color: var(--cream); }
::-moz-selection { background: var(--off-black); color: var(--cream); }

/* --- Selection bounded to readable column (v2) ---
   Round 5 attempted user-select toggling (none on body, text on inner
   elements). user-select is not inherited, so that approach didn't
   contain the highlight rectangle in practice.

   v2 wraps narrow-column text in a display: inline-block (.sj-article-body__inner
   in article.css and .sj-text-bound utility below). inline-block establishes
   a tighter selection geometry: highlight rectangles can't span beyond the
   inline-block's intrinsic width, so dragging from outside the column
   does not paint a wide bar in the gutter. */
.sj-text-bound {
  display: inline-block;
  text-align: left;
  max-width: 100%;
  width: 100%;
}
.sj-text-bound-wrap { text-align: center; }

/* Skip link for keyboard users */
.sj-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--off-black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1000;
}
.sj-skip:focus {
  left: 16px;
  top: 16px;
  outline: 2px solid var(--cream);
}

/* Focus style — production per design notes: 1px off-black outline on :focus-visible */
:focus-visible {
  outline: 1px solid var(--off-black);
  outline-offset: 2px;
}
.sj-footer :focus-visible { outline-color: var(--cream); }
.sj-intro :focus-visible { outline-color: var(--cream); }

.sj-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 1280px) { .sj-container { padding: 0 40px; } }
@media (max-width: 768px)  { .sj-container { padding: 0 24px; } }

.sj-measure { max-width: 640px; }

/* Semantic type — from the brand type kit, verbatim class names */
.sj-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--fg);
}
.sj-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
/* Mobile: drop the display headline ~45% so contact/masthead/careers
   page titles stop overflowing on phones. The archive page already has
   its own scoped override at .sj-archive-intro .sj-display (40px). */
@media (max-width: 768px) {
  .sj-display { font-size: 50px; line-height: 1.05; text-wrap: balance; }
}
.sj-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.sj-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.sj-editorial-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.sj-deck, .sj-standfirst {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.sj-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.sj-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.sj-meta, .sj-slide-counter {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.sj-rubric {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-rubric);
  text-transform: uppercase;
  color: var(--fg);
}
.sj-rubric--rust   { color: var(--rust); }
.sj-rubric--river  { color: var(--river); }
.sj-rubric--editor-note { color: var(--rust); }
.sj-rubric--cream  { color: var(--cream); }

.sj-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.sj-rule--rust       { border-top-color: var(--rule-rare); }
.sj-rule--rust-thick { border-top-color: var(--rule-rare); border-top-width: 2px; }
.sj-rule--muted      { border-top-color: var(--rule-muted); }
.sj-rule--inverse    { border-top-color: var(--rule-inverse); }
.sj-rule--full       { border-top-color: var(--off-black); }

.sj-stack > * + * { margin-top: 12px; }
.sj-stack-lg > * + * { margin-top: 24px; }

.sj-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}