/* nav.css — shared nav + mobile menu. Single source for index + booking. */

body.lb-open nav{opacity:0;pointer-events:none;transition:opacity .2s}
nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:60px;
  min-height:60px;
  max-height:60px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 32px;
  overflow:hidden;
  transition:none;
}
.n-burger{display:none;flex-direction:column;gap:5px;padding:4px;background:none;border:none;cursor:pointer}
#mob-menu{
  display:none;
  position:fixed;inset:0;z-index:10000;
  background:#070707;
  flex-direction:column;
  padding:0;
  /* animate in */
  animation:mobFade .28s cubic-bezier(.16,1,.3,1);
}
@keyframes mobFade{from{opacity:0}to{opacity:1}}

#nav-section{
  display:none;
  align-items:center;
  gap:11px;
  font-family:var(--fm);
  font-size:10px;
  font-weight:400;
  letter-spacing:3.5px;              /* wider tracking — reads intentional, editorial */
  text-transform:uppercase;
  color:rgba(237,235,230,.62);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
#nav-section:empty::before{display:none}
/* Vertical line separator (preferred over the dot). */
#nav-section::before{
  margin-right:2px;   /* dimensions/color come from the shared rule above */
}
nav.solid #nav-section.on{ display:flex; opacity:1; transform:translateX(0); }
/* Section-change swap: label drops down + fades out, text swaps, then slides UP + fades in.
   A short, unmistakable "you changed sections" beat on mobile. */
nav.solid #nav-section.on.swap{ opacity:0; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease; }
nav.solid #nav-section.on:not(.swap){ transition:opacity .32s cubic-bezier(.16,.84,.44,1), transform .32s cubic-bezier(.16,.84,.44,1); }
nav.solid{
  background:#070707;
}
.n-left{
  display:flex;align-items:center;gap:10px;
}
.n-logo{
  text-decoration:none;
  font-family:var(--fd);
  font-size:15px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cream);
  /* Always visible — including over the home hero (name in the nav alongside the hero
     name was originally treated as redundant; the B-side proved it reads well). */
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:opacity .45s cubic-bezier(.25,.46,.45,.94),

transform .45s cubic-bezier(.25,.46,.45,.94);
  /* JS overrides these on homepage scroll for baton-pass effect */
}
nav.solid .n-logo{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
/* IG badge shows with the name when nav is solid (sections/about/booking). */
nav.solid .n-ig{opacity:1;pointer-events:auto}
nav.about-active .n-ig{opacity:1;pointer-events:auto}
/* About is a page-state with no hero to scroll past — force the logo visible there
   so it never depends on solid-class timing (was intermittently hidden until resize). */
nav.about-active .n-logo{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.n-links{
  display:flex;gap:22px;list-style:none;align-items:center;
}
/* Set the BOOK CTA apart from the text-link cluster */
.n-links li:last-child{
  margin-left:18px;
  padding-left:30px;
  position:relative;
}
/* Divider before BOOKING — identical spec to the IG-glyph divider (14px / .55) so the two
   vertical rules in the nav are uniform. Centered pseudo-element, not a full-height border. */
.n-links li:last-child::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(237,235,230,.55);
}

.n-links a{
  font-family:var(--fm);font-size:11px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(237,235,230,.45);
  transition:color .18s;
  text-decoration:none; }
.n-links a:hover,.n-links a.cur{color:var(--cream)}
.n-book{
  font-family:var(--fm);font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--cream);background:transparent;
  border:1px solid rgba(237,235,230,.5);
  /* 9px vertical: 7px read cramped against the border. Horizontal is asymmetric on
     purpose — letter-spacing:2.5px adds trailing space INSIDE the box after the last
     character, so equal padding renders the text off-centre to the left. Right side
     is ~2.5px smaller to compensate; visually the two sides now match. */
  padding:9px 17px 9px 20px;
  transition:border-color .18s, color .18s;
  text-decoration:none;
  display:inline-block;
}
.n-book:hover{
  border-color:var(--cream);
  color:#fff;
}
.n-ig{display:flex;align-items:center;gap:10px;height:20px;color:rgba(237,235,230,.5);text-decoration:none;transition:color .18s;opacity:1}
/* Vertical-line separator before the glyph — matches the section subhead divider. */
/* Nav dividers (glyph + subhead) — shared definition so the two can't drift. Even height
   snaps cleanly to the pixel grid; identical box height keeps both on the same sub-pixel
   boundary so neither renders soft/uneven against the other. */
.n-ig::before, #nav-section::before{
  content:'';display:block;
  width:1px;height:14px;
  background:rgba(237,235,230,.55);flex-shrink:0;
}
.n-ig:hover{color:var(--cream)}
.n-ig svg{transition:transform .2s;display:block}
.n-ig:hover svg{transform:scale(1.12)}
.n-burger span{display:block;width:20px;height:1px;background:var(--cream);transition:.3s;
  box-shadow:0 0 6px rgba(0,0,0,.85)}   /* readable over a bright hero frame at load */
.n-burger{border-radius:2px}
nav:not(.solid) .n-burger{background:rgba(10,9,8,.28);padding:8px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
nav.solid .n-burger{background:none;padding:4px;backdrop-filter:none;-webkit-backdrop-filter:none}
.mob-close{
  position:absolute;top:14px;right:22px;
  background:none;border:none;color:var(--cream);
  font-size:34px;line-height:1;cursor:pointer;
  font-family:var(--fm);font-weight:300;
  padding:8px;z-index:20;
}
.mob-nav{
  display:flex;flex-direction:column;
  justify-content:center;
  flex:1 1 auto;
  /* .mob-nav is a <nav>, so the top-bar nav{} rule (position:fixed;top:0;height:60px)
     collides with it — reset every inherited property so it lays out in-flow. */
  position:static;top:auto;left:auto;right:auto;
  height:auto;max-height:none;min-height:0;
  overflow:visible;
  padding:0 28px;gap:4px;
  pointer-events:none;   /* empty areas (e.g. over the close button) pass taps through */
}
.mob-nav a{
  pointer-events:auto;   /* links themselves stay tappable */
  font-family:var(--fm);                 /* mono — matches the desktop nav, not the heavy display face */
  font-size:19px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(237,235,230,.55);
  text-decoration:none;
  padding:13px 0;
  transition:color .2s ease, letter-spacing .3s ease, transform .3s ease;
  /* elastic entrance — each link settles in with a slight overshoot (Diesel-style) */
  opacity:0;transform:translateY(14px);
}
.mob-nav a:nth-child(1){transition-delay:.04s}
.mob-nav a:nth-child(2){transition-delay:.08s}
.mob-nav a:nth-child(3){transition-delay:.12s}
.mob-nav a:nth-child(4){transition-delay:.16s}
.mob-nav a:nth-child(5){transition-delay:.20s}
.mob-nav a:nth-child(6){transition-delay:.24s}
.mob-nav a:nth-child(7){transition-delay:.28s}
#mob-menu.open .mob-nav a{
  opacity:1;transform:translateY(0);
  transition:opacity .5s cubic-bezier(.16,1.1,.3,1), transform .5s cubic-bezier(.16,1.1,.3,1), color .2s ease, letter-spacing .3s ease;
}
.mob-nav a:active,.mob-nav a:hover{color:var(--cream);letter-spacing:4px}
.mob-nav .mob-book{
  margin-top:18px;
  font-size:clamp(15px,4vw,18px);
  font-family:var(--fm);
  letter-spacing:2px;text-transform:uppercase;
  color:var(--black);background:var(--cream);
  /* The menu's only CTA — it should feel like a destination, not a link wearing a
     border. 26px vertical is deliberate: at thumb range, generosity reads as
     confidence, and this is the button the whole menu funnels toward. */
  padding:26px 32px;text-align:center;
  border-radius:1px;
}
.mob-foot{
  padding:24px 28px 34px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--fm);font-size:12.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(237,235,230,.4);
  border-top:1px solid rgba(237,232,223,.12);
}
.mob-foot a{color:rgba(237,235,230,.4);text-decoration:none}
/* IG glyph + handle: align and space them properly (was cramped/uneven). */
.mob-foot-ig{display:inline-flex;align-items:center;gap:8px}
.mob-foot-ig svg{flex-shrink:0;opacity:.72;position:relative;top:0}
.mob-foot-ig span{line-height:1}

/* responsive */
/* 1100, not 1000: the full nav needs ~1020px (six links incl. "BTS + Unit Stills",
   the Booking button, wordmark, IG glyph and section label). Landscape iPad is
   1024px, so it cleared the old breakpoint by 24px and rendered a desktop nav that
   overflows — and nav{overflow:hidden} clips it instead of wrapping, which is the
   clutter. iPad Pro 11" landscape (1194) still gets the full nav with room spare. */
/* One breakpoint, no compression. The full nav (with "BTS + Unit Stills" at normal
   desktop metrics) needs ~1020px of content width; below 1100px it gets the burger
   instead of a per-pixel squeeze. iPad: landscape (1366) gets the full desktop nav
   untouched, portrait (1024) gets the burger. 354/365 tried to shrink the nav into
   the 1000-1250 band and it produced three visual regressions for 110px — tuning
   a fixed 60px bar per-pixel is whack-a-mole; this isn't. */
@media(max-width:1100px){
  .n-links{display:none}
  .n-burger{display:flex}
}
/* Tablet band: with the links gone the left cluster is the only crowding left.
   Drop the IG glyph once a section label is showing — two dividers and three
   elements in a row is the cluttered part, and IG is a tap away in the menu. */
@media(min-width:601px) and (max-width:1100px){
  nav{padding:0 24px}
  body.section-active .n-ig{display:none}
  #nav-section{letter-spacing:2.6px}
}
/* Tablets in desktop mode sit in the compact band above and keep the full nav. */
@media(max-width:600px){
  nav{padding:0 20px}   /* match work-header gutter so nav name + section title left-align */
  /* Two-line stacked name on mobile — Christopher / Parks. */
  .n-logo{line-height:1.02}
  .n-logo .nl-1{display:block}
  .n-logo .nl-2{display:block}
  .n-links{display:none}
  .n-ig{display:none}
  /* Homepage: reveal the IG glyph in the nav once scrolled (where section subheads sit on
     other pages) — a frictionless tap to Instagram whenever someone wants it. */
  body:not(.section-active) nav.solid .n-ig{display:flex !important;opacity:1;pointer-events:auto}
  .n-burger{display:flex}
  #nav-section{
  display:none;
  align-items:center;
  gap:9px;
  /* Restyled to read less generic — see the base #nav-section rule for the new face. */
  color:rgba(237,235,230,.5);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
}

/* ── FOOTER (shared) — cohesive, legible, φ-informed spacing ── */
footer{
  position:relative;   /* own stacking context, ABOVE the fixed #bg-floor (z-index:-1) */
  z-index:1;
  background:#070707;
  /* divider lifted from .07 → .14 and warm-tinted so it survives the grain overlay */
  border-top:1px solid rgba(237,232,223,.14);
  padding:56px 40px 0;   /* 56 ≈ 44×1.27 (φ-step from the name size) */
}
.footer-cols{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:56px;              /* generous, matches top padding rhythm */
  padding-bottom:40px;
  /* NO border-bottom here — the .footer-bottom top border is the single divider */
}
.fc-name{ text-decoration:none; cursor:pointer; display:inline-block;
  font-family:var(--fd);
  font-size:clamp(24px,2.4vw,34px);   /* right-sized: was up to 44px, dwarfed the rest */
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:.95;
  margin-bottom:14px;
}
.fc-tag{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(237,232,223,.42);   /* legible warm-grey, not the near-black --warm2 */
  line-height:1.9;
}
.fc-head{
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(237,232,223,.55);   /* clearly readable heading */
  margin-bottom:16px;
  /* removed the per-column border-bottom — too many lines; whitespace separates */
}
.fc-list{
  padding:0;
  margin:0;
  list-style:none;
  line-height:2.2;
}
.fc-list a{
  font-size:13px;
  letter-spacing:.5px;
  color:rgba(237,232,223,.62);   /* readable body link */
  text-decoration:none;
  transition:color .15s;
}
.fc-list a:hover{ color:var(--cream); }
.fc-book{
  display:inline-block;
  margin-top:18px;
  padding:10px 20px;
  border:1px solid rgba(237,232,223,.22);
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(237,232,223,.7);
  text-decoration:none;
  transition:border-color .18s, color .18s;
}
.fc-book:hover{ border-color:rgba(237,232,223,.5); color:var(--cream); }
.footer-cols, .footer-bottom{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:20px 0 28px;   /* breathing room above + below the copyright */
  border-top:1px solid rgba(237,232,223,.14);   /* the single, visible divider */
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(237,232,223,.38);
}
.footer-bottom a{
  color:rgba(237,232,223,.55);
  text-decoration:none;
  transition:color .15s;
}
.footer-bottom a:hover{ color:var(--cream); }

@media(max-width:768px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:600px){
  footer{padding:36px 20px 0}
  .footer-cols{grid-template-columns:1fr;gap:24px}
  .fc-name{font-size:clamp(24px,8vw,36px)}
  .footer-bottom{flex-direction:column;gap:6px;align-items:flex-start}
}
.fc-build{ color:#ff3b30; opacity:1; margin-left:6px; font-weight:500; }

@media(max-width:600px){
  /* Section view on mobile: logo (identity) + subhead (section) grouped on the left,
     hamburger on the right. Force logo visible so a lingering home-scroll inline opacity
     can't leave the subhead floating alone/centered. */
  body.section-active nav .n-left{ flex:1; }
  body.section-active nav.solid .n-logo{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  body.section-active #nav-section{ margin-left:6px; }
}


/* ── TOUCH (html.touch, set in index.html before first paint) ──────────────
   Width still decides how much fits; this class decides what a finger needs.
   iPad keeps the real nav and 2-column galleries — it is a 12.9" display, not
   a phone — it just gets targets sized for tapping. */
html.touch .n-burger{padding:10px}
html.touch .n-links a{padding:10px 0}
html.touch .n-book{padding:11px 18px 11px 21px}
html.touch .n-ig{padding:6px}
html.touch .mob-nav a{padding:14px 0}