/* ══════════════════════════════════════
   BORNE — Shared Stylesheet
   nav, footer, tokens, reset
══════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── TOKENS ── */
:root{
  --black:#08090C;
  --white:#ffffff;
  --rule:#e0e0e0;
  --mid:#888;
  --sans:'Google Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --pad:40px;
  --sky:linear-gradient(170deg,#20466b 0%,#3e7dbd 45%,#dbb288 75%,#ff5943 100%);
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--white);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.theme-dark{
  background:var(--black);
  color:var(--white);
}
a{text-decoration:none;color:inherit;}

/* ══════════════════════════════════════
   NAV — light theme (default)
══════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:52px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
nav.sticky{
  background:var(--white);
  border-bottom-color:var(--rule);
}
.nav-logo{font-size:17px;font-weight:500;letter-spacing:-0.02em;color:var(--black);}
.nav-ascii{font-family:monospace;font-size:12px;opacity:.75;white-space:nowrap;color:var(--black);}
.nav-links{font-size:17px;font-weight:400;letter-spacing:-0.01em;color:var(--mid);}
.nav-links a,.nav-links span{color:inherit;transition:opacity .2s;cursor:pointer;}
.nav-links a:hover,.nav-links span:hover{opacity:.45;}
.nav-links span.active{color:var(--black);opacity:1;}
.nav-cta{font-size:17px;font-weight:400;letter-spacing:-0.02em;cursor:pointer;transition:opacity .2s;color:var(--black);}
.nav-cta:hover{opacity:.45;}

/* NAV — mobile toggle button */
.nav-toggle{
  display:none;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:400;
  letter-spacing:-0.01em;color:var(--black);line-height:1;
}
body.theme-dark .nav-toggle{color:var(--white);}

/* NAV — dark theme overrides */
body.theme-dark nav.sticky{
  background:var(--black);
  border-bottom-color:rgba(255,255,255,0.12);
}
body.theme-dark .nav-logo{color:var(--white);}
body.theme-dark .nav-ascii{color:var(--white);opacity:.55;}
body.theme-dark .nav-links{color:rgba(255,255,255,.55);}
body.theme-dark .nav-links a:hover,
body.theme-dark .nav-links span:hover{opacity:1;color:var(--white);}
body.theme-dark .nav-links span.active{color:var(--white);}
body.theme-dark .nav-cta{color:rgba(255,255,255,.55);font-weight:400;}
body.theme-dark .nav-cta:hover{color:var(--white);opacity:1;}

/* ══════════════════════════════════════
   FOOTER — light theme (default)
══════════════════════════════════════ */
footer{padding:52px var(--pad) 36px;}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:0;margin-bottom:80px;
}
.footer-col{padding-right:32px;}
.footer-col-title{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mid);
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:14px;
}
.footer-link{
  display:block;font-size:17px;color:var(--black);
  padding:5px 0;transition:opacity .2s;
}
.footer-link:hover{opacity:.45;}
.footer-link-muted{color:var(--mid);}
.footer-addr{
  border-top:1px solid var(--black);padding-top:28px;
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:16px;
}
.footer-addr-left{
  display:flex;align-items:center;
  gap:clamp(12px,1.8vw,28px);flex-wrap:wrap;
}
.footer-circle{
  width:clamp(40px,3.8vw,58px);height:clamp(40px,3.8vw,58px);
  border-radius:50%;border:2px solid var(--black);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.footer-circle span{font-size:clamp(11px,1.2vw,16px);font-weight:700;color:var(--black);}
.footer-latlng{
  display:flex;flex-direction:column;
  font-size:clamp(8px,.75vw,10px);color:var(--mid);line-height:1.6;
  font-family:monospace;flex-shrink:0;
  font-variant-emoji:text; /* force ↙ → as glyphs, not colour emoji */
}
.footer-rotate-wrap{overflow:hidden;flex-shrink:0;}
.footer-rotate{display:flex;flex-direction:column;}
.footer-rotate span{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(26px,3.2vw,46px);font-weight:400;letter-spacing:-0.02em;
  line-height:1;white-space:nowrap;display:flex;align-items:center;color:var(--black);
}
.footer-addr-email{
  font-size:clamp(12px,.9vw,15px);color:var(--mid);align-self:flex-end;padding-bottom:2px;
}
.footer-copy{font-size:13px;color:var(--mid);}

/* FOOTER — dark theme overrides */
body.theme-dark footer{}
body.theme-dark .footer-col-title{
  color:rgba(255,255,255,.6);
  border-bottom-color:rgba(255,255,255,0.3);
  font-size:12px;
}
body.theme-dark .footer-link{color:rgba(255,255,255,.8);}
body.theme-dark .footer-link:hover{opacity:1;color:var(--white);}
body.theme-dark .footer-link-muted{color:rgba(255,255,255,.6);}
body.theme-dark .footer-addr{border-top-color:rgba(255,255,255);}
body.theme-dark .footer-circle{border-color:rgba(255,255,255);}
body.theme-dark .footer-circle span{color:var(--white);}
body.theme-dark .footer-latlng{color:rgba(255,255,255,.6);}
body.theme-dark .footer-rotate span{color:var(--white);}
body.theme-dark .footer-addr-email{color:rgba(255,255,255,.6);}
body.theme-dark .footer-copy{color:rgba(255,255,255,.6);}

/* ══════════════════════════════════════
   RESPONSIVE — nav + footer
══════════════════════════════════════ */
@media(max-width:1100px){
  :root{--pad:28px;}
}
@media(max-width:900px){
  :root{--pad:24px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
  /* keep the ASCII art centred between logo + Menu */
  .nav-ascii{display:block;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 24px;margin-bottom:52px;}
}
@media(max-width:600px){
  :root{--pad:16px;}
  nav{height:48px;}
  .nav-ascii{display:block;font-size:10px;} /* centred between BORNE and Menu */
  footer{padding:40px 16px 28px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 16px;margin-bottom:40px;}
  .footer-addr{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-addr-email{font-size:12px;}  /* visible on mobile, just smaller */
}

/* ══════════════════════════════════════
   MOBILE NAV OVERLAY
   Sky gradient background, Locomotive layout:
   logo/close top bar → large serif links →
   B circle bottom right
══════════════════════════════════════ */
.nav-overlay{
  position:fixed;inset:0;z-index:400;
  background:var(--sky);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .5s cubic-bezier(.76,0,.24,1),visibility .5s;
  overflow:hidden;
}
.nav-overlay.is-open{opacity:1;visibility:visible;}

/* ── Top bar ── */
.nav-overlay-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:52px;flex-shrink:0;
  position:relative;z-index:10; /* keep above the links layer for clicks */
}
.nav-overlay-logo{
  font-size:17px;font-weight:500;letter-spacing:-0.02em;
  color:var(--white);mix-blend-mode:exclusion;text-decoration:none;
}
.nav-overlay-ascii{
  font-family:monospace;font-size:11px;opacity:.75;
  color:var(--white);mix-blend-mode:exclusion;white-space:nowrap;
}
.nav-overlay-close{
  background:none;border:none;margin:0;padding:8px 0 8px 16px;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:400;
  color:var(--white);mix-blend-mode:exclusion;
  letter-spacing:-0.01em;transition:opacity .2s;
  position:relative;z-index:11;pointer-events:auto;
}
.nav-overlay-close:hover{opacity:.6;}

/* ── Links — left-aligned, positioned ~35% from top (Locomotive-style) ──
   The explicit resets below ensure this block is never affected by the
   global nav{} rules (it must not be a fixed, white, z-index:200 bar). ── */
.nav-overlay-links{
  position:static;background:transparent;
  height:auto;z-index:auto;border:0;
  flex:1;display:flex;flex-direction:column;
  justify-content:flex-start;
  padding:28vh var(--pad) 0;
}
.nav-overlay-link{
  display:block;
  width:100%;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(38px,9vw,68px);
  font-weight:400;letter-spacing:-0.02em;line-height:1;
  color:var(--white);mix-blend-mode:exclusion;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding:12px 0;
  position:relative;
  transition:opacity .2s;
}
.nav-overlay-link:first-child{border-top:1px solid rgba(255,255,255,0.3);}
.nav-overlay-link:hover{opacity:.6;}
.nav-overlay-arrow{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-style:normal;
  font-size:clamp(14px,3vw,20px);
  color:var(--white);mix-blend-mode:exclusion;opacity:.5;
}

/* ── B circle — absolute bottom-right ── */
.nav-overlay-bottom{
  position:absolute;
  bottom:28px;right:var(--pad);
}
.nav-overlay-b{
  width:48px;height:48px;
  border-radius:50%;border:2px solid rgba(255,255,255,0.7);
  display:flex;align-items:center;justify-content:center;
  mix-blend-mode:exclusion;
}
.nav-overlay-b span{
  font-size:15px;font-weight:700;color:var(--white);
}