/* ============================================================
   Site chrome — header, nav, buttons, footer, shared blocks.
   ============================================================ */

/* ---------- Page background ----------
   Intentionally clean — no tiled rules. Page structure comes from
   purposeful dark bands and the offerings directory, not from a grid.
   `.blueprint` is kept as an inert hook in case we reintroduce a
   subtle texture later. */
.blueprint{ /* no repeating background by design */ }

/* ---------- Brand mark ---------- */
.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--ink); }

/* Real logo lockup (mark + wordmark) as a single asset. Driven as a mask with
   background:currentColor so it inherits .brand's color exactly like the old
   currentColor SVG did — dark ink in the header, --mist in the footer (set by
   `.site-footer .brand`), no per-context asset or filter. ca-logo-nav.svg's
   viewBox is trimmed to the artwork's true bounding box + ~4-unit margin
   (viewBox="-12 9 1537 324", ratio ~4.744); aspect-ratio below matches it
   exactly so contain-fit no longer letterboxes horizontally, and the mask is
   left-aligned so the painted logo starts flush with the box's left edge.
   height:40px (down from the old box's 48px) keeps the rendered wordmark the
   same ~38-39px visual size it was before the retrim — the old viewBox had
   ~50px of internal top/bottom slack, so a same-height box would otherwise
   render the art ~23% larger than today. */
.brand__logo{
  display:block;
  height:40px;
  aspect-ratio: 1537 / 324;
  background:currentColor;

  -webkit-mask:url(../assets/ca-logo-nav.svg) left center / contain no-repeat;
          mask:url(../assets/ca-logo-nav.svg) left center / contain no-repeat;
}


/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px var(--gutter);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-nav{ display:flex; align-items:center; gap:34px; margin-left:auto; }
.site-nav a{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); position:relative; padding-block:6px; transition:color var(--dur-base) var(--ease-standard);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a.is-active{ color:var(--ink); }
.site-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--ink);
}
.site-header__cta{ margin-left:8px; }

/* mobile nav toggle */
.nav-toggle{
  display:none; flex:none; width:42px; height:42px; border:1px solid var(--rule-strong); background:transparent;
  border-radius:var(--radius-sm); cursor:pointer; padding:0; color:var(--ink);
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:18px; height:1.5px; background:currentColor; margin:0 auto; position:relative;
  transition:transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.nav-toggle span::before{ position:absolute; top:-6px; left:0; }
.nav-toggle span::after{ position:absolute; top:6px; left:0; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; border:0; background:none;
  transition:color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.btn .arr{ transition:transform var(--dur-base) var(--ease-standard); }
.btn:hover .arr{ transform:translateX(calc(var(--move-sm) * .5)); }

/* .btn also carrying [data-reveal] (the CTA links) collides with the plain
   .btn transition rule above: both are specificity (0,1,0) and .btn is
   declared later, so it was winning outright and dropping opacity/transform
   from the transition-property list entirely — the reveal snapped in with no
   motion. Merge the lists here at (0,2,0) so both survive. The transition
   shorthand always resets transition-delay to 0s, so the base.css stagger
   delay (also reset by this rule) has to be re-applied per property below —
   only opacity/transform (the reveal) get delayed; the hover-driven
   color/background/border-color stay at 0s so hover still feels instant. */
@media (prefers-reduced-motion:no-preference){
  .btn[data-reveal]{
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized),
      color var(--dur-base) var(--ease-standard),
      background var(--dur-base) var(--ease-standard),
      border-color var(--dur-base) var(--ease-standard);
  }
  .btn[data-reveal-delay="1"]{
    transition-delay:
      calc(var(--reveal-stagger) * 1), calc(var(--reveal-stagger) * 1), 0s, 0s, 0s;
  }
}

.btn--solid{ background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:var(--radius-sm); }
.btn--solid:hover{ background:#0f1210; }
.btn--ghost{ color:var(--ink); border:1px solid var(--rule-strong); padding:12px 21px; border-radius:var(--radius-sm); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--rule-faint); }
.btn--text{ color:var(--ink); border-bottom:1.5px solid currentColor; padding-bottom:5px; border-radius:0; }
.btn--text.is-soft{ color:var(--slate); }
.btn--on-dark{ color:var(--text-on-dark); border-color:var(--rule-on-dark); }
.btn--on-dark:hover{ border-color:var(--peri-deep); color:#fff; }

/* ---------- Pills / tags ---------- */
.pill{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  padding:6px 13px; border:1px solid var(--rule-strong); border-radius:5px; color:var(--slate);
  background:var(--paper-raised);
}
.pill--accent{ border-color:var(--peri-deep); color:var(--peri-ink); background:color-mix(in srgb,var(--peri) 30%, var(--paper)); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--text-on-dark-soft); padding-block:var(--sp-6) var(--sp-4); }
.site-footer .brand{ color:var(--mist); }
.site-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start; }
.site-footer__tag{ font-weight:300; font-size:var(--fs-h3); color:var(--text-on-dark); max-width:19ch; margin-top:22px; line-height:1.2; }
.footer-col h4{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); font-weight:500; margin-bottom:16px; }
.footer-col a{ display:block; color:var(--text-on-dark-soft); padding:5px 0; transition:color var(--dur-quick) var(--ease-standard); }
.footer-col a:hover{ color:#fff; }
.site-footer__base{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:var(--sp-6); padding-top:22px; border-top:1px solid var(--rule-on-dark);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--sage);
}

/* ---------- Shared section header ---------- */
.section-head{ max-width:60ch; }
.section-head .eyebrow{ display:block; margin-bottom:18px; }
.section-head h2{ font-size:var(--fs-h2); }
.section-head p{ margin-top:18px; }

/* ---------- Index / link list (reused: home + sacer) ---------- */
.index-list{ border-top:1px solid var(--rule); }
.index-list a{
  display:block; border-bottom:1px solid var(--rule);
  transition:background var(--dur-base) var(--ease-standard);
}
.index-list a:hover{ background:linear-gradient(90deg, var(--rule-faint), transparent 60%); }
/* Same collision as .btn above: .index-list a's own `transition:background`
   (0,1,1) is declared after base.css's reveal rule and was clobbering the
   reveal's opacity/transform transition on the 01-04 directory rows. Merge
   at (0,2,1) and re-apply the per-row stagger delay to opacity/transform only
   (background keeps 0s so hover stays instant). */
@media (prefers-reduced-motion:no-preference){
  .index-list a[data-reveal]{
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized),
      background var(--dur-base) var(--ease-standard);
  }
  .index-list a[data-reveal-delay="1"]{ transition-delay: calc(var(--reveal-stagger) * 1), calc(var(--reveal-stagger) * 1), 0s; }
  .index-list a[data-reveal-delay="2"]{ transition-delay: calc(var(--reveal-stagger) * 2), calc(var(--reveal-stagger) * 2), 0s; }
  .index-list a[data-reveal-delay="3"]{ transition-delay: calc(var(--reveal-stagger) * 3), calc(var(--reveal-stagger) * 3), 0s; }
}
/* row content shifts on hover via transform, not padding — background/border
   above stay put (compositor-only, no layout-property animation). */
.index-list__row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline; gap:24px;
  padding:22px 4px; transition:transform var(--dur-base) var(--ease-standard);
}
.index-list a:hover .index-list__row{ transform:translateX(var(--move-sm)); }
.index-list .n{ font-family:var(--mono); font-size:var(--fs-label); color:var(--sage); letter-spacing:.1em; }
.index-list .t{ font-size:var(--fs-h3); font-weight:300; }
.index-list .d{ font-family:var(--mono); font-size:13px; color:var(--text-mute); letter-spacing:.02em; justify-self:end; }
.index-list .ar{ font-family:var(--mono); color:var(--slate); transition:transform var(--dur-base) var(--ease-standard); }
.index-list a:hover .ar{ transform:translateX(calc(var(--move-sm) * .5)); color:var(--ink); }

/* ---------- Section rhythm tightens on phones ---------- */
@media (max-width:620px){
  .section{ padding-block:var(--sp-6); }
  .section--tight{ padding-block:var(--sp-5); }
  .site-footer__base{ flex-direction:column; align-items:flex-start; gap:10px; }
}

@media (max-width:860px){
  .index-list__row{ grid-template-columns:auto 1fr auto; }
  .index-list .d{ display:none; }
}

/* ---------- Responsive header ---------- */
@media (max-width:820px){
  .nav-toggle{ display:block; }
  .site-header__cta{ display:none; }
  .site-nav{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:8px var(--gutter) 22px;
    transform:translateY(calc(var(--move-sm) * -1.5)); opacity:0; pointer-events:none;
    transition:transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  }
  .site-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--rule); font-size:14px; }
  .site-nav a.is-active::after{ display:none; }
  body.nav-open .site-nav{ transform:none; opacity:1; pointer-events:auto; }
  .site-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  /* user-triggered, low-risk, but still gated: swap the slide for an
     opacity-only, near-instant fade. */
  .site-nav{ transform:none; transition:opacity var(--dur-quick) var(--ease-standard); }
}
@media (max-width:560px){
  .site-footer__top{ grid-template-columns:1fr; gap:32px; }
  /* Step the logo down further so the header keeps clearing at 320px:
     gutter(22)*2 + logo + gap(24) + toggle(42) <= 320.
     36px * (1537/324 aspect) ~= 170.8px logo width;
     44 + 170.8 + 24 + 42 = 280.8px, comfortably under 320px. */
  .brand__logo{ height:36px; }
}