/* ==========================================================================
   NewLine Break — layout shell
   The gutter rail is the logo mark drawn at page scale: a continuous trace
   that runs down the left edge and steps at every section boundary.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  animation: nav-in 0.9s var(--ease) 0.5s both;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
}

.nav.is-stuck {
  /* The solid line is for a browser without color-mix(): an opaque bar, not
     type floating over the page. */
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Scripting is what marks the bar as stuck. Without it the bar would stay
   clear over whatever scrolls under it, so it is opaque from the start. */
html:not(.js) .nav {
  background: var(--ground);
  border-bottom-color: var(--line);
}

.nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.15rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.brand__mark {
  width: 26px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
}

.brand__mark--lg {
  width: 34px;
  height: 39px;
}

.brand__step { stroke: var(--break); }

.brand__word {
  font-size: 1.0625rem;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: -0.01em;
}

.brand__esc {
  font-family: var(--mono);
  color: var(--break);
  letter-spacing: 0;
}

.nav__menu {
  display: flex;
  gap: 2.25rem;
  margin-left: auto;
  font-size: 0.9375rem;
  color: var(--fog);
}

.nav__menu a {
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.25s var(--ease);
}

.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--signal-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav__menu a.is-active { color: var(--text); }

@media (hover: hover) {
  .nav__menu a:hover { color: var(--text); }
  .nav__menu a:hover::after { transform: scaleX(1); }
}

.nav__menu a.is-active::after { transform: scaleX(1); }

/* Signal, not break: position is structure. Coral stays reserved for breaks. */
.nav__menu a.is-active::after { background: var(--signal-lit); }

.nav__menu-cta {
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line-lit);
  border-radius: 2px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@keyframes nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Band — the section primitive: [gutter rail] [content]
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-y) var(--pad-x);
}

.band--alt { background: var(--strata); }

/* Full-bleed backgrounds, content still aligned to the shell. */
/* Held as a variable so a child can cancel it exactly and run edge to edge.
   Negating the expression by hand would drift the moment --shell changes.
   The opening defines the same --bleed for itself in hero.css. */
.band--alt,
.band--contact {
  --bleed: max(var(--pad-x), calc((100vw - var(--shell)) / 2 + var(--pad-x)));
  max-width: none;
  padding-inline: var(--bleed);
}

.band__gutter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 2rem;
}

/* The rail: a hairline that drops the height of the band, capped by a
   coral node. One line ending, the next beginning. */
.band__rail {
  position: relative;
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, var(--line-lit) 0%, var(--line-lit) 55%, var(--line) 80%, transparent);
}

/* The node is the break: one line ending so the next can begin. */
.band__rail::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: -3.5px;
  width: 8px;
  height: 8px;
  background: var(--break);
}

.band__rail::after {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: -3.5px;
  width: 8px;
  height: 8px;
  background: var(--break);
  opacity: 0.28;
  transform: scale(2.6);
}

.band__body { min-width: 0; }

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.head__title {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.125rem);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x) 2.5rem;
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  /* The list columns never go narrower than their longest line (the email
     address); the brand column gives up the room instead. */
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(max-content, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
}

.footer__brand .brand__mark { margin-bottom: 1.25rem; }

.footer__name {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  margin-bottom: 0.4rem;
}

.footer__blurb {
  color: var(--fog);
  max-width: 32ch;
  font-size: 0.9375rem;
}

/* The notes sit under the blurb, in the room the brand column has to spare. */
.footer__notes {
  margin-top: 2.5rem;
  max-width: 34ch;
}

.footer__h {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog-dim);
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.footer__col li { margin-bottom: 0.6rem; }

/* Ten profiles read better as two short lists than as one long one. */
.footer__col--elsewhere ul {
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.footer__col--elsewhere li { break-inside: avoid; }

.footer__col a {
  color: var(--fog);
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .footer__col a:hover { color: var(--text); }
}

.footer__legal {
  max-width: var(--shell);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--fog-dim);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --gutter: 4.5rem; }
  .band__gutter { padding-right: 1.25rem; }
}

@media (max-width: 820px) {
  .nav__menu {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--pad-x) 2rem;
    background: var(--ground);
    background: color-mix(in srgb, var(--ground) 97%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    font-size: 1.125rem;
  }

  /* Closed panel: hidden from pointer AND from the tab order. visibility is
     transitioned so it only applies once the slide has finished. */
  .js .nav__menu {
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }

  .js .nav__menu.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s var(--ease), visibility 0s;
  }

  /* No JS means no toggle, so the menu stays open as a static list rather
     than becoming unreachable. A list that long cannot ride along in a
     fixed bar, it would lie over the page all the way down: the whole nav
     goes back into the flow, the brand on a row of its own. */
  html:not(.js) .nav { position: static; }

  html:not(.js) .nav__inner {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  html:not(.js) .nav__menu {
    position: static;
    inset: auto;
    flex: 1 0 100%;
    margin-left: 0;
    padding: 0;
    background: none;
    border-bottom: 0;
    backdrop-filter: none;
  }

  html:not(.js) .nav__toggle { display: none; }

  .nav__menu a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__menu a::after { display: none; }

  .nav__cta { display: none; }
  .nav__menu-cta { display: flex; }
  .nav__toggle { display: flex; }

  :root { --gutter: 0px; }

  .band { grid-template-columns: minmax(0, 1fr); }

  .band__gutter {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0 0 2.25rem;
  }

  .band__rail {
    flex: 1;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--line-lit), transparent);
  }

  .band__rail::before {
    top: -2.5px;
    left: -6px;
  }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Touch targets
   Desktop keeps its typographic density; touch devices get the 44px minimum.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .footer__col li { margin-bottom: 0; }

  .footer__col a,
  .brand {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .nav__menu a { min-height: 44px; display: flex; align-items: center; }
}