:root {
  /* ---- colour ---- */
  /* the yellow of Haim's signature — the neon it replaced read as
     yellow-green. Everything that shows yellow uses --lime; --lime-off is a
     shade deeper and only carries hover states, which need somewhere to go. */
  --color--lime:               #F5E341;
  --color--lime-off:           #E2CE38;
  --color--lime-zero:          #F5E34100;

  /* Every neutral below used to carry the reference's olive cast — its green
     channel sat 2 to 17 points above the red and blue. Green is not the
     brand, so each one was swapped for the grey of the same CIE lightness:
     identical weight on the page, no hue. The names still say green because
     they are spoken in eight files; they hold neutrals. */
  --color--dark-green:         #2a2a2a;
  --color--dark-green-tint-1:  #3c3c3c;
  --color--dark-green-tint-2:  #545454;
  --color--black:              #111112;
  /* the gallery's ground and cards */
  --color--near-black:         #151415;
  --color--white:              #f4f4f4;
  --color--cream:              #eeeeee;
  --color--grey-1:             #ececec;
  --color--green-light:        #ececec;
  --color--grey-2:             #c9c9c9;
  --color--green-off-white-1:  #dfdfdf;
  --color--green-off-white-2:  #b6b6b6;
  --color--grey-on-track:      #bababa;
  --color--orange:             #ff6b00;

  /* hero ground — must match HeroGL's colorBackground exactly */
  --hero-bg: #f8f8f8;

  /* ---- spacing ---- */
  --gap:                 1.25rem;
  /* full height of the fixed nav bar, used to clear content beneath it */
  --nav-block:           calc(3.75rem + var(--gap) * 2);
  --padding--container:  1.25rem;
  --padding--mini:       1rem;
  --padding--small:      2rem;
  --padding--med:        3rem;
  --padding--large:      4rem;
  --padding--xlarge:     5rem;

  /* ---- radius ---- */
  --radius--small: 1rem;
  --radius--med:   3rem;
  --radius--large: 6.25rem;

  /* ---- type ---- */
  /* Adobe Fonts kit nyr3bpm. Both are static families, not variable —
     weight is set with font-weight only, never font-variation-settings.
     liebling ships 200/300/400/500/700/800/900,
     neue-frutiger-world ships 400–900 plus a 400 italic. */
  --font--display: "liebling", "Arial Hebrew", Arial, sans-serif;
  --font--sans:    "neue-frutiger-world", "Arial Hebrew", Arial, sans-serif;

  /* display weights: bold on white text, light on lime text */
  --wght--display-bold:  700;
  --wght--display-light: 300;

  /* ---- floors on the small type ----
     rem alone makes small text worse exactly where it is already hardest to
     read: the root shrinks with the viewport, so an 8.3px label on a 1440
     desktop is 7.6px on an iPad. A floor is not a fixed size — the value
     still scales above it, it just stops going where nobody can read it.
     The project template already worked this way; this is the rest of the
     site catching up. */
  --text--eyebrow: max(11px, .625rem);
  --text--h6:      1rem;
  --text--h5:      1.2rem;
  --text--h4:      1.5rem;
  --text--h3:      2rem;
  --text--h2:      4.5rem;
  --text--h1:      4rem;
  --text--reg:     1.6rem;
  --text--med:     2.76rem;
  --text--impact:  7.9375rem;

  --text--btn-primary: max(13px, 1rem);
  --text--btn-nav:     max(14px, 1.25rem);

  /* ---- motion ---- */
  --cubic-default:     cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default:  .75s;
  --animation-default: var(--duration-default) var(--cubic-default);

  /* ---- viewport ---- */
  --vh: 1vh;
  --max-vh: 100vh;

  /* ---- fluid type engine ----
     every measurement on the site is in rem; the root font-size scales with the
     viewport, so the whole layout keeps its proportions at any width. */
  --min-width:    992px;
  --max-width:    1920px;
  --design-width: 1728;
  --design-unit:  16;
  --scale-factor: 1;
  --fluid-container: clamp(var(--min-width), 100vw, var(--max-width));
  --fluid-font: calc(var(--fluid-container) / var(--design-width) * var(--design-unit) * var(--scale-factor));
}

@media screen and (max-width: 991px) {
  :root { --min-width: 768px; --max-width: 991px; --design-unit: 20; }
}
@media screen and (max-width: 767px) {
  :root { --min-width: 480px; --max-width: 767px; }
}
/* the nav grows on smaller screens, so the clearance grows with it */
@media screen and (max-width: 1199px) {
  :root { --nav-block: calc(5.6rem + var(--gap) * 2); }
}
@media screen and (max-width: 479px) {
  :root { --nav-block: calc(4.7rem + var(--gap) * 2); }
}

@media screen and (max-width: 479px) {
  :root { --min-width: 320px; --max-width: 479px; --design-unit: 48; }
}

/* ---- the 480-767 cliff ----
   Every other band is continuous with its neighbours; this one was not.
   `--design-unit` stayed at 20 while the band's width halved, so the root
   font fell off a cliff at exactly 480px — 13.33px at 479 and 5.79px at 500,
   which is the whole layout at 43% of its size. A large phone held sideways
   and a small tablet both land there.

   Solved by joining the two ends that are already approved rather than by
   picking a third unit: 13.333px at 480 is what 479 hands over, and 8.889px
   at 767 is what 768 expects. One straight line between them, so the root
   is continuous across the entire range from 320 to 1920.

   `--fluid-font` directly and not through the unit, because there is no
   single unit that hits both ends — the line has to fall as the width grows,
   which is the opposite of what the formula does. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  :root { --fluid-font: calc(13.333px - (100vw - 480px) * 4.444 / 287); }
}

html {
  font-size: var(--fluid-font);
}

body {
  background-color: var(--color--dark-green);
  color: var(--color--white);
  font-family: var(--font--sans);
  font-size: var(--text--h6);
  line-height: 1.4;
  font-weight: 400;
}