/* ==========================================================================
   FIVER — Fitment Ledger
   tokens.css — design tokens, reset, typography, layout primitives
   --------------------------------------------------------------------------
   The brand palette is lifted from the client's own logo (a grey gear, an
   orange orbit, a steel-blue "FIVER" wordmark), not invented:

       steel blue   #4F7696   the wordmark
       burnt orange #C7732D   the orbit
       slate        #657387   the gear

   Everything else is neutral. Each page type then claims one accent of its
   own (see "Page modes" below) so that no two sections of the site look
   alike, while the shared shell keeps them recognisably one brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page modes
   --------------------------------------------------------------------------
   Every page declares its mode on <body data-mode="…">. The mode drives the
   accent colour, the page canvas and a handful of layout decisions. This is
   the mechanism that keeps eight page types from looking like eight copies
   of the same template.
   -------------------------------------------------------------------------- */
:root {
  /* --- brand -------------------------------------------------------- */
  --brand-blue:      #4F7696;   /* logo wordmark                     */
  --brand-blue-deep: #2E5573;
  --brand-blue-soft: #EAF0F5;
  --brand-orange:    #C7732D;   /* logo orbit                        */
  --brand-orange-lt: #E2913F;
  --brand-orange-sf: #FBF1E6;

  /* --- neutrals ----------------------------------------------------- */
  --ink:        #1B2026;   /* primary text        */
  --ink-2:      #3A424C;   /* strong secondary    */
  --ink-3:      #6B7480;   /* muted text          */
  --ink-4:      #9AA2AC;   /* faint text, captions */
  --graphite:   #22272E;   /* dark chrome         */
  --graphite-2: #2D343D;   /* dark chrome raised  */
  --graphite-3: #3C4550;   /* dark hairlines      */

  --paper:      #F1EEE7;   /* warm paper ground   */
  --paper-2:    #F8F6F1;   /* raised paper        */
  --paper-3:    #E6E2D9;   /* deep paper          */
  --white:      #FFFFFF;

  --line:       rgba(27, 32, 38, 0.13);
  --line-2:     rgba(27, 32, 38, 0.07);
  --line-dark:  rgba(255, 255, 255, 0.13);

  /* --- type --------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- shape -------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* --- layout ------------------------------------------------------- */
  --wrap: 1320px;
  --gutter: 28px;
  --rail: 288px;          /* the category / filter rail             */
  --measure: 68ch;        /* reading measure for editorial pages    */

  /* --- default accent (overridden per mode) -------------------------- */
  --accent:       var(--brand-orange);
  --accent-deep:  #A85F22;
  --accent-soft:  var(--brand-orange-sf);
  --surface:      var(--white);
  --surface-alt:  var(--paper-2);
  --chrome:       var(--graphite);
}

/* --- mode: category — brass ------------------------------------------ */
[data-mode="category"] {
  --accent:      #A8761E;
  --accent-deep: #8A5F14;
  --accent-soft: #F6EEDD;
  --surface:     #F4F1EA;
  --surface-alt: #FFFFFF;
}

/* --- mode: product — the brand's own steel blue ------------------------ */
[data-mode="product"] {
  --accent:      #2E6FA8;
  --accent-deep: #22547F;
  --accent-soft: #E7F0F7;
  --surface:     #FFFFFF;
  --surface-alt: #F5F7F9;
}

/* --- mode: article — slate, the quiet reading voice ------------------- */
[data-mode="article"] {
  --accent:      #4A5568;
  --accent-deep: #333E4E;
  --accent-soft: #EDEFF2;
  --surface:     #F6F4EF;
  --surface-alt: #FFFFFF;
}

/* --- mode: news — oxide red ------------------------------------------- */
[data-mode="news"] {
  --accent:      #A8442A;
  --accent-deep: #86331E;
  --accent-soft: #F7EAE5;
  --surface:     #FFFFFF;
  --surface-alt: #FAF8F5;
}

/* --- mode: contact — deep teal ---------------------------------------- */
[data-mode="contact"] {
  --accent:      #1C6B5E;
  --accent-deep: #13534A;
  --accent-soft: #E6F1EE;
  --surface:     #F0F2F1;
  --surface-alt: #FFFFFF;
}

/* --- mode: search — cool indigo-slate --------------------------------- */
[data-mode="search"] {
  --accent:      #4A5B78;
  --accent-deep: #35455E;
  --accent-soft: #EAEDF2;
  --surface:     #EDEFF2;
  --surface-alt: #FFFFFF;
}

/* --- mode: about — bronze --------------------------------------------- */
[data-mode="about"] {
  --accent:      #7C5F35;
  --accent-deep: #5E4726;
  --accent-soft: #F2EBDF;
  --surface:     #F7F4ED;
  --surface-alt: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--graphite);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Type scale
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 108%;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.t-mono { font-family: var(--font-mono); }
.t-serif { font-family: var(--font-serif); }

.t-lead {
  font-size: 1.13rem;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 400;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow { max-width: 1120px; }
.wrap--reading { max-width: 940px; }

.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--flush { padding: 0; }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--graphite); color: #E8EAED; }
.section--ink { background: var(--ink); color: #E8EAED; }
.section--accent { background: var(--accent); color: #fff; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--dark { background: var(--line-dark); }

.stack > * + * { margin-top: var(--gap, 16px); }

/* Section heading used across modes -------------------------------------- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 18px;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--ink);
}
.sec-head__text { max-width: 640px; }
.sec-head .t-eyebrow { display: block; margin-bottom: 10px; }
.sec-head__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  white-space: nowrap;
}
.sec-head__link:hover { color: var(--accent-deep); }

.section--dark .sec-head { border-bottom-color: var(--graphite-3); }
.section--dark .sec-head__link { color: var(--accent-lt, var(--brand-orange-lt)); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--ink { background: var(--graphite); color: #fff; }
.btn--ink:hover { background: var(--ink); }
.btn--outline { border-color: currentColor; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { border-color: var(--line-dark); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--graphite); }
.btn--sm { padding: 9px 16px; font-size: 0.72rem; }
.btn--lg { padding: 17px 32px; font-size: 0.9rem; }
.btn--block { width: 100%; justify-content: center; }

/* Chips ------------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink-3);
  background: transparent;
}
.chip--accent { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
.chip--solid { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.chip--ok { color: #1C6B5E; border-color: rgba(28,107,94,.4); background: rgba(28,107,94,.07); }

/* Utility ---------------------------------------------------------------- */
.u-hide { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* The registration-cross motif: technical framing on image plates ------ */
.xframe { position: relative; }
.xframe::before, .xframe::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
  opacity: .5;
}
.xframe::before {
  top: 7px; left: 7px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.xframe::after {
  bottom: 7px; right: 7px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: 22px; }
  .section { padding: 64px 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 15px; }
  .section { padding: 48px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

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