/* ==========================================================================
   layout.css — header, ticker, footer, hero, sections, page layouts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 30;
  background: rgba(255, 252, 246, .94);
  border-top: 4px solid var(--primary);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}
.site-header::before {
  /* thin brass hairline under the teal band */
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 20%, var(--gold) 50%, var(--gold-2) 80%, transparent);
  opacity: .8;
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.brand:hover { color: var(--ink); }
.brand__logo { flex: none; line-height: 0; }
.brand__logo img { height: 52px; width: auto; }
@media (max-width: 719px) { .brand__logo img { height: 44px; } }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-2);
}
.brand__org { font-size: .8125rem; color: var(--muted); }

.badge--demo {
  align-self: center;
  border: 1px dashed var(--gold);
  color: var(--gold-text);
  background: #FBF3E2;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.site-nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-nav a[aria-current="page"] {
  background: var(--primary);
  color: #fff;
}
.site-nav a[aria-current="page"] .icon { color: var(--gold-ink); }

.site-header__search { flex: 1 1 100%; }

@media (max-width: 719px) {
  .brand__name { font-size: 1.15rem; }
  .brand__org { font-size: .75rem; }
  .site-nav { flex: 1 1 100%; order: 3; }
  .site-nav ul { justify-content: space-between; background: var(--paper-2); border-radius: 999px; padding: 4px; }
  .site-nav li { flex: 1; }
  .site-nav a { width: 100%; justify-content: center; padding-inline: 8px; font-size: .9375rem; white-space: nowrap; }
  .site-nav__more { display: none; }
  .site-header__search { order: 4; }
}
@media (min-width: 1000px) {
  .site-header__bar { flex-wrap: nowrap; }
  .brand { margin-inline-end: 0; flex: none; }
  .badge--demo { flex: none; }
  .site-header__search { flex: 1 1 200px; max-width: 380px; min-width: 0; order: 2; }
  .site-nav { margin-inline-start: auto; order: 3; flex: none; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  /* keep one row: icons + short labels */
  .site-header__bar:has(.site-header__search) .brand__org { display: none; }
  .site-header__bar:has(.site-header__search) .site-nav a { padding-inline: 10px; }
  .site-header__bar:has(.site-header__search) .site-nav__more { display: none; }
}

/* --------------------------------------------------------------------------
   Ticker (welcome line)
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  z-index: 2;
  color: #F3EAD6;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .15), transparent 20%, transparent 80%, rgba(0, 0, 0, .15)),
    var(--primary-2);
  font-size: .9375rem;
}
.ticker__inner { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--gold-ink);
  font-weight: 600;
}
.ticker__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  margin: 0;
  white-space: nowrap;
  animation: ticker-rtl var(--ticker-dur, 45s) linear infinite;
  will-change: transform;
}
.ticker__item { padding-inline: 2.5rem; }
.ticker__item::after { content: "✦"; color: var(--gold-2); margin-inline-start: 2.5rem; font-size: .75em; }
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(232, 207, 143, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-ink);
}
.ticker__toggle:hover { background: rgba(255, 255, 255, .08); }
.ticker__toggle .icon-play { display: none; }
.ticker.is-paused .ticker__toggle .icon-play { display: inline-block; }
.ticker.is-paused .ticker__toggle .icon-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* no movement: show the message once, wrapped */
  .ticker__track { animation: none; width: auto; white-space: normal; }
  .ticker__item[aria-hidden="true"], .ticker__toggle { display: none; }
  .ticker__item { padding-inline: 0; }
  .ticker__item::after { display: none; }
  .ticker__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------------------------------
   Main & sections
   -------------------------------------------------------------------------- */
.site-main { flex: 1 0 auto; display: block; }
.site-main:focus { outline: none; }

.section { padding-block: 48px; }
.section--tight { padding-block: 28px; }
@media (min-width: 900px) { .section { padding-block: 64px; } }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 22px;
}
.section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--fs-2xl);
  color: var(--primary-2);
}
.section__title::before {
  /* eight-point star ornament */
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 12px 12px no-repeat;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold-2);
  border-radius: 2px;
}
.section__lead { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }
.section__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.section__more:hover { text-decoration: underline; }

.page-head {
  padding-block: 28px 18px;
  background:
    linear-gradient(180deg, rgba(239, 230, 214, .7), rgba(239, 230, 214, 0));
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .25em; color: var(--primary-2); }
.page-head__lead { color: var(--ink-2); max-width: 70ch; margin: 0; }

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #F6F1E7;
  text-align: center;
  padding: 36px 0 84px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(210, 178, 108, .20), transparent 70%),
    linear-gradient(170deg, #1C1996 0%, var(--primary-hero) 42%, var(--primary-deep) 100%);
}
.hero__pattern {
  /* geometric lattice (gradients only) */
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 207, 143, .22) 0 1.5px, transparent 2.5px) 0 0 / 34px 34px,
    linear-gradient(45deg, transparent 47%, rgba(232, 207, 143, .07) 47% 53%, transparent 53%) 0 0 / 34px 34px,
    linear-gradient(-45deg, transparent 47%, rgba(232, 207, 143, .07) 47% 53%, transparent 53%) 0 0 / 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 30%, transparent 80%);
}
.hero__arch {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 18px;
  width: min(760px, 120vw);
  height: auto;
  transform: translateX(-50%);
  color: rgba(232, 207, 143, .2);
  pointer-events: none;
  /* the arch frames the title only, fading out before the search box and stats */
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 58%);
}
.hero__inner { position: relative; max-width: 900px; }
/* every hero child is block-level and centred on one axis */
.hero__emblem { display: block; width: fit-content; margin: 0 auto 12px; line-height: 0; }
.hero__emblem img {
  display: block;
  height: clamp(78px, 9vw + 40px, 118px);
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .4));
}
.hero__kicker {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 auto 10px;
  color: var(--gold-ink);
  font-weight: 500;
  font-size: .9375rem;
}
.hero__kicker::before, .hero__kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2));
}
.hero__kicker::after { transform: scaleX(-1); }
.hero__title {
  margin: 0 0 8px;
  font-size: var(--fs-3xl);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.hero__tagline {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-size: var(--fs-lg);
  color: #E8E7F6;
}

.hero__types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  list-style: none;
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 900px;
  margin: 30px auto 0;
  list-style: none;
}
.stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 10px 12px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(232, 207, 143, .22);
  backdrop-filter: blur(2px);
}
.stat__icon { color: var(--gold-ink); font-size: 1.25rem; }
.stat__num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .875rem; color: #DAD8F0; }
.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: auto; }
}

/* the featured bookcase overlaps the bottom of the hero */
/* the featured heading lives at the bottom of the hero; the bookcase overlaps the hero */
.hero__featured { margin-top: 40px; text-align: start; }
.hero__featured .section__head { margin-bottom: 0; }
.hero__featured .section__title { color: #fff; }
.hero__featured .section__title::before { box-shadow: 0 0 0 3px var(--primary-deep), 0 0 0 4px var(--gold-2); }
.hero__featured .section__lead { color: #D9D7EF; }
.home-featured { padding-top: 0; margin-top: -60px; position: relative; z-index: 1; }

/* how-to steps */
.steps {
  display: grid;
  gap: 16px;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.step__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--primary);
  background: radial-gradient(circle at 35% 30%, #fff, var(--primary-soft));
  border: 1px solid #CFCDEB;
  font-size: 1.6rem;
}
.step__n {
  position: absolute;
  top: 12px;
  inset-inline-end: 16px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--line);
}
.step h3 { margin: 4px 0 0; font-size: 1.3rem; color: var(--primary-2); }
.step p { margin: 0; color: var(--ink-2); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .step { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 30px 22px 26px; }
  .step__icon { grid-row: auto; width: 70px; height: 70px; font-size: 1.9rem; margin-bottom: 8px; }
  .step:not(:last-child)::after {
    /* arrow pointing to the next step (reading direction: leftwards) */
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: -27px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   Search page layout
   -------------------------------------------------------------------------- */
.search-top {
  padding-block: 22px 18px;
  background: linear-gradient(180deg, rgba(239, 230, 214, .85), rgba(239, 230, 214, 0));
  border-bottom: 1px solid var(--line);
}
.search-top__title { margin: 0 0 12px; font-size: var(--fs-xl); color: var(--primary-2); }

.search-layout {
  display: grid;
  gap: 24px;
  padding-block: 22px 56px;
}
.search-layout__main { min-width: 0; }
@media (min-width: 960px) {
  .search-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 32px; }
  .search-layout__aside { position: sticky; top: 16px; }
}

/* --------------------------------------------------------------------------
   Book page
   -------------------------------------------------------------------------- */
.book-page { padding-block: 18px 12px; }
.book-page__spread { padding-block: 10px 36px; }
.book-page__more { padding-block: 10px 40px; }

/* --------------------------------------------------------------------------
   Subjects page
   -------------------------------------------------------------------------- */
.subject-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-top: 18px;
}
.subject-tools .field { flex: 1 1 280px; max-width: 460px; }
.group-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  list-style: none;
}
.cabinets { display: grid; gap: 34px; padding-block: 30px 60px; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { padding-block: 40px 70px; text-align: center; }
.notfound__inner { max-width: 720px; }
.notfound__code {
  margin: 12px 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: .05em;
}
.notfound h1 { margin: 8px 0 6px; color: var(--primary-2); }
.notfound p { color: var(--ink-2); }
.notfound .search-box { margin: 22px auto 16px; max-width: 560px; text-align: start; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* --------------------------------------------------------------------------
   Footer
   Desktop: brand block (lockup + socials) | gold hairline | three columns,
            all inside one centred 1000px band so nothing drifts to the edges.
   Tablet:  brand block on its own row, then three columns.
   Mobile:  one centred column.
   -------------------------------------------------------------------------- */
.site-footer {
  --ft-w: 1000px;
  position: relative;
  margin-top: 56px;
  color: #D4D3EC;
  background:
    radial-gradient(ellipse 45% 90% at 100% 0%, rgba(210, 178, 108, .10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 viewBox=%270 0 48 48%27%3E%3Cg fill=%27none%27 stroke=%27%23D2B26C%27 stroke-opacity=%27.07%27 stroke-width=%271%27%3E%3Crect x=%2716%27 y=%2716%27 width=%2716%27 height=%2716%27/%3E%3Crect x=%2716%27 y=%2716%27 width=%2716%27 height=%2716%27 transform=%27rotate(45 24 24)%27/%3E%3Cpath d=%27M0 24h8M40 24h8M24 0v8M24 40v8%27/%3E%3C/g%3E%3C/svg%3E") center top / 48px 48px repeat,
    linear-gradient(180deg, var(--primary-hero), var(--primary-deep));
  border-top: 3px solid var(--gold);
}
/* gold 8-point star sitting on the top border, centred */
.site-footer::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 40%27%3E%3Cg fill=%27%23D2B26C%27%3E%3Crect x=%2710%27 y=%2710%27 width=%2720%27 height=%2720%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2720%27 height=%2720%27 transform=%27rotate(45 20 20)%27/%3E%3C/g%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%275.5%27 fill=%27%230E0583%27/%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%272.2%27 fill=%27%23D2B26C%27/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(14, 5, 131, .35));
  pointer-events: none;
}
.site-footer {
  font-size: .86rem;
  line-height: 1.7;
}
.site-footer a { color: #F0E4C4; text-decoration: none; text-underline-offset: .3em; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--gold-2); }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer address { font-style: normal; }

.site-footer__main {
  max-width: calc(var(--ft-w) + 2 * var(--gutter));
  display: grid;
  gap: 30px;
  padding-block: 34px 30px;
}
.site-footer__main section { min-width: 0; }

/* brand block: official lockup (emblem = 83.32% of slogan width, 0.27% gap, one axis) + socials */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.brand-lockup { width: 158px; margin: 0; }
.brand-lockup__picture { display: block; line-height: 0; }
.brand-lockup__emblem {
  display: block;
  width: 83.32%;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}
.brand-lockup__slogan { display: block; width: 100%; height: auto; margin-top: .27%; }

.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.social__link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(210, 178, 108, .38);
  background: rgba(255, 255, 255, .04);
  font-size: .9rem;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.site-footer .social__link { color: var(--gold-ink); }
.site-footer .social__link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--primary-deep);
  text-decoration: none;
  transform: translateY(-2px);
}

/* the three information columns */
.site-footer__cols { display: grid; gap: 26px; }
.site-footer h2 {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-family: var(--font-title);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--gold);
}
.site-footer h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.site-footer__list { display: grid; gap: 7px; }
.site-footer__list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
}
.site-footer__list .icon {
  width: 15px;
  height: 15px;
  margin-top: .3em; /* centre on the first text line */
  color: var(--gold-2);
}
.site-footer__contact li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.site-footer__contact .icon {
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  margin-top: 0;
  padding: 7px;
  border: 1px solid rgba(210, 178, 108, .42);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}
.site-footer__list .ltr { direction: ltr; unicode-bidi: isolate; justify-self: start; }

/* opening hours: live status (app.js, Baghdad time) + two compact rows */
.hours__now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.95;
  white-space: nowrap;
  color: #EEEDF9;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
}
.hours__now::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E08A7E;
  box-shadow: 0 0 0 3px rgba(224, 138, 126, .2);
}
.hours__now.is-open::before { background: #5BD08A; box-shadow: 0 0 0 3px rgba(91, 208, 138, .22); }
.hours { display: grid; margin: 0; width: 230px; max-width: 100%; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(210, 178, 108, .13);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row dt { font-weight: 600; color: #ECEBF8; white-space: nowrap; }
.hours__row dd { margin: 0; color: #D4D3EC; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__row.is-closed dt, .hours__row.is-closed dd { color: #A5A3D0; font-weight: 500; }

/* bottom bar, aligned to the same centred band */
.site-footer__bottom {
  border-top: 1px solid rgba(210, 178, 108, .15);
  background: rgba(0, 0, 0, .12);
}
.site-footer__bottom-inner {
  max-width: calc(var(--ft-w) + 2 * var(--gutter));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 24px;
  padding-block: 10px;
  font-size: .74rem;
  line-height: 1.7;
  color: #ADABD6;
}

/* tablet and up: three columns side by side, natural widths, spread across the band */
@media (min-width: 720px) {
  .site-footer__cols { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 28px; }
}

/* desktop: brand block beside the columns, separated by a gold hairline */
@media (min-width: 1024px) {
  .site-footer__main {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .site-footer__brand { padding-inline-end: 36px; }
  .site-footer__cols {
    align-self: stretch;
    align-content: center;
    align-items: start;
    padding-inline-start: 44px;
    border-inline-start: 1px solid rgba(210, 178, 108, .2);
  }
}

/* mobile: one centred column */
@media (max-width: 719px) {
  .site-footer__main { padding-block: 30px 24px; gap: 26px; }
  .brand-lockup { width: 148px; }
  .site-footer__cols { justify-items: center; text-align: center; gap: 24px; }
  .site-footer__cols > section { width: min(100%, 280px); }
  .site-footer h2::after { inset-inline-start: calc(50% - 10px); }
  .site-footer__list { justify-items: center; }
  .site-footer__list li { display: inline-flex; gap: 8px; align-items: flex-start; text-align: center; }
  .site-footer__list .icon { flex: none; }
  .hours { margin-inline: auto; }
  .site-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   Busy indicator (form submissions)
   -------------------------------------------------------------------------- */
.page-busy {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 90;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .2s;
  pointer-events: none;
}
html.is-busy .page-busy { transform: translate(-50%, 0); opacity: 1; }