/* ═══════════════════════════════════════════════════════════
   MENU
   A full-screen navy panel over a white site. Inverting the
   ground is what makes opening the menu feel like an event
   rather than a dropdown — and it is the only place on the page
   the brand navy appears at full strength.
   ═══════════════════════════════════════════════════════════ */

/* ── Toggle ──────────────────────────────────────────────
   Label plus rule, not a hamburger. Three stacked lines is a
   mobile convention; on a site this size the word is clearer and
   reads as considered. */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 3.4rem;
  color: inherit;
}
/* Its own class rather than the shared .mono: the label has to
   take the header's colour in both the over-image and on-white
   states, and a utility class that hard-codes a colour will keep
   winning that argument in one of them.

   Matched to .btn — same family, size, weight and tracking. The
   two sit side by side in the header, so a second typeface here
   reads as two different systems rather than one bar of controls. */
.menu-btn-label {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  transition: color .4s var(--ease);
}


/* The two bars share a centre line and are separated by equal and
   opposite translations — NOT by top/bottom. That is what makes
   the X exact: removing the translation is all it takes for both
   to sit on the same axis, so they cross dead centre by
   construction rather than by a hand-tuned offset. */
.menu-ico {
  position: relative;
  display: block;
  width: 2.2rem; height: 1.1rem;
}
.menu-ico i {
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: var(--hair);
  margin-top: calc(var(--hair) / -2);
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform .55s var(--ease-arch), width .55s var(--ease-arch);
}
.menu-ico i:nth-child(1) { transform: translateY(-.42rem); }
.menu-ico i:nth-child(2) { width: 62%; transform: translateY(.42rem); }

@media (hover: hover) {
  .menu-btn:hover .menu-ico i:nth-child(2) { width: 100%; }
}
/* Open: equal widths, equal and opposite 45. Anything less than a
   true 45 on bars of different lengths is a tilted equals sign,
   which is what the previous 20 deg on a 60%/100% pair drew. */
.menu-btn.is-open .menu-ico i:nth-child(1) { width: 100%; transform: rotate(45deg) scaleX(.7); }
.menu-btn.is-open .menu-ico i:nth-child(2) { width: 100%; transform: rotate(-45deg) scaleX(.7); }

.menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: .6rem; }


/* ── Panel ───────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }

.menu-panel {
  position: absolute;
  inset: 0;
  background: var(--navy);
  /* The panel is revealed by its own clip rather than by moving,
     so the content inside can travel at a different rate and the
     open reads as a curtain with depth instead of a sliding box. */
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
/* a single gold hairline riding the leading edge of the reveal */
.menu-panel::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hair);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .8;
}

.menu-inner {
  position: relative;
  height: 100%;
  align-content: center;
  row-gap: 6rem;
  padding-top: var(--header-h);
}

/* ── Nav ─────────────────────────────────────────────────
   The names are set in the SANS, not the display serif.

   The Didone was the obvious choice and the wrong one: at menu
   size on navy its hairlines carry all the character, and they
   are the first thing a dark ground eats. Pushing the optical
   size down to hold them just traded elegance for weight. A
   geometric sans at a generous size, tracked slightly open and
   given real air around each line, is the quieter and more
   confident read — and it makes the whole panel one voice with
   the header controls and the column beside it.

   The serif still belongs to the brand; it belongs on the hero
   claim, where it sits large on a photograph and its contrast is
   the point. */
.menu-nav { grid-column: content-start / span 9; }

.menu-link {
  position: relative;
  display: block;
}
/* The resting hairline is a pseudo-element, NOT a border.

   As a border it lived outside the padding box, so the gold rule
   at bottom:0 sat one pixel ABOVE it — two adjacent hairlines
   rather than one. Row heights are fractional (2.6rem padding on
   a 9.26px rem), so each row rounds differently: some rows landed
   the two lines on the same device pixel and looked right, and
   the first row landed them a pixel apart, so the gold appeared
   to draw in beside the rule and then merge into it.

   Both lines are now the same pseudo-element geometry in the same
   box, so they cannot round differently from one another. */
.menu-link::before,
.menu-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hair);
}
.menu-link::before { background: rgba(255,255,255,.1); }
.menu-link a {
  display: flex;
  align-items: baseline;
  gap: 3.2rem;
  /* Air, not size, is what makes a short list of five read as
     considered. The rules need room on both sides or they stop
     being structure and become underlines. */
  padding: 2.6rem 0;
  color: var(--paper);
}

/* The number is an index mark, so it sits on the name's BASELINE
   in a fixed column — a mono-width figure floating at whatever
   width it happens to be is what made it read as an afterthought.
   Gold at full strength, and large enough to be a mark rather
   than a caption. */
.menu-link .idx {
  flex: none;
  width: 4rem;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  transition: color .5s var(--ease), transform .7s var(--ease-arch);
}

/* Each name rides in its own overflow slot so it rises out of the
   rule above it rather than fading up. The slot lives here rather
   than on .menu-link, which has to stay unclipped for the rules. */
/* Symmetric padding. The bottom padding exists to keep descenders
   out of the roll clip; with it on one side only the slot's box
   centre sat below the text's optical centre, and anything
   centred against the row (the arrow) inherited that error. */
/* Room on every side — see the note on .fx-line in approach.css.

   THE PADDING IS IN em AND THE em MUST BE THE NAME'S. The slot
   inherits the link's font-size, not the 4.2rem <b> inside it, so
   .34em here was a third of a 16px em — a few pixels — while the
   glyphs needing the room were three times that size. Sizing the
   slot itself and letting <b> inherit puts the two on the same em,
   so the room tracks the type at every breakpoint instead of being
   a fixed guess that only holds at one of them. */
.menu-link .slot {
  display: block;
  overflow: hidden;
  font-size: 4.2rem;
  padding: .3em .12em;
  margin: -.3em -.12em;
}

.menu-link b {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  /* Inherited from .slot, which owns the size so its clip padding
     can be expressed in the same em. */
  font-size: inherit;
  line-height: 1.08;
  letter-spacing: -.005em;
  transition: color .5s var(--ease), transform .7s var(--ease-arch);
}
.menu-link a:focus-visible { outline: 2px solid var(--gold); outline-offset: .4rem; }

/* ── Row hover ───────────────────────────────────────────
   ONE transition per element, and no duplicated text.

   The first version rolled the name character by character —
   two stacked copies per letter, each delayed by its index. It
   looked right at reading speed and fell apart the moment you
   moved down the list quickly: the last letter of a word starts
   300ms after the first, so leaving early stranded half a word
   mid-flight, and the next row began its own roll on top of it.
   A staggered animation cannot be interrupted gracefully because
   there is no single point to reverse from.

   What replaces it is light, not motion. The name is painted by
   a gradient clipped to the letterforms — gold on the left half,
   paper on the right — and hovering slides that gradient so the
   gold passes through the word. It is one property on one
   element, so an interruption at any point simply reverses from
   exactly where it was.

   Three things move in total: the gold passes through the name,
   a rule draws in under the row, and an arrow arrives in the
   right margin. Restraint is the point — the roll was the more
   impressive effect and the worse one. */
.menu-link b {
  background-image: linear-gradient(95deg,
    var(--gold-lift) 0%,
    var(--gold-lift) 44%,
    var(--paper)     56%,
    var(--paper)     100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  /* right end of the gradient against the right edge — the paper
     half is what shows at rest */
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position .85s var(--ease-arch);
}
/* Guarded: without background-clip the transparent fill would
   erase the menu rather than decline the effect. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .menu-link b { color: transparent; -webkit-text-fill-color: transparent; }
}

/* The gold rule rides on top of the resting hairline rather than
   recolouring it, so it can draw in from the left instead of
   simply switching on. */
.menu-link::after {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 55%, rgba(201,160,99,0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-arch);
}

.menu-link .go {
  margin-left: auto;
  flex: none;
  /* center, not the row's baseline: a 2.2rem glyph sharing a
     baseline with 4.2rem type sits roughly half a rem below the
     line's optical middle. */
  align-self: center;
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-lift);
  opacity: 0;
  transform: translateX(-1.8rem);
  transition: opacity .45s var(--ease), transform .65s var(--ease-arch);
}

@media (hover: hover) {
  .menu-link a:hover b           { background-position: 0 0; }
  .menu-link a:hover .idx        { color: var(--gold-lift); }
  .menu-link a:hover .go         { opacity: 1; transform: translateX(0); }
  .menu-link:has(a:hover)::after { transform: scaleX(1); }
}

/* ── Side ────────────────────────────────────────────────
   ONE typographic voice for the whole column. Address, contact
   and social are the same family, size, weight, colour and
   tracking — the only thing that separates them is the gold label
   above each. Three sizes and three weights across three short
   blocks read as three different components that happened to land
   next to each other; one setting reads as a column.

   The hierarchy still exists, it just lives in the labels and in
   the spacing rather than in the copy. */
.menu-side {
  grid-column: span 6 / content-end;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
}

/* Gold, not grey. It is the only brand colour in this column and
   it is what ties the side of the panel to the numbers running
   down the nav — a second grey would just be more of the copy. */
.menu-block h4 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .82;
  margin-bottom: 1.4rem;
}

/* The single setting. Nothing below overrides family, size, weight
   or colour — only line-height, because a two-line address wants
   leading a one-line link does not. */
.menu-block p,
.menu-lines a,
.menu-social a {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .012em;
  color: rgba(255,255,255,.82);
}
.menu-block p { line-height: 1.8; max-width: 40rem; }

/* A flex column with a real gap, NOT a paragraph broken by <br>:
   .hover-line draws its rule at bottom:-.5rem, and inside a
   line-height:1.8 paragraph that offset lands in the cap height of
   the line below. Giving each link its own row is what puts the
   rule in space that belongs to it — and the tight line-height is
   what keeps the rule hugging the text instead of floating half a
   line under it. */
.menu-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
.menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
}
.menu-lines a,
.menu-social a {
  line-height: 1.25;
  transition: color .4s var(--ease);
}
.menu-lines a:hover,
.menu-social a:hover { color: var(--gold-lift); }

@media (max-width: 991px) {
  /* Stacked, the panel is taller than a short screen. Without
     this the tail of the column is simply unreachable — the
     footer block was being cut off mid-line at 390x780. */
  .menu-inner {
    align-content: start;
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 5rem;
    row-gap: 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu-nav, .menu-side { grid-column: content; }
  .menu-link .slot { font-size: 3.4rem; }
  .menu-link a { padding: 2rem 0; gap: 2.4rem; }
  .menu-link .idx { width: 3rem; font-size: 1.3rem; }
  .menu-side { align-self: start; gap: 2.4rem; }
}
@media (max-width: 767px) {
  .menu-link .slot { font-size: 2.3rem; }
  .menu-link .idx { width: 2.6rem; font-size: 1.15rem; }
  .menu-link a { gap: 1.6rem; padding: 1.5rem 0; }
  .menu-block h4 { font-size: 1.1rem; margin-bottom: 1.1rem; }
  .menu-block p, .menu-lines a, .menu-social a { font-size: 1.5rem; }
  .menu-lines { gap: 1.2rem; }
}

/* Landscape phones and short laptop windows. The panel scrolls
   rather than clipping, but a list you have to scroll to see five
   items in is a worse menu than a tighter one that fits — so the
   rows compress before the scrollbar is asked to do the work. */
@media (max-height: 560px) and (max-width: 991px) {
  .menu-inner { padding-top: calc(var(--header-h) + 1.4rem); row-gap: 2.6rem; }
  .menu-link a { padding: 1.1rem 0; }
  .menu-link .slot { font-size: 2.4rem; }
  .menu-side { gap: 2rem; }
}