/* ==========================================================================
   Kilnwork — Sticky header + mega menu
   Every selector is scoped to the section root (.s-header / .s-header__*).
   Depends on tokens.css → base.css → components.css.
   Breakpoint: desktop nav above 56.25rem (900px), drawer at and below.
   ========================================================================== */

.s-header {
  --hdr-mega-pad: clamp(var(--space-6), 2.4vw, var(--space-9));
  --hdr-hover: color-mix(in oklab, var(--ink) 6%, transparent);
  --hdr-press: color-mix(in oklab, var(--ink) 11%, transparent);

  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  isolation: isolate;
}

/* The sprite is a definition-only SVG: never painted, never announced. */
.s-header__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Bar ----------------------------------------------------------------- */

.s-header__bar {
  position: relative;
  z-index: var(--z-raised);
  background-color: color-mix(in oklab, var(--surface) 74%, transparent);
  box-shadow: inset 0 -1px 0 0 transparent;
  transition:
    background-color var(--dur-3) var(--ease-standard),
    box-shadow var(--dur-3) var(--ease-standard);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s-header__bar {
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s-header__bar { background-color: var(--surface); }
}

.s-header.is-stuck .s-header__bar,
.s-header.has-mega .s-header__bar {
  background-color: color-mix(in oklab, var(--surface) 92%, transparent);
  box-shadow: inset 0 -1px 0 0 var(--border);
}

.s-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  position: relative;
}

/* ---- Wordmark ------------------------------------------------------------ */

.s-header__logo {
  flex: none;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
}

.s-header__logo .logo-mark__glyph {
  width: 1.625rem;
  height: 1.625rem;
  transition: rotate var(--dur-4) var(--ease-out-expo);
}

.s-header__logo:hover .logo-mark__glyph { rotate: -4deg; }

.s-header__word { display: block; }

.s-header__wordmark {
  height: 0.9375rem;
  width: auto;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Primary nav --------------------------------------------------------- */

.s-header__nav { display: none; }

.s-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  list-style: none;
  padding: 0;
}

.s-header__item { position: static; }

.s-header__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--ink-muted);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}

.s-header__trigger:hover,
.s-header__trigger:focus-visible {
  color: var(--ink);
  background-color: var(--hdr-hover);
}

.s-header__trigger:active { background-color: var(--hdr-press); }

.s-header__item.is-open > .s-header__trigger {
  color: var(--ink);
  background-color: var(--hdr-hover);
}

.s-header__chev {
  width: 0.6875rem;
  height: 0.6875rem;
  flex: none;
  opacity: 0.5;
  transition:
    rotate var(--dur-3) var(--ease-out-expo),
    opacity var(--dur-2) var(--ease-standard);
}

.s-header__item.is-open > .s-header__trigger .s-header__chev {
  rotate: 180deg;
  opacity: 1;
}

/* ---- Right-hand actions -------------------------------------------------- */

.s-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.s-header__theme {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}

.s-header__theme:hover,
.s-header__theme:focus-visible {
  color: var(--ink);
  background-color: var(--hdr-hover);
}

.s-header__theme:active { background-color: var(--hdr-press); }

.s-header__theme-icon {
  grid-area: 1 / 1;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity var(--dur-3) var(--ease-out-expo),
    rotate var(--dur-4) var(--ease-out-expo),
    scale var(--dur-3) var(--ease-out-expo);
}

.s-header__theme-icon--sun { opacity: 0; rotate: -90deg; scale: 0.5; }
.s-header__theme[aria-pressed="true"] .s-header__theme-icon--sun  { opacity: 1; rotate: 0deg; scale: 1; }
.s-header__theme[aria-pressed="true"] .s-header__theme-icon--moon { opacity: 0; rotate: 90deg; scale: 0.5; }

.s-header__login {
  display: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}

.s-header__login:hover,
.s-header__login:focus-visible {
  color: var(--ink);
  background-color: var(--hdr-hover);
}

.s-header__login:active { background-color: var(--hdr-press); }

.s-header__cta { display: none; }

/* ---- Burger -------------------------------------------------------------- */

.s-header__burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}

.s-header__burger:hover,
.s-header__burger:focus-visible { background-color: var(--hdr-hover); }
.s-header__burger:active { background-color: var(--hdr-press); }

.s-header__burger-bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.75rem;
}

.s-header__burger-bars::before,
.s-header__burger-bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition:
    translate var(--dur-3) var(--ease-out-expo),
    rotate var(--dur-3) var(--ease-out-expo);
}

.s-header__burger-bars::before { inset-block-start: 0; }
.s-header__burger-bars::after  { inset-block-end: 0; }

.s-header__burger[aria-expanded="true"] .s-header__burger-bars::before {
  translate: 0 5.25px;
  rotate: 45deg;
}

.s-header__burger[aria-expanded="true"] .s-header__burger-bars::after {
  translate: 0 -5.25px;
  rotate: -45deg;
}

/* ---- Mega panel ---------------------------------------------------------- */

.s-header__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  background-color: var(--surface-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-standard);
}

.s-header.has-mega .s-header__scrim {
  opacity: 0.35;
  pointer-events: auto;
}

.s-header__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: var(--gutter);
  padding-block-start: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -0.5rem;
  transition:
    opacity var(--dur-2) var(--ease-standard),
    translate var(--dur-3) var(--ease-out-expo),
    visibility 0s linear var(--dur-3);
}

.s-header__item.is-open > .s-header__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
  transition-delay: 0s;
}

.s-header__mega {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: var(--space-8);
  padding: var(--hdr-mega-pad);
  border-radius: var(--radius-xl);
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xl);
}

.s-header__orb {
  --orb-size: 26rem;
  --orb-opacity: 0.16;
  inset-block-start: -14rem;
  inset-inline-end: -8rem;
}

.s-header__cols {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.s-header__group-title {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.s-header__links {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-header__links > li { max-width: none; }

.s-header__link {
  position: relative;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  align-items: start;
  gap: 0.125rem var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background-color var(--dur-2) var(--ease-standard),
    translate var(--dur-3) var(--ease-out-quart);
}

.s-header__link:hover,
.s-header__link:focus-visible {
  background-color: color-mix(in oklab, var(--brand) 9%, transparent);
  translate: 2px 0;
}

.s-header__link:active { background-color: color-mix(in oklab, var(--brand) 15%, transparent); }

.s-header__ico {
  grid-row: 1 / span 2;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  margin-block-start: 0.125rem;
  color: var(--brand);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--dur-2) var(--ease-standard);
}

.s-header__link-name {
  grid-column: 2;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: var(--tracking-snug);
}

.s-header__link-desc {
  grid-column: 2;
  max-width: 30ch;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

/* Compact column: names only, tighter rhythm. */
.s-header__links--compact { gap: 0; }

.s-header__link--compact {
  grid-template-columns: minmax(0, 1fr);
  padding-block: 0.375rem;
}

.s-header__link--compact .s-header__link-name {
  grid-column: 1;
  color: var(--ink-muted);
  font-weight: var(--weight-book);
  transition: color var(--dur-2) var(--ease-standard);
}

.s-header__link--compact:hover .s-header__link-name,
.s-header__link--compact:focus-visible .s-header__link-name { color: var(--ink); }

/* ---- Featured rail ------------------------------------------------------- */

.s-header__feature {
  --card-pad: var(--space-6);
  gap: var(--space-2);
  background-color: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
  text-decoration: none;
}

.s-header__feature:hover {
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.s-header__feature-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--brand-tint);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent);
}

.s-header__feature-tile--accent {
  background-color: var(--accent-tint);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}

.s-header__feature-tile--accent .s-header__ico { color: var(--accent-hover); }

.s-header__feature-tile--alt {
  background-color: color-mix(in oklab, var(--accent-alt) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-alt) 26%, transparent);
}

.s-header__feature-tile--alt .s-header__ico { color: var(--accent-alt); }

.s-header__feature-tile .s-header__ico {
  grid-row: auto;
  margin-block-start: 0;
  width: 1.375rem;
  height: 1.375rem;
}

.s-header__feature-kicker {
  color: var(--highlight);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  text-transform: uppercase;
}

.s-header__feature-title {
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.s-header__feature-body {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.s-header__feature-cta {
  margin-block-start: var(--space-2);
  font-size: var(--step--1);
}

/* ---- Mobile drawer ------------------------------------------------------- */

.s-header__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--dur-4);
}

.s-header__drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.s-header__drawer-scrim {
  position: absolute;
  inset: 0;
  background-color: var(--surface-overlay);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
}

.s-header__drawer.is-open .s-header__drawer-scrim { opacity: 1; }

.s-header__sheet {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(23rem, 100%);
  background-color: var(--surface);
  box-shadow: var(--shadow-xl);
  translate: 100% 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: translate var(--dur-4) var(--ease-out-expo);
}

.s-header__drawer.is-open .s-header__sheet { translate: 0 0; }

.s-header__sheet-top {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-inline: var(--space-5);
  background-color: var(--surface);
  box-shadow: inset 0 -1px 0 0 var(--border);
}

.s-header__sheet-title {
  color: var(--ink-muted);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.s-header__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: calc(var(--space-2) * -1);
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}

.s-header__close:hover,
.s-header__close:focus-visible { background-color: var(--hdr-hover); }
.s-header__close:active { background-color: var(--hdr-press); }
.s-header__close svg { width: 1.125rem; height: 1.125rem; }

.s-header__sheet-nav {
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
}

.s-header__acc-item + .s-header__acc-item {
  box-shadow: inset 0 1px 0 0 var(--border);
}

.s-header__acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-standard);
}

.s-header__acc-trigger:hover,
.s-header__acc-trigger:focus-visible { color: var(--brand); }
.s-header__acc-trigger:active { color: var(--brand-hover); }

.s-header__acc-trigger .s-header__chev {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ink-muted);
}

.s-header__acc-item.is-open .s-header__acc-trigger .s-header__chev {
  rotate: 180deg;
  opacity: 1;
}

.s-header__acc-links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 var(--space-4);
  list-style: none;
}

.s-header__acc-links > li { max-width: none; }

.s-header__acc-links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: var(--step-0);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  transition:
    color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}

.s-header__acc-links a:hover,
.s-header__acc-links a:focus-visible {
  color: var(--ink);
  background-color: color-mix(in oklab, var(--brand) 9%, transparent);
}

.s-header__acc-links a:active { background-color: color-mix(in oklab, var(--brand) 15%, transparent); }

.s-header__acc-links .s-header__ico {
  grid-row: auto;
  margin-block-start: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.s-header__sheet-foot {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  box-shadow: inset 0 1px 0 0 var(--border);
}

.s-header__sheet-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--step--2);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-align: center;
}

/* ---- Breakpoints --------------------------------------------------------- */

@media (width >= 26rem) {
  .s-header__cta { display: inline-flex; }
}

@media (width >= 30rem) {
  .s-header__wordmark { height: 1.0625rem; }
}

/* Desktop: nav in the bar, drawer gone. */
@media (width > 56.25rem) {
  .s-header__inner { gap: var(--space-6); }
  .s-header__nav { display: block; }
  .s-header__login { display: inline-flex; }
  .s-header__burger { display: none; }
  .s-header__drawer { display: none; }
  .s-header__actions { gap: var(--space-1); }
  .s-header__cta { margin-inline-start: var(--space-2); }

  /* No-JS fallback: the panels still open on hover and on keyboard focus. */
  .s-header.is-nojs .s-header__item:hover > .s-header__panel,
  .s-header.is-nojs .s-header__item:focus-within > .s-header__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
    transition-delay: 0s;
  }
}

/* Narrow desktop: the feature drops under the columns, so lay it on its side
   rather than letting a full-width card double the height of the panel. */
@media (width > 56.25rem) and (width < 64rem) {
  .s-header__mega { gap: var(--space-6); }

  .s-header__feature {
    --card-pad: var(--space-5);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-5);
  }

  .s-header__feature-tile {
    grid-row: 1 / span 2;
    margin-block-end: 0;
  }

  .s-header__feature-kicker,
  .s-header__feature-title { grid-column: 2; }
  .s-header__feature-title { font-size: var(--step-1); }
  .s-header__feature-body { display: none; }

  .s-header__feature-cta {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}

@media (width >= 64rem) {
  .s-header__mega { grid-template-columns: minmax(0, 1fr) 18.5rem; }
  .s-header__feature { --card-pad: var(--space-7); }
}

@media (width >= 90rem) {
  .s-header__mega { grid-template-columns: minmax(0, 1fr) 21rem; }
  .s-header__cols { gap: var(--space-7) var(--space-9); }
}

/* ---- Motion escape ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .s-header__panel,
  .s-header__drawer,
  .s-header__drawer-scrim,
  .s-header__sheet {
    transition-delay: 0s !important;
  }

  .s-header__panel { translate: none; }
  .s-header__sheet { translate: none; }
  .s-header__logo:hover .logo-mark__glyph { rotate: none; }
  .s-header__link:hover,
  .s-header__link:focus-visible { translate: none; }
  .s-header__theme-icon { rotate: none; scale: 1; }
}