/* ═══════════════════════════════════════════════════════════════════════
   THE SITE MENU — THE ONE COPY. Do not paste these rules into a page.

   Until 2026-09-14 these rules lived inside about.html, contact.html and
   faq.html three times over, and the article page carried a FOURTH copy that
   had been typed slightly wrong: no `position: fixed`, no full-screen size.
   So on the article the menu dropped in under the header as a thin strip
   while every other page opened it full screen. One behaviour written four
   times drifts; this file is the cure. The open/close behaviour lives in
   assets/js/site-menu.js, for the same reason.

   ⭐ WHICH MENU THIS IS (Evan chose it, 2026-09-14, from a picture of both):
   a white column that slides down from the top of the screen, with the page's
   own photograph still showing either side of it. The whole-screen bone
   coloured version that used to be in this file is gone and is not coming
   back. The picture he chose from is docs/menu-A-or-B.png.

   A page needs three things: this stylesheet, assets/js/site-menu.js, and the
   markup — a button (either <button class="site-burger" id="siteBurger"> on
   the pages with a bone header, or the page's own <button class="hamburger"
   id="menuBtn"> on the three pages whose header sits on a photograph) and the
   panel: <div class="site-menu-panel" id="siteMenuPanel"> holding a
   <div class="site-menu-card"> holding a <nav class="site-menu" id="siteMenu">.
   The links stay in the page's own markup on purpose, so that search engines
   and answer engines can see them; scripts/stamp-menu.py writes them there.
   ═══════════════════════════════════════════════════════════════════════ */

.site-burger {
  /* Shown at EVERY width, not only on a phone. The row of shortcut links at
     the top carries three items and cannot take a fourth — at 820px it
     already reaches back into the wordmark. Without the burger on a wide
     screen there is no route at all to Weddings, Corporate or the galleries. */
  display: flex;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px 0; min-height: 44px; justify-content: center;
  position: relative; z-index: 1002;
}
.site-burger span {
  display: block; width: 24px; height: 1.5px; background: var(--navy);
  transition: transform 0.4s cubic-bezier(0.76,0,0.24,1), opacity 0.3s ease;
}

/* The three bars draw together into one while the menu is open. Both buttons
   get it: #siteBurger on the bone-headered pages, and the page's own
   #menuBtn on the three whose header sits on a photograph. Those three keep
   their own bar COLOUR in their own stylesheet — white bars on a picture —
   because changing it here would make the button vanish against the photo. */
body.site-menu-open .site-burger span:nth-child(1),
body.site-menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px); }
body.site-menu-open .site-burger span:nth-child(2),
body.site-menu-open .hamburger span:nth-child(2) { transform: translateY(0); }
body.site-menu-open .site-burger span:nth-child(3),
body.site-menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px); }

/* ── THE PANEL: the full height of the screen, and see-through. ──
   It is see-through on purpose. Only the white column inside it is painted,
   so the page's photograph is still there down both sides. `position: fixed`
   with the full height is the line the article page's hand-made copy was
   missing, which is why its menu opened as a strip under the header. */
.site-menu-panel {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100dvh;
  background: transparent;
  z-index: 999;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
body.site-menu-open .site-menu-panel { transform: translateY(0); }

/* ── THE WHITE COLUMN ──
   `height: fit-content` is what keeps it a column rather than a screen: it
   stops as soon as the links stop, and the photograph carries on below it. */
.site-menu-card {
  position: relative;
  height: fit-content;
  width: 600px; max-width: 100%;
  margin: 0 auto;
  /* ⛔ THE COLUMN MUST END ABOVE THE BOTTOM OF THE SCREEN.
     With eleven links and fixed spacing it did not: on a 900-pixel-tall
     laptop the last link, Portal, sat 136 pixels below the bottom edge, and
     a reader has no reason to guess that a menu scrolls. So the breathing
     room is measured against the height of the screen instead of being typed
     as a number, and the column fits a laptop, a large monitor and a phone
     from the same three lines. */
  padding-top: clamp(76px, 9vh, 120px);
  padding-bottom: clamp(36px, 5vh, 72px);
  background: #ffffff;
  /* ⭐ THE EDGE (Evan chose it, 2026-09-14, from docs/menu-edge-A-or-B.png).
     On the three pages whose header sits on a photograph the white column was
     obvious. On the six with a pale background it had no edge you could see at
     all, so the menu and the page behind it blurred into one. A hairline along
     the bottom and a deeper, softer shadow give it a real edge on the pale
     pages without turning it into a box on the photograph pages. */
  box-shadow: 0 18px 44px rgba(26,42,58,0.16);
  border-bottom: 1px solid rgba(26,42,58,0.10);
  display: flex; flex-direction: column; align-items: center;
}

/* ── THE CROSS THAT CLOSES IT ──
   Added 2026-09-14. This white column was the version Evan preferred but it
   had no way out except the burger, half a screen away at the edge of the
   page, and on a phone that read as a trap. The cross is the reason the other
   version scored at all, so it moved across. It is two bars crossed rather
   than a typed ×, so it matches the burger's own hairline weight. */
.site-menu-close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.site-menu-close span {
  position: absolute;
  display: block; width: 22px; height: 1.5px;
  background: var(--navy, #1A2A3A);
  transition: background 0.3s ease;
}
.site-menu-close span:nth-child(1) { transform: rotate(45deg); }
.site-menu-close span:nth-child(2) { transform: rotate(-45deg); }
.site-menu-close:hover span { background: var(--brass); }

/* ── THE LINKS ──
   They fade up one after another once the column has arrived. */
.site-menu {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.2vh, 30px);
  width: 100%;
}
.site-menu a {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 32px);
  color: var(--navy, #1A2A3A);
  text-decoration: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.site-menu-open .site-menu a { opacity: 1; transform: translateY(0); }
body.site-menu-open .site-menu a:nth-child(1)  { transition-delay: 0.20s; }
body.site-menu-open .site-menu a:nth-child(2)  { transition-delay: 0.25s; }
body.site-menu-open .site-menu a:nth-child(3)  { transition-delay: 0.30s; }
body.site-menu-open .site-menu a:nth-child(4)  { transition-delay: 0.35s; }
body.site-menu-open .site-menu a:nth-child(5)  { transition-delay: 0.40s; }
body.site-menu-open .site-menu a:nth-child(6)  { transition-delay: 0.45s; }
body.site-menu-open .site-menu a:nth-child(7)  { transition-delay: 0.50s; }
body.site-menu-open .site-menu a:nth-child(8)  { transition-delay: 0.55s; }
body.site-menu-open .site-menu a:nth-child(9)  { transition-delay: 0.60s; }
body.site-menu-open .site-menu a:nth-child(10) { transition-delay: 0.65s; }
body.site-menu-open .site-menu a:nth-child(11) { transition-delay: 0.70s; }
.site-menu a:hover { color: var(--brass); }

/* ── THE PAGE YOU ARE STANDING ON ──
   scripts/stamp-menu.py already marks that one link (aria-current="page"), so
   a screen reader announces it, but on screen it looked exactly like the other
   ten and the mark did nothing for anyone who can see. A short brass rule
   under the word is the studio's own quiet way of saying "you are here"; the
   colour change alone was not enough to notice at a glance. */
.site-menu a[aria-current="page"] { color: var(--brass); }
.site-menu a[aria-current="page"]::after {
  content: ''; display: block;
  width: 28px; height: 1.5px; margin: 7px auto 0;
  background: var(--brass);
}

/* Instagram is a company's name, so it is never translated and it is not one
   of the studio's own pages. It sits quieter than the rest and a little apart. */
.site-menu a.site-menu-instagram {
  font-family: var(--font-body);
  font-size: clamp(13px, 2vw, 20px);
  letter-spacing: 0.15em;
  opacity: 0; margin-top: 16px;
}
body.site-menu-open .site-menu a.site-menu-instagram { opacity: 0.5; }
.site-menu a.site-menu-instagram:hover { opacity: 1; color: var(--brass); }

/* The language picker, on the three pages whose header sits on a photograph
   and has no room for one. */
.site-menu-lang { margin-top: 8px; }

/* ── A PHONE ──
   The column gives up its side margins and the cross moves in a little. The
   spacing already shrinks on its own, above. */
@media (max-width: 767px) {
  .site-menu-card { width: 100%; }
  .site-menu-close { top: 18px; right: 16px; }

  /* On the three pages whose header sits on a photograph, that header stays on
     top of the white column, and on a phone its wordmark runs to three lines.
     At the shared spacing the first link sat almost against "ASTURIAS &
     EUROPE". A phone gets a deeper top margin so the two never touch; Portal,
     the last link, still lands well above the bottom of the screen. */
  .site-menu-card { padding-top: 104px; }

  /* ⛔ On a phone the column is the full width of the screen, so the button
     that opened the menu ends up in the same corner as the cross that closes
     it. You saw a cross with a stray bar through it. There is no room for two
     controls, and there is no need for two: while the menu is open the cross
     is the way out, so the button steps aside. On a wide screen they are far
     apart and both stay. */
  body.site-menu-open .site-burger,
  body.site-menu-open .hamburger { opacity: 0; pointer-events: none; }
}

/* ── SOMEONE WHO ASKED FOR LESS MOVEMENT ──
   Both ways of saying so are honoured: the browser setting, and the
   `no-motion` class three of the pages put on the body themselves. */
@media (prefers-reduced-motion: reduce) {
  .site-menu-panel, .site-menu a,
  .site-burger span, .hamburger span, .site-menu-close span { transition: none; }
  body.site-menu-open .site-menu a { transition-delay: 0s; }
}
body.no-motion .site-menu-panel,
body.no-motion .site-menu a,
body.no-motion .site-burger span,
body.no-motion .hamburger span { transition: none; }
body.no-motion.site-menu-open .site-menu a { transition-delay: 0s; }