/* ==========================================================================
   ATLETIKA — Base: fonts, typography, layout primitives
   ========================================================================== */

/* ---- Font face ----------------------------------------------------------
   Variable Archivo, self-hosted. Two subsets: the browser fetches
   latin-ext only when the page actually contains those glyphs, so the
   English build pays 34.9 KB and the Lithuanian build pays 67.6 KB.
   font-display: swap keeps text visible; the metric-adjusted fallback
   below removes the reflow that swap would otherwise cause.               */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback. Without this, `swap` produces a visible reflow
   when Archivo arrives — a CLS contributor. These overrides make the
   system fallback occupy near-identical space.                            */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---- Root ---------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  background: var(--c-surface);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Type scale utilities -----------------------------------------------
   Headings carry no default size: pages compose from these classes so the
   scale stays visible in markup and cannot drift.                         */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
}

.t-display   { font-size: var(--t-5xl); line-height: var(--lh-5xl); font-weight: var(--fw-black);
               letter-spacing: var(--track-display); text-transform: uppercase; }
.t-h1        { font-size: var(--t-4xl); line-height: var(--lh-4xl); font-weight: var(--fw-bold);
               letter-spacing: var(--track-display); }
.t-h2        { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-semibold);
               letter-spacing: var(--track-tight); }
.t-h3        { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold);
               letter-spacing: var(--track-tight); }
.t-h4        { font-size: var(--t-xl);  line-height: var(--lh-xl);  font-weight: var(--fw-medium);
               letter-spacing: var(--track-tight); }
.t-lg        { font-size: var(--t-lg);   line-height: var(--lh-lg); }
.t-body      { font-size: var(--t-body); line-height: var(--lh-body); }
.t-base      { font-size: var(--t-base); line-height: var(--lh-base); }
.t-sm        { font-size: var(--t-sm);   line-height: var(--lh-sm); }
.t-xs        { font-size: var(--t-xs);   line-height: var(--lh-xs); }

/* The uppercase UI voice — nav, buttons, labels, eyebrows. Tracked out so
   capitals stay readable at small sizes.                                   */
.t-ui {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.t-ui-sm {
  font-size: var(--t-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.t-eyebrow {
  font-size: var(--t-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.t-muted     { color: var(--c-ink-muted); }
.t-secondary { color: var(--c-ink-secondary); }

/* Editorial copy gets a measure cap — long lines are the most common
   readability failure on wide screens.                                     */
.t-prose { max-width: var(--container-text); }
.t-prose p + p { margin-top: var(--s-4); }

/* ---- Wordmark -----------------------------------------------------------
   Archivo at 900 approximates the existing heavy condensed logotype.
   Production should swap in the brand's own SVG — see handoff notes.      */
.wordmark {
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--track-wordmark);
  line-height: 1;
  font-stretch: 100%;
  white-space: nowrap;
}

/* ---- Links --------------------------------------------------------------- */
.link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.link:hover { opacity: 0.6; }

/* Understated nav link: rule grows from the left on hover. Uses
   transform on a pseudo-element, so it never triggers layout.             */
.link-nav { position: relative; display: inline-block; }
.link-nav::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-quick) var(--ease-out);
}
.link-nav:hover::after,
.link-nav:focus-visible::after,
.link-nav[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Layout primitives --------------------------------------------------- */
/* Keeps the footer out of the first viewport while a page's main content is
   still rendering (JS-rendered PDP/PLP/cart) — removes a whole class of
   layout shift. Costs nothing on pages that are already taller.            */
main { min-height: 100svh; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 1100px; }
.container--text   { max-width: calc(var(--container-text) + var(--gutter) * 2); }
.container--full   { max-width: none; padding-inline: 0; }

.section     { padding-block: var(--section-gap); }
.section--sm { padding-block: var(--section-gap-sm); }
.section--flush-top { padding-block-start: 0; }

.stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--s-3));
}

.u-hide { display: none; }
/* Aligned with the navigation breakpoint: "mobile" = burger shown. */
@media (max-width: 1023px) { .u-hide\@mobile  { display: none !important; } }
@media (min-width: 1024px) { .u-hide\@desktop { display: none !important; } }

/* Section heading with a hairline rule running to the edge — a recurring
   editorial device across the site.                                        */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-8);
}
.section-head__rule {
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

/* ---- Media --------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-sunken);   /* holds the space while loading  */
}
.media--product   { aspect-ratio: var(--ratio-product); }
.media--hero      { aspect-ratio: var(--ratio-hero); }
.media--editorial { aspect-ratio: var(--ratio-editorial); }
.media > img {
  width: 100%; height: 100%;
  object-fit: cover;
}