/* ==========================================================================
   Vertical Systems: site footer (site/css/footer.css)
   --------------------------------------------------------------------------
   The footer is chrome. It lives once in site/index.html
   (<footer class="foot">); scripts/build-pages.mjs copies it into every
   generated page, and site/start/index.html keeps a hand copy. Link this
   file after home.css, components.css and site-menu.css. Behaviour lives in
   site/js/footer.js (the year, the Vancouver clock, the pin pulse while the
   map is on screen, back to top). Without it the footer is complete.

   Top to bottom:
     .foot__close   the closing band: one line, the booking button and the
                    price floor
     .foot__main    brand, contact and socials, then four link columns
     .foot__map     the dot-matrix map (assets/img/footer-map.svg, a mask
                    painted with a token), the pin on Vancouver, its caption
     .foot__word    the big lockup, decorative (aria-hidden)
     .foot__base    copyright, legal links, back to top

   Ground: the back cover of the manual, ink with bone type. Every colour is
   a theme token or a mix of two. The logo itself (.vs-logo, .vs-mark) is
   styled in home.css; this file only sizes the footer's instances.
   ========================================================================== */

/* The map block below is written by scripts/build-map.mjs. */
/* map:start (generated by scripts/build-map.mjs from its frame and labels; do not edit) */
.foot {
  --map-ratio: 1.5952;
  --map-pin-x: 0.5311;
  --map-pin-y: 0.4759;
  --map-border-x: 0.7869;
  --map-border-y: 0.5324;
  --map-ocean-x: 0.1557;
  --map-ocean-y: 0.5224;
}
/* map:end */

.foot {
  --foot-bg: var(--sc-ink);
  --foot-ink: var(--sc-canvas);
  --foot-soft: color-mix(in oklab, var(--sc-canvas) 72%, var(--sc-ink));
  --foot-line: color-mix(in oklab, var(--sc-canvas) 13%, transparent);
  --foot-line-strong: color-mix(in oklab, var(--sc-canvas) 30%, transparent);
  --foot-panel: color-mix(in oklab, var(--sc-canvas) 4%, var(--sc-ink));
  /* The ring green, lifted for a dark ground (the reverse mark does the same). */
  --foot-ok: color-mix(in oklab, var(--vs-ok) 62%, var(--sc-canvas));
  --foot-ease: var(--vs-ease-card, cubic-bezier(.2, .8, .2, 1));
  /* The map mask's rendered width, and its height from the SVG's ratio. */
  --map-w: clamp(1100px, 118vw, 1760px);
  --map-h: calc(var(--map-w) / var(--map-ratio));

  position: relative;
  background: var(--foot-bg);
  color: var(--foot-ink);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  /* The planes behind the open menu scale this element; keep it one box. */
  isolation: isolate;
}
.foot :focus-visible { outline-color: var(--foot-ink); }
.foot .vs-btn--primary:focus-visible { outline-color: var(--foot-ink); }

.foot__wrap {
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

.foot__h,
.foot__kicker,
.foot__note {
  margin: 0;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foot-soft);
}

/* ------------------------------------------------------- closing band -- */
.foot__close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sc-5) var(--sc-7);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--foot-line);
}
.foot__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sc-4);
}
.foot__kicker::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 3px;
  background: var(--sc-accent);
}
.foot__close-title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight, 600);
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: var(--vs-display-track, -0.03em);
  text-wrap: balance;
}
.foot__close-side {
  display: grid;
  justify-items: end;
  gap: 0.8rem;
}
.foot__cta { min-height: 3.25rem; padding-inline: 1.5rem; font-size: var(--sc-t-base); }
.foot__note { letter-spacing: 0.04em; text-transform: none; }

/* ---------------------------------------------------------------- main -- */
.foot__main {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 3.3fr);
  gap: var(--sc-7) clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.foot__id {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--sc-5);
}
.foot__logo { --logo-mark: 2rem; color: var(--foot-ink); }
.foot__about {
  margin: 0;
  max-width: 30ch;
  font-size: var(--sc-t-sm);
  line-height: 1.5;
  color: var(--foot-soft);
  text-wrap: pretty;
}
.foot__contact { display: grid; gap: var(--sc-3); }
.foot__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--foot-ink);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--foot-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 160ms var(--foot-ease);
}
.foot__mail svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--foot-soft); }
.foot__mail:hover { text-decoration-color: currentColor; }

.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot__social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--foot-ink);
  border: 1px solid var(--foot-line-strong);
  border-radius: 999px;
  transition:
    background-color 160ms var(--foot-ease),
    border-color 160ms var(--foot-ease),
    color 160ms var(--foot-ease),
    transform 240ms var(--foot-ease);
}
.foot__social a:focus-visible { outline-offset: 3px; border-radius: 999px; }
.foot__social svg { width: 1.125rem; height: 1.125rem; }
/* A name tag above the icon on hover and keyboard focus. The link's own
   aria-label names it for screen readers, so the tag is hidden from them. */
.foot__tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  padding: 0.3rem 0.5rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--foot-bg);
  background: var(--foot-ink);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity 160ms var(--foot-ease), translate 160ms var(--foot-ease);
}
.foot__social a:focus-visible .foot__tip { opacity: 1; translate: -50% 0; }
@media (hover: hover) {
  .foot__social a:hover {
    color: var(--foot-bg);
    background: var(--foot-ink);
    border-color: var(--foot-ink);
    transform: translateY(-2px);
  }
  .foot__social a:hover .foot__tip { opacity: 1; translate: -50% 0; }
}

/* Link columns. */
.foot__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sc-6) var(--sc-5);
}
.foot__h { margin-bottom: var(--sc-3); }
.foot__h a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms var(--foot-ease);
}
.foot__h a:hover { color: var(--foot-ink); }
.foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot__list li {
  padding-block: 0.42rem;
  font-size: var(--sc-t-sm);
  line-height: 1.35;
  text-wrap: pretty;
}
/* Inline, so a wrapped name keeps its tag and arrow right after the text. */
.foot__link {
  color: var(--foot-ink);
  text-decoration: none;
  /* The underline draws in from the left on hover. */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 260ms var(--foot-ease), color 160ms var(--foot-ease);
}
.foot__link:hover,
.foot__link:focus-visible,
.foot__link[aria-current="page"] { background-size: 100% 1px; }
/* The page you are on: the approval point. */
.foot__link[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.6rem 0 0.2rem;
  vertical-align: 0.12em;
  border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 2px var(--foot-bg), 0 0 0 3.5px var(--foot-ok);
}
.foot__ext {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.35em;
  vertical-align: 0;
  color: var(--foot-soft);
}
.foot__tag {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: 0.1em;
  padding: 0.18rem 0.4rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--foot-soft);
  border: 1px solid var(--foot-line-strong);
  border-radius: 999px;
}

/* ----------------------------------------------------------------- map -- */
.foot__map {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--foot-panel);
  border: 1px solid var(--foot-line);
  border-radius: var(--vs-card-r, 10px);
}
/* The drawing: the mask, the labels and the pin. The caption lies over it
   on wide screens and sits under it on phones. */
.foot__map-canvas {
  position: relative;
  height: clamp(17rem, 29vw, 26rem);
}
.foot__map-art {
  position: absolute;
  inset: 0;
  background-color: var(--foot-ink);
  opacity: 0.6;
  -webkit-mask: url("/assets/img/footer-map.svg") calc(var(--map-pin-x) * 100%) calc(var(--map-pin-y) * 100%) / var(--map-w) auto no-repeat;
  mask: url("/assets/img/footer-map.svg") calc(var(--map-pin-x) * 100%) calc(var(--map-pin-y) * 100%) / var(--map-w) auto no-repeat;
}
/* The map's corners, as on the menu's preview plate. */
.foot__map-canvas::before,
.foot__map-canvas::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: solid var(--foot-line-strong);
  pointer-events: none;
}
.foot__map-canvas::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.foot__map-canvas::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }

/* A label anchored to a map point (--lx, --ly, fractions of the SVG). The
   mask puts the pin's fraction of the SVG on the same fraction of the box,
   so any other point sits at that spot plus its offset at the mask's size. */
.foot__map-label {
  position: absolute;
  z-index: 1;
  left: calc(var(--map-pin-x) * 100% + (var(--lx) - var(--map-pin-x)) * var(--map-w));
  top: calc(var(--map-pin-y) * 100% + (var(--ly) - var(--map-pin-y)) * var(--map-h));
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--foot-soft);
  pointer-events: none;
}
/* Either side of the border line, at the right edge. */
.foot__map-label--canada,
.foot__map-label--usa {
  --lx: var(--map-border-x);
  --ly: var(--map-border-y);
  left: auto;
  right: 1.5rem;
}
.foot__map-label--canada { translate: 0 calc(-100% - 0.6rem); }
.foot__map-label--usa { translate: 0 0.6rem; }
.foot__map-label--ocean {
  --lx: var(--map-ocean-x);
  --ly: var(--map-ocean-y);
  left: max(1.5rem, calc(var(--map-pin-x) * 100% + (var(--lx) - var(--map-pin-x)) * var(--map-w)));
  translate: 0 -50%;
  font-style: italic;
  letter-spacing: 0.22em;
}

/* The pin: the logo's approval point. A ring in the lifted green, an ink
   gap, the orange dot, and a halo of ground that clears the dots. */
.foot__pin {
  position: absolute;
  z-index: 2;
  left: calc(var(--map-pin-x) * 100%);
  top: calc(var(--map-pin-y) * 100%);
  width: 1.75rem;
  height: 1.75rem;
  translate: -50% -50%;
  border: 3px solid var(--foot-ok);
  border-radius: 50%;
  background: var(--foot-panel);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--foot-panel) 75%, transparent);
}
.foot__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--sc-accent);
}
/* The pulse: a thin ring that widens and fades. It runs five times each
   time the map comes on screen (footer.js sets .is-live), and keeps going
   while the pointer rests on the map. */
.foot__pin::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--foot-ok);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.foot__map.is-live .foot__pin::before {
  animation: foot-pulse 2.8s var(--sc-ease-out, ease-out) 0.4s 5 both;
}
@media (hover: hover) {
  .foot__map.is-live:hover .foot__pin::before { animation-iteration-count: infinite; }
}
@keyframes foot-pulse {
  0% { opacity: 0.85; transform: scale(1); }
  60% { opacity: 0; transform: scale(2.8); }
  100% { opacity: 0; transform: scale(2.8); }
}

.foot__place {
  position: absolute;
  z-index: 3;
  left: var(--sc-4);
  bottom: var(--sc-4);
  display: grid;
  gap: 0.35rem;
  max-width: calc(100% - 2 * var(--sc-4));
  padding: 0.9rem 1.1rem 1rem;
  background: color-mix(in oklab, var(--foot-bg) 90%, transparent);
  border: 1px solid var(--foot-line);
  border-radius: 8px;
}
.foot__place-name {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight, 600);
  font-size: var(--sc-t-base);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--foot-ink);
}
.foot__place-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: var(--sc-t-xs);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--foot-soft);
  font-variant-numeric: tabular-nums;
}
.foot__clock { color: var(--foot-ink); }

/* ------------------------------------------------------------ wordmark -- */
.foot__word {
  container-type: inline-size;
  margin: clamp(2.5rem, 6vw, 5rem) 0 0;
  color: var(--foot-ink);
  user-select: none;
  /* A net for an unexpected fallback face: never a sideways scroll. */
  overflow-x: clip;
}
/* Sized to the footer's width. Measured in Archivo at width 125: the text is
   12.78em wide, the mark 1.03em and the gap 0.16em, 13.97em in all, so
   7.1cqi fills the line with a hair to spare (space-between takes it up).
   Any fallback face is narrower. */
.foot__word-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.16em;
  font-size: min(6.3vw, 5.6rem);
  font-size: 7.1cqi;
  line-height: 1;
}
.foot__word .vs-mark { height: 0.86em; width: calc(0.86em * 104 / 87); }
.foot__word-text {
  font-family: "Archivo", var(--sc-font-display);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  /* Optical: caps sit on the line with no descender space below. */
  padding-top: 0.04em;
}
/* Phones: the two words stacked beside a mark two lines tall. The widest
   line (VERTICAL) is 6.35em; with the mark and the gap the lockup is 8.61em,
   so 11.55cqi fills the width. */
@media (max-width: 560px) {
  .foot__word-inner { justify-content: flex-start; gap: 0.2em; font-size: 11.55cqi; }
  .foot__word .vs-mark { height: 1.72em; width: calc(1.72em * 104 / 87); }
  .foot__word-text > span { display: block; }
  .foot__word-text { line-height: 0.86; }
}

/* ---------------------------------------------------------------- base -- */
.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-block: 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--foot-line);
  font-size: var(--sc-t-xs);
  color: var(--foot-soft);
}
.foot__legal { margin: 0 auto 0 0; }
.foot__base ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot__base a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--foot-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 160ms var(--foot-ease);
}
.foot__base a:hover { text-decoration-color: currentColor; }
.foot__top svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 240ms var(--foot-ease);
}
.foot__top:hover svg { transform: translateY(-2px); }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .foot__main { grid-template-columns: minmax(0, 1fr); }
  .foot__id {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sc-7);
  }
  .foot__about { grid-column: 1; }
  .foot__contact { grid-column: 2; grid-row: 1 / span 2; justify-self: end; justify-items: end; }
}
@media (max-width: 900px) {
  .foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .foot__close { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .foot__close-side { justify-items: start; }
  .foot__id { grid-template-columns: minmax(0, 1fr); }
  .foot__contact { grid-column: auto; grid-row: auto; justify-self: start; justify-items: start; }
}
@media (max-width: 560px) {
  .foot__nav { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
  .foot__cta { width: 100%; }
  .foot__close-side { justify-items: stretch; }
  .foot__map-canvas { height: 17rem; }
  .foot__map-label--ocean { display: none; }
  .foot__place {
    position: static;
    max-width: none;
    padding: 0.9rem 1rem 1rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--foot-line);
    border-radius: 0;
  }
  .foot__legal { flex-basis: 100%; }
}

/* -------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: reduce) {
  .foot__mail,
  .foot__social a,
  .foot__tip,
  .foot__h a,
  .foot__link,
  .foot__base a,
  .foot__top svg { transition: none; }
  .foot__social a:hover,
  .foot__top:hover svg { transform: none; }
  .foot__map.is-live .foot__pin::before { animation: none; }
}

/* ------------------------------------------------------ forced colours -- */
@media (forced-colors: active) {
  .foot { border-top: 1px solid CanvasText; }
  .foot__map { border-color: CanvasText; }
  .foot__map-art { forced-color-adjust: none; background-color: CanvasText; opacity: 0.5; }
  .foot__pin { forced-color-adjust: none; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .foot__pin::after { forced-color-adjust: none; background: Highlight; }
  .foot__pin::before { display: none; }
  .foot__kicker::before { background: CanvasText; }
  .foot__link { background-image: none; }
  .foot__link:hover,
  .foot__link[aria-current="page"] { text-decoration: underline; }
  .foot__link[aria-current="page"]::before { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  .foot__place { background: Canvas; border-color: CanvasText; }
  .foot__social a { border-color: CanvasText; }
}

/* --------------------------------------------------------------- print -- */
@media print {
  .foot { background: none; color: inherit; padding-top: 1rem; }
  .foot__close, .foot__map, .foot__word, .foot__social, .foot__top { display: none; }
}