/* =====================================================================
   SHELL — top bar, full-screen menu, search.

   Revision 2: the menu and search moved from the dark ground to
   paper. Only the footer is dark now (design-language §4).
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOP BAR

   Two states. Over the hero photograph it has no background at all and
   its marks are white — the hero's own top shade is what carries them.
   Past the hero (and on every page without one) it is paper with ink
   marks. .is-solid is applied by static/js/site.js.
   --------------------------------------------------------------------- */
#topbar {
  color: #fff;
}

#topbar.is-solid {
  color: var(--ink);
  background: var(--paper);
}

/* The hairline is a pseudo-element, NOT border-bottom.

   box-sizing is border-box, so a 1px bottom border took the bar's
   content box from 96px to 95px. Centring a 48px block in 95px gives
   23.5 — so in the solid state every menu line landed on a half pixel
   and rendered soft, while in the transparent state (no border) they
   landed on whole pixels and rendered crisp. Same CSS, two different
   rasterisations. A pseudo-element draws the line without touching
   the box. */
#topbar.is-solid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}

/* The wafer mark beside the wordmark. Height is in em so it scales with
   the wordmark's own responsive font-size — one number to tune.

   It is NOT knocked out to white over the photograph: the mark is a
   filled disc, so brightness(0)+invert flattened it into a plain white
   circle and lost the diffraction lines entirely. It keeps its own
   colours in both states. */
.topbar-logo {
  flex: none;
  height: 1.62em;
  width: auto;
}

/* Optical centring. The line box centres at the bar's midpoint, but
   the glyphs inside it do not: "Minnesota Nanofabrication" has no
   descenders, so the space Fraunces reserves below the baseline is
   empty and the letters read about 0.7px high at desktop size. The
   nudge is in em, so it holds at every breakpoint. The logo is a
   symmetric disc and is already centred, so it is left alone. */
.topbar-word {
  display: inline-block;
  transform: translateY(0.03em);
}

.topbar-mark {
  /* Continuous, not stepped. At 390px the old fixed 1.4rem made the
     wordmark ~300px wide; with the logo, the gutters and the menu mark
     that exceeded the viewport, and because the text is nowrap it ran
     underneath the menu instead of shrinking. The vw term keeps it
     inside the space actually available at every width. */
  font-size: clamp(1.05rem, 5.6vw, 2.45rem);
  letter-spacing: -0.025em;
  transition: opacity var(--t) var(--ease);
}

.topbar-mark:hover { opacity: 0.7; }

.topbar-ctl {
  color: inherit;
  transition: opacity var(--t) var(--ease);
}

.topbar-ctl:hover { opacity: 0.7; }

/* Three equal lines. */
/* The numbers here are chosen so every line lands on a WHOLE pixel.

   Before: 3px lines with a 0.55rem (8.8px) gap in a 48px box left
   26.6px of content, so the stack started at (48-26.6)/2 = 10.7 and
   the lines rendered at y = 34.7 / 46.5 / 58.3. Each straddled pixel
   boundaries by a different fraction, and the middle one landed on an
   exact .5 — both its edges at half intensity — so it read thinner and
   lighter than the other two. The sizes were identical; the rasterised
   result was not.

   Now: 4px lines, 8px gaps, 48px box = 28px of content, starting at a
   clean (48-28)/2 = 10. Keep all four numbers even if you change them. */
.topbar-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 2.875rem;
  height: 3rem;
}

/* All three identical by construction: same width (100% of the same
   parent), same height, same colour, and nothing changes any of them
   on hover. 3px rather than 2px so the mark reads as deliberate and
   does not soften under antialiasing at 1x. */
.topbar-burger > span {
  display: block;
  width: 100%;
  height: 4px;
  background: currentColor;
}

/* The menu draws its own bar in the same position. */
html:has(.nav-open-state:checked) #topbar {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   FULL-SCREEN MENU
   --------------------------------------------------------------------- */
.nav-overlay {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t) var(--ease),
    visibility 0s linear var(--t);
}

.nav-open-state:checked ~ .nav-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-ctl {
  color: inherit;
  transition: opacity var(--t) var(--ease);
}

.nav-ctl:hover { opacity: 0.65; }

/* Columns rise in sequence on open only — a stagger on close reads as
   lag. */
.nav-band {
  opacity: 0;
  transform: translateY(0.5rem);
}

.nav-open-state:checked ~ .nav-overlay .nav-band {
  animation: nav-rise 380ms var(--ease) forwards;
}

.nav-open-state:checked ~ .nav-overlay .nav-band:nth-child(1) { animation-delay: 30ms; }
.nav-open-state:checked ~ .nav-overlay .nav-band:nth-child(2) { animation-delay: 70ms; }
.nav-open-state:checked ~ .nav-overlay .nav-band:nth-child(3) { animation-delay: 110ms; }
.nav-open-state:checked ~ .nav-overlay .nav-band:nth-child(4) { animation-delay: 150ms; }

@keyframes nav-rise {
  to { opacity: 1; transform: none; }
}

.nav-band-head {
  transition: color var(--t) var(--ease);
}

.nav-band-head:hover { color: var(--maroon); }

/* Leaf links. Colour only — shifting text on hover looks cheap, and
   the tick that used to grow here was decoration. */
.nav-leaf {
  color: var(--ink);
  transition: color var(--t) var(--ease);
}

.nav-leaf:hover,
.nav-leaf:focus-visible { color: var(--maroon); }

/* Social marks in the menu. Equal boxes so the four sit on one
   optical line regardless of each glyph's own proportions. */
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #474D49);
  transition: color var(--t) var(--ease);
}

.nav-social:hover,
.nav-social:focus-visible {
  color: var(--ink);
}

/* Actions */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.nav-cta-solid {
  background: var(--ink);
  color: var(--paper);
}

.nav-cta-solid:hover { background: var(--maroon); }

.nav-cta-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

.nav-cta-ghost:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------------
   SEARCH
   --------------------------------------------------------------------- */
.search-overlay[hidden] { display: none; }

.search-overlay { animation: search-in 180ms var(--ease); }

@keyframes search-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-hit {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 0.75rem;
  margin: 0 -0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 120ms var(--ease);
}

.search-hit:hover,
.search-hit.is-active { background: rgba(0, 0, 0, 0.04); }

.search-hit-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.search-hit-title {
  font-family: Ampersand, Fraunces, Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.search-hit-sum {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--muted, #474D49);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.search-hit-crumb {
  flex: none;
  font-size: 0.9375rem;
  color: var(--muted, #474D49);
  text-align: right;
}

.search-error { font-size: 1.0625rem; }

@media (max-width: 640px) {
  .search-hit-crumb { display: none; }
}


/* ---------------------------------------------------------------------
   VERY NARROW SCREENS (iPhone SE and similar, ~320px)

   At 320px the brand, the gutters and the menu mark together came to
   about 334px, so the bar pushed the document 5px wider than the
   viewport and the overlay's close control hung off the right edge.

   The wordmark cannot shrink further — it is already at the 15px floor
   (§3) — so the space comes from the furniture around it instead:
   tighter gutters, a smaller logo, a narrower mark. The name stays
   readable, which is the point of having it there.
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  #topbar > div,
  .nav-overlay > div:first-child {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    gap: 0.5rem;
  }

  .topbar-mark {
    gap: 0.5rem;
    min-width: 0;        /* never force the flex row wider */
  }

  .topbar-logo { height: 1.2em; }

  .topbar-burger {
    width: 2.25rem;
    gap: 7px;            /* keep the stack even — see the note above */
  }

  .topbar-burger > span { height: 3px; }
}

/* Below ~340px even that is not enough: the wordmark is nowrap and
   already at the 15px floor, so it cannot give up any more width. The
   logo goes instead of the name — the name is what identifies the
   club, and a 19px mark next to 15px type was doing little anyway. */
@media (max-width: 345px) {
  .topbar-logo { display: none; }
}


/* Same reasoning as bands.css: comfortable taps on a phone, unchanged
   density on a pointer device. */
@media (max-width: 640px) {
  /* Scoped to .nav-overlay to out-specify Tailwind's py-1.5 on the
     markup: the CDN injects its stylesheet after ours, so at equal
     specificity the utility wins on order. */
  .nav-overlay .nav-leaf {
    padding-top: 0.6875rem;   /* 17px line + 22px padding = 44px */
    padding-bottom: 0.6875rem;
  }

  /* The marks are 34px glyphs; the tappable box around them is what
     needs to be 44, not the artwork. */
  .nav-overlay .nav-social {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-overlay .nav-band-head {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  /* The brand is a link too, and at 20px tall it was the smallest
     target in the bar. */
  .topbar-mark {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Subsystems in the menu, indented under the machine they belong to. */
.nav-subs {
  list-style: none;
  margin: 0 0 0.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.nav-leaf--sub { color: var(--muted, #474D49); }