/* ============================================================================
   CAMP POOL BUILDERS — design tokens
   v5: the v3 architecture, art-directed.

   Nothing about the concept changes here. The pale-blue and white identity,
   the editorial storytelling, the alternating image/text compositions, the
   project cards, the overlapping insets, the wave, the proof sections and the
   structured footer all stay. What changes is proportion.

   The single diagnosis: v3 read as though it were being viewed at 110-125%.
   Every ingredient was right and every ingredient was slightly too large, so
   the page had no quiet in it. The fix is NOT a uniform scale-down — that
   would keep the same flat hierarchy, just smaller. Each level moves by a
   different amount, and the space between things moves the other way:

     level              v3 @1440    v5 @1440    change
     hero headline        59.4        53.0       -11%
     section heading      50.4        45.6        -9%
     editorial heading    41.9        31.5       -25%   (was competing with h2)
     section kicker       37.2        24.0       -35%   (was competing with h3)
     stat figure          32.8        29.5       -10%
     body                 19.8        16.4       -17%
     caption              15.7        13.6       -13%
     metadata             11.5        11.0        -4%
     nav link             13.4        13.0        -3%
     button text          13.4        12.5        -7%
     card padding         16          12         -25%
     frame radius         14           6         -57%
     gutter               43         108        +151%   (a real margin now)
     section break       135         152         +13%

   The two big ones are the kicker and the editorial heading. In v3 the kicker
   (37px) was nearly the size of the section heading it introduced, and the
   editorial heading (42px) was nearly the size of the h2 above it — so three
   levels of hierarchy were reading as one. Pulling those two down is most of
   what makes the page suddenly make sense.
   ========================================================================= */

:root{

  /* ---- 1. One container, one grid -------------------------------------- */

  /* Full width. There is no max-width holding the page in a column any more —
     the container is the viewport, and the only thing between the content and
     the screen edge is the gutter. That gutter is the ONE inset every section
     uses, so the page still has one master left edge and one master right edge
     at any width; it just resolves to the screen rather than to a 1320px box.
     Line length is still governed, but by --measure on the text itself, which
     is where it belongs — a paragraph should not be narrow because the page
     is narrow. */
  --wrap: 100%;
  --pad: clamp(20px, 4.2vw, 88px);

  /* A real 12-track grid, so the alternating compositions are mirrored
     variations of ONE layout (7/5 and 5/7) rather than separate layouts that
     happen to sit near each other. */
  --cols: 12;
  --colgap: clamp(16px, 1.7vw, 26px);


  /* ---- 2. Spacing ------------------------------------------------------ */

  /* Tight within a component, moderate between components, large between
     sections. Every gap on the page is one of these. */
  --sp-1:  6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  --sec:    clamp(76px, 3.4rem + 5.0vw, 128px);   /* between components */
  --sec-lg: clamp(96px, 4.0rem + 6.4vw, 152px);   /* between sections   */


  /* ---- 3. Type --------------------------------------------------------- */

  /* Two faces, split by JOB rather than by level. Fraunces — a serif, set
     light — carries anything the company says: headlines, figures, quotes.
     Plus Jakarta carries anything the visitor scans or clicks: navigation,
     buttons, captions, labels. One geometric sans doing both jobs is most of
     what made the page read as a template; a light serif saying the important
     things is most of what makes a page read as considered. */
  --font-d: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-b: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Light, not semibold. A serif at 300 set large is the whole effect: weight
     is what a headline uses when it has not earned attention by size and
     space. Every display rule still states its own weight — none inherits
     (§3.6). */
  --wd: 300;
  --wm: 500;

  --t-meta:  clamp(.66rem,  .63rem + .06vw,  .69rem);   /* 11.0px @1440 */
  --t-small: clamp(.82rem,  .77rem + .11vw,  .88rem);   /* 14.1px       */
  --t-body:  clamp(.95rem,  .86rem + .19vw,  1.04rem);  /* 16.6px       */
  --t-nav:   clamp(.78rem,  .75rem + .07vw,  .81rem);   /* 13.0px       */
  --t-kick:  clamp(.95rem,  .70rem + .56vw,  1.25rem);  /* 20.0px       */
  --t-h3:    clamp(1.24rem, .84rem + .89vw,  1.64rem);  /* 26.2px       */
  --t-h2:    clamp(1.80rem, .90rem + 2.00vw, 2.70rem);  /* 43.2px       */
  --t-stat:  clamp(1.90rem, 1.42rem + 1.07vw, 2.38rem); /* 38.0px       */
  --t-record: clamp(2.20rem, 1.50rem + 1.56vw, 2.90rem); /* 46.4px      */

  /* Bounded by HEIGHT as well as width: at 1366x768 a width-only clamp pushed
     the buttons off the bottom of a hero pinned to one screen (§7.2). */
  /* Bounded by HEIGHT as well as width. The width term gives 104px at 1440,
     which is what the headline wants; the 11.5vh term is what stops it from
     doing that on a 768-tall laptop, where the copy has to share one screen
     with equal space above and below it (§7.2). */
  --t-hero: clamp(2.75rem, min(7.20vw, 11.5vh), 7.50rem);          /* 104px */

  /* The masthead's height, so the hero copy can be centred in the space BELOW
     it rather than in the whole stage. Centring in the stage is what the
     arithmetic wants and not what the eye wants: it put an equal 200px above
     and below, but the top 90 of that is masthead, so the visible gap above
     read as 110 against 200.

     This is a FALLBACK. app.js overwrites it with the measured bottom of the
     masthead's visible ink, which is a few px above the bar's padded box and
     is the edge a reader actually sees (§6.8). Two attempts at deriving it in
     CSS both mis-resolved their own clamp, which is what sent me looking and
     is how I found the script had owned this all along. */
  --nav-h: 76px;
  --t-deck: clamp(.94rem,  .85rem + .19vw, 1.02rem);

  /* A light serif needs more air between lines than a semibold sans and much
     less tracking — Fraunces is already generously spaced by design, so the
     negative tracking a geometric sans wants closes it up and makes it look
     condensed. */
  --lh-hero: 1.08;
  --lh-d:    1.14;
  --lh-b:    1.66;
  --tr-d:   -.012em;
  --tr-hero:-.018em;
  --tr-e:    .14em;

  /* 45-65 characters. The story column is deliberately narrow — it is
     supporting information beside a photograph, not the main event. */
  --measure: 62ch;
  --measure-story: 40ch;


  /* ---- 4. Colour ------------------------------------------------------- */

  /* The palette does not change. What changes is that it is no longer used at
     full strength everywhere at once: white is the canvas, the pale blue is
     for storytelling grounds, and the deep blue is reserved for actions. */
  --paper:  #FBFCFD;
  --ink:    #122A4C;
  --ink-72: rgba(18,42,76,.80);   /* body — darker than v3, which read faint */
  --ink-55: rgba(18,42,76,.69);   /* 4.69:1 on the tint band, sampled */
  --rule:   rgba(18,42,76,.10);

  --accent:     #14647C;
  --accent-ink: #FFFFFF;
  --accent-lg:  #1B87B0;          /* LARGE TEXT ONLY — 3.98:1 on paper */
  --clay:       #A44B12;

  --tint:   #E8F1F5;              /* the pale band, quieter than before   */
  --tint-2: #F1F6F9;
  /* The band was a flat, fully saturated mid-blue. Nothing reads cheaper than
     a large area of it: it is the colour a template picks, it fights every
     photograph placed on it, and it puts the page's loudest note in its
     quietest section. Deep ink does the same structural job — one dark chapter
     between two light ones — and the photographs gain rather than lose. */
  /* Water, not ink. Four pale aquas that the band layers into a caustic: a
     base, two blooms and a highlight. They are close together on purpose,
     because what reads as water is many near-identical tones moving over each
     other, and what reads as a gradient background is two distant ones. */
  --wash:     #E4F0F4;
  --wash-2:   #CFE6EE;
  --wash-3:   #BEDCE8;
  --wash-lit: #F4FAFC;

  /* how tall a surface is. Every boundary uses the same one, so the page has
     one wave height rather than a different one per section. */
  --foam-h: clamp(58px, 7.2vw, 118px);

  --media-dark: #0A2138;
  --wash-em: #14647C;    /* the accent again, now the band is light */


  /* ---- 5. Surface ------------------------------------------------------ */

  /* 6px, not 14. The generous radius was doing more than anything else to
     make the page read as a modern template rather than as art direction. */
  --r:    6px;
  --r-s:  999px;                  /* pills and buttons only */

  /* Shadows are the other half of that. These are roughly a third of v3's:
     enough to lift a card off the tint, not enough to make it float. */
  --lift:   0 6px 20px -10px rgba(18,42,76,.16);
  --lift-h: 0 12px 28px -12px rgba(18,42,76,.22);
  /* a card on the water has to carry further than a card on paper */
  --lift-card: 0 10px 30px -12px rgba(8,40,60,.34);


  /* ---- 6. Motion ------------------------------------------------------- */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-rv:     1.2s;
  --dur-fast:   .22s;
  --dur-card:   .3s;
  --dur-img:    .6s;
  --dur-nav:    .34s;
  --dur-ground: .5s;
  --dur-panel:  .5s;

  --rv-text:  12px;
  --rv-side:  14px;
  --rv-card:  28px;
  --rv-plate: 44px;
}

@media (max-width: 980px){ :root{ --sec: 76px; --sec-lg: 96px; } }
@media (max-width: 720px){ :root{ --sec: 60px; --sec-lg: 76px; --nav-h: 76px; } }