/* ============================================================
   BASE.CSS — reset / design tokens / typography / layout utilities
   VELLMARK FOODLAB · SATIA-30
   —— FICTIONAL DEMO. NOT A REAL PRODUCT. ——

   Design language: warm dark food-technology.
   "Amber warmth + instrument precision = food laboratory."

   The palette below is fixed and must not be edited. Everything
   else on this page is negotiable; these eleven values are not.
   ============================================================ */

:root {
  /* --- ground: warm charcoal --- */
  --bg-deep:      #14100c;   /* page floor */
  --bg-surface:   #1c1610;   /* alternating sections */
  --bg-raise:     #221a12;   /* raised planes */
  --bg-card:      #201810;
  --bg-card-hi:   #2a2015;
  --bg-inset:     #100d09;   /* charts / inset wells */

  /* --- primary: honey amber / warm ember --- */
  --amber:        #f5a623;
  --amber-lt:     #ffc76b;
  --amber-dk:     #b87a12;
  --ember:        #ff6b35;
  --ember-dk:     #c2481d;

  --amber-a08:    rgba(245, 166, 35, 0.08);
  --amber-a14:    rgba(245, 166, 35, 0.14);
  --amber-a24:    rgba(245, 166, 35, 0.24);
  --amber-a40:    rgba(245, 166, 35, 0.40);
  --amber-glow:   rgba(245, 166, 35, 0.18);
  --amber-glow-s: rgba(245, 166, 35, 0.34);
  --ember-a20:    rgba(255, 107, 53, 0.20);

  /* --- type: bone white → recessive --- */
  --text-primary:   #f7f0e6;
  --text-secondary: #d6c8b2;
  --text-muted:     #a2937f;
  --text-faint:     #6f6353;

  /* --- rules --- */
  --line:        rgba(245, 166, 35, 0.13);
  --line-strong: rgba(245, 166, 35, 0.32);
  --line-soft:   rgba(247, 240, 230, 0.07);

  /* ==========================================================
     Photograph layer system
     photo → amber wash (blended) → scrim → lab grid → content
     ========================================================== */
  --scrim-edge:  var(--bg-deep);
  --scrim-core:  rgba(20, 16, 12, 0.58);
  --scrim-base:  rgba(20, 16, 12, 0.22);
  --scrim-card:  rgba(20, 16, 12, 0.94);

  /* The dark stop at the end of the wash is doing the dimming.
     Push it past 0.35 and every bright food photograph turns
     into a blackboard. */
  --wash-amber: linear-gradient(148deg,
                  rgba(245, 166, 35, 0.42) 0%,
                  rgba(255, 199, 107, 0.15) 36%,
                  rgba(255, 107, 53, 0.13) 62%,
                  rgba(20, 16, 12, 0.32) 100%);
  --wash-amber-soft: linear-gradient(162deg,
                  rgba(245, 166, 35, 0.28) 0%,
                  rgba(255, 107, 53, 0.08) 54%,
                  rgba(20, 16, 12, 0.30) 100%);

  /* Base grade: warm, dim, contrasty — takes the stock-library
     brightness out of food photography. Below 0.5 there is
     nothing left but black. */
  --grade-base:       sepia(0.26) saturate(0.94) contrast(1.06) brightness(0.86);
  --grade-card:       sepia(0.16) saturate(0.98) contrast(1.05) brightness(0.94);
  --grade-card-hover: sepia(0.02) saturate(1.08) contrast(1.03) brightness(1.14);

  /* Laboratory graph paper — the fourth layer, above the photo */
  --labgrid: repeating-linear-gradient(0deg,
                rgba(245,166,35,0.055) 0 1px, transparent 1px 44px),
             repeating-linear-gradient(90deg,
                rgba(245,166,35,0.055) 0 1px, transparent 1px 44px);
  --labgrid-fine: repeating-linear-gradient(0deg,
                rgba(245,166,35,0.030) 0 1px, transparent 1px 11px),
             repeating-linear-gradient(90deg,
                rgba(245,166,35,0.030) 0 1px, transparent 1px 11px);

  /* ==========================================================
     Type
     A three-way stack. The serif carries statements, the sans
     carries interface and body copy, the mono carries every
     number on the page. Nothing borrows another's job.
     ========================================================== */
  --font-serif: 'Iowan Old Style', 'Charter', 'Bitstream Charter',
                'Sitka Text', Cambria, 'Palatino Linotype', Palatino,
                'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', 'Helvetica Neue', Helvetica, 'Segoe UI', Roboto,
                -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono:  'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', 'Roboto Mono',
                'Fira Code', Consolas, ui-monospace, monospace;

  --font-body:    var(--font-sans);
  --font-display: var(--font-serif);

  /* --- spacing --- */
  --sp-2:  0.25rem;
  --sp-3:  0.5rem;
  --sp-4:  0.75rem;
  --sp-5:  1rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.75rem;
  --sp-9:  4rem;
  --sp-10: 5.5rem;
  --sp-11: 7.5rem;

  /* --- layout --- */
  --wrap:     1120px;
  --wrap-lg:  1380px;
  --wrap-text: 720px;         /* editorial column */
  --nav-h:    66px;
  --topbar-h: 0px;            /* the top banner is gone; the nav starts at the top */

  /* English measure. 65–75 characters, not the looser CJK habit. */
  --measure:       68ch;
  --measure-tight: 58ch;

  /* --- easing --- */
  --ease:      cubic-bezier(0.17, 0.84, 0.30, 1);
  --ease-io:   cubic-bezier(0.62, 0.02, 0.30, 1);
  --t-fast:  0.2s;
  --t-med:   0.42s;
  --t-slow:  0.85s;

  /* --- radii: pills against square corners, echoing the unit --- */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   14px;
  --r-pill: 999px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--bg-deep);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  /* English sets tighter than CJK. 1.6 here, 1.68 in running prose. */
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 70% 40% at 12% 0%,   rgba(245,166,35,0.07) 0%, transparent 62%),
    radial-gradient(ellipse 60% 46% at 92% 34%,  rgba(255,107,53,0.055) 0%, transparent 60%);
  background-attachment: fixed;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

dl, dd, dt { margin: 0; }
blockquote, figure { margin: 0; }
table { border-collapse: collapse; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  color: var(--text-primary);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 6.6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.95rem, 4vw, 3.3rem);  line-height: 1.08; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1rem, 1.3vw, 1.12rem);   letter-spacing: -0.005em; }

p {
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: var(--measure);
}

strong { color: var(--text-primary); font-weight: 650; }
em { font-style: normal; }

/* Monospace: the source of the data feel. Every figure, code and
   axis label on this page routes through here. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0.005em;
}

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

/* Small all-caps label — used sparingly, never as a heading */
.tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-dk);
}

.text-amber { color: var(--amber); }
.text-muted { color: var(--text-muted); }

/* ============================================================
   Layout utilities
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container--lg   { max-width: var(--wrap-lg); }
.container--text { max-width: calc(var(--wrap-text) + var(--sp-6) * 2); }

/* Side-entering reveals begin 40px outside their column, which is
   enough to widen the document before they trigger. `clip` cuts the
   overhang without making a scroll container — `hidden` here would
   still allow programmatic sideways scrolling. */
main { overflow-x: clip; }

/* Wide content — tables, pathway diagrams, code — scrolls inside
   itself. The document body never scrolls sideways. */
.scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.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;
}

/* ============================================================
   Global ornament: laboratory graph paper
   Fixed at the very back. Sections sit at z-index 1 and only
   let it through where they are translucent.
   ============================================================ */
.page-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--labgrid-fine), var(--labgrid);
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, rgba(0,0,0,0.35) 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, rgba(0,0,0,0.35) 62%, transparent 100%);
}

/* Ambient motes float above the sections and below the nav —
   parked at z-index 0 they would be invisible, because almost
   every section has an opaque floor or a photograph. */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ============================================================
   Selection / scrollbar / focus
   ============================================================ */
::selection { background: var(--amber); color: #1a1309; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--amber-dk), var(--ember-dk));
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Small screens: tighten the measure, not the leading
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-5); }
  p { line-height: 1.64; }
}