/* ==========================================================================
   Rose Hill Middle School: Science Bowl & Science Olympiad
   Single stylesheet. No build step, no dependencies.

   To rebrand: change the palette tokens in :root below.
   ========================================================================== */

:root {
  /* Brand palette */
  --brand-900: #0b2545;
  --brand-800: #12386e;
  --brand-700: #1b4a8f;
  --brand-600: #2563a8;
  --brand-100: #dbe8f7;
  --brand-50:  #f0f6fd;

  --accent-600: #b8791a;
  --accent-500: #e8a33d;
  --accent-100: #fdf0d8;

  --ok-600: #17754a;
  --ok-100: #d9f2e5;
  --warn-600: #9a5b06;
  --warn-100: #fdefd6;

  /* Neutrals */
  --ink:      #14181f;
  --ink-soft: #47505f;
  --ink-mute: #6b7480;
  --line:     #e2e6ec;
  --surface:  #ffffff;
  --canvas:   #f7f9fc;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .05);
  --shadow-md: 0 4px 12px rgba(11, 37, 69, .07), 0 12px 28px rgba(11, 37, 69, .07);

  --wrap: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* === Dark theme ========================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-900: #e8f0fa;   /* headings invert to near white */
    --brand-800: #4a8fd8;
    --brand-700: #6aa6e4;
    --brand-600: #7fb4ea;
    --brand-100: #1e3350;
    --brand-50:  #16233a;

    --accent-600: #f0b562;
    --accent-500: #e8a33d;
    --accent-100: #33270f;

    --ok-600: #5fd39b;
    --ok-100: #14301f;
    --warn-600: #f0b562;
    --warn-100: #33270f;

    --ink:      #e6ebf2;
    --ink-soft: #aab6c6;
    --ink-mute: #8b97a8;
    --line:     #26303f;
    --surface:  #141b26;
    --canvas:   #0d131c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .35);
  }

  .hero { background: linear-gradient(160deg, #0a1422, #10203a 58%, #0d1b30); }
  .hero h1 { color: #f2f7fd; }
  /* No .brand__mark override: it is masked artwork tinted with var(--brand-900),
     which already inverts to near white above. */
  .btn--primary { background: #2b6cb0; color: #fff; }
  .btn--primary:hover { background: #3a7cc2; color: #fff; }
  .nav__cta { background: #2b6cb0 !important; }
  .nav__cta:hover { background: #3a7cc2 !important; }
  .btn--accent { background: var(--accent-500); color: #14181f; }
  .footer { background: #0a1018; }
  .callout--accent { border-color: #4a3a1c; }
  .callout--ok { border-color: #1e4a33; }
  .tbd {
    background: repeating-linear-gradient(45deg, #2b2313, #2b2313 6px, #352b17 6px, #352b17 12px);
    color: var(--accent-600);
  }
  .pill--full { background: #222c3a; color: var(--ink-mute); }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-600); }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  color: var(--brand-900);
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: 1.2rem; }

p  { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: .5rem;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); }

.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 =========================================================== */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-800); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* === Header ============================================================== */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 70px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* The school lion, drawn as a CSS mask rather than an <img>. The SVG carries the
   shape only, so the colour comes from background-color here and follows the
   palette into dark mode with no second copy of the artwork. Width is set
   explicitly from the artwork ratio (512 by 716) so the masthead never reflows
   while the asset loads. */
.brand__mark {
  width: 33px; height: 46px; flex: none;
  background-color: var(--brand-900);
  -webkit-mask: url("lion.svg") center / contain no-repeat;
          mask: url("lion.svg") center / contain no-repeat;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 750; color: var(--brand-900); font-size: 1rem; letter-spacing: -.01em; }
.brand__sub  { font-size: .76rem; color: var(--ink-mute); letter-spacing: .01em; }

/* The full club name is long, so ease it down on narrow screens rather than
   letting it crowd the menu button. */
@media (max-width: 620px) {
  .brand__name { font-size: .88rem; }
  .brand__sub  { font-size: .7rem; }
  .brand__mark { width: 27px; height: 38px; }
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: .93rem; font-weight: 550;
}
.nav a:hover { background: var(--brand-50); color: var(--brand-800); }
.nav a[aria-current="page"] { color: var(--brand-800); background: var(--brand-50); font-weight: 650; }

.nav__cta {
  margin-left: .5rem; background: var(--brand-800) !important; color: #fff !important;
  padding: .55rem 1rem !important; font-weight: 650 !important;
}
.nav__cta:hover { background: var(--brand-700) !important; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .6rem; cursor: pointer;
  color: var(--brand-900);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .7rem 1.25rem 1.1rem; box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav__cta { margin: .4rem 0 0; text-align: center; }
}

/* === Buttons ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem; border-radius: 999px; font-weight: 650; font-size: .97rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-800); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
.btn--ghost { border-color: var(--brand-100); color: var(--brand-800); background: var(--surface); }
.btn--ghost:hover { border-color: var(--brand-600); color: var(--brand-800); }
.btn--accent { background: var(--accent-500); color: var(--brand-900); }
.btn--accent:hover { background: var(--accent-600); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* === Hero ================================================================ */
.hero {
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(232,163,61,.20), transparent 62%),
    radial-gradient(900px 520px at 8% 0%, rgba(37,99,168,.30), transparent 60%),
    linear-gradient(160deg, var(--brand-900), var(--brand-800) 58%, #16406f);
  color: #eef4fb;

  /* One number for every gap in the band. The space between the two cards, the
     space above the first, the space below the last and the row gap when the
     grid stacks all read as the same blue frame, so they are the same value and
     cannot drift apart when one of them is tweaked. */
  --hero-gap: 1.1rem;
  padding: var(--hero-gap) 0;
}
.hero h1 { color: #fff; }
/* Headings carry a bottom margin meant to separate them from the text below.
   When a heading is the last thing in the band, that margin becomes dead space
   on top of the hero's own padding. */
.hero .wrap > :last-child { margin-bottom: 0; }

/* A page head is a label and a title, nothing more, so it does not need the
   breathing room the home hero uses to frame a headline and two cards. */
.hero--page { padding: clamp(1.25rem, 2.5vw, 2.25rem) 0; }
.hero .lede { color: #c7dbf0; font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem); }
.hero .eyebrow { color: var(--accent-500); }
/* Row and column gaps are set separately. Stacked on narrow screens the row gap
   is the space between the headline and the cards, and the generous column gap
   that two columns need is far too much there. */
.hero__grid {
  display: grid;
  gap: var(--hero-gap) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
}
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }

/* The measure caps belong to the home hero alone. There the headline sits in
   the narrow left column beside the openings card, so it needs one. A page head
   that spans the whole wrap does not: capping it there breaks a short heading
   over two lines and strands the right half of the band empty. */
.hero__grid h1 { max-width: 17ch; }
.hero__grid .lede { max-width: 60ch; }

/* The two hero cards stack in the second grid column. */
/* align-self overrides the grid's centring for this column only. Whenever the
   headline column is the taller of the two, centring would float the cards in
   the middle of the row and open blank space above them. */
.hero__aside { display: flex; flex-direction: column; gap: var(--hero-gap); align-self: start; }

/* Openings and upcoming events cards in hero. They share the panel treatment so
   they read as a pair rather than two unrelated boxes. */
.openings,
.upcoming {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  backdrop-filter: blur(6px);
}
.openings h2 {
  color: #fff; font-size: 1.02rem; margin-bottom: .2rem;
  display: flex; align-items: center; gap: .5rem;
}
.openings__note { font-size: .82rem; color: #a9c6e4; margin: 0 0 1rem; }
.openings__row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.13);
}

/* Figure column: the number plus the unit it is counting, so a count of
   student spots is never confused with a count of whole teams. */
.openings__fig {
  flex: none; width: 6.6rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.openings__num {
  font-size: 2rem; font-weight: 800; color: var(--accent-500);
  line-height: 1; letter-spacing: -.03em;
}
.openings__unit {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #9fbcdb; margin-top: .3rem;
  line-height: 1.25;
}

.openings__label { font-size: .92rem; color: #dce9f6; line-height: 1.45; }
.openings__title { display: block; font-weight: 650; color: #fff; }
.openings__label small { display: block; color: #9fbcdb; font-size: .8rem; margin-top: .12rem; }

/* Upcoming events card. The date column matches .openings__fig in width so the
   two cards line up down the page. */
.upcoming h2 {
  color: #fff; font-size: 1.02rem; margin-bottom: .2rem;
}
.upcoming__note { font-size: .82rem; color: #a9c6e4; margin: 0 0 1rem; }
.upcoming__row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.13);
}
.upcoming__date {
  flex: none; width: 6.6rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.upcoming__week {
  font-size: 1.15rem; font-weight: 800; color: var(--accent-500);
  line-height: 1.1; letter-spacing: -.02em;
}
.upcoming__mon {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #9fbcdb; margin-top: .3rem;
  line-height: 1.25;
}
.upcoming__label { font-size: .92rem; color: #dce9f6; line-height: 1.45; }
.upcoming__title { display: block; font-weight: 650; color: #fff; }
.upcoming__label small { display: block; color: #9fbcdb; font-size: .8rem; margin-top: .12rem; }

@media (max-width: 420px) {
  .openings__fig { width: 4.6rem; }
  .openings__num { font-size: 1.7rem; }
  .upcoming__date { width: 4.6rem; }
}

.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* === Spotlight ===========================================================
   A dark accent band for the single thing we most want a visitor to act on.
   Used for the study plans. Deliberately louder than a callout.            */
.spotlight {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900) 72%);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.9rem);
  display: grid; grid-template-columns: 1fr auto;
  gap: 1.5rem 2.75rem; align-items: center;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 240px at 88% 6%, rgba(232,163,61,.24), transparent 62%);
}
.spotlight > * { position: relative; z-index: 1; }
.spotlight h2 { color: #fff; margin-bottom: .45rem; }
.spotlight p  { color: #c7dbf0; margin-bottom: 0; }
.spotlight strong { color: #fff; }
.spotlight__tag {
  display: inline-block; font-size: .73rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-500); margin-bottom: .55rem;
}
.spotlight__note { font-size: .85rem; color: #9fbcdb; margin-top: .9rem; }
@media (max-width: 820px) {
  .spotlight { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  .spotlight { background: linear-gradient(135deg, #16304f, #0a1422 72%); }
}

/* === Cards =============================================================== */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.card--link { text-decoration: none; color: inherit; display: block; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
.card--link:hover { box-shadow: var(--shadow-md); border-color: var(--brand-100); transform: translateY(-2px); color: inherit; }

.card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: .9rem; font-size: 1.35rem;
}
.card__icon--accent { background: var(--accent-100); color: var(--accent-600); }

/* Program cards on home */
.program {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.program__top { padding: 1.6rem 1.6rem 1.2rem; border-bottom: 1px solid var(--line); }
.program__body { padding: 1.3rem 1.6rem; flex: 1; }
.program__foot { padding: 0 1.6rem 1.5rem; }
.program__tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: .7rem;
  white-space: nowrap;   /* same blob risk as .pill */
}
.program__tag--accent { background: var(--accent-100); color: var(--accent-600); }

.fact-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; }
.fact-row li { margin: 0; }
.fact-row dt, .fact__k { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; }
.fact-row dd, .fact__v { margin: 0; font-weight: 650; color: var(--brand-900); }

/* === Stat strip ========================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); padding: 1.35rem 1.2rem; text-align: center; }
.stat__n { font-size: 1.95rem; font-weight: 800; color: var(--brand-800); line-height: 1.1; letter-spacing: -.03em; }
.stat__l { font-size: .85rem; color: var(--ink-mute); }

/* === Callout / notices =================================================== */
.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--brand-600);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; margin: 1.5rem 0;
}
.callout--accent { border-left-color: var(--accent-500); background: var(--accent-100); border-color: #f3ddb4; }
.callout--ok { border-left-color: var(--ok-600); background: var(--ok-100); border-color: #b9e5d0; }
.callout h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.callout p:last-child { margin-bottom: 0; }

/* TBD placeholder: visually obvious so nothing unverified ships silently */
.tbd {
  display: inline-block; background: repeating-linear-gradient(45deg, #fff6e0, #fff6e0 6px, #ffeec9 6px, #ffeec9 12px);
  border: 1px dashed var(--accent-600); color: var(--accent-600);
  padding: 0 .45em; border-radius: 5px; font-size: .88em; font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* === Timeline ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--brand-100), var(--accent-100));
}
.timeline li { position: relative; padding: 0 0 1.5rem 3rem; margin: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand-600);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline__when { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-600); }
.timeline__what { font-weight: 650; color: var(--brand-900); }
.timeline__desc { color: var(--ink-soft); font-size: .95rem; margin: .15rem 0 0; }

/* === Tables ============================================================== */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--brand-50); color: var(--brand-900); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }
tbody tr:last-child td { border-bottom: 0; }

/* Pills must never wrap: a fully rounded inline block that breaks over two or
   more lines renders as a blob rather than a pill. The table scrolls instead. */
.pill {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; white-space: nowrap;
}
.pill--open  { background: var(--ok-100); color: var(--ok-600); }
.pill--cond  { background: var(--warn-100); color: var(--warn-600); }
.pill--full  { background: #eef0f3; color: var(--ink-mute); }

/* === FAQ / details ======================================================= */
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 650; color: var(--brand-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; color: var(--brand-600); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--brand-50); }
.faq__a { padding: 0 1.3rem 1.15rem; color: var(--ink-soft); }
.faq__a p:last-child { margin-bottom: 0; }

/* === Footer ============================================================== */
.footer {
  background: var(--brand-900); color: #b9cde3;
  padding: 3rem 0 2rem; margin-top: 0; font-size: .93rem;
}
.footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .8rem; }
.footer a { color: #cfe0f2; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .45rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.13); margin-top: 2.2rem; padding-top: 1.3rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: #8fa9c6;
}
.footer__disclaimer { max-width: 62ch; font-size: .84rem; color: #8fa9c6; }