/* ==========================================================================
   Section: logos — quiet social-proof band with a dual-direction marquee
   Root: .s-logos (also carries .kw-logos). Every selector below is scoped.

   Progressive enhancement, deliberately inverted:
   the DEFAULT rendering is a static, wrapped, centred grid. The marquee only
   switches on for `.s-logos.is-live` (added by logos.js once the track has been
   filled) AND only inside `prefers-reduced-motion: no-preference`. So no-JS and
   reduced-motion users land on the static grid without any override wars.
   ========================================================================== */

.s-logos {
  /* optical height every wordmark is normalised to */
  --logo-h:       clamp(1.3125rem, 1.05rem + 1.15vw, 2rem);   /* 21 → 32 */
  --logo-gap:     clamp(2.25rem, 1.5rem + 3vw, 4.5rem);       /* 36 → 72 */
  --logo-fade:    clamp(2rem, 7vw, 8rem);
  --speed-a:      44s;
  --speed-b:      54s;
  /* three identical sets in the track → one set is exactly a third */
  --shift:        -33.3333%;

  /* typographic faces. Each wordmark gets its own voice; every stack ends in a
     web-safe family so the wall never collapses to one repeated font. */
  --face-didot:      "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --face-condensed:  "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --face-geometric:  "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --face-palatino:   "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --face-engraved:   "Copperplate", "Copperplate Gothic Light", "Optima", Georgia, serif;
  --face-script:     "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
  --face-typewriter: "American Typewriter", "Rockwell", "Courier New", monospace;
  --face-humanist:   "Optima", "Candara", "Gill Sans", "Segoe UI", sans-serif;
  --face-transitional: "Baskerville", "Hoefler Text", "Times New Roman", serif;

  position: relative;
  background-color: var(--surface);
  overflow-x: clip;
}

/* ---- Ambient floor ------------------------------------------------------- */

.s-logos .s-logos__aura {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: clip;
  pointer-events: none;
}

.s-logos .s-logos__aura .gradient-orb {
  --orb-size: min(58rem, 130vw);
  --orb-ratio: 2.6;
  --orb-blur: 90px;
  --orb-opacity: 0.16;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
}

/* ---- Heading ------------------------------------------------------------- */

/* base.css caps every <p> at --measure, which stops .eyebrow--center from
   actually centring (the flex box is only 65ch wide). Undo it locally. */
.s-logos .eyebrow {
  max-width: none;
  margin-bottom: var(--space-4);
}

.s-logos__title {
  max-width: 24ch;
  margin-inline: auto;
  color: var(--ink-muted);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-align: center;
}

/* Width is reserved so the count-up in main.js can't reflow the headline.
   6.6ch = six tabular digits + a comma + a plus, minus the negative tracking. */
.s-logos__count {
  display: inline-block;
  min-width: 6.6ch;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* ---- Marquee shell ------------------------------------------------------- */

.s-logos__marquee {
  margin-block: clamp(var(--space-8), 5vw, var(--space-11));
  padding-inline: var(--gutter);
}

.s-logos__row + .s-logos__row { margin-block-start: var(--space-2); }

/* ---- Track: static wrapped grid is the DEFAULT ---------------------------- */

.s-logos__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-logos__item {
  display: block;
  max-width: none;
  flex: none;
  margin: var(--space-3) calc(var(--logo-gap) / 2);
  color: var(--ink-muted);
  transition: color var(--dur-3) var(--ease-standard),
              opacity var(--dur-3) var(--ease-standard);
}

/* Clones exist only to make the loop seamless; hidden unless the marquee runs. */
.s-logos__item--clone { display: none; }

.s-logos__mark {
  height: var(--logo-h);
  width: auto;
  overflow: visible;
}

/* Script and two-line lockups read small at a shared cap height — nudge them. */
.s-logos__item--lockup .s-logos__mark { height: calc(var(--logo-h) * 1.34); }

/* Look-at-me on hover, and dim the neighbours so one mark reads at a time. */
@media (hover: hover) {
  .s-logos__track:hover .s-logos__item { opacity: 0.55; }
  .s-logos__track:hover .s-logos__item:hover {
    opacity: 1;
    color: var(--ink);
  }
}

/* ---- The wordmarks ------------------------------------------------------- */

.s-logos__mark text {
  fill: currentColor;
  font-kerning: normal;
}

.s-logos__mark--marrowfield text {
  font-family: var(--face-didot);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.6px;
}

.s-logos__mark--brickbone text {
  font-family: var(--face-condensed);
  font-size: 22px;
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 2.4px;
}

.s-logos__mark--kilnhouse text {
  font-family: var(--face-geometric);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.s-logos__mark--kilnhouse .s-logos__rule { opacity: 0.55; }

.s-logos__mark--saltcedar text {
  font-family: var(--face-palatino);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.s-logos__mark--holm text {
  font-family: var(--face-engraved);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 7px;
}

.s-logos__mark--tenderloom text {
  font-family: var(--face-script);
  font-size: 32px;
  font-weight: 400;
}

.s-logos__mark--northfall text {
  font-family: var(--face-typewriter);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 3.2px;
}

.s-logos__mark--northfall .s-logos__heavy { font-weight: 700; }

.s-logos__mark--oxbow text {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.s-logos__mark--vesselvine text {
  font-family: var(--face-transitional);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.s-logos__mark--vesselvine .s-logos__amp {
  font-style: italic;
  font-family: var(--face-didot);
}

.s-logos__mark--plumb text {
  font-family: var(--face-humanist);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 5px;
}

.s-logos__mark--ashgrove .s-logos__lockup-name {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 3.4px;
}

.s-logos__mark--ashgrove .s-logos__lockup-sub {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 3.6px;
  opacity: 0.72;
}

.s-logos__mark--handsaw text {
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.s-logos__mark--fenmark text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.s-logos__mark--cindersalt text {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 2.6px;
}

/* ---- Foot row ------------------------------------------------------------ */

.s-logos__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  text-align: center;
}

.s-logos__note {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

/* The control only exists while something is actually moving. */
.s-logos__pause { display: none; }

.s-logos__pause-icon {
  width: 0.625rem;
  height: 0.75rem;
  flex: none;
  border-inline: 0.1875rem solid currentColor;
}

.s-logos__pause.is-paused .s-logos__pause-icon {
  width: 0.6875rem;
  border-inline: 0;
  background-color: currentColor;
  clip-path: polygon(10% 0%, 100% 50%, 10% 100%);
}

@media (width >= 48rem) {
  .s-logos__foot {
    justify-content: space-between;
    text-align: start;
  }
}

/* ==========================================================================
   Marquee mode — JS present (.is-live) and motion welcome.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .s-logos.is-live .s-logos__marquee { padding-inline: 0; }

  .s-logos.is-live .s-logos__row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--logo-fade),
      #000 calc(100% - var(--logo-fade)),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--logo-fade),
      #000 calc(100% - var(--logo-fade)),
      transparent 100%);
  }

  .s-logos.is-live .s-logos__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    will-change: transform;
    animation: kw-logos-drift var(--speed, 48s) linear infinite;
  }

  .s-logos.is-live .s-logos__track--a { --speed: var(--speed-a); }

  .s-logos.is-live .s-logos__track--b {
    --speed: var(--speed-b);
    animation-direction: reverse;
  }

  .s-logos.is-live .s-logos__item {
    margin-block: var(--space-2);
  }

  .s-logos.is-live .s-logos__item--clone { display: block; }

  .s-logos.is-live .s-logos__pause { display: inline-flex; }

  /* Pause on hover anywhere in the band, and on the explicit control. */
  .s-logos.is-live .s-logos__marquee:hover .s-logos__track,
  .s-logos.is-live.is-paused .s-logos__track {
    animation-play-state: paused;
  }
}

@keyframes kw-logos-drift {
  to { transform: translate3d(var(--shift), 0, 0); }
}