:root{
  --navy:#0C2E4E;
  --navy-2:#16436B;
  --teal:#0047BB;
  --teal-dark:#115F6E;
  --purple:#6B5CA5;
  --orange:#f3782e;
  --slate:#5A6B7C;
  --line:#E2E8EE;
  --line-soft:#EDF1F5;
  --card-mint:#E9F4F0;
  --card-blue:#E5EFF8;
  --card-lilac:#F1EDF8;
  /* Sampled from the left edge of the box-*.png action card photography. */
  --card-photo:#D9F0FD;
  /* Sampled from sub-banner-bg.jpg and the AACE 2027 wordmark respectively. */
  --banner-navy:#0B3080;
  --brand-green:#5DDC5F;
  /* The green under the section headings. A shade darker than the wordmark's
     --brand-green, which is too light to read as a rule against white. */
  --rule-green:#44D62C;
  /* Main's side padding, tokenised so full-bleed sections can cancel it. */
  --main-pad:25px;
  --footer:#0E4A5A;
  --wash:#F3F8FA;
  /* One size for every section heading on the homepage. They had drifted to
     seven different sizes (23–33px at 1440), and two of them did not scale
     down on a phone at all. Change it here, not in the section rules. */
  --h-sect:clamp(23px,2.6vw,30px);
  --maxw:1200px;
  --hdr:76px;
  /* Alpha mask marking the water band in the skyline cutout. */
  --water-mask:url("../images/water-mask.png");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The page is a full-height column so the footer is pushed to the bottom of
   the viewport on short pages (login, 404, an empty listing) and simply
   follows the content on long ones. `main` is the element that takes up the
   slack — growing it rather than pushing the footer down with `margin-top`
   means a main with its own background, like the auth pages, fills the gap
   instead of leaving a band of body colour above the footer.

   Core wraps the whole page in stable9's off-canvas canvas div, so the
   header/main/footer are grandchildren of `body`, not children. The column
   has to be carried through that wrapper for `main` to grow; declaring it on
   `body` as well keeps this working if the wrapper is ever not there. */
body{
  margin:0;
  font-family:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--navy);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Keyboard focus — the reference had no visible focus ring. */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:4px;border:1.5px solid transparent;
  font-size:calc((14px) * var(--fs,1));font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:.2s ease;
}
.btn svg{width:15px;height:15px;flex:none}
/* Each colour is read from a custom property with the theme's own value as
   the fallback. The aace_branding module defines those properties in a
   <style> tag when staff have saved a palette; when it has not, or if the
   module is uninstalled, every button falls back to exactly these values.
   Nothing here may define --btn-* in :root -- core emits html_head before the
   stylesheets, so a :root rule in this file would outrank the module's. */
.btn-solid{
  background:var(--btn-solid-bg,#2c6fb0);
  color:var(--btn-solid-fg,#fff);
  border-color:var(--btn-solid-border,var(--teal));
}
.btn-solid:hover{
  background:var(--btn-solid-hover-bg,var(--teal-dark));
  color:var(--btn-solid-hover-fg,#fff);
  border-color:var(--btn-solid-hover-border,var(--teal-dark));
}
.btn-ghost{
  background:var(--btn-ghost-bg,transparent);
  color:var(--btn-ghost-fg,var(--teal));
  border-color:var(--btn-ghost-border,#9CC3CC);
}
.btn-ghost:hover{
  background:var(--btn-ghost-hover-bg,var(--teal));
  color:var(--btn-ghost-hover-fg,#fff);
  border-color:var(--btn-ghost-hover-border,var(--teal));
}
/* `.btn-orange` is the "Highlight button" in the admin form. The class name
   is kept because it appears in editor-authored block markup. */
.btn-orange{
  background:var(--btn-highlight-bg,transparent);
  color:var(--btn-highlight-fg,var(--teal));
  border-color:var(--btn-highlight-border,#9CC3CC);
}
.btn-orange:hover{
  background:var(--btn-highlight-hover-bg,var(--orange));
  color:var(--btn-highlight-hover-fg,#fff);
  border-color:var(--btn-highlight-hover-border,var(--orange));
}
.btn-sm{padding:11px 18px;font-size:calc((13px) * var(--fs,1))}

.arrow-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--btn-arrow-bg,#2c6fb0);color:var(--btn-arrow-fg,#fff);
  border:0;cursor:pointer;transition:.2s;
}
.arrow-btn svg{width:15px;height:15px}
.arrow-btn:hover{transform:translateX(3px)}
.arrow-btn.violet{background:var(--btn-arrow-violet-bg,var(--purple))}

.textlink{
  display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-size:calc((13.5px) * var(--fs,1));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.textlink svg{width:15px;height:15px;transition:transform .2s}
.textlink:hover svg{transform:translateX(4px)}

.dialog-off-canvas-main-canvas,
[data-off-canvas-main-canvas]{
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
}

main {
  padding:var(--main-pad);
  flex:1 0 auto;
}