/* CEVO round 3 · Sage. Every brand value lives here; css/site.css reads only these properties.
   Hero template and measured Qoves grid from round 2 variant A (../brand2/A-studio), retuned to the Sage palette. */
:root {
  /* Sage palette (brand kit 06-design-tokens) */
  --mist: #F3F5F2;        /* page canvas below the hero */
  --cloud: #D2DCD5;
  --cloud-2: #E4EBE6;
  --sage: #B8C7BD;
  --celadon: #7E9688;
  --pine: #244839;
  --obsidian: #111614;
  --canvas: var(--mist);

  /* Inks */
  --ink: #F3F5F2;                         /* text on the hero, light logo */
  --ink-2: #F3F5F2;                       /* sub, strip subs: full ink, because the field is as light as 4.5:1 allows (4.6:1) */
  --ink-3: rgba(243,245,242,.72);         /* headline line 2: Qoves's ~70% step (large text, 3:1 bar; 3.2:1 on the field) */
  --ink-line: rgba(243,245,242,.28);      /* strip dividers */
  --ink-dark: #111614;                    /* text on mist, dark logo */
  --ink-dark-2: rgba(17,22,20,.66);
  --paper: #E4EBE6;                       /* phone strip band (cloud-2), one step off the mist canvas below */
  --paper-line: rgba(17,22,20,.10);
  --paper-ink: #1B2621;
  --sheet-bg: #244839;                    /* phone/tablet menu sheet: pine */

  /* Studio wall: the Sage composite is a flat sage ~#AEBDB3, a few levels darker in the corners (poster sampled) */
  --wall-top: #AAB9B0;                    /* the poster's wall along the frame top */

  /* Hero field: soft sage in shadow, the lightest sage that keeps full-ink small text >= 4.5:1 */
  --field: #5E7367;
  --hero-bg: #5E7367;
  --hero-bg-narrow: #141D19;              /* under the bottom shade (tablet/phone): deep pine shadow, the shaded tee dissolves into it */
  --shade-bottom-1: rgba(17,22,20,.16);
  --shade-bottom-2: rgba(17,22,20,.05);
  --shade-narrow: rgba(20,29,25,.96);

  /* Nav shading on the lit wall top (obsidian alpha ramps, same shape as round 2 A) */
  --nav-scrim-narrow: linear-gradient(180deg, rgba(17,22,20,0.53) 0%, rgba(17,22,20,0.51) 35%, rgba(17,22,20,0.40) 46%, rgba(17,22,20,0.258) 57%, rgba(17,22,20,0.138) 68%, rgba(17,22,20,0.051) 79%, rgba(17,22,20,0.009) 90%, rgba(17,22,20,0) 100%);
  --nav-scrim-tablet: linear-gradient(180deg, rgba(17,22,20,0.46) 0%, rgba(17,22,20,0.44) 28%, rgba(17,22,20,0.352) 38%, rgba(17,22,20,0.229) 48%, rgba(17,22,20,0.114) 58%, rgba(17,22,20,0.04) 68%, rgba(17,22,20,0.009) 78%, rgba(17,22,20,0) 88%);
  --nav-scrim: linear-gradient(90deg, rgba(17,22,20,0) calc(max(29.44vw, 400px) + 0px), rgba(17,22,20,0.004) calc(max(29.44vw, 400px) + 25px), rgba(17,22,20,0.015) calc(max(29.44vw, 400px) + 50px), rgba(17,22,20,0.034) calc(max(29.44vw, 400px) + 75px), rgba(17,22,20,0.078) calc(max(29.44vw, 400px) + 125px), rgba(17,22,20,0.123) calc(max(29.44vw, 400px) + 175px), rgba(17,22,20,0.168) calc(max(29.44vw, 400px) + 225px), rgba(17,22,20,0.212) calc(max(29.44vw, 400px) + 275px), rgba(17,22,20,0.257) calc(max(29.44vw, 400px) + 325px), rgba(17,22,20,0.302) calc(max(29.44vw, 400px) + 375px), rgba(17,22,20,0.346) calc(max(29.44vw, 400px) + 425px), rgba(17,22,20,0.365) calc(max(29.44vw, 400px) + 450px), rgba(17,22,20,0.376) calc(max(29.44vw, 400px) + 475px), rgba(17,22,20,0.38) calc(max(29.44vw, 400px) + 500px));
  --nav-scrim-h: 44rem;
  --nav-scrim-mask: linear-gradient(180deg, rgba(0,0,0,1.000) 0.0rem, rgba(0,0,0,1.000) 8.0rem, rgba(0,0,0,0.957) 12.0rem, rgba(0,0,0,0.844) 16.0rem, rgba(0,0,0,0.684) 20.0rem, rgba(0,0,0,0.500) 24.0rem, rgba(0,0,0,0.316) 28.0rem, rgba(0,0,0,0.156) 32.0rem, rgba(0,0,0,0.043) 36.0rem, rgba(0,0,0,0.000) 40.0rem);
  --shade-top-bg: linear-gradient(180deg, rgba(17,22,20,0.1) 0%, rgba(17,22,20,0.096) 12%, rgba(17,22,20,0.084) 25%, rgba(17,22,20,0.068) 38%, rgba(17,22,20,0.05) 50%, rgba(17,22,20,0.032) 62%, rgba(17,22,20,0.016) 75%, rgba(17,22,20,0.004) 88%, rgba(17,22,20,0) 100%);
  --shade-top-h: 40rem;

  /* Primary button (mist pill, obsidian label) */
  --btn: #F3F5F2;
  --btn-text: #111614;
  --btn-hover: #E2E8E3;
  --btn-pressed: #D2DCD5;
  --btn-disabled: rgba(243,245,242,.38);
  --btn-disabled-text: rgba(17,22,20,.55);

  /* Secondary button: tinted glass. On the lighter sage field it darkens (obsidian tint) so the mist label keeps >= 4.5:1 */
  --btn2: rgba(243,245,242,.18);
  --btn2-text: #F3F5F2;
  --btn2-hover: rgba(243,245,242,.28);
  --btn2-pressed: rgba(243,245,242,.38);
  --btn2-disabled: rgba(243,245,242,.10);
  --btn2-disabled-text: rgba(243,245,242,.45);
  --btn2-field: rgba(17,22,20,.12);
  --btn2-field-hover: rgba(17,22,20,.18);
  --btn2-field-pressed: rgba(17,22,20,.24);

  --pill-border: rgba(17,22,20,.08);
  --focus: #F3F5F2;
  --focus-halo: rgba(17,22,20,.55);
  --focus-dark: #244839;                  /* focus ring on the mist canvas */

  /* Media framing: the Sage composite keeps round 2's studio-slot framing, so the same frame tokens */
  --media-pos: 50% 50%;
  --media-narrow-top: -11.9%;
  --media-narrow-h: 95%;
  --media-short-top: -2.5%;
  --media-short-h: 66%;
  --media-tablet-top: 0%;
  --media-tablet-h: 71%;

  --ink-age: #F3F5F2;                     /* "Example visualisation" line, full ink on the field */
  --paper-ink-age: rgba(17,22,20,.70);
  --btn-phone-fs: 1.6rem;
  --shade-tablet-h: 72rem;
  --nav-tablet-h: 22rem;
  --media-narrow-mask: linear-gradient(180deg, #000 78%, transparent 99%);
  --shade-narrow-ramp: linear-gradient(180deg, transparent, color-mix(in srgb, var(--shade-narrow) 30%, transparent) 22%, color-mix(in srgb, var(--shade-narrow) 66%, transparent) 46%, color-mix(in srgb, var(--shade-narrow) 90%, transparent) 72%, var(--shade-narrow));

  /* Wall fall-off (multiply on the media). --falloff-start = field ÷ wall at the frame's left edge, so the frame's left edge
     renders exactly the field and the light rises over 700px to full behind the face. ONE value to retune per video:
     Sage composite wall ~#ABBAB1 at the media's left edge (poster sampled) -> #8C9E94. */
  --falloff-start: #8C9E94;
  --media-mask-desk: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 4%, rgba(0,0,0,0.22) 9%, rgba(0,0,0,0.52) 15%, rgba(0,0,0,0.82) 22%, #000 30%);
  --media-bottom-mask-desk: linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0.35) 95%, transparent 100%);
  --falloff-desk: linear-gradient(90deg, var(--falloff-start) 0, var(--falloff-start) calc(5.44vw + 0px), color-mix(in srgb, var(--falloff-start), #fff 1.5%) calc(5.44vw + 35px), color-mix(in srgb, var(--falloff-start), #fff 3.8%) calc(5.44vw + 70px), color-mix(in srgb, var(--falloff-start), #fff 9.2%) calc(5.44vw + 105px), color-mix(in srgb, var(--falloff-start), #fff 20.8%) calc(5.44vw + 175px), color-mix(in srgb, var(--falloff-start), #fff 32.3%) calc(5.44vw + 245px), color-mix(in srgb, var(--falloff-start), #fff 44.6%) calc(5.44vw + 315px), color-mix(in srgb, var(--falloff-start), #fff 56.2%) calc(5.44vw + 385px), color-mix(in srgb, var(--falloff-start), #fff 67.7%) calc(5.44vw + 455px), color-mix(in srgb, var(--falloff-start), #fff 79.2%) calc(5.44vw + 525px), color-mix(in srgb, var(--falloff-start), #fff 91.5%) calc(5.44vw + 595px), color-mix(in srgb, var(--falloff-start), #fff 96.2%) calc(5.44vw + 630px), color-mix(in srgb, var(--falloff-start), #fff 99.2%) calc(5.44vw + 665px), #fff calc(5.44vw + 700px), #ffffff max(78%, 5.44vw + 720px), #fdfdfd calc(max(78%, 5.44vw + 720px) + 60px), #f7f7f7 calc(max(78%, 5.44vw + 720px) + 120px), #f0f0f0 calc(max(78%, 5.44vw + 720px) + 180px), #e8e8e8 calc(max(78%, 5.44vw + 720px) + 240px), #e2e2e2 calc(max(78%, 5.44vw + 720px) + 300px), #e0e0e0 calc(max(78%, 5.44vw + 720px) + 360px));
  --falloff-wide: linear-gradient(90deg, var(--falloff-start) 0, var(--falloff-start) calc(26vw - 296px + 0px), color-mix(in srgb, var(--falloff-start), #fff 1.5%) calc(26vw - 296px + 35px), color-mix(in srgb, var(--falloff-start), #fff 3.8%) calc(26vw - 296px + 70px), color-mix(in srgb, var(--falloff-start), #fff 9.2%) calc(26vw - 296px + 105px), color-mix(in srgb, var(--falloff-start), #fff 20.8%) calc(26vw - 296px + 175px), color-mix(in srgb, var(--falloff-start), #fff 32.3%) calc(26vw - 296px + 245px), color-mix(in srgb, var(--falloff-start), #fff 44.6%) calc(26vw - 296px + 315px), color-mix(in srgb, var(--falloff-start), #fff 56.2%) calc(26vw - 296px + 385px), color-mix(in srgb, var(--falloff-start), #fff 67.7%) calc(26vw - 296px + 455px), color-mix(in srgb, var(--falloff-start), #fff 79.2%) calc(26vw - 296px + 525px), color-mix(in srgb, var(--falloff-start), #fff 91.5%) calc(26vw - 296px + 595px), color-mix(in srgb, var(--falloff-start), #fff 96.2%) calc(26vw - 296px + 630px), color-mix(in srgb, var(--falloff-start), #fff 99.2%) calc(26vw - 296px + 665px), #fff calc(26vw - 296px + 700px), #ffffff max(78%, 26vw + 424px), #fdfdfd calc(max(78%, 26vw + 424px) + 60px), #f7f7f7 calc(max(78%, 26vw + 424px) + 120px), #f0f0f0 calc(max(78%, 26vw + 424px) + 180px), #e8e8e8 calc(max(78%, 26vw + 424px) + 240px), #e2e2e2 calc(max(78%, 26vw + 424px) + 300px), #e0e0e0 calc(max(78%, 26vw + 424px) + 360px));
  --falloff-tablet: linear-gradient(90deg, var(--falloff-start) 0, var(--falloff-start) calc(400px - 36vw + 0px), color-mix(in srgb, var(--falloff-start), #fff 1.5%) calc(400px - 36vw + 31px), color-mix(in srgb, var(--falloff-start), #fff 3.8%) calc(400px - 36vw + 62px), color-mix(in srgb, var(--falloff-start), #fff 9.2%) calc(400px - 36vw + 93px), color-mix(in srgb, var(--falloff-start), #fff 20.8%) calc(400px - 36vw + 155px), color-mix(in srgb, var(--falloff-start), #fff 32.3%) calc(400px - 36vw + 217px), color-mix(in srgb, var(--falloff-start), #fff 44.6%) calc(400px - 36vw + 279px), color-mix(in srgb, var(--falloff-start), #fff 56.2%) calc(400px - 36vw + 341px), color-mix(in srgb, var(--falloff-start), #fff 67.7%) calc(400px - 36vw + 403px), color-mix(in srgb, var(--falloff-start), #fff 79.2%) calc(400px - 36vw + 465px), color-mix(in srgb, var(--falloff-start), #fff 91.5%) calc(400px - 36vw + 527px), color-mix(in srgb, var(--falloff-start), #fff 96.2%) calc(400px - 36vw + 558px), color-mix(in srgb, var(--falloff-start), #fff 99.2%) calc(400px - 36vw + 589px), #fff calc(400px - 36vw + 620px));
  --field-desk-bg: linear-gradient(180deg, color-mix(in srgb, var(--field), #111614 1%) 0%, var(--field) 30%, var(--field) 55%, color-mix(in srgb, var(--field), #111614 2%) 66%, color-mix(in srgb, var(--field), #111614 3.5%) 78%, color-mix(in srgb, var(--field), #111614 5%) 90%, color-mix(in srgb, var(--field), #111614 6%) 100%);
  /* the field runs over the media's left edge and dissolves (eased) into it, so flat field meets video grain with no line */
  --field-desk-w: 42%;
  --field-desk-mask: linear-gradient(90deg, #000 0%, #000 55%, rgba(0,0,0,.92) 63%, rgba(0,0,0,.74) 72%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.26) 88%, rgba(0,0,0,.08) 95%, transparent 100%);
  --field-tablet-w: 40%;
  --field-tablet-bg: linear-gradient(90deg, var(--field) 0%, var(--field) 60%, color-mix(in srgb, var(--field) 96.2%, transparent) 65%, color-mix(in srgb, var(--field) 85.4%, transparent) 70%, color-mix(in srgb, var(--field) 69.1%, transparent) 75%, color-mix(in srgb, var(--field) 50%, transparent) 80%, color-mix(in srgb, var(--field) 30.9%, transparent) 85%, color-mix(in srgb, var(--field) 14.6%, transparent) 90%, color-mix(in srgb, var(--field) 3.8%, transparent) 95%, transparent 100%);
}