/* ==========================================================================
   All.Together.Now. shared core
   One effects layer, seven directions. Nothing here paints a layout; every
   direction page brings its own. This file owns the reset, the token
   contract, the effects module, the compare rail, and the motion guards.

   Motion law (WEBSITE-COOLNESS-LIBRARY-CLAUDE section 3):
   transform and opacity only, never animated blur, pause offscreen,
   one runtime loaded near view, few moving things.
   ========================================================================== */

/* ---------- token contract every direction must fill ---------- */
:root {
  --bg:        #F4F2EC;   /* page ground */
  --ink:       #2B2B26;   /* reading color */
  --muted:     #5c5f55;   /* secondary text */
  --primary:   #4A5E3A;   /* headings, structure */
  --secondary: #1E4D6D;   /* depth note */
  --accent:    #E16A26;   /* the loudest voice, used sparingly */
  --support:   #789673;   /* mid support */
  --soft:      #B7C5A5;   /* light wash */
  --card:      #ffffff;
  --line:      rgba(43,43,38,.12);
  --hero-ink:  #F4F2EC;

  --display: 'Poppins', system-ui, sans-serif;
  --body:    'Source Sans 3', system-ui, sans-serif;

  /* the pointer spotlight, tuned per direction */
  --glow:      rgba(225,106,38,.20);
  --glow-size: 460px;

  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 64px);
  --rhythm: clamp(72px, 10vw, 132px);
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 112%;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1160px, 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }
.eyebrow {
  font-family: var(--body); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .9rem;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link, because a multi-generational audience includes keyboard users. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

/* ==========================================================================
   MIC-05 Focus Spotlight, the pointer glow
   One fixed layer, one composited element, position pushed through CSS vars
   so the pointer handler never touches layout.
   ========================================================================== */
.atn-glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(
    var(--glow-size) var(--glow-size) at var(--gx, 50%) var(--gy, 40%),
    var(--glow), transparent 70%);
  mix-blend-mode: var(--glow-blend, normal);
}
.atn-glow.on { opacity: 1; }

/* ==========================================================================
   Reveal choreography, one shared observer
   ========================================================================== */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .00s }
.stagger.in > *:nth-child(2) { transition-delay: .07s }
.stagger.in > *:nth-child(3) { transition-delay: .14s }
.stagger.in > *:nth-child(4) { transition-delay: .21s }
.stagger.in > *:nth-child(5) { transition-delay: .28s }
.stagger.in > *:nth-child(6) { transition-delay: .35s }
.stagger.in > *:nth-child(n+7) { transition-delay: .42s }

/* ==========================================================================
   CL-01 Shimmer Sweep. One earned word catches the light, once.
   Solid accessible color underneath; the sweep is decoration on top.
   ========================================================================== */
.shimmer {
  background-image: linear-gradient(100deg,
    var(--accent) 0%, var(--accent) 38%,
    color-mix(in srgb, var(--accent) 35%, #fff) 50%,
    var(--accent) 62%, var(--accent) 100%);
  background-size: 300% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  color: var(--accent);
}
.shimmer.lit { -webkit-text-fill-color: transparent; color: transparent; animation: shimmer-pass 2.1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes shimmer-pass { to { background-position: -30% 0; } }

/* ==========================================================================
   MIC-01 Magnetic Emphasis, MIC-07 Tactile Card + CL-03 Card Glare
   Fine-pointer only. Touch gets the same page with none of the pull.
   ========================================================================== */
.magnetic { transition: transform .35s cubic-bezier(.2,.8,.3,1); will-change: transform; }
.tilt { transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.tilt-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px 220px at var(--tx, 50%) var(--ty, 50%), rgba(255,255,255,.34), transparent 68%);
}
.tilt:hover .tilt-glare { opacity: 1; }

/* ==========================================================================
   Buttons, the shared shape. Directions restyle, never re-invent.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--body); font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; background: var(--accent); color: #fff;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), background .3s, border-color .3s, color .3s;
}
.btn.ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn:hover { transform: translate3d(0,-2px,0); }

/* ==========================================================================
   The compare rail. A review instrument, not production chrome.
   Injected by atn.js so seven pages never drift out of sync.
   ========================================================================== */
.atn-rail {
  position: fixed; left: 50%; bottom: 16px; z-index: 400;
  transform: translate3d(-50%, 0, 0);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  justify-content: center; max-width: min(96vw, 1020px);
  padding: 7px 9px; border-radius: 999px;
  background: rgba(18, 20, 17, .9);
  box-shadow: 0 10px 40px rgba(0,0,0,.34);
  font-family: system-ui, sans-serif;
  transition: opacity .4s ease, transform .4s ease;
}
.atn-rail[data-hidden="1"] { opacity: 0; transform: translate3d(-50%, 130%, 0); pointer-events: none; }
.atn-rail .rail-label {
  color: #8e9187; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 0 8px 0 6px;
}
.atn-rail a, .atn-rail button {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; color: #d9dad4; background: transparent;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.atn-rail a:hover, .atn-rail button:hover { border-color: rgba(255,255,255,.26); color: #fff; }
.atn-rail a[aria-current="page"] { background: #E16A26; color: #fff; }
.atn-rail .rail-sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); margin: 0 4px; }
.atn-rail .rail-util { color: #a9ab9f; }
.atn-rail .l-short { display: none; }
/* On a phone the rail stops being a pill and becomes a bar across the bottom.
   It was keeping border-radius 999px while flex-wrap pushed thirteen items into
   five rows, and a 999px radius on a tall box renders as an ellipse, which is why
   it read as a distorted circle sitting over the page. Full width, square top
   corners, short labels, and it lands in about three tight rows instead. Ported
   from the TRS build's fix, 2026-08-29. */
@media (max-width: 700px) {
  .atn-rail {
    left: 0; right: 0; bottom: 0;
    transform: none;
    max-width: none;
    border-radius: 14px 14px 0 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    gap: 4px 3px;
    background: rgba(18, 20, 17, .96);
    justify-content: center;
  }
  /* The hidden state has to be restated: the shared rule offsets by -50% to
     centre the pill, and that offset no longer applies to a full width bar. */
  .atn-rail[data-hidden="1"] { transform: translate3d(0, 130%, 0); }
  .atn-rail .rail-label { display: none; }
  .atn-rail .rail-sep { display: none; }
  .atn-rail a, .atn-rail button { padding: 5px 9px; font-size: 11px; }
  .atn-rail .l-full { display: none; }
  .atn-rail .l-short { display: inline; }
}

/* Motion Off control lives inside the rail; the library requires it be visible. */
.atn-rail button[data-motion] { border-color: rgba(255,255,255,.2); }
html[data-motion="off"] .atn-rail button[data-motion] { background: #4A5E3A; color: #fff; }

/* ==========================================================================
   Inline copy editing
   Every leaf of text on every page can be rewritten in place. The affordance
   only appears in edit mode, so the page a client is judging stays clean.
   ========================================================================== */
html[data-editing] [contenteditable] {
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px; border-radius: 3px; cursor: text;
  transition: background .2s, outline-color .2s;
}
html[data-editing] [contenteditable]:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
html[data-editing] [contenteditable]:focus {
  outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
html[data-editing] a { cursor: text; }

.atn-edit-bar {
  position: fixed; left: 50%; bottom: 74px; z-index: 420;
  transform: translate3d(-50%, 0, 0);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center; max-width: min(94vw, 780px);
  padding: 9px 10px 9px 16px; border-radius: 999px;
  background: #E16A26; color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  font-family: system-ui, sans-serif; font-size: 12.5px;
}
.atn-edit-bar .tag { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.atn-edit-bar .count { opacity: .95; }
.atn-edit-bar .note { opacity: .8; font-size: 11.5px; }
.atn-edit-bar button {
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.atn-edit-bar button:hover { background: rgba(255,255,255,.18); }
.atn-edit-bar .done { background: #fff; color: #b4501a; border-color: #fff; }
@media (max-width: 700px) { .atn-edit-bar { bottom: 62px; font-size: 11.5px; } .atn-edit-bar .note { display: none; } }

/* ==========================================================================
   Footer credit block shared by every direction
   ========================================================================== */
.atn-credit {
  padding: 26px var(--gutter) 96px; text-align: center;
  font-size: .78rem; line-height: 1.7; opacity: .62;
}
.atn-credit a { color: inherit; }

/* ==========================================================================
   Motion guards. Everything above degrades to a complete, still page.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .atn-glow { display: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-play-state: paused !important; animation: none !important; transition: none !important;
}
html[data-motion="off"] .reveal, html[data-motion="off"] .stagger > * { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .atn-glow { display: none; }