@charset "UTF-8";

/* ---------- LAYERS (lowest → highest) ---------- */
@layer fonts, reset, base, components, utilities, theme;

/* ========== BASE: tokens + element defaults; most will likely be overridden by tokenization in higher layers ========== */
@layer base {

   /* 1) Root tokens (single source of truth) */
   html {
      font-size: 14px;
   }

   /* 1rem = 14px */

   :root {
      /* ---- Color system ---- */
      --color-black: #000000;
      --color-white: #ffffff;

      /* brand hues (kept from your palette) */
      --color-pink: #ec008d;
      --color-cyan: #00adee;
      --color-purple: #69408e;
      --color-red: #ff0000;
      --color-green: #00ff00;
      --color-blue: #0000ff;
      --color-yellow: #ffff00;
      --color-orange: #ff7f00;

      /* semantic */
      --color-bg: var(--color-white);
      --color-fg: #222222;
      --color-muted: #4a4a4a;
      --color-subtle: #dddddd;
      --color-accent: var(--color-cyan);

      /* 969 STUDIOS BRAND COLORS */
      --zero-dark: #232323;
      --engineer-red: #C10000;
      --battleship-gray: #949495;
      --flouride: #26F0F1;
      --alloy-orange: #C16100;
      --moss-green: #9ADB29;
      --sandy-brown: #ABAB55;
      --whit: #c6c6c6;

      /* extended (kept, normalized) */
      --color-warning: #ffc107;
      --color-danger: #ff0019;
      --color-light: #f8f9fa;
      --color-dark: #343a40;
      --color-pink-dk: #c30052;
      --color-cyan-dk: #005472;
      --color-purple-lt: #a58fc1;

      /* ---- Typography ---- */
      /* families (fill in your real stacks) */
      --font-body: "Palatino Linotype", Arial, sans-serif;
      --font-mono: "Courier New", Courier, monospace;
      --font-quote: Georgia, serif;
      --font-h1: "Helvetica Black", "Arial Black", sans-serif;
      --font-h2: "Times New Roman", serif;
      --font-h3: "Helvetica Neue Ultralight", "Univers 58", "Montserrat ExtraLight", sans-serif;
      --font-h4: futura-bold-cond, Helvetica, "Univers 58", "Montserrat Light", sans-serif;
      --font-h5: helv-bold-cond, "Arial Black", "Montserrat Bold", sans-serif;

      /* scale (replaces mixed names like --huge/--big/--norml) */
      --fs-xs: 0.75rem;
      /* ~12px (your --norm-m)   */
      --fs-sm: 1.1rem;
      /* 14px  (your --norm)     */
      --fs-md: 1.25rem;
      /* 16px  (your --norm-p)   */
      --fs-lg: 1.5rem;
      /* 18px  (your --norm-pp)  */
      --fs-h5: 2.00rem;
      /* 14px  */
      --fs-h4: 2.50rem;
      /* 21px  (your 'smaller')  */
      --fs-h3: 3.30rem;
      /* 31.5px (your 'medium')  */
      --fs-h2: 3.90rem;
      /* 44.8px (your 'big')     */
      --fs-h1: 4.50rem;
      /* 49px  (your 'huge')     */

      --lh-body: 1.5;
      --lh-heading: 1.5;

      --ls-normal: 0.03em;
      --ls-wide-factor: 1.5rem;
      --ls-wider-factor: 3.75rem;
      --ls-narrow-factor: -1rem;

      /* ---- Spacing / radii / misc ---- */
      --space-1: .25rem;
      --space-2: .5rem;
      --space-3: 1rem;
      --space-4: 1.5rem;
      --space-5: 2rem;
      --radius-1: 3px;
      --radius-2: 12px;
      --shadow-1: 0 1px 1px rgba(0, 0, 0, .05);

      /* links */
      --link: var(--color-accent);
      --link-hover: #3a88ff;

      /* layout helpers */
      --measure: 65ch;
      --bp-md: 768px;
      /* use literals in @media; vars here for documentation */
      --bp-lg: 1024px;
   }

   /* 2) Global element defaults */
   *,
   *::before,
   *::after {
      box-sizing: border-box;
   }

   html:focus-within {
      scroll-behavior: smooth;
   }

   body {
      margin: 0;
      min-height: 100vh;
      width: 100%;
      color: var(--color-fg);
      background: var(--color-bg);
      font: normal var(--fs-sm)/var(--lh-body) var(--fontb);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
   }

   .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
   }

   main {
      width: 100%;
      margin: 0 auto;
      padding: 0 clamp(1rem, 4vw, 3rem) clamp(5rem, 8vw, 7rem);
   }

   a {
      color: var(--link);
      text-decoration: none;
   }

   a:hover {
      color: var(--link);
      text-decoration: underline;
   }

   /* Headings consume tokens */
   h1, .h1 {
      font: normal var(--fs-h1)/var(--lh-heading) var(--font-h1);
      /*letter-spacing: .05em;*/
      color: var(--alloy-orange);

   }

   h2, .h2 {
      font: normal var(--fs-h2)/var(--lh-heading) var(--font-h2);
      /*letter-spacing: .035em;*/
   }

   h3, .h3 {
      font: normal var(--fs-h3)/var(--lh-heading) var(--font-h3);
      /*letter-spacing: .14em;*/
   }

   h4, .h4 {
      font: normal var(--fs-h4)/var(--lh-heading) var(--font-h4);
      /*letter-spacing: .04em;*/
      padding: 0 0 0 55px;
      margin: -10px 0 0 0;
   }

   h5, .h5 {
      font: normal var(--fs-h5)/var(--lh-heading) var(--font-h5);
      letter-spacing: .05em;
      text-align: left;
      color: var(--alloy-orange);
   }

   h6, .h6 {
      font: normal var(--fs-h6)/var(--lh-heading) var(--font-h6);
      letter-spacing: .07em;
      text-align: left;
   }

   h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
      text-wrap: balance;
   }

   /* Copy */
   p {
      font-size: var(--fs-sm);
      line-height: var(--lh-body);
      width: min(100%, var(--measure));
      /*margin: 0 auto var(--space-4);*/
      text-indent: 5ch;
   }

   p:has(+ ol),
   p:has(+ ul) {
      margin: 5px 0 10px 0;
   }

   article {
      width: min(100%, 100rem);
      margin: 0 auto var(--space-5);
   }

   @media (max-width: 48rem) {
      p {
         padding-inline: var(--space-2);
      }

      article {
         padding-inline: var(--space-2);
      }
   }

   @media (max-width: 37.5rem) {
      p {
         text-indent: 0;
      }
   }

   /* if you rely on widths, keep them centralized here 
  p       { margin: 0 auto; width: min(90%, 65ch); }
  article { width: min(70%, 60rem); }*/

   /* Section spacing + number styling */
   header {
      padding: clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 5vw, 2.5rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
      border-bottom: 1px solid #333;
   }

   header nav {
      flex: 1 1 100%;
   }

   @media (min-width: 48rem) {
      header {
         flex-wrap: nowrap;
      }

      header nav {
         flex: 0 0 auto;
      }
   }

   form {
      font: normal var(--fs-sm)/var(--lh-body) var(--fontf);
      letter-spacing: .03em;
   }

   section {
      margin: 3rem 0;
   }

   section, article, h1, h2, h3, h4, h5 {
      margin: -5px 9px -5px 9px;
   }

   hr {
      border: 0;
      border-top: 1px solid var(--color-subtle);
      margin: 1rem 0;
   }

   /* Typographic helpers */
   em,
   i {
      font-style: italic;
   }

   strong,
   b {
      font-weight: 700;
   }

   small {
      font-size: 0.6em;
   }

   code {
      display: inline-block;
      background: #f8f8f8;
      border: 1px solid #dfdfdf;
      color: #333333;
      font-family: var(--font-mono);
      padding: .25rem .3rem .05rem;
      border-radius: 3px;
   }

   kbd {
      display: inline-block;
      background: #f8f8f8;
      border: 1px solid #dfdfdf;
      color: #333333;
      font-family: var(--font-mono);
      padding: .2rem .5rem;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
   }

   blockquote {
      position: relative;
      padding: 0 0 0 1rem;
      /* extra room on the left */
      font: italic var(--fs-h5)/1.6 var(--font-quote);
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
      width: 70%;
   }

   blockquote::before,blockquote::after {
      position: absolute;
      font-family: var(--font-quote);
      font-size: clamp(3.5rem, 6vw, 5rem);
      line-height: 1;
      color: rgba(0, 0, 0, 0.08);
      pointer-events: none;
   }

   blockquote::before {
      content: "\201C";
      /* opening double quote */
      left: 0.5rem;          /* pull it inside the padding instead of negative space */
      transform: translateX(-100%); /* keeps it visually hanging but anchored to the text block */
   }

   blockquote::after {
      content: "\201D";
      /* closing double quote */
      right: 1rem;
   }

   /* Lists */
   ul, ol, dl {
      font-size: var(--fs-sm);
      line-height: 1.6;
      list-style-position: outside;
      margin: 0 0 1.111rem 0;
   }

   ul {
      margin-left: 1.1rem;
   }

   ol {
      margin: 0 0 0 1.4rem;
      list-style: decimal;
   }

   ul li ul, ul li ol, ol li ul, ol li ol {
      margin: 0 0 0 1.111rem;
   }

   ul.square {
      list-style-type: square;
      margin-left: 1.1rem;
   }

   ul.circle {
      list-style-type: circle;
      margin-left: 1.1rem;
   }

   ul.disc {
      list-style-type: disc;
      margin-left: 1.1rem;
   }

   /* Forms */
   form #website {
      display: none;
   }

   /* honeypot */

   /* Desktop tweaks (keep minimal; prefer component-level MQs) 
  @media (min-width: 1024px) {
    p       { margin: 0 0 10px; width: min(90%, var(--measure)); }
    article { width: min(90%, 100rem); }
    section, article, h1, h2, h3, h4, h5, h10, .h10 { margin-left: 6px; margin-right: 6px; }
  }*/
}

/* ===== Optional: Section numbering via counters (cleaner than nth-of-type) =====
@layer components {
   body { counter-reset: section; }
   section>h10,
   section>h2 { counter-increment: section; }
   section>h10::before {
      content: counter(section) ". ";
      color: #af0101;
   }
} */









 /* ----->  DEBUG  <----- */ /*
.debug {
   display: block;
}

div, section, article, img, h1, h2, h3, h4, h5, p, ul, li, nav, blockquote, img {
   border: 1.25px solid var(--color-danger);
}