/* ==========================================================================
   Stolaze-style monochrome typographic layer.

   Everything in this file is scoped to the `.st` root class so that the
   restyled homepage can use a single grotesque and a very large, light type
   scale without changing the older Bootstrap pages. The only exceptions are
   the site footer and the announcement bar, which are shared by every page
   and are restyled deliberately.

   Palette: white background, black text, mid gray for secondary text.
   No cards, no shadows, no rounded boxes, no accent colour.
   ========================================================================== */

.st {
  --st-ink: #000;
  --st-gray: #9a9a9a;
  --st-hairline: #e6e6e6;
  --st-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  background: #fff;
  color: var(--st-ink);
  font-family: var(--st-font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Reset the Bootstrap inheritance that would otherwise leak in. */

.st *,
.st *::before,
.st *::after {
  box-sizing: border-box;
}

/* `:where()` keeps this reset at zero specificity so the classes below win. */

.st :where(h1, h2, h3, p, ul, ol, li, figure, figcaption) {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.st :where(ul, ol) {
  list-style: none;
}

.st :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.st :where(a) {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.st :where(a):hover,
.st :where(a):focus {
  color: var(--st-ink);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.st-wrap {
  padding-left: clamp(16px, 4vw, 56px);
  padding-right: clamp(16px, 4vw, 56px);
  max-width: 1680px;
  margin: 0 auto;
}

.st-section {
  padding-top: clamp(64px, 12vh, 160px);
  padding-bottom: clamp(24px, 6vh, 72px);
}

.st-section:first-of-type {
  padding-top: clamp(32px, 6vh, 72px);
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.st-h1 {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
}

.st-label {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 26ch;
}

.st-item {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.st-body {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 62ch;
}

.st-meta {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--st-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.st-gray {
  color: var(--st-gray);
}

.st-block {
  display: block;
}

/* --------------------------------------------------------------------------
   Press logo row (marquee)
   -------------------------------------------------------------------------- */

.st-press {
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--st-hairline);
  overflow: hidden;
}

.st-press-label {
  margin-bottom: 14px;
}

.st-press-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.st-press-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: st-marquee 52s linear infinite;
}

.st-press-viewport:hover .st-press-track {
  animation-play-state: paused;
}

.st-press-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity 0.2s ease;
}

.st-press-item:hover,
.st-press-item:focus {
  opacity: 1;
}

.st-press-item img {
  height: 22px;
  width: auto;
  max-width: none;
}

.st-press-word {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@keyframes st-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .st-press-track {
    animation: none;
  }

  .st-press-viewport {
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.st-hero {
  padding-top: clamp(48px, 10vh, 130px);
  padding-bottom: clamp(48px, 10vh, 130px);
}

.st-hero-body {
  margin-top: clamp(28px, 5vh, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 62ch;
}

.st-hero-meta {
  margin-top: clamp(28px, 5vh, 56px);
}

/* --------------------------------------------------------------------------
   Index / filter row
   -------------------------------------------------------------------------- */

.st-index {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.03em;
  padding-top: 8px;
  padding-bottom: clamp(24px, 5vh, 56px);
}

.st-index a {
  color: var(--st-gray);
}

.st-index a:hover,
.st-index a:focus,
.st-index a.is-current {
  color: var(--st-ink);
}

/* --------------------------------------------------------------------------
   Numbered index lists with stepped indentation
   -------------------------------------------------------------------------- */

.st-list {
  margin-top: clamp(20px, 4vh, 44px);
}

.st-entry {
  padding-top: clamp(18px, 3vh, 34px);
  padding-bottom: clamp(18px, 3vh, 34px);
}

.st-entry-head {
  display: block;
}

.st-entry-key {
  color: var(--st-gray);
}

.st-entry:hover .st-entry-key {
  color: var(--st-ink);
}

.st-entry > .st-meta {
  margin-top: 6px;
}

.st-entry-note {
  margin-top: 10px;
  color: #444;
}

.st-entry-figure {
  margin-top: 22px;
  max-width: 640px;
}

.st-entry-caption {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .st-list {
    padding-left: clamp(0px, 14vw, 220px);
  }

  .st-entry-note {
    max-width: 62ch;
  }
}

/* --------------------------------------------------------------------------
   Footer (shared by every page)
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid #e6e6e6;
  background: #fff;
  margin-top: 72px;
  padding: 40px clamp(16px, 4vw, 56px) 56px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
  letter-spacing: -0.01em;
}

.site-footer p,
.site-footer a {
  font-weight: 400;
}

.site-footer img.site-footer-mark {
  height: 26px;
  width: auto;
  margin-bottom: 18px;
  display: block;
}

.site-footer a {
  color: #9a9a9a;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #000;
  text-decoration: none;
}

.site-footer-line {
  margin: 0 0 6px;
}

.site-footer-links {
  margin: 0 0 6px;
  color: #9a9a9a;
}

.site-footer-top {
  margin: 18px 0 0;
}

.site-footer-top a {
  color: #000;
}

/* --------------------------------------------------------------------------
   Small screens: no stepped indent, no horizontal scroll
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .st-list {
    padding-left: 0;
  }

  .st-h1 {
    max-width: none;
  }

  .st-press-track {
    gap: 36px;
  }
}