/* build-image-derivatives.py writes a WebP beside each photograph and
   stamp-images.py wraps the <img> in a <picture> to offer it. Wrapping would
   otherwise make the <picture> the flex or grid item in place of the image,
   which moves layout. display:contents takes it back out of the box tree, so
   the <img> stays the item it was and every existing rule keeps matching. */
picture{display:contents}

/* Site navigation bar.
 *
 * Single source of truth for the header. It previously lived as an inline
 * copy in every page, which drifted: link sizes split 14px/15px, the call to
 * action 12px/13px, the logo 22px/20px, and hover states into three variants.
 *
 * Values are literal rather than var() so this file is self-contained and
 * cannot pick up a different palette on pages that define their own tokens.
 *
 * Scope is the base bar only. Each page keeps its own breakpoint, because the
 * responsive behaviour genuinely differs: the home page collapses to a burger,
 * the others scroll the links horizontally.
 */

.nav{position:fixed;top:0;left:0;right:0;z-index:120;background:#101214;
  box-shadow:0 1px 0 rgba(242,241,238,.16)}
.nav-inner{max-width:none;margin:0 auto;padding:14px clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand img{height:22px;width:auto;display:block;
  filter:invert(1) brightness(1.1);mix-blend-mode:screen}

.nav-links{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0}
.nav-links a{color:#F2F1EE;text-decoration:none;font-family:"Hanken Grotesk",sans-serif;
  font-size:14px;font-weight:600;opacity:.85;transition:color .2s,opacity .2s}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1;color:#F46D06}
.nav-links a.nav-sails{color:#F46D06;font-weight:700;letter-spacing:.03em}
.nav-links a.nav-sails:hover{text-decoration:underline;text-underline-offset:5px}

.nav-links .dd{position:relative}
.nav-links .dd>a::after{content:"";display:inline-block;margin-left:7px;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.dd-menu{position:absolute;top:100%;left:-18px;padding-top:14px;display:none;
  min-width:190px;z-index:60}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;background:#101214;color:#F2F1EE;
  border:1px solid rgba(242,241,238,.14);border-top:none;padding:12px 20px;
  font-size:13.5px;text-decoration:none;letter-spacing:.02em}
.dd-menu a:first-child{border-top:1px solid rgba(242,241,238,.14)}
.dd-menu a:hover{color:#F46D06;background:#16191c}

.nav-cta{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;background:#F46D06;color:#fff;text-decoration:none;
  padding:11px 18px;border-radius:3px;white-space:nowrap;transition:background .2s}
.nav-cta:hover,.nav-cta:focus-visible{background:#D85D00;opacity:1}

@media (prefers-reduced-motion:reduce){
  .nav-links a,.nav-cta{transition:none}
}