/* StoxCredit redesign layer, v1.
   Layout, type, spacing and motion only. This file sets NO colors:
   every color comes from the theme tokens already in place, so the light
   and dark themes keep their exact palette. Loaded last on each page.
   Some rules carry html body prefixes and !important because the site
   stacks many override layers that would otherwise win. */

/* ---------- Page transitions (cross-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation-name: sc-page-out; }
::view-transition-new(root) { animation-name: sc-page-in; }
@keyframes sc-page-out { to { opacity: 0; translate: 0 -6px; } }
@keyframes sc-page-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- Shared focus and text ---------- */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Display face for every page title (cross-page consistency) ---------- */
html body h1 {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

/* ---------- Home: hero ---------- */
html body #homeView #homeTitle {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400;
  font-size: clamp(46px, 5.8vw, 80px) !important;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 13em;
}
.home-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.home-intro {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  max-width: 34em;
}
.home-primary,
.home-secondary {
  border-radius: 999px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}
.home-primary:active,
.home-secondary:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .home-primary:hover,
  .home-secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}

/* Hairline rules use currentColor, so they follow the theme. */
.home-market-tape-rows > * {
  border-color: color-mix(in srgb, currentColor 14%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .home-market-tape-rows > * {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .home-market-tape-rows > *:hover { transform: translateX(4px); }
}

/* ---------- Home: products as an editorial index, not four cards ---------- */
html body .home-products-grid {
  counter-reset: sc-prod;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
html body .home-products-grid .home-product-card {
  counter-increment: sc-prod;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto !important;
  grid-template-areas: "top top top" "title copy link" !important;
  align-items: center;
  gap: 16px 40px;
  text-align: left !important;
  padding: 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .home-products-grid .home-product-card .home-product-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-product-top::before {
  content: counter(sc-prod, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  opacity: .6;
}
html body .home-products-grid .home-product-card h3 {
  grid-area: title;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  margin: 0;
  text-align: left !important;
}
html body .home-products-grid .home-product-card > p {
  grid-area: copy;
  margin: 0;
  max-width: 34em;
  text-align: left !important;
}
html body .home-products-grid .home-product-card > a {
  grid-area: link;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  html body .home-products-grid .home-product-card > a { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  html body .home-products-grid .home-product-card:hover > a { transform: translateX(6px); }
}

/* ---------- Home: scroll reveals (progressive enhancement) ---------- */
@keyframes sc-rise {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html body .home-products-grid .home-product-card,
    .home-feature-card,
    #homeView .home-stocks,
    .home-products-heading {
      animation: sc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---------- Header nav: underline draws in ---------- */
.site-nav a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 960px) {
  html body .home-products-grid .home-product-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "top top" "title link" "copy copy" !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  html body #homeView #homeTitle { font-size: clamp(40px, 11vw, 52px) !important; }
  html body .home-products-grid .home-product-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "top" "title" "copy" "link" !important;
    gap: 12px;
    padding: 24px 0 !important;
  }
  html body .home-products-grid .home-product-card > a { justify-self: start; }
}

/* ---------- Reduced motion: keep the layout, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .home-primary,
  .home-secondary,
  .home-market-tape-rows > *,
  html body .home-products-grid .home-product-card > a,
  .site-nav a::after { transition: none; }
  html body .home-products-grid .home-product-card,
  .home-feature-card,
  #homeView .home-stocks,
  .home-products-heading { animation: none; }
}