/* ============================================================
   LONGEVITY STUDIO — COMPONENTS
   ============================================================ */

/* ------------------------------------------------------------
   HEADER / NAVIGATION  (understated, text-only — no menu chrome)
   ------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--sp-4);
  color: var(--bone);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: var(--bone);
  color: var(--ink);
  border-bottom-color: var(--ink-12);
  padding-block: var(--sp-3);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.wordmark { display: inline-flex; align-items: center; line-height: 0; }
/* Logo as a mask painted with currentColor: white over the dark hero,
   ink on the solid/light header and footer. Uses the supplied monochrome
   SVG (geometry only) — no independent recolouring of the mark. */
.wordmark__logo {
  display: block;
  height: 23px; width: auto; aspect-ratio: 3162 / 546;
  background-color: currentColor;
  -webkit-mask: url(../img/logo-black.svg) no-repeat center / contain;
          mask: url(../img/logo-black.svg) no-repeat center / contain;
}
@media (max-width: 860px) { .wordmark__logo { height: 19px; } }
.nav {
  display: flex; align-items: center; gap: clamp(var(--sp-5), 2.4vw, var(--sp-8));
}
.nav a {
  font-family: var(--font-sans);
  font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.04em;
  position: relative; padding-block: 4px;
  color: inherit; opacity: 0.82;
  transition: opacity var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--oak); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover, .nav a:focus-visible { opacity: 1; }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { opacity: 1; }

.nav__cta {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-mono) !important;
  letter-spacing: var(--track-label) !important;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 10px 18px !important;
  opacity: 1 !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--oak); border-color: var(--oak); color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 0; color: inherit;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  cursor: pointer; padding: var(--sp-2); gap: var(--sp-2); align-items: center;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav-toggle__bars span { height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; background: var(--ink); color: var(--bone);
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: var(--sp-5); padding: var(--gutter);
    /* Hide without a width-extending transform (avoids horizontal overflow) */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    z-index: 110;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-toggle { z-index: 120; position: relative; }
  .hero__index { display: none; }
  .nav a { font-size: 1.6rem; font-family: var(--font-display); opacity: 1; }
  .nav__cta { font-family: var(--font-mono) !important; font-size: var(--fs-sm) !important; }
  body.nav-open { overflow: hidden; }
}

/* ------------------------------------------------------------
   BUTTONS / LINKS  (square, restrained — never pill)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 16px 26px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--bone);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--oak); border-color: var(--oak); color: var(--ink); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--text); color: var(--bg); border-color: var(--text); }
.on-ink .btn { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.on-ink .btn:hover { background: var(--oak); border-color: var(--oak); }

/* Text link with travelling underline + arrow.
   Text uses --text (AA on any ground); oak is the underline + arrow only. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text); padding-block: 6px;
  border-bottom: 1px solid var(--accent-rule); width: max-content;
}
.link-arrow svg path { stroke: var(--accent-rule); }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(6px); }

/* ------------------------------------------------------------
   SECTION HEADER  (eyebrow label + serif heading)
   ------------------------------------------------------------ */
.section-head { display: flex; flex-direction: column; gap: var(--sp-5); }
.section-head__eyebrow { margin-bottom: var(--sp-2); }
.section-head h2 { max-width: 18ch; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 120px; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.15) 36%, rgba(26,26,26,0.78) 100%);
}
.hero__inner { position: relative; z-index: 1; padding-bottom: var(--sp-9); width: 100%; }
.hero h1 {
  max-width: 16ch;
  font-weight: 250; /* deck: hero display ≈ 200 */
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7);
  align-items: baseline; justify-content: space-between;
}
.hero__index {
  position: absolute; top: 120px; right: var(--gutter); z-index: 1;
  text-align: right; color: var(--bone-72);
}

/* ------------------------------------------------------------
   FEATURE INDEX  (the five-discipline intersection)
   ------------------------------------------------------------ */
.disciplines { border-top: 1px solid var(--line); }
.discipline {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5) var(--sp-7);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.discipline__no { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent); letter-spacing: 0.1em; }
.discipline__body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-5) var(--sp-7); }
.discipline h3 { font-size: var(--fs-h4); }
.discipline p { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 720px) {
  .discipline { grid-template-columns: 1fr; gap: var(--sp-3); }
  .discipline__body { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   PLAN DIAGRAM  (5.0 × 5.0 — dimension-line drawing)
   ------------------------------------------------------------ */
.plan { width: 100%; height: auto; color: var(--text); }
.plan .plan-line { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.plan .plan-fill { fill: var(--ink-08); stroke: var(--line-strong); stroke-width: 1; }
.on-ink .plan .plan-fill { fill: var(--bone-08); }
.plan .plan-dim { stroke: var(--accent-rule); stroke-width: 1; }
.plan .plan-zone { fill: none; stroke: var(--accent-rule); stroke-width: 1; stroke-dasharray: 4 4; }
.plan text { font-family: var(--font-mono); font-size: 11px; fill: var(--text-faint); letter-spacing: 0.08em; }
.plan text.plan-label { fill: var(--accent); }

/* ------------------------------------------------------------
   TIER / SUITE PREVIEW
   ------------------------------------------------------------ */
.tier {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: 2px solid var(--text);
}
.tier__figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.tier__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tier:hover .tier__figure img { transform: scale(1.03); }
.tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.tier__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 300; }
.tier__tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); }
.tier p { color: var(--text-muted); }

/* ------------------------------------------------------------
   PROJECT TILES  (asymmetric portfolio)
   ------------------------------------------------------------ */
.project {
  display: block; position: relative; overflow: hidden;
  background: var(--bg-alt);
}
.project__figure { position: relative; overflow: hidden; aspect-ratio: 16 / 11; }
.project__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.project:hover .project__figure img { transform: scale(1.04); }
.project__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); }
.project__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 320; }
.project__tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.project--tall .project__figure { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------
   SPEC / SCHEDULE TABLE  (architectural-drawing styling)
   ------------------------------------------------------------ */
.spec {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.spec caption {
  text-align: left; padding-bottom: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint);
}
.spec th, .spec td { text-align: left; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec thead th {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-mono);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--line-strong);
}
.spec tbody th { font-weight: 400; color: var(--text); width: 32%; }
.spec td { color: var(--text-muted); }
.spec .is-upgrade { color: var(--text); }
.spec .is-upgrade::after { content: " ▲"; font-size: 0.8em; color: var(--accent); }
/* Horizontal scroll wrapper for wide tables on small screens */
.spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .spec { font-size: var(--fs-xs); table-layout: fixed; width: 100%; }
  .spec th, .spec td { padding: 10px var(--sp-3) 10px 0; word-break: break-word; }
  .spec tbody th { width: 42%; }
  .spec--cmp { table-layout: auto; min-width: 40rem; }  /* 4-col comparison scrolls */
}

/* ------------------------------------------------------------
   PROCESS STEPS
   ------------------------------------------------------------ */
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.step__no { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent); letter-spacing: 0.1em; }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.step p { color: var(--text-muted); }

.process-row {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--col-gap);
}
@media (max-width: 760px) { .process-row { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-6); } }
@media (max-width: 420px) { .process-row { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   CALL-TO-ACTION BAND
   ------------------------------------------------------------ */
.cta-band { display: flex; flex-direction: column; gap: var(--sp-6); }
.cta-band h2 { max-width: 20ch; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer { padding-block: var(--sp-9) var(--sp-6); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
.footer__brand .wordmark { color: var(--text); }
.footer__brand .wordmark__logo { height: 30px; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-4); }
.footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.footer__bottom p, .footer__bottom a { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--text-faint); }
@media (max-width: 720px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }

/* ------------------------------------------------------------
   RENDER PLACEHOLDER  (labelled block — never stock imagery)
   ------------------------------------------------------------ */
.render-ph {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  background:
    repeating-linear-gradient(45deg, var(--ink-08) 0 1px, transparent 1px 11px),
    var(--bg-alt);
  border: 1px solid var(--line-strong);
  padding: var(--sp-5); color: var(--text-faint); min-height: 100%;
}
.on-ink .render-ph { background:
    repeating-linear-gradient(45deg, var(--bone-08) 0 1px, transparent 1px 11px),
    var(--graphite); }
.render-ph__tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); }
.render-ph__desc { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-faint); max-width: 30ch; }
.render-ph__corner { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 14px; height: 14px; border-top: 1px solid var(--accent-rule); border-right: 1px solid var(--accent-rule); }

/* ------------------------------------------------------------
   UTILITY
   ------------------------------------------------------------ */
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.flow > * + * { margin-top: var(--sp-4); }
.align-end { align-self: end; }
.text-right { text-align: right; }