/* ============================================================
   BROOKS CONSTRUCTION, direction B
   Image-led. Photography carries the structure, copy hangs off it.

   Differs from direction A: no card grids, no stat strips. The page
   is a sequence of full-bleed images with minimal text over them.
   The build sequence (earthwork > foundations > infrastructure) is
   numbered because it genuinely is a sequence, which is what the
   client asked to showcase.

   PALETTE NOTE (from the comp, partly superseded): Orange #F49728 on
   Porcelain is 2.10:1 and fails contrast. Orange is used on dark
   ground only. The comp originally had Golden Earth #9C681A (4.44:1)
   carrying light sections; the revision pass corrected that, because
   4.44 fails AA for text. --earth-t now carries text on light ground.
   See the --earth / --earth-t note below.
   ============================================================ */

/* ------------------------------------------------------------
   The comp declared :root three times: once up top, once in the
   REVISION PASS block (adding --earth-t and --stars), and once in a
   max-width:640px media query for --navh. They are merged here. No
   value changed in the merge; the declarations never conflicted.
   ------------------------------------------------------------ */

:root{
  --grey:#252626;
  --grey-d:#151616;

  /* --earth and --earth-t are NOT duplicates. Do not consolidate.
     --earth   #9C681A  4.44:1 on paper. FAILS AA for text.
                        Rules and borders only, where 3:1 applies.
     --earth-t #8F5F17  5.12:1 on paper. The text-safe tone.
     The comp's original eyebrow rule multiplied --earth by .6 opacity
     and landed at 2.28:1, which is what prompted the split. */
  --earth:#9C681A;
  --earth-t:#8F5F17;
  /* --earth-t has only 0.62 of headroom over AA (5.12:1 on clean paper), and
     it was measured against #F7F7F3 exactly. Anything that darkens the paper
     breaks it: the flag texture on .on-stripes sections pulls the ground to
     ~#E1E1DD in the darkest folds, which drops the eyebrow to 4.20:1 and
     fails. This is the same tone 4% darker in lightness — identical hue and
     saturation — and measures 5.13:1 on that textured ground, better than
     --earth-t manages on clean paper. Used ONLY where a texture sits behind
     the type. Do not swap it in globally; --earth-t is the audited value. */
  --earth-t-deep:#7D5314;

  --orange:#F49728;
  --apricot:#E6C98D;
  --paper:#F7F7F3;

  --line-l:rgba(247,247,243,.15);
  --line-d:rgba(37,38,38,.13);

  --display:'Archivo Black','Arial Black',sans-serif;
  /* 'Google Sans' was first in the comp's stack. Dropped deliberately:
     it is not loaded by the Google Fonts link and is not publicly
     licensed, so it resolved on some machines and not others. Removing
     it makes the rendering deterministic. DM Sans is what actually
     shipped for virtually every visitor. */
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1360px;
  --gut:clamp(20px,4vw,56px);
  --navh:76px;

  /* Americana: subtle star motif for light sections, per the deck's
     pillar 4 and the "subtle patriotic elements" note. Desaturated and
     low opacity (0.05) so it reads as texture, not theme. Kept as an
     inline data URI rather than a file: it is a design token, and at
     ~900 bytes a separate request costs more than it saves. */
  --stars:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='190' viewBox='0 0 420 190'><g fill='%23252626' opacity='0.05'><path d='M70.0 16.0 L79.4 45.0 L109.9 45.0 L85.3 63.0 L94.7 92.0 L70.0 74.0 L45.3 92.0 L54.7 63.0 L30.1 45.0 L60.6 45.0 Z'/><path d='M210.0 16.0 L219.4 45.0 L249.9 45.0 L225.3 63.0 L234.7 92.0 L210.0 74.0 L185.3 92.0 L194.7 63.0 L170.1 45.0 L200.6 45.0 Z'/><path d='M350.0 16.0 L359.4 45.0 L389.9 45.0 L365.3 63.0 L374.7 92.0 L350.0 74.0 L325.3 92.0 L334.7 63.0 L310.1 45.0 L340.6 45.0 Z'/></g></svg>");

  /* ROUND-ONE FEEDBACK: the flag motif progresses down the page. Stars sit
     on the upper light sections; the lower one transitions into the fabric
     folds and stripes of the flag.

     This is the CLIENT'S OWN FLAG PHOTOGRAPH, not a drawn approximation.
     The first attempt was a generated SVG of wavy bands, which missed the
     point of the note — the ask was for "the fabric folds/stripes", and
     folds are exactly what a drawing does not have.

     Prepared from the striped fly of that frame (canton and pole cropped
     out), greyscaled and lifted to a high key so it behaves like ink rather
     than like a grey rectangle. The tile is the crop plus its own mirror,
     which makes background-repeat:repeat-x seamless — measured edge
     difference across the wrap is 0. Unlike --stars it carries no baked
     opacity, so .on-stripes sets that on the element. */
  --stripes:url("../img/flag-stripes.jpg");
  /* The same fabric, mirrored vertically as well, so it tiles in BOTH
     directions and can carry a whole section rather than a header band.
     Measured wrap difference: 0.00 vertical, 0.02 horizontal. */
  --stripes-tile:url("../img/flag-stripes-tile.jpg");
}

@media(max-width:640px){ :root{--navh:68px} }
@media(max-width:380px){ :root{--navh:62px} }