/* ============================================================================
   CCAE shared chrome — header + footer for every AT6012 page.
   ZEN Bauhaus: Bauhaus geometry, held with Zen restraint.
   TWiN: Historical Bauhaus (Weimar 1919) read beside New European Bauhaus (EU 2021).
   Scoped under .ccae-* so it never touches page content.
   ========================================================================== */
.ccae-header, .ccae-footer {
  /* Seminal — Bauhaus primary triad + black + paper */
  --bh-red:#E2231A; --bh-blue:#4B3FB0; --bh-yellow:#FFD500;
  --bh-ink:#15130F; --bh-paper:#F4F1EA;
  /* Current — New European Bauhaus sustainable-material palette */
  --neb-green:#1F7A4D; --neb-clay:#C97B4A; --neb-sky:#A99CE8;
  --line:rgba(21,19,15,.14);
  font-family:'Futura','Century Gothic','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  box-sizing:border-box;
}
.ccae-header *, .ccae-footer * { box-sizing:border-box; }

/* ---- Header ---------------------------------------------------------------
   The seminal mark: a 4px rule split into the Bauhaus primaries.
   Zen: one logo, one title, one tag. No clutter. */
.ccae-header {
  position:sticky; top:0; z-index:9000;
  background:var(--bh-paper); color:var(--bh-ink);
  border-bottom:1px solid var(--line);
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,
    var(--bh-red) 0 33.33%, var(--bh-blue) 33.33% 66.66%, var(--bh-yellow) 66.66% 100%) 1;
}
.ccae-header__row {
  max-width:1200px; margin:0 auto; padding:.7rem 1.4rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.ccae-header__brand { display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit; min-height:44px; }
.ccae-header__brand svg { height:38px; width:auto; display:block; }
.ccae-header__brand:focus-visible { outline:3px solid var(--bh-blue); outline-offset:3px; }
.ccae-header__title {
  font-size:1rem; font-weight:700; letter-spacing:.2px; margin:0;
  padding-left:1.1rem; border-left:1px solid var(--line); line-height:1.25;
}
.ccae-header__title small { display:block; font-weight:500; opacity:.62; font-size:.78rem; letter-spacing:.3px; }
.ccae-header__tag {
  margin-left:auto; font-size:.74rem; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--neb-green);
}

/* ---- Footer ---------------------------------------------------------------
   Four plain columns: identity, the TWiN citation pair, programme + licence,
   TRiAD constellation cross-link + open CoP nudge. */
.ccae-footer {
  background:var(--bh-ink); color:var(--bh-paper);
  margin-top:3.5rem;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,
    var(--bh-red) 0 33.33%, var(--bh-blue) 33.33% 66.66%, var(--bh-yellow) 66.66% 100%) 1;
}
.ccae-footer__grid {
  max-width:1280px; margin:0 auto; padding:2.4rem 1.4rem 1.4rem;
  display:grid; gap:2rem; grid-template-columns:repeat(4,1fr);
}
.ccae-footer__cop {
  margin-top:.9rem !important;
  font-size:.8rem; line-height:1.55; opacity:.85;
  border-top:1px solid rgba(244,241,234,.18);
  padding-top:.7rem;
}
.ccae-footer__cop a { color:var(--bh-yellow); font-weight:600; }
.ccae-footer h2 {
  font-size:.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  margin:0 0 .7rem; color:var(--bh-yellow);
}
.ccae-footer p { margin:.25rem 0; font-size:.86rem; line-height:1.6; opacity:.9; }
.ccae-footer a { color:var(--neb-sky); text-decoration:none; }
.ccae-footer a:hover { text-decoration:underline; }
.ccae-footer a:focus-visible { outline:3px solid var(--bh-yellow); outline-offset:2px; }
.ccae-footer__link { display:inline-flex; align-items:center; min-height:44px; }
.ccae-bc img {
  height:15px; width:auto; margin-right:.45rem;
  filter:brightness(0) invert(1); opacity:.92;
}

/* The TWiN block: seminal beside current, one rationale line. */
.ccae-twin { display:flex; gap:1rem; align-items:flex-start; }
.ccae-twin__chip {
  flex:1; border:1px solid rgba(244,241,234,.22); border-radius:4px; padding:.7rem .8rem;
}
.ccae-twin__chip b { display:block; font-size:.8rem; letter-spacing:.3px; }
.ccae-twin__chip span { display:block; font-size:.74rem; opacity:.7; margin-top:.2rem; }
.ccae-twin__chip--seminal { border-left:4px solid var(--bh-red); }
.ccae-twin__chip--current { border-left:4px solid var(--neb-green); }
.ccae-twin__why { font-size:.76rem; opacity:.66; margin:.7rem 0 0; line-height:1.55; }

.ccae-footer__legal {
  max-width:1200px; margin:0 auto; padding:1rem 1.4rem 1.8rem;
  border-top:1px solid rgba(244,241,234,.16);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.78rem; opacity:.72;
}
.ccae-copyleft { display:inline-block; transform:scaleX(-1); }

/* ---- Skip link (keyboard / screen-reader first action) ------------------- */
.ccae-skip {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--bh-ink); color:var(--bh-paper);
  padding:.7rem 1.1rem; font-weight:700; text-decoration:none;
  border:2px solid var(--bh-yellow);
}
.ccae-skip:focus { left:.5rem; top:.5rem; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1180px) {
  .ccae-footer__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .ccae-footer__grid { grid-template-columns:1fr; gap:1.6rem; }
  .ccae-twin { flex-direction:column; }
  .ccae-header__title { padding-left:0; border-left:0; }
  .ccae-header__tag { margin-left:0; width:100%; }
}

/* ---- Dark page surfaces -------------------------------------------------- */
@media (prefers-color-scheme:dark) {
  .ccae-header { background:#1A1714; color:var(--bh-paper); --line:rgba(244,241,234,.16); }
  .ccae-header__tag { color:var(--neb-sky); }
}

/* ---- Reduced motion: nothing animates here, but honour the intent -------- */
@media (prefers-reduced-motion:reduce) {
  .ccae-header, .ccae-footer { scroll-behavior:auto; }
}