/* ============================================================
   tokens.css — single governed token source for JasonWalker.design
   ------------------------------------------------------------
   Phase A consolidation. The doctrine palette, type, spacing and
   layout are defined ONCE here. system.css and site.css @import
   this file (it loads first); their duplicate :root blocks were
   removed. Change a value here and it propagates to every page
   that loads either stylesheet.

   Legacy alias names (--accent, --ink-2, --muted, --rule, ...)
   map to the canonical doctrine tokens, so existing selectors keep
   working without renaming. Canonical names are preferred for new
   work; aliases exist only to avoid churn during consolidation.
   ============================================================ */

:root{
  /* ---- Ink · authority ---- */
  --ink:#171717;
  --ink-light:#4A4A4A;        /* secondary text */
  --ink-muted:#767676;        /* metadata, captions, tertiary */

  /* ---- Paper · clarity ---- */
  --paper:#FCFCFD;            /* primary near-white ground */
  --paper-2:#F1F2F6;          /* faint cool panel for alt sections */
  --highlight:#EDE5A6;        /* yellow framing — restrained emphasis */

  /* ---- Blueprint · thought / structure ---- */
  --blueprint:#393E70;        /* base blue: links, labels, framework, marks */
  --blueprint-deep:#13153F;   /* darkest blue: dark panels, strong rules */
  --blueprint-2:#232B5B;
  --blueprint-3:#545886;
  --blueprint-4:#7B7FA4;
  --blueprint-light:#D3D5E4;  /* pale blue tint: selection, faint fills */

  /* ---- Brass · rare stewardship emphasis ---- */
  --brass:#A27845;
  --brass-deep:#5C3A15;
  --brass-light:#C29A6C;
  --brass-pale:#EDCEA9;

  /* ---- Rules / hairlines ---- */
  --line:rgba(19,21,63,.18);          /* blueprint-tinted hairline */
  --line-2:rgba(19,21,63,.30);        /* stronger rule */
  --line-strong:var(--blueprint-deep);/* structural rule, darkest blue */

  /* ---- Type families ---- */
  --font-system:'Inter',system-ui,sans-serif;
  --font-meaning:'Source Serif 4','Source Serif Pro',Georgia,serif;

  /* ---- Spacing scale (8pt rhythm) ---- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px;
  --s-5:64px; --s-6:96px; --s-7:120px; --s-8:160px;

  /* ---- Victory case-study shared rhythm (both registers) ----
     Harmonizes editorial behaviours across the narrative and exhibition
     registers without touching headline scale. Edit here to retune once. */
  --vic-fig-gap:48px;      /* space before a figure / evidence photo */
  --vic-cap-gap:12px;      /* image -> caption */
  --vic-quote-gap:52px;    /* before & after a pull quote (Color governing quotes keep a larger inline value) */
  --vic-exhibit-gap:34px;  /* before a book-exhibit PDF artifact */
  --vic-measure:64ch;      /* shared editorial body measure target */
  --vic-section-gap:72px;  /* standard section transition (narrative .sec + exhibition sections); case-study beat sections keep a larger deliberate value */

  /* ---- Layout ---- */
  --maxw:1200px; --maxw-narrow:760px; --pad:40px;

  /* ---- Legacy alias names (site.css + self-contained cases) → canonical ---- */
  --ink-2:var(--ink-light);
  --muted:var(--ink-muted);
  --accent:var(--blueprint);
  --accent-2:var(--blueprint-2);
  --accent-dark:var(--blueprint-deep);
  --rule:var(--blueprint-deep);

  /* ---- Dismissal control / frame offset (site.css) ---- */
  --dismiss-size:44px;
  --jw-frame-offset:0px;
}

/* ============================================================
   The Field. Visual doctrine, not a background.
   The conceptual space before ideas become form: possibility
   before decision. Compose with it the way a photographer
   composes with light. One area emerges, then dissolves into
   the paper. Quiet presence, never louder than the type.
   Blueprint blue ties it to the signal dot, the diagrams and
   the rules. One grid language across the whole site.

   Compose, do not tile uniformly:
     <section class="... has-dotfield">
       <span class="dotfield dotfield--tl reveal" aria-hidden="true"></span>
       <div class="wrap"> ... </div>
     </section>
   Vary crop, scale, orientation, density and emergence per
   placement. Never behind long reading passages or photography.
   ============================================================ */
.has-dotfield{position:relative;overflow:hidden}
.has-dotfield > .wrap,
.has-dotfield > .container{position:relative;z-index:1}
.dotfield{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../images/dot-grid-field-01.png);
  background-repeat:repeat;background-position:0 0;background-size:800px auto;
  opacity:var(--dot-op,.14);
}
/* Reveal-driven settle. The page coming into focus. Opacity only. */
.dotfield.reveal{opacity:0;transform:none;transition:opacity 1s ease}
.dotfield.reveal.in{opacity:var(--dot-op,.14)}
/* Emergence compositions. Each has a strong core that tapers into paper,
   so no two dots carry identical weight. Focal point varies by placement. */
.dotfield--tl{--dot-op:.17;-webkit-mask:radial-gradient(120% 120% at 11% 17%,#000 0%,rgba(0,0,0,.82) 19%,rgba(0,0,0,.32) 46%,transparent 72%);mask:radial-gradient(120% 120% at 11% 17%,#000 0%,rgba(0,0,0,.82) 19%,rgba(0,0,0,.32) 46%,transparent 72%)}
.dotfield--br{--dot-op:.15;-webkit-mask:radial-gradient(120% 120% at 89% 86%,#000 0%,rgba(0,0,0,.82) 19%,rgba(0,0,0,.32) 46%,transparent 72%);mask:radial-gradient(120% 120% at 89% 86%,#000 0%,rgba(0,0,0,.82) 19%,rgba(0,0,0,.32) 46%,transparent 72%)}
.dotfield--tr{--dot-op:.16;-webkit-mask:radial-gradient(110% 122% at 84% 10%,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.3) 46%,transparent 72%);mask:radial-gradient(110% 122% at 84% 10%,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.3) 46%,transparent 72%)}
.dotfield--right{--dot-op:.15;-webkit-mask:radial-gradient(78% 122% at 100% 30%,#000 0%,rgba(0,0,0,.8) 17%,rgba(0,0,0,.3) 48%,transparent 70%);mask:radial-gradient(78% 122% at 100% 30%,#000 0%,rgba(0,0,0,.8) 17%,rgba(0,0,0,.3) 48%,transparent 70%)}
.dotfield--band{--dot-op:.13;-webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 22%,#000 48%,rgba(0,0,0,.5) 76%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 22%,#000 48%,rgba(0,0,0,.5) 76%,transparent 100%)}
.dotfield--field{--dot-op:.16;-webkit-mask:radial-gradient(72% 82% at 36% 34%,#000 0%,rgba(0,0,0,.86) 16%,rgba(0,0,0,.3) 50%,transparent 76%);mask:radial-gradient(72% 82% at 36% 34%,#000 0%,rgba(0,0,0,.86) 16%,rgba(0,0,0,.3) 50%,transparent 76%)}
.dotfield--drift{--dot-op:.13;-webkit-mask:linear-gradient(122deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 50%,rgba(0,0,0,.45) 70%,transparent 86%);mask:linear-gradient(122deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 50%,rgba(0,0,0,.45) 70%,transparent 86%)}
/* Crop, scale, orientation and density modifiers for variety. */
.dotfield--scale{background-size:1120px auto}
.dotfield--dense{background-size:560px auto}
.dotfield--shift{background-position:-220px -120px}
.dotfield--shift2{background-position:160px -90px}
@media (max-width:780px){.dotfield{background-size:560px auto}.dotfield--scale{background-size:760px auto}.dotfield--dense{background-size:420px auto}}
@media (prefers-reduced-motion:reduce){.dotfield.reveal{transition:none}}

/* ------------------------------------------------------------
   Signal dot. The moment possibility becomes intention. Marks
   where an important idea begins. Used sparingly and never
   explained in copy; repetition teaches its meaning.
   ------------------------------------------------------------ */
.signal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blueprint);vertical-align:middle;flex:0 0 auto}
.signal-dot--lg{width:11px;height:11px}

/* Global nav active state. One behaviour everywhere: the current area reads in ink. */
.nav-links a.active{color:var(--ink)}

/* ------------------------------------------------------------
   Wordmark. "Jason Walker  --o--  .design". The blue dot is the
   Signal: it drifts slowly along a short rule and settles, like
   the search for the right position. Not a loader. It rewards
   attention without demanding it. Page-level .wordmark rules own
   the font and flex layout; these style the rule, Signal and suffix.
   ------------------------------------------------------------ */
.wordmark .wm-rule{position:relative;display:inline-block;width:32px;height:10px;margin:0 9px;flex:0 0 auto}
.wordmark .wm-rule::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%);background:var(--line-2)}
.wordmark .wm-rule i{position:absolute;top:50%;left:64%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);animation:wm-signal 12s cubic-bezier(.45,0,.2,1) infinite}
.wordmark .wm-design{color:var(--ink-muted);font-weight:600}
@keyframes wm-signal{0%,10%{left:64%}30%,40%{left:28%}60%,100%{left:64%}}
@media (prefers-reduced-motion:reduce){.wordmark .wm-rule i{animation:none;left:64%}}

/* ------------------------------------------------------------
   Continuum. Reserved, not yet active. A future case-study
   marker placing a project on the line from possibility to
   coherent form. Defined now so it can be introduced later
   without redesigning the site. No element uses it yet.
   ------------------------------------------------------------ */
.continuum{position:relative;height:1px;background:var(--line);margin:var(--s-4) 0}
.continuum__dot{position:absolute;top:50%;left:var(--continuum-pos,50%);width:9px;height:9px;border-radius:50%;background:var(--blueprint);transform:translate(-50%,-50%)}

/* ============================================================
   GLOBAL ENDING RHYTHM
   Generous, reusable breathing room between the last content or
   navigation element and the contact block / dark footer, so no
   page ending feels attached. ≥1in (96px) minimum.
   ------------------------------------------------------------ */
.closing{margin-top:120px}
footer{margin-top:120px}
.closing + footer{margin-top:0}
@media (max-width:780px){.closing,footer{margin-top:96px}}