/* The bar has to reach the physical top of the screen. On a notched iPhone the
 * status-bar strip is part of the page (the pages set viewport-fit=cover), so
 * the nav grows upward by the inset and pads its contents back down. Without
 * this the bar sits below the strip and content scrolls into view above it.
 * env() resolves to 0px everywhere else, so this changes nothing on desktop.
 */
:root{ --safe-top: env(safe-area-inset-top, 0px); --nav-h: calc(112px + var(--safe-top)); }
@media(max-width:900px){ :root{ --nav-h: calc(64px + var(--safe-top)); } }

/* The top navigation, shared by every page on the site.
 *
 * This is the single definition. Pages used to carry their own copy inside a
 * <style> block, which is how they drifted: some had no burger or drawer at
 * all, so below 900px their navigation simply disappeared.
 *
 * The rules are namespaced under .site-nav so they cannot touch anything else
 * a page defines. Its own colour tokens (--bg, --text, --accent…) still apply,
 * so the nav keeps each page's palette.
 */
/* Opaque, not 96%: the bar is the same cream as the page, so translucency
 * bought nothing visually but let whatever scrolled under it ghost through
 * — which on a phone reads as content sitting above the header. Dropping
 * the backdrop blur with it also saves a compositing pass on iOS. */
/* Each token carries the house value as a fallback so the bar renders the same
   on a page that defines no palette of its own. */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;height:var(--nav-h);overflow:visible;padding:var(--safe-top) 56px 0;background:#F2EDE3;border-bottom:1px solid var(--border, rgba(26,21,16,.1))}
.site-nav .nav-logo{display:flex;align-items:flex-start;flex-shrink:0;margin-right:48px;padding-right:48px;margin-top:24px}
.site-nav .nav-logo img{height:104px;width:auto;max-width:none;display:block}
.site-nav .nav-divider{width:1px;height:32px;background:rgba(26,21,16,.15);align-self:center;margin-right:48px;flex-shrink:0}
.site-nav .nav-links{display:flex;align-items:center;gap:36px}
.site-nav .nav-links a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted, #8A7E6E);transition:color .2s}
.site-nav .nav-links a:hover{color:var(--text, #1A1510)}
.site-nav .nav-links a.active{color:var(--accent, #C9953A)}
.site-nav .nav-actions{margin-left:auto;display:flex;align-items:center;gap:24px}
.site-nav .nav-search{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted, #8A7E6E);cursor:pointer;background:none;border:none;font-family:inherit}
.site-nav .nav-search:hover{color:var(--text, #1A1510)}
.site-nav .nav-cta{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--bg, #F2EDE3);background:var(--accent, #C9953A);padding:8px 18px;border-radius:2px}

/* Between full desktop and the phone menu (900px) the row ran out of room
   and the last link ran into Search. Tighten step by step instead. */
.site-nav .nav-actions{padding-left:24px}
@media(max-width:1320px){
  .site-nav .nav-logo{margin-right:28px;padding-right:28px}
  .site-nav .nav-divider{margin-right:28px}
  .site-nav .nav-links{gap:24px}
  .site-nav .nav-links a{letter-spacing:.15em}
  .site-nav .nav-actions{gap:18px}
}
@media(max-width:1140px){
  nav.site-nav{padding-left:32px;padding-right:32px}
  .site-nav .nav-logo{margin-right:18px;padding-right:18px}
  .site-nav .nav-logo img{height:88px}
  .site-nav .nav-divider{margin-right:20px}
  .site-nav .nav-links{gap:16px}
  .site-nav .nav-links a{font-size:10px;letter-spacing:.12em}
  .site-nav .nav-search{gap:0;font-size:0}
  .site-nav .nav-cta{padding:8px 14px}
}

.site-nav .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}
.site-nav .nav-burger span{display:block;width:22px;height:1.5px;background:var(--text, #1A1510);border-radius:1px;transition:transform .25s,opacity .2s}
.site-nav .nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-nav .nav-burger.open span:nth-child(2){opacity:0}
.site-nav .nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{position:fixed;top:var(--nav-h);left:0;right:0;background:#1A1510;display:none;flex-direction:column;padding:8px 0;z-index:190;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer.open{display:flex}
.nav-drawer a{font-family:var(--mono, 'IBM Plex Mono','Courier New',monospace);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,227,.8);padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.05)}
.nav-drawer a.active,.nav-drawer a:hover{color:var(--accent, #C9953A)}

@media(max-width:900px){
  nav.site-nav{height:var(--nav-h);padding:var(--safe-top) 20px 0;overflow:visible}
  .site-nav .nav-logo{margin:0;padding:0;align-self:center}
  /* Match .m-nav exactly. /archive has no mobile version, so phones are served
     the desktop page — and it was the only page on a phone with no search icon
     and a smaller logo, which is what made its bar look like a different one. */
  .site-nav .nav-logo img{height:52px}
  .site-nav .nav-divider,.site-nav .nav-links,.site-nav .nav-cta{display:none}
  .site-nav .nav-actions{display:flex;margin-left:auto;gap:0}
  .site-nav .nav-search{gap:0;font-size:0}            /* icon only, no label */
  .site-nav .nav-search svg{width:19px;height:19px}   /* the size .m-nav uses */
  .site-nav .nav-burger{display:flex;margin-left:20px}
}

/* Belt and braces for the top strip.
 *
 * The bar already grows by env(safe-area-inset-top), but that only works if the
 * browser reports an inset and honours viewport-fit=cover. When it does not,
 * the bar starts below the status bar and page content is visible in the gap.
 * This paints an opaque block upward from the bar, pinned to it, so whatever
 * that gap turns out to be is filled. If the bar already reaches the top, the
 * block is simply off-screen and costs nothing.
 */
nav.site-nav::before,
.m-nav::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 300px;
  background: #F2EDE3;
  pointer-events: none;
}

/* Scrollbars: thin, warm taupe on the cream, gold on hover (Safari). Chrome,
   Edge and Firefox read the two standard properties; Safari the ::-webkit
   ones. Phones keep their own overlay bars. */
html{scrollbar-width:thin;scrollbar-color:rgba(138,126,110,.55) transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(138,126,110,.55) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(138,126,110,.5);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:#C9953A}
::-webkit-scrollbar-corner{background:transparent}