/* =========================================================================
   Sketchy Horizon — the site header, shared by every page that carries it
   (Float's pages and the studio's support and privacy pages). Its script is
   /assets/site-header.js, which draws the live sun.

   A white band with the studio lockup and the studio's pages. Its bottom
   edge is the horizon: the sun sits on it, its own horizon joins the sketched
   line (.horizon--right runs on from the mark's right end, .horizon--left back
   from its left end), and the sun's reflections hang below onto the page. The
   mark's horizon tilts slightly, lower at the left, so the band reaches down to
   meet it (.brand__fill).

   Positions inside the mark are fractions of its height, measured from
   sh-mark-pencil.svg (viewBox 108 8 995 553): horizon right end at 0.62, left
   end at 0.685; mark width 1.8 × height. site-header.js frames the live sun to
   the same proportions.

   Uses the page's --text, --sh-coral, --sh-paper and --sh-terminal, which both
   /float/styles.css and /pages.css define. Everything else is set here.
   ========================================================================= */

.nav {
  /* header tokens (BRAND.md: white; surface-dark in dark mode) */
  --header-bg: #FFFFFF;
  --header-gutter: 24px;
  --header-container: 1120px;
  --header-h: 92px;
  --header-accent: var(--sh-coral);
  --header-font: "Shantell Sans", "Comic Neue", "Chalkboard SE", ui-rounded, system-ui, sans-serif;  /* the wordmark only */
  --header-links-font: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --mark-h: 80px;

  position: relative;
  z-index: 50;
  background: var(--header-bg);
  color: var(--text);
  overflow-x: clip;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav { --header-bg: #181A21; }
}
:root[data-theme="dark"] .nav { --header-bg: #181A21; }

.nav__inner {
  width: min(100% - 2 * var(--header-gutter), var(--header-container));
  height: var(--header-h);
  margin-inline: auto;
  padding-bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.nav .brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

/* The sun and its horizon, placed so the mark's horizon lands on the band's edge. */
.nav .brand__sun {
  position: relative;
  flex: none;
  width: calc(var(--mark-h) * 1.8);
  height: var(--mark-h);
  margin-bottom: calc(-12px - var(--mark-h) * 0.38);
}

.nav .brand__sun .brand__mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* A sketched horizon stroke. Also used along the top of Float's footer. In the header it no
   longer runs out from the mark: the band is white now, so there's no edge for it to follow,
   and the mark's own horizon is enough (Oct 27, 2026). */
.horizon {
  position: absolute;
  height: 12px;
  width: 100vw;
  fill: currentColor;
  pointer-events: none;
}

.horizon--right { left: 97.5%;  top: calc(var(--mark-h) * 0.62 - 6px); }
.horizon--left  { right: 97.6%; top: calc(var(--mark-h) * 0.685 - 6px); }

.nav .horizon--left,
.nav .horizon--right,
.nav .brand__fill { display: none; }

/* the band, carried down to the mark's tilted horizon on the left */
.brand__fill {
  position: absolute;
  top: calc(var(--mark-h) * 0.62);
  left: -100vw;
  right: 2.5%;
  height: calc(var(--mark-h) * 0.065);
  background: var(--header-bg);
  clip-path: polygon(0 0, 100% 0, calc(100vw + 2.4%) 100%, 0 100%);
}

/* The live sun from site-header.js: the studio home page's drawing, on the header's colours. */
.brand__mark--live { overflow: visible; }
.brand__mark--live .mk-ink { fill: currentColor; }
.brand__mark--live .mk-second { opacity: 0.85; }
.brand__mark--live .mk-coral { fill: var(--sh-coral); }
.brand__mark--live .mk-hatch { fill: none; stroke: var(--header-bg); stroke-width: 3.3; }
.brand__mark--live .mk-eye { fill: var(--sh-paper); }
.brand__mark--live .mk-pupil { fill: var(--sh-terminal); }

/* While the sun boils (site-header.js), the wordmark shivers with it. */
.nav .brand.is-boiling .brand__name { filter: url(#hdr-sun-boil); }

.nav .brand__name {
  font-family: var(--header-font);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* An app's Get button (site-header.js adds it on that app's pages): coral with white text, short
   and semibold per BRAND.md. */
.nav__links .nav__get {
  margin-bottom: -6px;   /* the row lines up bottoms; this centres the pill on the wordmark */
  padding: 9.4px 15px 5.6px;   /* Newsreader's caps sit high in their line; this centres them (measured) */
  border-radius: 999px;
  background: var(--sh-coral);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease;
}
/* Hover zooms it like the tour's play button, with no colour change (BRAND.md, Oct 28, 2026). */
.nav__links .nav__get:hover { transform: scale(1.1); text-decoration: none; }
.nav__links .nav__get:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* The studio's pages: in the site's serif, at the wordmark's size. */
.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav__links a {
  color: var(--text);
  font-family: var(--header-links-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-decoration-color: var(--header-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { text-decoration-line: underline; }

@media (max-width: 640px) {
  /* Phones: the lockup a size smaller, scaling with the screen. */
  .nav { --header-gutter: 16px; --mark-h: clamp(28px, 10.6vw, 44px); }
  .nav__inner { height: auto; padding-top: 14px; gap: 10px; }
  .nav .brand { gap: 6px; }
  .nav .brand__name { font-size: clamp(13px, 4.2vw, 18px); }
  .nav__links .nav__get { margin-bottom: -8px; }
}