/* ===========================================================================
   Atlas On-Site — design tokens.

   Art direction: SHOP MANUAL. The site is built like industrial documentation
   — a visible hairline grid, monospace part-number metadata, photographs as
   captioned plates, ruled lists instead of cards. Warm printed paper against
   ink, with the logo's red used as a marker, not as decoration.

   Deliberately absent: drop shadows, hover-lifts, radial glows, chamfered
   corners, rounded cards. Hierarchy comes from rule weight, scale and
   inversion — the things a printer has — not from effects.
   =========================================================================== */

:root{
  /* ---- ink -------------------------------------------------------------- */
  --ink:#14161A;              /* near-black, a touch warm */
  --ink-2:#1B1F25;
  --ink-3:#242A31;
  --ink-4:#333B44;

  /* ---- paper: warm manual stock, not cool UI grey ----------------------- */
  --paper:#F5F2EC;
  --paper-2:#EDE8E0;
  --paper-3:#E3DDD2;
  --white:#FFFFFF;

  /* ---- rules: the primary structural device ----------------------------- */
  --rule:#C8C1B4;             /* hairline on paper */
  --rule-soft:#DAD4C8;
  --rule-dark:rgba(245,242,236,.22);
  --rule-dark-soft:rgba(245,242,236,.12);

  /* ---- brand ------------------------------------------------------------ */
  --red:#AE3632;              /* sampled from the logo */
  --red-bright:#C8403B;
  --red-deep:#7F2320;
  --signal:#E0A42B;           /* safety amber, used sparingly as a marker */

  /* ---- text ------------------------------------------------------------- */
  --text:#14161A;
  --text-2:#4A4F57;
  --text-3:#6F757E;
  --on-ink:#F5F2EC;
  --on-ink-2:#A8AEB7;
  --on-ink-3:#767D87;

  /* ---- type ------------------------------------------------------------- */
  --font-display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-hero:clamp(3rem, 1.5rem + 6.2vw, 7rem);
  --fs-h1:clamp(2.8rem, 1.5rem + 5vw, 6rem);
  --fs-h2:clamp(2.3rem, 1.4rem + 3.6vw, 4.5rem);
  --fs-h3:clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-lede:clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  --fs-body:clamp(0.975rem, 0.94rem + 0.16vw, 1.03rem);
  --fs-meta:0.72rem;          /* monospace labels */
  --fs-small:0.84rem;

  --lh-display:0.9;
  --tr-display:-0.015em;
  --tr-meta:0.14em;

  /* ---- layout ----------------------------------------------------------- */
  --container:1320px;
  --gutter:clamp(1.15rem, 0.5rem + 2.2vw, 2.5rem);
  --section-y:clamp(4rem, 2.6rem + 4.6vw, 7.25rem);
  --section-y-tight:clamp(2rem, 1.4rem + 2vw, 3.25rem);

  --hairline:1px;
  --rule-heavy:2px;
  --rule-bold:3px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --header-h:76px;
  --topbar-h:36px;
}

@media (max-width:900px){
  :root{ --topbar-h:0px; }
}

/* Paper grain. A real texture rather than a flat fill — it is what makes the
   light sections read as printed stock instead of as a white div. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");

  /* Drafting grid for ink sections — a technical-drawing field, not a gradient. */
  --drafting:linear-gradient(rgba(245,242,236,.045) 1px, transparent 1px),
             linear-gradient(90deg, rgba(245,242,236,.045) 1px, transparent 1px);
  --drafting-size:72px 72px;
}