/* ---------------------------------------------------------------------------
   Pontura — shared site chrome (header, footer, fonts, palette).

   Safe to include on ANY page, including the scorecard: every chrome selector
   is prefixed .pn-, so nothing here can reach into a page's own layout.

   Two things it does globally and deliberately:
   1. Loads the typefaces.
   2. Re-points the colour variables the scorecard and booking pages define in
      their own :root blocks. Those files were written against a navy/teal
      palette; overriding the variables retints them to the structural palette
      without editing a line of their markup or their logic. This file loads
      last in the head, so these win. See the RETINT block at the bottom.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root{
  --pn-ink:#14181C;
  --pn-ink-deep:#0F1216;
  --pn-accent:#C75B32;
  --pn-accent-lite:#D68160;
  --pn-steel:#5E7A8A;
  --pn-on-ink:#EDEBE7;
  --pn-on-ink-muted:#8A939B;
}

/* ------------------------------------------------------------------ header */
.pn-nav{
  position:sticky; top:0; z-index:80;
  background:rgba(20,24,28,.94);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(232,230,226,.10);
}
.pn-nav-in{
  max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,34px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:62px;
}
.pn-brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:#EDEBE7; flex:0 0 auto}
.pn-brand span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
}
.pn-brand svg{display:block; flex:0 0 auto}

.pn-links{display:flex; align-items:center; gap:28px}
.pn-links a{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#A2ABB2; text-decoration:none; white-space:nowrap;
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.pn-links a:hover{color:#FBFAF8}
.pn-links a.is-here{color:#FBFAF8; border-bottom-color:#C75B32}

.pn-go{
  display:inline-block; background:#C75B32; color:#0B0E11 !important;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:12px 20px; white-space:nowrap;
  transition:background-color .15s ease;
}
.pn-go:hover{background:#E07B52; color:#0B0E11 !important}
.pn-go .pn-sm{display:none}

/* JS-free mobile menu */
.pn-menu{display:none; position:relative}
.pn-menu summary{
  list-style:none; cursor:pointer; color:#C9CFD4; padding:11px 14px;
  border:1px solid rgba(232,230,226,.24);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.pn-menu summary::-webkit-details-marker{display:none}
.pn-menu[open] summary{color:#FBFAF8; border-color:rgba(232,230,226,.5)}
.pn-menu-panel{
  position:absolute; right:0; top:calc(100% + 11px); min-width:216px;
  background:#191E23; border:1px solid rgba(232,230,226,.16);
  padding:6px; display:flex; flex-direction:column;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.pn-menu-panel a{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#C9CFD4; text-decoration:none; padding:13px 14px;
}
.pn-menu-panel a:hover{background:rgba(232,230,226,.06); color:#FBFAF8}
.pn-menu-panel a.is-here{color:#D68160}

/* ------------------------------------------------------------------ footer */
.pn-foot{
  background:#0F1216; color:#A2ABB2; border-top:1px solid rgba(232,230,226,.10);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:15px; line-height:1.6;
}
.pn-foot-in{max-width:1180px; margin:0 auto; padding:52px clamp(20px,4vw,34px) 40px}
.pn-foot-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:38px;
  padding-bottom:34px; border-bottom:1px solid rgba(232,230,226,.10);
}
.pn-foot h4{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#7C858D;
  margin:0 0 15px; font-weight:500;
}
.pn-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.pn-foot a{color:#A2ABB2; text-decoration:none}
.pn-foot a:hover{color:#FBFAF8}
.pn-foot-blurb{color:#8A939B; font-size:15px; margin:0; max-width:340px; line-height:1.6}
.pn-foot-mark{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.pn-foot-mark span{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:#EDEBE7;
}
.pn-foot-bot{
  padding-top:26px; display:flex; flex-wrap:wrap; gap:12px 28px;
  justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7C858D;
}
.pn-foot-bot em{font-style:italic; text-transform:none; letter-spacing:0}
.pn-foot-note{
  color:#7C858D; font-size:12.5px; line-height:1.65; margin:20px 0 0; max-width:780px;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

@media (max-width:880px){
  .pn-links{display:none}
  .pn-menu{display:block}
  .pn-foot-top{grid-template-columns:1fr 1fr; gap:30px}
  .pn-foot-blurb{grid-column:1 / -1; max-width:none}
}
@media (max-width:560px){
  .pn-go .pn-lg{display:none}
  .pn-go .pn-sm{display:inline}
  .pn-go{padding:11px 15px}
  .pn-brand span{font-size:11px; letter-spacing:.14em}
  .pn-nav-in{gap:10px}
}

/* The scorecard has its own sticky progress bar at top:0 — the nav stays put there. */
.pn-nav--static{position:static}

/* ===========================================================================
   RETINT — see the note at the top of this file.

   The scorecard, /book and /booked declare these variables in their own :root
   and use them throughout. Re-pointing them here moves those pages onto the
   structural palette without touching their markup, their scoring, or the
   Supabase write. Names are theirs; values are ours. Do not rename them.
   =========================================================================== */
:root{
  --paper:#F4F2EE;      /* page ground        */
  --card:#FAF8F4;       /* raised card        */
  --border:#D9D3C9;     /* hairline           */
  --border2:#C9C2B7;    /* heavier rule       */
  --navy:#1C2228;       /* was navy           */
  --navy2:#14181C;      /* dark section ground*/
  --teal:#A8481F;       /* solid button, white text on it */
  --teal2:#C75B32;      /* bright accent      */
  --amber:#7D4B0A;
  --ink:#1A1E22;
  --ink2:#55606A;
  --ink3:#7C848C;
}

/* Those two pages set their type stacks inline as well. The site runs one
   typeface system, so the stacks move with the palette. Purely cosmetic —
   a font-family declaration cannot affect any behaviour on those pages. */
body{font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3{font-family:'Archivo','Helvetica Neue',Arial,sans-serif; letter-spacing:-.02em}

/* Those pages carried a bottom padding on body from their old layout. The
   footer ends the page now, so the gap under it goes. */
body{padding-bottom:0}