/* Base styles carried over from the design comp, plus the small amount of
   page-level plumbing a standalone document needs that a canvas artboard
   did not. */

body {
  margin: 0;
  background: var(--tr-canvas);
  /* The comp inherited this from the canvas <section> that wrapped the
     artboard. That wrapper is gone, so the family is declared here or every
     element without an explicit font-family falls back to the UA default. */
  font-family: 'Plus Jakarta Sans', sans-serif;

  /* Same reasoning for colour: without this, anything added later without an
     explicit colour inherits the browser default, which is pure #000 — a
     second black creeping back into a palette that has exactly one. */
  color: var(--tr-black);
}

a       { color: var(--tr-red); text-decoration: none; }
a:hover { color: var(--tr-red-dark); }

/* The sold rail scrolls natively now (it was a transform marquee in the
   comp), so the scrollbar is hidden on the scrolling element. */
[data-sold-viewport],
[data-sold-track] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-sold-viewport]::-webkit-scrollbar,
[data-sold-track]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* The rail is a marquee: site.js advances scrollLeft by a fraction of a pixel
   every frame. Two properties that look harmless here stopped it dead, and
   both are removed.

   scroll-behavior: smooth turned every one of those sub-pixel writes into an
   animated scroll. A smooth scroll has a minimum duration, so each frame
   restarted an animation toward a target 0.43px away and the rail never
   actually moved. The nav buttons are unaffected — they ask for smoothness
   explicitly, in the scrollBy() options.

   scroll-snap-type then pulled the position back to the nearest card start
   every time it drifted off one, which fights a continuous scroll by design.
   Snapping belongs on a rail you flick between discrete cards, not one that
   slides on its own. .tr-sold__card's scroll-snap-align is inert without it. */

[data-sold-viewport] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Visible focus for keyboard users — the comp had none. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.tr-burger:focus-visible {
  outline: 3px solid var(--tr-gold);
  outline-offset: 2px;
}