/* Inter, self-hosted (same files and unicode ranges as the live site). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============================================================
   RaphaAtlas content layer.
   The old site shipped TWO token sets: the live chrome + tools in
   teal (#02838D) and a legacy styles.css in green (#0E9F6E) with
   Figtree headings that were never actually loaded. This file
   unifies on the teal system the visitor actually saw, and maps
   the legacy names onto it so old class names still render.
   ============================================================ */
:root{
  --teal:#02838D; --teal-deep:#016A73; --teal-lite:#5FD3DC; --teal-tint:#E8F4F5;
  --cream:#FBF5ED;
  --ink:#14212B; --ink-soft:#54646E;
  --line:#E4E9EC; --surface:#F6F8F9; --card:#FFFFFF;
  --amber:#B7791F;
  --radius:14px; --shadow:0 8px 30px -14px rgba(20,33,43,.18);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:75rem; --readw:46rem;
  /* legacy aliases (styles.css) */
  --brand:var(--teal); --brand-deep:var(--teal-deep); --brand-tint:var(--teal-tint);
  --head:var(--font); --body:var(--font);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--card);
  line-height:1.62;-webkit-font-smoothing:antialiased;font-size:1rem}
img,svg,video{max-width:100%;height:auto}
a{color:var(--teal-deep);text-underline-offset:2px}
a:hover{color:var(--teal)}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);letter-spacing:-.02em;line-height:1.15;font-weight:800;margin:0 0 .5em}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------------- Layout wrappers ---------------- */
.ra-main{display:block;padding:clamp(1.5rem,4vw,3rem) 0 clamp(2.5rem,6vw,4.5rem)}
.ra-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.article{max-width:var(--readw);margin:0 auto;padding:0 clamp(1rem,4vw,1.5rem)}
.article > h1,.entry h1{font-size:clamp(1.875rem,5vw,2.75rem);letter-spacing:-.03em;line-height:1.08;font-weight:900;margin:0 0 1rem}

/* ---------------- Prose (styles unclassed block output) ---------------- */
.entry{font-size:1.0625rem}
.entry > *{margin-top:0;margin-bottom:1.15rem}
.entry p,.entry li{line-height:1.75;color:#1c2024}
.entry h2{font-size:clamp(1.5rem,3.4vw,1.75rem);margin:2.5rem 0 .75rem}
.entry h3{font-size:1.25rem;font-weight:700;margin:1.75rem 0 .5rem}
.entry h4{font-size:1.0625rem;font-weight:700;margin:1.5rem 0 .4rem}
.entry ul,.entry ol{padding-left:1.4rem}
.entry li{margin-bottom:.4rem}
.entry li::marker{color:var(--teal)}
.entry strong{font-weight:700;color:var(--ink)}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.entry .lede,.article .lede{font-size:1.25rem;line-height:1.65;color:var(--ink-soft)}
.entry blockquote,.entry .wp-block-quote{border-left:4px solid var(--teal);margin:1.5rem 0;
  padding:.4rem 1.1rem;background:var(--surface);border-radius:0 8px 8px 0}
.entry figure{margin:1.75rem 0}
.entry figure img{border-radius:12px}
.entry figcaption{font-size:.8125rem;color:var(--ink-soft);margin-top:.5rem}

/* Tables: every table scrolls inside its own box, the page never scrolls sideways. */
.entry .wp-block-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:1.5rem 0}
.entry table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.97rem}
.entry th,.entry td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.entry th{background:var(--surface);font-weight:700;font-size:.875rem}
.entry tr:last-child td{border-bottom:0}
.entry .wp-block-table table{border:0}
.entry .wp-block-table thead{border-bottom:0}

/* FAQ: the core Details block, styled like the old .ra-faq. Text stays in the DOM when collapsed. */
.entry details,.ra-faq details{border:1px solid var(--line);border-radius:10px;margin:0 0 .65rem;background:var(--card)}
.entry summary,.ra-faq summary{cursor:pointer;padding:1rem 1.25rem;font-weight:700;font-size:1.0625rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.entry summary::-webkit-details-marker,.ra-faq summary::-webkit-details-marker{display:none}
.entry summary::after,.ra-faq summary::after{content:"+";color:var(--teal-deep);font-size:1.375rem;font-weight:700;line-height:1}
.entry details[open] > summary::after,.ra-faq details[open] summary::after{content:"\2013"}
.entry details[open] > summary,.ra-faq details[open] summary{border-bottom:1px solid var(--line)}
.entry details > :not(summary),.ra-faq .body{padding:0 1.25rem}
.entry details > :not(summary):first-of-type{padding-top:1rem}
.entry details > :last-child:not(summary){padding-bottom:1rem}

/* ---------------- Block styles registered in functions.php ---------------- */
.is-style-ra-note,.ra-note,.callout{border-left:4px solid var(--teal);background:var(--teal-tint);
  padding:1rem 1.25rem;border-radius:0 10px 10px 0;margin:1.6rem 0}
.is-style-ra-note > *:last-child,.ra-note > *:last-child{margin-bottom:0}
.is-style-ra-note-warn,.ra-note.warn,.med-note{border-left:4px solid var(--amber);background:#FDF6E7;
  padding:1rem 1.25rem;border-radius:0 10px 10px 0;margin:1.6rem 0;color:#5f4517}
.is-style-ra-note-warn > *:last-child{margin-bottom:0}
.ra-note .lbl{display:block;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:var(--teal-deep);margin-bottom:.35rem}
.ra-note.warn .lbl{color:var(--amber)}
.is-style-ra-sources,.ra-src{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.is-style-ra-sources li,.ra-src li{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}

/* ---------------- Legacy components (kept so pasted HTML renders) ---------------- */
.ra-meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:16px;margin:0 0 8px}
.ra-meta strong{color:var(--ink);font-weight:600}
.ra-tw{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:10px}
.ra-table{border-collapse:collapse;width:100%;min-width:520px}
.ra-tools{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
@media(max-width:600px){.ra-tools{grid-template-columns:1fr}}
.ra-tool{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:block;color:var(--ink);
  background:var(--card);text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.ra-tool:hover{border-color:var(--teal);transform:translateY(-2px);color:var(--ink)}
.ra-tool b{display:block;font-size:16px;margin-bottom:3px}
.ra-tool span{font-size:14px;color:var(--ink-soft);line-height:1.5}
.ra-next{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.ra-next a{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;
  color:var(--ink);background:var(--surface);text-decoration:none}
.ra-next a:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn,.wp-block-button__link{display:inline-block;font-weight:600;font-size:15px;padding:12px 22px;border-radius:999px;
  background:var(--teal);color:#fff;border:0;cursor:pointer;text-decoration:none}
.btn:hover,.wp-block-button__link:hover{background:var(--teal-deep);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid,.grid.cols-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:block;
  color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}

/* Tool containers sit inside the reading column without overflowing it. */
.ra-tool-slot{margin:1.75rem 0}
.ra-tool-slot > *{max-width:100%}

/* 404 */
.ra-404{text-align:center;padding:3rem 0}
.ra-404 p{color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}
/* Byline + figure components. Verbatim from the live site. */
.ra-byline{
  display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:baseline;
  margin:0 0 2rem;padding:.9rem 1.1rem;
  border:1px solid #e4e7ec;border-left:3px solid #02838D;border-radius:12px;
  background:#fbfcfc;font-size:.875rem;line-height:1.6;color:#5c6470;
}
.ra-byline a{color:#016A73;text-decoration:underline;text-underline-offset:2px}
.ra-byline a:hover{color:#02838D}
.ra-byline .ra-byline-scope{flex:1 1 100%;margin:0}
.ra-figure{
  --ra-fig-w:640px;
  max-width:min(100%,var(--ra-fig-w));
  margin:2rem auto 3rem;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(16,24,32,.06),0 12px 32px -8px rgba(16,24,32,.14);
}
.ra-figure img{display:block;width:100%;height:auto}
.ra-figure figcaption{
  padding:.75rem 1.125rem .875rem;
  background:rgba(248,249,250,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(0,0,0,.06);
  font-weight:600;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.01em;
  color:#5b6672;
  text-align:left;
}
@media (prefers-reduced-transparency:reduce){
  .ra-figure figcaption{background:#f5f6f7;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .ra-figure{border-color:rgba(0,0,0,.45)}
  .ra-figure figcaption{background:#fff;color:#14181d}
}
/* Site chrome: header + footer. Copied verbatim from the live site (ra-chrome-css). */
/* ============================================================
   RaphaAtlas site chrome — header + footer.
   Namespaced .rah- / .raf- so nothing collides with Tailwind
   utilities or the .ra homepage block.
   ============================================================ */

/* The fixed drawer sits at translateX(100%) when closed, which extends the
   scrollable area. `hidden` alone still lets script scroll the page sideways,
   so `clip` follows it as the real fix, on both html and body. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}

.rah,.raf{
  --n:#0A1C1F;--n-deep:#07171A;
  --teal:#02838D;--teal-lite:#5FD3DC;--teal-tint:#E8F4F5;--teal-deep:#016A73;
  /* Two easing tokens, used everywhere. Nothing in the chrome snaps. */
  --ease:cubic-bezier(.22,.61,.36,1);      /* critically damped, no overshoot */
  --ease-in:cubic-bezier(.64,.39,.78,.35); /* its mirror, for reversals */
  --gut:clamp(1rem,4vw,2rem);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.rah *,.raf *{box-sizing:border-box}

/* ---------------- The wordmark ----------------
   Apple's system face: SF Pro on Apple hardware, Segoe UI Variable on
   Windows, Roboto on Android. Each already ships optical sizing and
   tracking tables, which is exactly why it beats a webfont here.

   Tracking is size-specific, never one value for all sizes: large type reads
   too loose as it grows, so it tightens, and the small drawer cut stays
   nearer zero. Sizes are in rem so the reader's own text-size setting
   scales them. */
.ra-wordmark{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
              "Helvetica Neue","Segoe UI Variable Display","Segoe UI",
              system-ui,Inter,sans-serif;
  font-weight:700;line-height:1;color:#fff;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;white-space:nowrap;
}

/* ---------------- Header ---------------- */
/* .rah carries no background, blur or filter of its own on purpose:
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, which would trap the drawer inside the bar.
   The glass lives on .rah-glass, a sibling of the drawer. */
.rah{position:sticky;top:0;z-index:60}
.rah-glass{position:relative;background:var(--n)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rah-glass{
    background:rgba(10,28,31,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
}
/* Scroll edge effect, not a permanent hairline: the separation only exists
   once content is actually travelling underneath the glass. */
.rah-glass::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,211,220,.34) 22%,rgba(255,255,255,.14) 60%,transparent);
  opacity:0;transition:opacity .3s var(--ease);
}
.rah.is-scrolled .rah-glass::after{opacity:1}
.rah.is-scrolled .rah-glass{box-shadow:0 10px 30px -22px rgba(0,0,0,.85)}

.rah-bar{
  position:relative;max-width:75rem;margin:0 auto;min-height:4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
}
@media (max-width:640px){.rah-bar{min-height:3.5rem}}

/* Skip link: visible the moment it is focused, never before. */
.rah-skip{
  position:absolute;left:var(--gut);top:.5rem;z-index:5;
  transform:translateY(-160%);opacity:0;
  background:#fff;color:#0C1719;font-size:.875rem;font-weight:600;
  padding:.6rem 1rem;border-radius:.625rem;text-decoration:none;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.rah-skip:focus-visible{transform:translateY(0);opacity:1}

.rah-logo{
  display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;flex:0 0 auto;
  transition:transform .12s var(--ease);
}
.rah-logo:active{transform:scale(.975)}
.rah-logo img{width:2.125rem;height:2.125rem;display:block}
.rah-logo .ra-wordmark{font-size:1.4375rem;letter-spacing:-.038em}
@media (max-width:640px){
  .rah-logo img{width:1.875rem;height:1.875rem}
  .rah-logo .ra-wordmark{font-size:1.25rem;letter-spacing:-.032em}
}

.rah-nav{display:flex;align-items:center;gap:.125rem}
@media (max-width:1023px){.rah-nav{display:none}}
.rah-item{position:relative}
/* Vibrancy over a translucent surface: brighter and slightly heavier than a
   flat gray would be, so the label survives whatever scrolls underneath.
   Measured 5.78:1 against the glass composited over white content. */
.rah-link,.rah-btn{
  position:relative;font:inherit;font-size:.90625rem;font-weight:600;letter-spacing:0;
  color:#C6D6D8;background:none;border:0;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.375rem;padding:.5625rem .8125rem;border-radius:.625rem;
  transition:color .18s var(--ease),background-color .18s var(--ease),transform .1s var(--ease);
}
.rah-link:hover,.rah-btn:hover,
.rah-item:hover .rah-btn,.rah-item:focus-within .rah-btn{color:#fff;background:rgba(255,255,255,.08)}
/* Feedback lives on the press, not the release. */
.rah-link:active,.rah-btn:active{transform:scale(.96)}
.rah-link[aria-current="page"]{color:#fff}
.rah-link[aria-current="page"]::after{
  content:"";position:absolute;left:.8125rem;right:.8125rem;bottom:.1875rem;
  height:2px;border-radius:2px;background:var(--teal-lite);
}
.rah-chev{width:11px;height:8px;opacity:.65;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.rah-item:hover .rah-chev,.rah-item:focus-within .rah-chev{transform:rotate(180deg);opacity:1}

/* Anchored to its trigger, not floating in from nowhere: the panel scales up
   out of the button's own top corner, so the spatial relationship is legible. */
.rah-menu{
  position:absolute;top:100%;left:0;min-width:14.875rem;padding-top:.625rem;
  transform-origin:top left;
  opacity:0;visibility:hidden;transform:translateY(4px) scale(.97);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
/* :focus-within, not hover alone — the old markup was unreachable by keyboard. */
.rah-item:hover .rah-menu,.rah-item:focus-within .rah-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
/* Last dropdown in the row: left-aligned it hangs ~80px past the viewport. */
.rah-menu-r{left:auto;right:0;transform-origin:top right}
.rah-menu-in{
  background:#fff;border:1px solid #E2EAEB;border-radius:.875rem;padding:.4375rem;
  box-shadow:0 22px 48px -22px rgba(7,23,26,.5),0 2px 6px rgba(7,23,26,.07);
}
.rah-menu a{
  display:block;padding:.625rem .75rem;border-radius:.5625rem;text-decoration:none;
  font-size:.90625rem;font-weight:500;letter-spacing:0;color:#0C1719;
  transition:background-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);
}
.rah-menu a:hover{background:var(--teal-tint);color:var(--teal-deep)}
.rah-menu a:active{transform:scale(.98)}
.rah-menu a[aria-current="page"]{background:var(--teal-tint);color:var(--teal-deep);font-weight:600}
.rah-menu .rah-sep{height:1px;background:#E2EAEB;margin:.375rem .5rem}

.rah-burger{
  display:none;width:2.625rem;height:2.625rem;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  border-radius:.6875rem;color:#fff;cursor:pointer;
  transition:background-color .18s var(--ease),transform .1s var(--ease);
}
.rah-burger:hover{background:rgba(255,255,255,.12)}
.rah-burger:active{transform:scale(.94)}
@media (max-width:1023px){.rah-burger{display:inline-flex}}

/* ---------------- Mobile drawer ----------------
   Enters from the right and leaves to the right, always the same path.
   JS owns the transform while it is in motion (see the spring below); this
   rule is the resting closed state and the no-JS state. */
.rah-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(86vw,21.25rem);
  background:var(--n);border-left:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Vertical scrolling stays native; horizontal is ours to track 1:1. */
  touch-action:pan-y;
  padding-top:env(safe-area-inset-top);
  padding-bottom:calc(1.75rem + env(safe-area-inset-bottom));
  transform:translateX(100%);visibility:hidden;
  will-change:transform;
}
.rah-drawer.is-armed{visibility:visible}
.rah-drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:4rem;padding:0 1.125rem;border-bottom:1px solid rgba(255,255,255,.10);flex:0 0 auto;
}
.rah-drawer-top .ra-wordmark{font-size:1.1875rem;letter-spacing:-.028em}
.rah-close{
  width:2.375rem;height:2.375rem;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:.625rem;color:#C6D6D8;cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),transform .1s var(--ease);
}
.rah-close:hover{background:rgba(255,255,255,.09);color:#fff}
.rah-close:active{transform:scale(.92)}
.rah-drawer nav{padding:.625rem 1.125rem}
.rah-drawer nav > *{border-bottom:1px solid rgba(255,255,255,.08)}
.rah-drawer nav > *:last-child{border-bottom:0}
.rah-dlink,.rah-dbtn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font:inherit;font-size:1.03125rem;font-weight:600;letter-spacing:-.012em;color:#EAF3F3;
  background:none;border:0;cursor:pointer;text-decoration:none;padding:.9375rem .125rem;
  transition:color .16s var(--ease),transform .1s var(--ease);
}
.rah-dlink:active,.rah-dbtn:active{transform:scale(.985)}
.rah-dlink[aria-current="page"]{color:var(--teal-lite)}
.rah-dbtn .rah-chev{width:12px;height:9px}
.rah-dbtn[aria-expanded="true"] .rah-chev{transform:rotate(180deg)}
.rah-dpanel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.rah-dbtn[aria-expanded="true"] + .rah-dpanel{max-height:22.5rem}
.rah-dpanel a{
  display:block;padding:.6875rem .125rem .6875rem .875rem;text-decoration:none;
  font-size:.9375rem;color:#93ACB0;border-left:2px solid rgba(255,255,255,.12);
  transition:color .16s var(--ease),border-color .16s var(--ease),transform .1s var(--ease);
}
.rah-dpanel a:last-child{margin-bottom:.5rem}
.rah-dpanel a:hover{color:#fff;border-left-color:var(--teal-lite)}
.rah-dpanel a:active{transform:scale(.985)}
.rah-dpanel a[aria-current="page"]{color:var(--teal-lite);border-left-color:var(--teal-lite)}
/* The grab handle: says out loud that this panel can be pushed away. */
.rah-grip{
  position:absolute;left:.4375rem;top:50%;width:4px;height:2.75rem;margin-top:-1.375rem;
  border-radius:4px;background:rgba(255,255,255,.20);pointer-events:none;
}

.rah-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(4,14,16,.55);
  opacity:0;visibility:hidden;
}
.rah-overlay.is-armed{visibility:visible}

/* ---------------- Footer ---------------- */
.raf{
  background:var(--n-deep);color:#A9BFC2;
  border-top:1px solid rgba(255,255,255,.08);
}
.raf-in{
  max-width:75rem;margin:0 auto;
  padding-top:clamp(2.75rem,6vw,4.25rem);
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
}
.raf-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(1.625rem,4vw,2.75rem)}
@media (max-width:900px){
  .raf-top{grid-template-columns:1fr 1fr;gap:2rem}
  .raf-brand{grid-column:1/-1}
}
@media (max-width:520px){.raf-top{grid-template-columns:1fr;gap:1.75rem}}

.raf-logo{
  display:inline-flex;align-items:center;gap:.6875rem;text-decoration:none;
  transition:transform .12s var(--ease);
}
.raf-logo:active{transform:scale(.98)}
.raf-logo img{width:2.5rem;height:2.5rem;display:block}
.raf-logo .ra-wordmark{font-size:1.6875rem;letter-spacing:-.042em}
.raf-brand p{margin:1rem 0 0;max-width:36ch;font-size:.875rem;line-height:1.62;color:#7E979B}
/* Was #5F7C80, which measured 4.08:1 and failed the 4.5:1 floor for small
   text. Hierarchy below the description now comes from size, not from a
   contrast the reader has to work for. */
.raf-brand .raf-parent{margin-top:.75rem;font-size:.78125rem;color:#7E979B}

.raf h3{
  font-size:.71875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#8AA3A7;margin:0 0 .625rem;
}
.raf-col a{
  display:block;padding:.375rem 0;text-decoration:none;
  font-size:.90625rem;letter-spacing:0;color:#A9BFC2;
  transition:color .16s var(--ease),transform .1s var(--ease);
}
.raf-col a:hover{color:#fff}
.raf-col a:active{transform:scale(.98)}

.raf-note{
  margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.375rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.78125rem;line-height:1.6;color:#8AA3A7;max-width:92ch;
}
.raf-note a{color:#B6CDD1;text-decoration:underline;text-underline-offset:2px}
.raf-note a:hover{color:#fff}
.raf-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.375rem;justify-content:space-between;align-items:baseline;
  padding:1.125rem 0 1.625rem;font-size:.78125rem;color:#8AA3A7;
}

/* ---------------- a11y ---------------- */
.rah a:focus-visible,.rah button:focus-visible,
.raf a:focus-visible{outline:2px solid var(--teal-lite);outline-offset:3px;border-radius:.5rem}

/* Coarse pointers get real 44px targets without the layout moving.
   display is re-declared with its alignment, never swapped bare. */
@media (pointer:coarse){
  .raf-col a,.raf-note a{min-height:2.75rem;display:flex;align-items:center}
  .rah-menu a{min-height:2.75rem;display:flex;align-items:center}
  .rah-close{width:2.75rem;height:2.75rem}
}

/* Reduced motion is not "no feedback": positional motion goes, the quick
   opacity and color changes that aid comprehension stay. */
@media (prefers-reduced-motion:reduce){
  .rah *,.rah *::before,.rah *::after,
  .raf *,.raf *::before,.raf *::after{
    transition-property:opacity,background-color,color!important;
    transition-duration:.15s!important;
    animation:none!important;
  }
  .rah-menu{transform:none!important}
  .rah-skip:focus-visible{transform:none}
}
/* Frosty instead of see-through when the reader has asked for less. */
@media (prefers-reduced-transparency:reduce){
  .rah-glass{background:var(--n);backdrop-filter:none;-webkit-backdrop-filter:none}
  .rah-overlay{background:rgba(4,14,16,.92)}
}
/* Near-solid surfaces with defined borders. */
@media (prefers-contrast:more){
  .rah-glass{background:#030E10;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #8FE0E7}
  .rah-link,.rah-btn{color:#fff}
  .rah-menu-in{border-color:#0C1719;border-width:2px}
  .rah-drawer{background:#030E10;border-left-color:#8FE0E7}
  .raf{background:#030E10}
  .raf-col a,.raf-note,.raf h3,.raf-brand p,.raf-bottom,.raf-brand .raf-parent{color:#E7F1F2}
}