/* ============================================================
   Supply — second design theme
   A warm, dark, editorial-directory world: ink #1d1c1a under
   cream #eeebdd, rust as the single accent, General Sans for
   display and JetBrains Mono carrying every label and metadata
   line. Tight radii, flat card surfaces, no bands.

   Loaded only when html[data-design="supply"]. Every rule is
   scoped to that attribute (specificity 0,1,1) so it outranks
   the :root block that theme-vars.ejs injects after style.css.
   ============================================================ */

/* General Sans — Indian Type Foundry, ITF Free Font License.
   Self-hosted because the CSP allows font-src 'self' but not
   cdn.fontshare.com. */
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- tokens: ink (default) ---------- */
html[data-design="supply"] {
  --font-body: 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-caption: var(--font-mono);

  /* display steps track the reference: 4.4rem / 2.6rem / 1.2rem */
  --t-display: clamp(2.5rem, 1.15rem + 5.2vw, 4.4rem);
  --t-h2: clamp(1.85rem, 1.1rem + 2.6vw, 2.6rem);
  --t-h3: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --t-lead: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;
  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-normal: 1.5;

  /* the reference tops out at 8px; controls sit at 4 */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --r-3xl: 8px;

  --bg: #1d1c1a;
  --bg-alt: #161514;
  --card: #292825;
  --card-hover: #33322e;
  --border: #33322e;
  --border-strong: #4a4843;
  --text: #eeebdd;
  --text-soft: #c9c5b8;
  --text-muted: #9d998f;
  --nav-bg: rgba(29, 28, 26, var(--nav-alpha, 0.85));
  --btn-bg: #eeebdd;
  --btn-fg: #1d1c1a;

  /* Supply is one continuous field, not two alternating bands.
     .section-alt becomes a quiet recess instead of an inversion. */
  --inv-bg: #161514;
  --inv-card: #232220;
  --inv-card-hover: #2d2c28;
  --inv-border: #33322e;
  --inv-border-strong: #4a4843;
  --inv-text: #eeebdd;
  --inv-text-soft: #c9c5b8;
  --inv-text-muted: #9d998f;
  --inv-btn-bg: #eeebdd;
  --inv-btn-fg: #1d1c1a;
  --inv-primary: var(--primary);
  --inv-gold: var(--gold);
  --inv-gold-2: var(--gold-2);

  /* the rust fill is always the raw brand value; accent TEXT uses the
     lighter step so small type clears 4.5:1 on ink and on card */
  --fill: var(--grad-1, #d14424);
  --fill-fg: #ffffff;

  --teal: #292825;
  --teal-deep: #1d1c1a;
  --ease: cubic-bezier(0.72, 0, 0.12, 1);
}

/* ---------- tokens: cream ---------- */
html[data-design="supply"][data-theme="light"] {
  --bg: #eeebdd;
  --bg-alt: #e5e1d0;
  --card: #f7f5ea;
  --card-hover: #f1eee0;
  --border: #d8d3c0;
  --border-strong: #b8b3a0;
  --text: #1d1c1a;
  --text-soft: #3f3e3a;
  --text-muted: #6b675e;
  --nav-bg: rgba(238, 235, 221, var(--nav-alpha, 0.88));
  --btn-bg: #1d1c1a;
  --btn-fg: #eeebdd;

  --inv-bg: #e5e1d0;
  --inv-card: #f7f5ea;
  --inv-card-hover: #f1eee0;
  --inv-border: #d8d3c0;
  --inv-border-strong: #b8b3a0;
  --inv-text: #1d1c1a;
  --inv-text-soft: #3f3e3a;
  --inv-text-muted: #6b675e;
  --inv-btn-bg: #1d1c1a;
  --inv-btn-fg: #eeebdd;

  /* darken the admin accent so it clears 4.5:1 on cream */
  --primary: color-mix(in srgb, var(--grad-1, #d14424) 74%, #1d1c1a);
  --inv-primary: var(--primary);
  --teal: #f7f5ea;
  --teal-deep: #eeebdd;
}

/* ---------- typography ---------- */
html[data-design="supply"] body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}
html[data-design="supply"] p { letter-spacing: 0.01em; }
html[data-design="supply"] h1,
html[data-design="supply"] h2,
html[data-design="supply"] h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}
html[data-design="supply"] h1 { line-height: 1; }
html[data-design="supply"] h2 { line-height: 1.1; }
html[data-design="supply"] h3 { line-height: 1.1; font-weight: 500; }

/* in-content links carry the reference's underline; controls do not */
html[data-design="supply"] .rich-text a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Mono is the label voice of this world: categories, meta, counts, axes.
   This is the pinned reference's own system, not a generic eyebrow. */
html[data-design="supply"] .tag,
html[data-design="supply"] .cat-chip,
html[data-design="supply"] .tools-label,
html[data-design="supply"] .marquee-item,
html[data-design="supply"] .filter-btn,
html[data-design="supply"] .card-link,
html[data-design="supply"] .author-role,
html[data-design="supply"] .footer p,
html[data-design="supply"] .footer-admin,
html[data-design="supply"] .cs-label,
html[data-design="supply"] .cs-num,
html[data-design="supply"] .cs-client-label,
html[data-design="supply"] .cs-card-tag,
html[data-design="supply"] .cs-chip,
html[data-design="supply"] .cs-lane-label,
html[data-design="supply"] .cs-axis,
html[data-design="supply"] .cs-table th,
html[data-design="supply"] .cs-res dt,
html[data-design="supply"] .cs-quote-attr,
html[data-design="supply"] .cs-card-meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
}
html[data-design="supply"] .portfolio-desc,
html[data-design="supply"] .cs-metric-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
  line-height: 1.6;
}
html[data-design="supply"] .cs-res dd,
html[data-design="supply"] .cs-metric-value,
html[data-design="supply"] .cs-lane-label .val {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- surface: one field, no band inversion ---------- */
html[data-design="supply"] .section-alt { background: var(--bg-alt); }
html[data-design="supply"] .tools-strip { background: var(--bg-alt); }

/* ---------- controls ---------- */
html[data-design="supply"] .btn {
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 13px 20px;
}
html[data-design="supply"] .btn-lg { padding: 16px 26px; font-size: var(--t-sm); }
html[data-design="supply"] .btn-sm { padding: 9px 14px; font-size: 0.6875rem; }
/* the primary action takes the rust fill, exactly as the reference's
   SUBSCRIBE does; white on rust measures 4.6:1 */
html[data-design="supply"] .btn-primary {
  background: var(--fill);
  color: var(--fill-fg);
}
html[data-design="supply"] .btn-primary:hover {
  background: color-mix(in srgb, var(--fill) 86%, #000);
}
html[data-design="supply"] .btn-outline { border-color: var(--border-strong); }
html[data-design="supply"] .filter-btn {
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  padding: 8px 12px;
}
html[data-design="supply"] .filter-btn.active {
  background: var(--fill);
  color: var(--fill-fg);
  border-color: transparent;
}
html[data-design="supply"] .theme-toggle { border-radius: var(--r-md); border-color: var(--border); }

/* ---------- nav ---------- */
html[data-design="supply"] .logo {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}
html[data-design="supply"] .nav-links a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- hero ---------- */
html[data-design="supply"] .hero h1 { letter-spacing: -0.015em; }
/* the reference runs brand line and proposition at one size, but its h1 is
   three words; here a full name plus a role plus a description needs a real
   step down or the three tiers mush together */
html[data-design="supply"] .hero-role {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}
html[data-design="supply"] .hero-desc { font-size: var(--t-body); color: var(--text-muted); }
html[data-design="supply"] .hero-img-frame { border-radius: var(--r-2xl); border-color: var(--border); }

/* ---------- cards ---------- */
html[data-design="supply"] .card {
  border-radius: var(--r-2xl);
  border-color: var(--border);
  padding: 22px;
}
html[data-design="supply"] .card:hover { border-color: var(--border-strong); }
html[data-design="supply"] .service-icon {
  border-radius: var(--r-md);
  background: transparent;
  border-color: var(--border-strong);
  color: var(--primary);
}
html[data-design="supply"] .tag {
  border-radius: var(--r-md);
  font-size: 0.6875rem;
  padding: 4px 7px;
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-muted);
}
html[data-design="supply"] .card-link {
  font-size: var(--t-xs);
  color: var(--primary);
}
html[data-design="supply"] .skill-item { border-radius: var(--r-md); }

/* ---------- portfolio ---------- */
html[data-design="supply"] .portfolio-card { padding: 10px; }
html[data-design="supply"] .portfolio-thumb {
  border-radius: var(--r-lg);
  border-bottom: 0;
  background: var(--bg-alt);
}
html[data-design="supply"] .portfolio-body { padding: 14px 6px 6px; }
html[data-design="supply"] .portfolio-body h3 { font-size: var(--t-h3); margin-bottom: 6px; }
html[data-design="supply"] .cat-chip {
  border-radius: var(--r-md);
  font-size: 0.625rem;
  background: rgba(29, 28, 26, 0.82);
  border-color: rgba(238, 235, 221, 0.18);
  color: #eeebdd;
}
/* the reference's signature affordance: a pale square holding a rust
   out-arrow, sitting on the artwork rather than floating over it */
html[data-design="supply"] .zoom-hint {
  top: auto;
  bottom: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: #eeebdd;
  border-color: #eeebdd;
  color: var(--fill);
  opacity: 1;
}
html[data-design="supply"] .zoom-hint svg { width: 15px; height: 15px; }
html[data-design="supply"] .thumb-nav,
html[data-design="supply"] .play-badge { border-radius: var(--r-md); }

/* ---------- tools strip ---------- */
html[data-design="supply"] .tools-label {
  font-size: var(--t-xs);
  color: var(--text-muted);
}
html[data-design="supply"] .marquee-item { font-size: var(--t-xs); }

/* ---------- section heads ---------- */
html[data-design="supply"] .section-head h2 { letter-spacing: -0.015em; }
html[data-design="supply"] .section-head p,
html[data-design="supply"] .section-head .rich-text {
  font-size: var(--t-lead);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ---------- about ---------- */
html[data-design="supply"] .about-role {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-sm);
  color: var(--text-muted);
}
html[data-design="supply"] .about-bio { font-size: var(--t-body); }

/* ---------- contact panel ---------- */
/* Supply has no saturated brand slab; the panel is a card like the rest,
   and the rust arrives only on the primary action. */
html[data-design="supply"] .contact-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}
html[data-design="supply"] .contact-box h2 { color: var(--text); }
html[data-design="supply"] .contact-box h2 .grad-text { color: var(--primary); }
html[data-design="supply"] .contact-box p,
html[data-design="supply"] .contact-box .contact-desc {
  color: var(--text-muted);
  font-size: var(--t-lead);
}
html[data-design="supply"] .contact-box .btn-primary { background: var(--fill); color: var(--fill-fg); }
html[data-design="supply"] .contact-box .btn-primary:hover { background: color-mix(in srgb, var(--fill) 86%, #000); }
html[data-design="supply"] .contact-box .btn-outline {
  color: var(--text);
  border-color: var(--border-strong);
}
html[data-design="supply"] .contact-box .btn-outline:hover {
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* ---------- testimonials ---------- */
html[data-design="supply"] .testimonial-text { font-size: var(--t-body); letter-spacing: 0.01em; }
html[data-design="supply"] .avatar-placeholder { background: var(--fill); color: var(--fill-fg); }

/* ---------- footer ---------- */
html[data-design="supply"] .footer p,
html[data-design="supply"] .footer-admin { font-size: 0.6875rem; }

/* ---------- case study ---------- */
html[data-design="supply"] .cs-title { letter-spacing: -0.015em; }
html[data-design="supply"] .cs-summary { font-size: var(--t-lead); letter-spacing: 0.01em; }
html[data-design="supply"] .cs-metric,
html[data-design="supply"] .cs-meter,
html[data-design="supply"] .cs-quote,
html[data-design="supply"] .cs-table-wrap,
html[data-design="supply"] .cs-disclosure { border-radius: var(--r-2xl); }
html[data-design="supply"] .cs-chip { border-radius: var(--r-md); }
html[data-design="supply"] .cs-num { color: var(--primary); }
html[data-design="supply"] .cs-fill.fast { background: var(--fill); }
html[data-design="supply"] .cs-track { border-radius: var(--r-sm); }
html[data-design="supply"] .cs-fill { border-radius: var(--r-sm); }
html[data-design="supply"] .empty-note { border-radius: var(--r-2xl); }

/* ---------- browser surfaces ---------- */
html[data-design="supply"] { color-scheme: dark; }
html[data-design="supply"][data-theme="light"] { color-scheme: light; }
html[data-design="supply"] ::selection { background: color-mix(in srgb, var(--fill) 34%, transparent); }