/* =========================================================== WolfTrack TR
   The reset and the shared components of the MARKETING surface: the element
   normalisation, the buttons, the wordmark, the small utilities.

   Split out of tokens.css so that js/journal/mount.js can switch it off
   while the journal is on screen. Both stylesheets define .btn, .wrap and an
   element reset; with both live, this one reached inside the journal and
   changed it - button line-height, letter-spacing, svg display, white-space.
   The journal is supposed to look the same on the web as it does offline,
   and it did not.

   Anything added here is INVISIBLE to the journal by construction. Anything
   that must survive while the journal is mounted belongs in tokens.css (the
   brand) or landing.css (which stays attached for the demo bar).
   ====================================================================== */
/* ======================================================== reset + basics */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;                      /* nothing may push the page sideways */
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; line-height:1.15; font-weight:600; letter-spacing:-.018em}
p{margin:0}
a{color:var(--wine); text-decoration:none}
a:hover{color:var(--wine-deep); text-decoration:underline; text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}

/* One visible focus ring for the whole product. Mouse users never see it,
   keyboard users always do. */
:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-radius:4px}

/* ===================================================== layout primitives */
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:760px}
.stack>*+*{margin-top:var(--gap,16px)}
.center{text-align:center}

/* ================================================================ buttons
   Two weights only: a filled primary and a quiet one. A third style would
   mean a third decision on every screen. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-weight:600; font-size:15px; letter-spacing:.005em; cursor:pointer;
  background:none; text-decoration:none; white-space:nowrap;
  transition:background-color .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; pointer-events:none}

.btn.primary{background:var(--wine); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--wine-deep); color:#fff}

.btn.ghost{border-color:var(--rule); background:var(--paper); color:var(--ink)}
.btn.ghost:hover{border-color:var(--wine); color:var(--wine); background:var(--paper)}

.btn.plain{color:var(--ink); padding-left:12px; padding-right:12px}
.btn.plain:hover{color:var(--wine)}

.btn.lg{padding:15px 28px; font-size:16px}
.btn.block{width:100%}

/* on the plum sections the primary has to invert or it disappears */
.on-dark .btn.primary{background:#fff; color:var(--plum)}
.on-dark .btn.primary:hover{background:var(--rose); color:var(--plum)}
.on-dark .btn.ghost{background:transparent; border-color:rgba(255,255,255,.28); color:#fff}
.on-dark .btn.ghost:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.06)}

/* ============================================================== wordmark */
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand img{width:34px; height:34px; flex:0 0 auto}
.brand .word{
  font-weight:600; font-size:19px; letter-spacing:.055em; text-transform:uppercase;
}
.brand .word b{font-weight:600; color:var(--wine)}
.on-dark .brand,.on-dark .brand:hover{color:#fff}
.on-dark .brand .word b{color:var(--rose)}

/* ------------------------------------------------------------------ the TR
   "WolfTrack" on its own is already two other companies' mark. The TR is the
   part that makes this one ours, so it is never dropped and never shrunk out
   of sight — it is set the way Levi's sets its ®: a small stylised italic
   riding the cap line, reading as a mark rather than as two more letters.
   Sized in em throughout so it scales with whatever carries it. */
.word .tr{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.58em; letter-spacing:0; text-transform:none;
  vertical-align:.42em; margin-left:.14em;
  color:var(--wine-bright);
}
.on-dark .word .tr{color:var(--rose)}

/* ============================================================== utilities */
.eyebrow{
  font:600 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--wine); margin-bottom:14px;
}
.on-dark .eyebrow{color:var(--rose)}
.lede{font-size:18px; color:var(--dim); line-height:1.65}
.on-dark{background:var(--plum); color:#fff}
.on-dark .lede{color:rgba(255,255,255,.72)}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important; scroll-behavior:auto !important}
}