/* ============================================================
   DEEP SEA — token override. Loaded AFTER c-teal.css.

   This file redefines tokens and nothing else. Every component
   rule, every band, every measurement stays in c-teal.css, so
   the deep sea page and the teal page cannot drift apart: a fix
   to one is a fix to both.

   What moves, and why:

   The ground goes from teal #06332e (hue 173) to deep sea
   #0b2b33 (hue 192). Nineteen degrees toward the sky, which sits at
   210 across all three photographs. That is what lets the
   photography run in colour.

   The accent goes from #f59d5e (saturation 0.62) to #f79433
   (saturation 0.79). Bolder, not dulled. On the slate ground
   tested earlier the accent sat 8 degrees off the ground's
   exact complement, which is the maximum-vibration position and
   forced it down to sand. Deep sea puts 18 degrees between them,
   and the orange is free again.

   Contrast was never the constraint. Even a fully saturated
   orange clears 4.5:1 on this ground.
   ============================================================ */

:root{
  --surface:     #0b2b33;   /* DEEP SEA. hue 192, sat 0.78 */
  --surface-2:   #123a44;   /* raised deep sea, row hover */
  --surface-3:   #184a55;

  --ink-mute:    #a1bac4;   /* mute follows the ground's hue */

  --accent:      #f79433;   /* hue 30, sat 0.79. 6.5:1 on the ground */
  --accent-dim:  #b4501c;   /* unchanged, still reads as the pressed state */
  --display:     #f79433;
  --tile-mark:   #f79433;   /* the rule under tile headlines. decorative, so
                               no text contrast applies; 2.57:1 on #136e85 tiles */
}

/* The light band keeps its oat ground and its two-colour logic. Only the
   hues move: the deep ground-colour accent follows deep sea rather than teal,
   and the deep orange is lifted to match the bolder accent above. Both
   measured on oat #ece3d3, both clear 4.5:1. */
.band-light{
  --accent:      #136e85;   /* deep sea. 4.59:1 on oat. was teal #0b4f48 */
  --display:     #a64914;   /* 4.60:1 on oat. was #963f13 */
}

/* The two light-tile components inside the dark bands. Same reasoning:
   the bright accent cannot survive a cream tile, so each takes the deep
   version of the colour it is meant to carry. */
#practice .prow, .cream-tiles .prow{ --accent: #a64914; }   /* the numeral stays orange */
#work .trow, .cream-tiles .trow{ --accent: #136e85; }   /* the duration stays ground-colour */

/* ---------- the portrait comes off the filter ----------
   c-teal.css renders it at grayscale(1) contrast(1.06) sepia(.10), which was
   correct while photography here was monochrome by rule. It is not any more.
   Leaving the one picture of a person as the only greyscale image on a page
   of colour photographs read as an oversight rather than a decision.

   filter:none, not a lighter filter. The landscapes run as shot and so does
   this. The source PNG is genuinely colour -- mean saturation 0.50 -- so
   there is something to restore.

   It lands inside the palette without being pushed there, which is luck
   rather than design but worth recording, because it is why no grade was
   needed. Measured off the file, it splits cleanly across the palette's
   two poles:

     blazer     #0a0e19  hue 223  -- the cool pole, 31 deg off the
                                     #0b2b33 ground, same family as the
                                     sky in the landscapes
     lit top    #d5c2b0  hue  31  -- the warm pole. Sits on the accent's
                                     hue, not on oat: it is a warm tan
                                     some 30 points darker than #ece3d3
     hair       #3c261d  hue  18  -- warm pole
     skin       #c98f82  hue  11  -- warm pole

   So the figure is a navy mass at the ground's hue carrying a warm mass at
   the accent's hue, which is the page's own structure at portrait scale.

   No contrast rule applies -- no type sits on the portrait, and its caption
   is below it on the band's own ground -- but the figure does have to read
   against a light band. The blazer measures 14.74:1 against oat, so the
   silhouette separates on its own. The top is the low-contrast part at
   2.60:1 against the band, and it does not matter, because the blazer
   frames it at 5.67:1. */
.band-light .portrait img{ filter:none; }
.portrait img{ filter:none; }

/* ---------- the closing contact band ----------
   Both chosen pages close on the same photograph, so the rule lives here
   rather than in either page's <style> block. It used to sit inline in the
   landing page only, which is why the Resources page was still closing on
   c-teal.css's default -- a solid var(--accent) panel. Two pages, one
   ending, one definition.

   c-teal.css line 339 makes .contact a solid accent field. This overrides
   it. direction-c-deepsea-graded.html still declares its own .contact
   inline, pointing at the graded file, and an inline block loads after a
   linked sheet, so that page keeps its own band.

   The band is dark, so the type on it is oat #ece3d3, and every pixel behind
   that type has to stay below luminance .1333 to clear 4.5:1. The shipped
   file measures .1248 at its brightest pixel, which is 4.72:1. It gets there
   by exposure alone -- a flat multiply of 0.388 on the file as shot, no
   grade and no duotone -- and the multiply is specific to that crop. No
   scrim, no gradient, no text shadow.

   What it costs: orange cannot be type here at all. On the photograph's
   light end it measures 2.82:1 and the mute 3.10:1. Both fail. So the band
   is set entirely in oat and orange survives as button fill only, where it
   carries its own dark ink at 6.56:1. Both buttons take it. */
.contact{
  background-color:#0b2b33;                /* behind the photograph, pre-load */
  background-image:url("assets/wasatch-orig-contact-dark.jpg");
  background-image:
    image-set(url("assets/wasatch-orig-contact-dark.webp") type("image/webp"),
              url("assets/wasatch-orig-contact-dark.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
  padding:120px 0;
  color:var(--ink);
}
.contact h2{ color:#ece3d3; }
.contact .mlabel,
.contact .idx{ color:#ece3d3; }      /* the mute fails on the light end at 3.10:1 */

.contact .btn,
.contact .btn-ghost{
  background:var(--accent); color:#0b2b33; border-color:var(--accent);
}
.contact .btn:hover,
.contact .btn-ghost:hover{
  background:transparent; color:var(--accent); border-color:var(--accent);
}

@media (max-width:620px){
  .contact{ padding:72px 0; background-position:center top, 62% center; }
}

/* ---------- the data bands ----------
   c-teal.css sets .band-raised to #261a12, a brown chosen against the teal
   ground. Two things broke when the ground moved, and only one of them is
   about hue.

   1. SEPARATION. The old brown sits at luminance .0119, below teal's .0260,
      so the band read as a step down from its ground: 1.23:1. Deep sea sits
      at .0204, which is almost exactly where that brown already was, so the
      two grounds collapsed onto each other at 1.14:1. The bands had stopped
      being bands.

      The fix is a step in the other direction, up rather than down, because
      going darker from here cannot work: this stylesheet's own rule says a
      warm dark loses its channel spread and reads as black below about 12
      points, and a darker brown at this ground's luminance lands at 5. The
      new band is lighter than the ground and separates at 1.24:1, which is
      where the teal pairing was.

   2. CHROMA. The old brown is saturation 0.53. The shadowed rock and earth
      in the photographs measure 0.18. The band was three times as saturated
      as the thing it was standing in for, which stopped mattering while the
      photography was duotoned and started mattering when it went to colour.
      It also sat 168 degrees from the deep sea ground, near enough to
      complementary that the chroma had somewhere to go.

      The new band takes the photographs' hue, 33, and comes down to 0.30 --
      not all the way to 0.18, because the 12-point spread rule above needs
      chroma to hold at this value. It measures 18 points.

   Everything that renders on this band was measured: oat 9.47:1, the mute
   6.34:1, the accent numerals 5.30:1, and the cream tiles 9.47:1 against it.

   The mute had to lift from #b6aba0 to #c7baad. The band is lighter now, and
   the old mute fell to 3.84:1 on the hover step. It measured 5.74:1 there
   before, so this is keeping a level, not adding one.

   --surface-2 and --surface-3 are set for completeness only. Inside this
   band every component that consumes them -- .trow, .trow:hover, .prow --
   overrides them to the cream tile values, so nothing currently renders on
   the brown versions. */
.band-raised{
  background-color:#3d352b;   /* EARTH. hue 33, sat 0.30, spread 18 */
  --surface-2:   #494034;
  --surface-3:   #544a3e;
  --ink-mute:    #c7baad;     /* lifted for the lighter band. was #b6aba0 */
  --grid-line:   rgba(236,227,211,.06);
}

/* ---------- the mist band ----------
   Added 2026-09-26. Practice, Engagements, the figures band and the Case
   Studies results moved off earth brown onto a pale blue, so the page carries
   more deep sea and less brown. Mist is lighter than About's oat (luminance
   .849 against .775), and the page now alternates light and dark bands.

   Measured on mist: ink 12.77:1, mute 6.30:1, the #136e85 accent 5.00:1.
   Two tile treatments sit on it:
   - white tiles (practice cards, case study rows): accent 5.84:1, mute 7.36:1
   - #136e85 tiles (engagement cards): white 5.84:1, mute #d4e8ec 4.60:1, and
     peach #fbe3c6 for the duration at 4.70:1. The site orange measures 2.57:1
     on #136e85, so it cannot carry text there. On the hover step #11657a the
     mute and peach measure 5.23:1 and 5.34:1.

   The Systems Roadmap moved to mist the same day, so no page uses
   .band-raised any more. */
.band-mist{
  background-color:#e6eff1; color:#0b2b33;
  --surface:     #e6eff1;
  --surface-2:   #dbe7ea;
  --surface-3:   #d0e0e4;
  --ink:         #0b2b33;
  --ink-mute:    #3f5a63;
  --accent:      #136e85;
  --display:     #136e85;
  --rule:        rgba(11,43,51,.16);
  --rule-strong: rgba(11,43,51,.38);
  --grid-line:   rgba(11,43,51,.06);
}
#practice.band-mist .prow{
  --surface-2:   #ffffff;
  --ink:         #0b2b33;
  --ink-mute:    #3f5a63;
  --accent:      #136e85;
  --rule:        rgba(11,43,51,.14);
  --rule-strong: rgba(11,43,51,.34);
}
.band-mist .lrow{
  --surface-2:   #ffffff;
  --surface-3:   #f1f6f7;
  --ink:         #0b2b33;
  --ink-mute:    #3f5a63;
  --status:      #136e85;
  --venue:       #136e85;
  --rule:        rgba(11,43,51,.14);
  --rule-strong: rgba(11,43,51,.34);
}
#work.band-mist .trow, .band-mist .trow{
  --surface-2:   #136e85;
  --surface-3:   #11657a;
  --ink:         #ffffff;
  --ink-mute:    #d4e8ec;
  --accent:      #fbe3c6;
  --rule:        rgba(255,255,255,.22);
  --rule-strong: rgba(255,255,255,.45);
}

/* ---------- one dark ink on orange ----------
   c-teal.css uses #261a12 wherever dark type sits on the accent. That brown
   was the data-band ground, so it had siblings. The bands are earth #3d352b
   now, which left #261a12 surviving in one place with nothing to belong to,
   while the contact buttons had already moved to #0b2b33. Two dark inks on
   the same orange, differing for no reason anyone could state.

   It is the ground colour now, everywhere. 6.56:1 against #f79433, down from
   the brown's 7.46:1. Both pass; this one is a value the palette already has.

   ONLY where the fill is actually orange. .topnav a.cta in its resting state
   is an outlined button carrying var(--ink) on the page ground -- that is the
   Resources header -- so it is untouched here. Setting it would have put dark
   type on a dark ground. The landing page overrides that button to a
   permanent orange fill in its own block, and carries the value there. */
.btn{ color:#0b2b33; }
.topnav a.cta:hover{ color:#0b2b33; }


/* ---------- index rows ----------
   The component lives in c-teal.css with the teal accents. These are the two
   values that differ, both measured on the oat tile. */
.lrow{
  --status: #a64914;   /* deep orange, 4.60:1 on oat. was #963f13 */
  --venue:  #136e85;   /* deep sea, 4.59:1 on oat. was teal #0b4f48 */
}



/* ---------- copy v5.1 components ----------
   The structure is in c-teal.css under the same heading. These are the
   deep sea values: the one dark ink on orange, and oat for the paragraph
   the close now carries, since the mute fails on the photograph's light end
   at 3.10:1. The photograph is unchanged, and every pixel in the file is
   below the .1333 bound, so a taller band showing more of it is still safe. */
.topnav a.cta.solid{ color:#0b2b33; }
.topnav a.cta.solid:hover{ color:var(--accent); }
.contact p.close{ color:#ece3d3; }