/* ==========================================================================
   Everything Grows Here · egh-tokens.css
   Rebuilt 17 Sep 2026 to the contract in egh-reference.html, against
   EGH-identity-spec.pdf v1.0. Two faces only. Spacing on the X unit.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Gloock: display only. Wordmark, titles, pull quotes. Single weight.
   Instrument Sans: everything else. Variable wdth 75-100, wght 400-700.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colour. Every value sourced from an ingredient. ---------------- */
  --egh-soil:    #3A2E23;  /* Rich soil        · primary type and mark   */
  --egh-tomato:  #8B3A2C;  /* Heirloom tomato  · accent and rule ONLY    */
  --egh-cream:   #F5F0E8;  /* Cream & butter   · ground and reverses     */
  --egh-honey:   #D4A574;  /* Raw honey        · secondary, sparing      */
  --egh-avocado: #6B8E40;  /* Medium avocado   · secondary, sparing      */

  /* Roles. Reference these, not the ingredients, so the ground can flip. */
  --egh-ground:     var(--egh-cream);
  --egh-text:       var(--egh-soil);
  /* 0.72 is the floor that clears 4.5:1 on cream. Do not lighten it. */
  --egh-text-muted: rgba(58, 46, 35, 0.72);
  --egh-accent:     var(--egh-tomato);
  --egh-rule:       rgba(58, 46, 35, 0.14);
  --egh-soil-12:    rgba(58, 46, 35, 0.12);

  /* --- Space. X is the crossbar height: 1.75U, 14 at the 104x80 mark. - */
  --egh-x:  0.875rem;   /* 14px: one X          */
  --egh-2x: 1.75rem;    /* 28px: two X          */
  --egh-4x: 3.5rem;     /* 56px: clear space    */
  --egh-8x: 7rem;       /* 112px: section band  */

  /* --- Type. Every step a clamp(), so the scale is fluid, no queries. - */
  --egh-font-display: "Gloock", "Iowan Old Style", Georgia, serif;
  --egh-font-body: "Instrument Sans", ui-sans-serif, system-ui,
                   -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --egh-step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --egh-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --egh-step-1:  clamp(1.1875rem, 1.1rem + 0.38vw, 1.375rem);
  --egh-step-2:  clamp(1.5rem, 1.29rem + 1.05vw, 2.0625rem);
  --egh-step-3:  clamp(2rem, 1.61rem + 1.95vw, 3rem);
  --egh-step-4:  clamp(2.5rem, 1.66rem + 4.2vw, 4.625rem);

  --egh-measure: 34rem;   /* body copy line length ceiling */
  color-scheme: light;
}

/* --- Reversed grounds ----------------------------------------------------
   data-egh-ground="soil" | "tomato" on any container. Text, muted text,
   rules and any currentColor mark flip to cream. No second stylesheet.
   ---------------------------------------------------------------------- */

[data-egh-ground="soil"] {
  --egh-ground:     var(--egh-soil);
  --egh-text:       var(--egh-cream);
  --egh-text-muted: rgba(245, 240, 232, 0.70);
  --egh-accent:     var(--egh-honey);
  --egh-rule:       rgba(245, 240, 232, 0.20);
  background: var(--egh-ground);
  color: var(--egh-text);
}

[data-egh-ground="tomato"] {
  --egh-ground:     var(--egh-tomato);
  --egh-text:       var(--egh-cream);
  --egh-text-muted: rgba(245, 240, 232, 0.76);
  --egh-accent:     var(--egh-cream);
  --egh-rule:       rgba(245, 240, 232, 0.24);
  background: var(--egh-ground);
  color: var(--egh-text);
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--egh-cream);
  color: var(--egh-soil);
  font-family: var(--egh-font-body);
  font-size: var(--egh-step-0);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Gloock is display only. It never sets body copy or site text. */
.egh-display,
h1, h2, h3 {
  font-family: var(--egh-font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.02em;   /* negative tracking, per the wordmark */
  text-wrap: balance;
}

h1 { font-size: var(--egh-step-4); }
h2 { font-size: var(--egh-step-3); }
h3 { font-size: var(--egh-step-1); }

/* Small caps label, Instrument Sans. Not Gloock. */
.egh-label {
  font-family: var(--egh-font-body);
  font-size: var(--egh-step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--egh-accent);
}

p { margin: 0 0 var(--egh-x); max-width: var(--egh-measure); }

a { color: var(--egh-accent); text-decoration-thickness: 1px;
    text-underline-offset: 0.18em; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--egh-accent);
  outline-offset: 3px;
}

hr, .egh-hr {
  border: 0;
  border-top: 1px solid var(--egh-rule);
  margin: var(--egh-4x) 0;
}

/* --- Logo slots ---------------------------------------------------------
   Clear space is 2X on all sides. Size floors from the spec are enforced
   here as min-width so a slot cannot be shrunk below its legibility.
   ---------------------------------------------------------------------- */

.egh-logo {
  display: inline-flex;
  align-items: center;
  padding: var(--egh-2x);
  color: var(--egh-text);
}
/* Inline SVG and <img> are both valid ways to place a lockup, so the slots
   size either one. Targeting svg alone lets an <img> slip past the floor. */
.egh-logo :is(svg, img) { display: block; height: auto; }

.egh-logo--horizontal :is(svg, img) { width: 260px; min-width: 200px; }  /* floor 200px */
.egh-logo--stacked    :is(svg, img) { width: 180px; min-width: 120px; }  /* floor 120px */
.egh-logo--singleline :is(svg, img) { width: 280px; min-width: 200px; }  /* floor 200px */
.egh-logo--mark       :is(svg, img) { width: 40px;  min-width: 24px;  }  /* floor 24px  */

/* Wordmark alone: stack floor 96px. Below that the single line, and below
   100px the mark alone. The mark IS the sub-96px identity. */
.egh-logo--wordmark :is(svg, img) { width: 220px; min-width: 96px; }

/* Narrow screens drop each slot to its floor, never below it. */
@media (max-width: 30rem) {
  .egh-logo--horizontal :is(svg, img) { width: 200px; }
  .egh-logo--singleline :is(svg, img) { width: 200px; }
}

/* --- Type over footage --------------------------------------------------
   Three treatments, and nothing else. A floating soft box is worse than
   nothing, so there is no token for one.
   ---------------------------------------------------------------------- */

.egh-frame {
  position: relative;
  overflow: hidden;
  background: var(--egh-soil);
}
.egh-frame > video,
.egh-frame > img { display: block; width: 100%; height: 100%; object-fit: cover;
                   position: relative; z-index: 0; }

/* Scrim. Soil 88% fading to zero across the lower 62%. Reaches the edge.
   Stack order in a frame: picture 0, scrim 1, content 2, corner mark 3.
   The scrim must out-rank the picture or type ends up on bare footage. */
.egh-frame--scrim::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 38% 0 0 0;            /* the lower 62% of frame */
  background: linear-gradient(
    to bottom,
    rgba(58, 46, 35, 0) 0%,
    rgba(58, 46, 35, 0.30) 38%,
    rgba(58, 46, 35, 0.62) 62%,
    rgba(58, 46, 35, 0.84) 82%,
    rgba(58, 46, 35, 0.88) 92%,
    rgba(58, 46, 35, 0.88) 100%
  );
  pointer-events: none;
}

.egh-frame__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--egh-2x);
  color: var(--egh-cream);
}
.egh-frame__content h1,
.egh-frame__content h2,
.egh-frame__content h3 { color: var(--egh-cream); }

/* The MARK, not the wordmark, in the corner at 24px. On the scrim only. */
.egh-frame__watermark {
  position: absolute;
  right: var(--egh-2x);
  bottom: var(--egh-2x);
  z-index: 3;
  color: var(--egh-cream);
  line-height: 0;
}
.egh-frame__watermark svg { width: 24px; height: auto; display: block; }

/* Solid band. Full bleed, hard top edge, no feather. Tomato rule returns.
   Information only. Never the opening title. */
.egh-band {
  background: var(--egh-soil);
  border-top: 2px solid var(--egh-tomato);
  color: var(--egh-cream);
  padding: var(--egh-x) var(--egh-2x);
}

/* Contained mark. Soil block, 1X padding all sides, cream mark. Only for
   frames already carrying guides, rec flags, timecode or slate data. */
.egh-mark-contained {
  display: inline-block;
  background: var(--egh-soil);
  padding: var(--egh-x);
  line-height: 0;
  color: var(--egh-cream);
}
.egh-mark-contained svg { width: 40px; height: auto; display: block; }

/* --- Structural rule ----------------------------------------------------
   The rule under the wordmark is a baseline that closes the block. This is
   that rule as a section device. It is not a logo.
   ---------------------------------------------------------------------- */

.egh-rule-tomato {
  height: 2px;
  background: var(--egh-tomato);
  border: 0;
  margin: 0;
}

/* --- Layout helpers ----------------------------------------------------- */

.egh-wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--egh-2x);
}

.egh-section { padding-block: var(--egh-8x); }

@media (max-width: 40rem) {
  :root { --egh-8x: 4.5rem; --egh-4x: 2.625rem; }
}

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

@media print {
  body { background: #fff; }
  .egh-frame, video { display: none; }
}