/* ============================================================================
   JAVVY LABS — layout.css
   The hairline grid system, shell/container, the mono index rail, header,
   footer, and the dark→light→dark surface rhythm. Buttons (CTA fill-morph).
   Responsive 360→1920. (ART-DIRECTION §5, §0-header, §7-footer)
   ============================================================================ */

/* ============ PAGE SHELL ============ */
.page { position: relative; isolation: isolate; }

.shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============ THE SURFACE RHYTHM ============
   Each section paints its own surface from the (possibly [data-surface=light])
   token set. Light sections become quiet-luxe galleries; the grid goes silent. */
.section {
  position: relative;
  background: var(--surface-0);
  color: var(--text-hi);
  padding-block: var(--section-pad);
}
.section--sunk { background: var(--surface-sunk); }

/* content-visibility for below-fold perf (generous size hint keeps layout stable) */
.section[data-cv] {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ============ THE FINE HAIRLINE GRID ============
   Vertical column hairlines at <=6% opacity. Felt, not seen. Visible only in the
   dark control-surface sections; it fades out under the light galleries. Pure CSS,
   near-zero cost. Sits behind content. */
.section__grid {
  position: absolute;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc((100% / 12) - 1px),
    var(--grid) calc((100% / 12) - 1px),
    var(--grid) calc(100% / 12)
  );
  background-position: center;
  /* clamp the grid to the content track so columns line up with real content */
  margin-inline: var(--gutter);
  opacity: 1;
  transition: opacity var(--dur-enter) var(--ease);
}
/* at >= lg the content body is offset by the rail + column-gap; shift the grid
   start to match so its 12 lines sit under the real content columns (ART §5). */
@media (min-width: 64rem) {
  .section__grid {
    margin-inline-start: calc(var(--gutter) + var(--rail-w) + clamp(1.5rem, 3vw, 3rem));
  }
}
/* the gallery beats silence the grid entirely (B → C breathing): the fine grid
   is visible ONLY in the dark control-surface sections; it fades to nothing under
   the light quiet-luxe galleries (ART §5). The 0.2s opacity transition lets it
   recede cleanly as the gallery enters. */
[data-surface="light"] .section__grid { opacity: 0; }

.section__inner { position: relative; z-index: var(--z-content); }

/* ============ THE GRID + LEFT MONO INDEX RAIL ============
   12-col content grid, with a persistent left index rail at >= lg. The rail holds
   the section index (▸ 0N) + a vertical dateline. On small screens it collapses to
   an inline mono index above each section heading. */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
@media (min-width: 64rem) { /* lg ~1024px */
  .layout {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* the rail */
.rail { display: none; }
@media (min-width: 64rem) {
  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    grid-column: 1 / 2;
    align-self: stretch;
    padding-top: 0.35rem;
  }
  .rail__index {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--text-low);
    white-space: nowrap;
  }
  .rail__line {
    flex: 1 1 auto;
    width: 1px;
    min-height: 3rem;
    background: var(--line);
    transform-origin: top center;
  }
  .rail__dateline {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-low);
    white-space: nowrap;
    margin-top: var(--space-sm);
  }
}
.layout__body { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 64rem) { .layout__body { grid-column: 2 / 3; } }

/* section head block */
.section__kicker { display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: var(--space-md); }
/* the authored "§ 0N — NAME" kicker doubles as the section heading (it is the
   single visible section index; no invented display headline). The .kicker rules
   (mono, small, tracked-upper) win over the base h2 element styles by specificity. */
.section__heading { font-weight: 500; }
.section__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-mid);
  max-width: 60ch;
  margin-top: var(--space-md);
}
/* the lead-in is the visual anchor of the section (the kicker is the small index
   above it). Slightly larger + high-ink for presence, in the quiet-luxe register. */
.section__lead--major {
  font-size: var(--fs-h3);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  max-width: 46ch;
  margin-top: 0;
  text-wrap: pretty;
}

/* ============ HAIRLINE RULES (draw-on via JS; default fully drawn) ============ */
.rule {
  height: 1px;
  width: 100%;
  background: var(--line-strong);
  transform: scaleX(1);          /* default fully drawn — never gates content */
  transform-origin: left center;
}
.rule--thin { background: var(--line); }

/* ============ HEADER — sticky, minimal ============ */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background var(--dur-micro) var(--ease),
              backdrop-filter var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transition: height var(--dur-micro) var(--ease);
}
/* condensed on scroll > 32px — JS adds .is-condensed */
.header.is-condensed {
  background: color-mix(in oklch, var(--surface-0) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 0 var(--line);
}
.header.is-condensed .header__inner { height: 56px; }

/* wordmark + tick */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.wordmark .tick { border-width: 0.28em 0 0.28em 0.4em; }

/* nav */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}
@media (min-width: 56rem) { .nav { display: flex; } }
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--text-mid);
  position: relative;
  padding-block: 0.4em;
  border-bottom: 1px solid transparent; /* border-color morph underline */
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible {
  color: var(--text-hi);
  border-bottom-color: var(--accent);
}
.nav__link[aria-current="true"] { color: var(--text-hi); }
.nav__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -0.85em; top: 50%;
  margin-top: -0.3em;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.3em 0 0.3em 0.42em;
  border-color: transparent transparent transparent var(--accent);
}

.header__right { display: flex; align-items: center; gap: var(--space-sm); }
/* mobile bar = wordmark + menu button only (overlay carries the CTA) */
.header__right .btn--cta { display: none; }
@media (min-width: 56rem) { .header__right .btn--cta { display: inline-flex; } }

/* ============ BUTTONS ============ */
.btn {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.78em 1.25em;
  border-radius: var(--radius);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              transform 0.1s var(--ease);
}
.btn__arrow { transition: transform var(--dur-micro) var(--ease); }

/* primary CTA — iris fill, dark ink, CTA fill-morph on hover */
.btn--cta {
  background: var(--accent);
  color: var(--surface-0);
}
.btn--cta:hover, .btn--cta:focus-visible { background: var(--accent-hi); }
.btn--cta:hover .btn__arrow, .btn--cta:focus-visible .btn__arrow { transform: translateX(3px); }
.btn--cta:active { transform: scale(0.98); }
/* focus ring must contrast with the CTA's own iris fill: a surface-colored gap
   then the focus ring (WCAG 2.4.11/2.4.13 — ring vs fill >= 3:1). */
.btn--cta:focus-visible {
  outline: 2px solid var(--text-hi);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--surface-0);
}

/* secondary — ghost, hairline border → border-color morph to accent */
.btn--ghost {
  background: transparent;
  color: var(--text-hi);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ============ MOBILE NAV ============ */
.menu-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--text-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur-micro) var(--ease);
}
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--accent); }
@media (min-width: 56rem) { .menu-btn { display: none; } }
.menu-btn svg { width: 1.3rem; height: 1.3rem; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  transform: translateY(-100%);
  transition: transform var(--dur-enter) var(--ease);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2xl);
}
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-md); }
.mobile-nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 5vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--text-hi);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.mobile-nav__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-low);
}
.mobile-nav__foot { margin-top: auto; padding-top: var(--space-lg); }

/* ============ FOOTER — "Colophon" ============ */
.colophon { position: relative; }
.colophon__rule { margin-bottom: var(--space-xl); }
.colophon__contact { margin-top: var(--space-sm); color: var(--text-low); }
.colophon__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .colophon__grid { grid-template-columns: 1.6fr 1fr 1.2fr; }
}
.colophon__brand .wordmark { font-size: 1.5rem; }
.colophon__tagline {
  margin-top: var(--space-sm);
  color: var(--text-mid);
  max-width: 38ch;
}
.colophon__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--space-sm);
}
.colophon__col ul { display: flex; flex-direction: column; gap: 0.6em; }
.colophon__col a {
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color var(--dur-micro) var(--ease);
}
.colophon__col a:hover, .colophon__col a:focus-visible { color: var(--accent); }
.colophon__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.colophon__legal, .colophon__set { color: var(--text-low); font-size: var(--fs-small); }
.colophon__set { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); }
.back-to-top {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--text-mid);
  transition: color var(--dur-micro) var(--ease);
}
.back-to-top:hover, .back-to-top:focus-visible { color: var(--accent); }
.back-to-top .tick { transform: rotate(-90deg); } /* tick points up */

/* ============ RESPONSIVE FINE TUNING ============ */
@media (max-width: 22.5rem) { /* 360px */
  :root { --gutter: 1.1rem; }
}