/* chrome.css. The top bar, the footer and the not-found page. Ideas #1, #3,
   #4, #16, #18 of the custom websites page (package P4, 2026-09-24).

   Owner in the merged site: O2. Extended on 2026-09-25 with the site menu,
   the Menu panel for narrow screens and the footer's row of links (merge plan
   2.6). Everything the custom page already had is unchanged except the widths
   at which the clock and the availability line fold away, which moved to make
   room for the menu. */

/* ── sticky top bar ─────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { align-self: flex-end; margin-bottom: 1px; }

/* ── the mark builds itself (#1) ───────────────────────────────────────── */

@keyframes mark-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
:root[data-motion="full"] .brand-mark:not(.is-built) rect,
:root[data-motion="full"] .nf-mark:not(.is-built) rect {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: mark-rise 400ms cubic-bezier(.2, .7, .2, 1) both;
}
:root[data-motion="full"] .brand-mark:not(.is-built) rect:nth-child(1) { animation-delay: 120ms; }
:root[data-motion="full"] .brand-mark:not(.is-built) rect:nth-child(2) { animation-delay: 180ms; }
:root[data-motion="full"] .brand-mark:not(.is-built) rect:nth-child(3) { animation-delay: 240ms; }
:root[data-motion="full"] .brand-mark:not(.is-built) rect:nth-child(4) { animation-delay: 300ms; }
:root[data-motion="full"] .brand-mark:not(.is-built) rect:nth-child(5) { animation-delay: 360ms; }
:root[data-motion="full"] .nf-mark:not(.is-built) rect:nth-child(1) { animation-delay: 320ms; }
:root[data-motion="full"] .nf-mark:not(.is-built) rect:nth-child(2) { animation-delay: 380ms; }
:root[data-motion="full"] .nf-mark:not(.is-built) rect:nth-child(3) { animation-delay: 440ms; }
:root[data-motion="full"] .nf-mark:not(.is-built) rect:nth-child(4) { animation-delay: 500ms; }
:root[data-motion="full"] .nf-mark:not(.is-built) rect:nth-child(5) { animation-delay: 560ms; }

/* ── the top bar follows the band under it (#3) ────────────────────────── */

.topbar[data-under="ink"] { background: var(--ink); border-bottom-color: var(--red); }
.topbar[data-under="ink"] .brand { color: var(--ground); }
.topbar[data-under="ink"] .mark .mark-top { fill: var(--red-300); }
.topbar[data-under="red"] { background: var(--red-700); border-bottom-color: var(--ink); }
.topbar[data-under="red"] .brand { color: var(--white); }
.topbar[data-under="red"] .mark .mark-top { fill: var(--white); }
.topbar[data-under="red"] .wm-o { background: var(--ground); }
.topbar[data-under="red"] .btn-red { background: var(--ink); border-color: var(--ink); color: var(--white); }
.topbar[data-under="red"] .btn-red:hover, .topbar[data-under="red"] .btn-red:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); }
.topbar[data-under="ink"] :focus-visible, .topbar[data-under="red"] :focus-visible { outline-color: var(--white); }
:root[data-motion="full"] .topbar, :root[data-motion="full"] .topbar .brand, :root[data-motion="full"] .topbar .bar-time {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* ── the clock and the availability line (#4) ──────────────────────────── */

.bar-time { margin: 0 auto 0 28px; display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 0.8125rem; line-height: 1; color: rgba(32, 30, 29, 0.72); }
.bar-clock { font-weight: 800; font-variant-numeric: tabular-nums; }
.bar-avail::before { content: ""; display: inline-block; width: 2px; height: 14px; margin-right: 12px; vertical-align: -2px; background: currentColor; opacity: 0.4; }
.topbar[data-under="ink"] .bar-time { color: rgba(243, 242, 242, 0.78); }
.topbar[data-under="red"] .bar-time { color: rgba(255, 255, 255, 0.92); }
/* What folds away as the bar narrows, widest first. The menu needs the room
   the availability line had below 1100px, the clock goes below 640px, and
   below 520px Book a call moves from the bar into the Menu panel, so the bar
   holds the brand and the Menu button down to a 320px phone. */
@media (max-width: 1099px) { .bar-avail { display: none; } }
@media (max-width: 639px) { .bar-time { display: none; } }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { padding-block: clamp(40px, 5vw, 64px); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.foot-line { font-size: 0.9375rem; color: rgba(243, 242, 242, 0.78); max-width: 52ch; }
.foot-mail { margin-left: auto; font-weight: 800; }
.foot-mail a { color: var(--red-300); text-underline-offset: 4px; }
@media (max-width: 640px) { .foot-mail { margin-left: 0; } }

/* The row of links (merge plan 2.6): two columns, then the copyright line
   sharing the last row with the Reduce motion switch. Spacing, not rules,
   separates them, as between the page's bands. */
.foot-links {
  flex-basis: 100%;
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 28px clamp(48px, 9vw, 128px);
  padding-block: clamp(12px, 2vw, 24px);
}
@media (max-width: 560px) { .foot-links { grid-template-columns: 1fr; } }
.foot-h {
  margin: 0 0 14px;
  font-size: 0.75rem; font-weight: 800; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--red-300);
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-list a { color: var(--ground); text-decoration: none; font-size: 0.9375rem; }
.foot-list a:hover, .foot-list a:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--red-300);
}
.foot-copy { flex: 1 1 auto; font-size: 0.8125rem; color: rgba(243, 242, 242, 0.78); }

/* ── the Reduce motion switch (#16) ────────────────────────────────────── */

.foot-motion { flex: 0 1 auto; display: flex; align-items: center; gap: 12px; }
.foot-motion[hidden] { display: none; }
.motion-switch { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; background: none; border: 0; color: var(--ground); font-family: var(--font); font-weight: 800; font-size: 0.875rem; cursor: pointer; }
.motion-track { position: relative; width: 40px; height: 22px; border: 2px solid rgba(243, 242, 242, 0.6); }
.motion-thumb { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--ground); }
.motion-switch[aria-checked="true"] .motion-track { background: var(--red-700); border-color: var(--red-300); }
.motion-switch[aria-checked="true"] .motion-thumb { transform: translateX(18px); }
.motion-switch[aria-disabled="true"] { cursor: default; }
.motion-switch:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.motion-note { font-size: 0.8125rem; color: rgba(243, 242, 242, 0.78); }
:root[data-motion="full"] .motion-thumb { transition: transform 150ms ease; }

/* ── the 404 page (#18) ─────────────────────────────────────────────────── */

.nf { border-top: 0; min-height: calc(100vh - var(--bar-h) - 180px); display: flex; align-items: center; }
.nf-h { margin-top: 32px; max-width: 18ch; font-size: clamp(2.25rem, 5vw, 4rem); }
.nf-links { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 16px; }
.nf-gallery { background: transparent; color: var(--ground); border-color: rgba(243, 242, 242, 0.6); }
.nf-gallery:hover, .nf-gallery:focus-visible { background: var(--ground); color: var(--ink); border-color: var(--ground); }

/* ── the site menu (merge plan 2.6) ────────────────────────────────────────
   Websites with its dropdown, then About. From 900px up the menu sits in the
   bar before Book a call, and the dropdown opens on hover or when focus is
   inside it (Escape closes it, js/nav.js). Below 900px it folds into the Menu
   button, which opens a panel under the bar. Menu, dropdown and panel all
   follow the band under the bar (#3), through the four variables below. */

.topbar {
  --bar-bg: var(--white); --bar-fg: var(--ink); --bar-rule: var(--ink);
  --bar-hover: var(--ground); --bar-accent: var(--red);
}
.topbar[data-under="ink"] {
  --bar-bg: var(--ink); --bar-fg: var(--ground); --bar-rule: var(--red);
  --bar-hover: var(--ink-lift); --bar-accent: var(--red-300);
}
.topbar[data-under="red"] {
  --bar-bg: var(--red-700); --bar-fg: var(--white); --bar-rule: var(--ink);
  --bar-hover: rgba(32, 30, 29, 0.24); --bar-accent: var(--white);
}

.nav-wrap { margin-left: auto; align-self: stretch; display: flex; align-items: center; }
.nav-list, .nav-menu { list-style: none; margin: 0; padding: 0; }
.nav-link, .nav-sub { color: var(--bar-fg); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.nav-link[aria-current], .nav-sub[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: var(--bar-accent);
}
.nav-book { display: none; }

/* The Menu button: the word, and a plus that turns into a cross. */
.nav-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 14px;
  background: transparent; color: var(--bar-fg); border: 2px solid currentColor;
  font-family: var(--font); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"], .nav-toggle:focus-visible { background: var(--bar-fg); color: var(--bar-bg); border-color: var(--bar-fg); }
@media (hover: hover) { .nav-toggle:hover { background: var(--bar-fg); color: var(--bar-bg); border-color: var(--bar-fg); } }
.nav-toggle-icon { position: relative; flex: none; width: 12px; height: 12px; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; background: currentColor; }
.nav-toggle-icon::before { left: 0; right: 0; top: 5px; height: 2px; }
.nav-toggle-icon::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(45deg); }
:root[data-motion="full"] .nav-toggle-icon { transition: transform 200ms cubic-bezier(.2, .7, .2, 1); }

@media (min-width: 900px) {
  .nav, .nav-list { height: 100%; }
  .nav-list { display: flex; align-items: stretch; gap: 28px; }
  .nav-item { position: relative; display: flex; align-items: stretch; }
  .nav-link { display: flex; align-items: center; font-size: 0.9375rem; }
  .nav-link:hover {
    text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 6px; text-decoration-color: var(--bar-accent);
  }
  .nav-has-menu > .nav-link::after {
    content: ""; flex: none; width: 6px; height: 6px; margin-left: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
  }
  /* The dropdown hangs from the bar's bottom edge. Its top rule sits on the
     bar's own 2px rule, so the two read as one line. */
  .nav-menu {
    position: absolute; top: 100%; left: -20px; min-width: 300px;
    padding: 8px 0; background: var(--bar-bg); border: 2px solid var(--bar-rule);
    visibility: hidden; opacity: 0;
  }
  .nav-has-menu:hover > .nav-menu, .nav-has-menu:focus-within > .nav-menu { visibility: visible; opacity: 1; }
  .nav-has-menu.is-dismissed > .nav-menu { visibility: hidden; opacity: 0; }
  .nav-sub { display: block; padding: 12px 20px; font-size: 0.9375rem; }
  .nav-sub:hover, .nav-sub:focus-visible { background: var(--bar-hover); }
  .bar-book { margin-left: 12px; }
  :root[data-motion="full"] .nav-menu {
    transform: translateY(-6px);
    transition: opacity 150ms ease, transform 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 200ms;
  }
  :root[data-motion="full"] .nav-has-menu:hover > .nav-menu,
  :root[data-motion="full"] .nav-has-menu:focus-within > .nav-menu { transform: none; transition-delay: 0s; }
  :root[data-motion="full"] .nav-has-menu.is-dismissed > .nav-menu { transition: none; }
}

/* Below 900px: the Menu button, and the panel it opens under the bar. The
   panel's top rule covers the bar's own, and it scrolls on its own if a short
   screen cannot hold it. */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--gutter) 28px;
    background: var(--bar-bg); color: var(--bar-fg);
    border-top: 2px solid var(--bar-rule); border-bottom: 2px solid var(--bar-rule);
  }
  .topbar.is-open .nav { display: block; }
  .nav-item + .nav-item { border-top: 2px solid var(--bar-rule); }
  .nav-link { display: block; padding: 18px 0; font-size: 1.5rem; letter-spacing: -0.02em; }
  .nav-menu { margin-top: -6px; padding-bottom: 14px; }
  .nav-sub { display: block; padding: 10px 0 10px 18px; font-size: 1.0625rem; }
}
@media (max-width: 519px) {
  .bar-book { display: none; }
  .nav-book { display: block; margin-top: 20px; }
  .nav-book-btn { display: block; text-align: center; }
}