/* ============================================================
   SIGNAL — INTERIOR PAGE PATTERNS
   Graphite console heroes with scan-frame figures · telemetry
   breadcrumbs · prose · aside beats · indexed statements ·
   figure rows · cross-link ledgers · honesty console ·
   prooflines · bio cards · landing detail rows · closing band.
   Loaded on every page except the homepage. Consumes the global
   tokens + base folio/tick apparatus; no print furniture.
   ============================================================ */

/* ---------- breadcrumbs (telemetry trail) ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.55em;
  margin: -14px -0.55em;
  transition: color var(--dur-ui);
}
.crumbs a:hover { color: var(--accent-deep); }
.crumbs .sep { color: var(--rule-strong); }
.crumbs [aria-current="page"] { color: var(--accent-deep); }

/* ---------- interior hero: the console panel ---------- */
.int-hero {
  position: relative;
  overflow: hidden;
  color: var(--paper-on-espresso);
  background: radial-gradient(120% 100% at 80% 0%, var(--espresso-2), var(--espresso) 62%);
  padding-top: calc(var(--nav-h) + clamp(2.25rem, 2rem + 2.5vw, 4rem));
  padding-bottom: clamp(2.75rem, 2rem + 3vw, 4.75rem);
}
.int-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dot-grid-dark);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(110% 100% at 75% 10%, #000 25%, transparent 75%);
  mask-image: radial-gradient(110% 100% at 75% 10%, #000 25%, transparent 75%);
  pointer-events: none;
}
.int-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  color: var(--rule-dark);
  background: var(--tick-strip);
}
.int-hero > .container { position: relative; }
.int-hero .crumbs { color: var(--paper-on-espresso-dim); }
.int-hero .crumbs a { color: var(--paper-on-espresso-dim); }
.int-hero .crumbs a:hover { color: #fff; }
.int-hero .crumbs .sep { color: var(--rule-dark); }
.int-hero .crumbs [aria-current="page"] { color: var(--accent-lift); }
.int-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .int-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .int-hero__figure { max-width: 28rem; }
}
.int-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem);
  line-height: 1.06;
  max-width: 14em;
  overflow-wrap: anywhere; /* unreplaced tokens must never blow the column */
}
.int-hero .dek { margin-top: 1.2rem; color: var(--paper-on-espresso-dim); }
.int-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.8rem;
}
.int-hero .tlink { color: var(--paper-on-espresso); }
.int-hero .tlink:hover { color: var(--accent-lift); }
/* the status chip runs its dark variant on the console */
.int-hero .sec-hero__dateline {
  border-color: hsl(240 6% 100% / 0.22);
  color: var(--paper-on-espresso-dim);
  background: hsl(240 6% 100% / 0.04);
  margin-bottom: clamp(1.1rem, 2.5vh, 1.75rem);
}
.int-hero .sec-hero__dateline .dot { background: var(--accent-hot); }

/* hero figure: scan-frame subject */
.int-hero__figure { position: relative; }
.int-hero__figure .figure__frame {
  aspect-ratio: 5 / 4;
  border: 1px solid hsl(240 6% 100% / 0.2);
  border-radius: 6px;
  background: var(--espresso-2);
}
.int-hero__figure--tall .figure__frame { aspect-ratio: 5 / 6; }
.int-hero__figure::before,
.int-hero__figure::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2.5px solid var(--accent-hot);
  z-index: 2;
  pointer-events: none;
}
.int-hero__figure::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.int-hero__figure::after { right: -8px; bottom: 26px; border-left: 0; border-top: 0; }
.int-hero__figure figcaption { color: var(--paper-on-espresso-dim); }
/* a captionless hero figure keeps both brackets on the frame corners */
.int-hero__figure:not(:has(figcaption))::after { bottom: -8px; }

/* ---------- figures: telemetry captions (no print folios) ---------- */
main .figure figcaption {
  align-items: center;
  letter-spacing: 0.07em;
}
main .figure figcaption::before {
  content: "";
  flex: none;
  width: 18px; height: 7px;
  color: var(--accent);
  background: var(--tick-strip);
}

/* section head block: consistent gap to whatever body content follows it
   (list, prose, xlinks, faq, statements...) so every interior section
   opens with the same rhythm regardless of what comes next. Extra
   specificity (main .container .head) is needed to beat home.css's
   .sec-faq/.sec-words head-margin overrides, which load after this file
   and would otherwise leak their bigger home-page rhythm into interior
   pages that reuse those same section classes. */
main .container .head,
main .container .head--split { margin-bottom: var(--sp-gap); }

/* ---------- prose ---------- */
.prose { max-width: 42em; }
.prose p { color: var(--ink-soft); margin-bottom: 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose h3 { margin: 2rem 0 0.8rem; }
.prose h2.prose-h2 { font-size: var(--fs-h3); margin: 2rem 0 0.8rem; }
.prose ul { color: var(--ink-soft); padding-left: 1.2em; display: grid; gap: 0.5rem; margin-bottom: 1.15rem; }

/* two-column section body: content left, artifact right */
.int-cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .int-cols { grid-template-columns: minmax(0, 1fr); }
}
.int-cols__rail { position: sticky; top: 120px; }
@media (max-width: 900px) { .int-cols__rail { position: static; } }

/* ---------- italic aside (identity/consequence beats) ---------- */
.beat {
  font-family: var(--font-quote);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 450;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32em;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  margin: 1.6rem 0;
}

/* ---------- founder pull quote console ---------- */
.pullcard {
  position: relative;
  background: var(--card);
  border: var(--frame-strong);
  border-radius: 6px;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
}
.pullcard::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 64px; height: 7px;
  color: var(--accent);
  background: var(--tick-strip);
}
.pullcard blockquote {
  font-family: var(--font-quote);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-style: italic;
  font-weight: 450;
  line-height: 1.3;
  text-wrap: balance;
}
.pullcard blockquote .qq { color: var(--accent); font-style: normal; }
.pullcard cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- indexed statements (beliefs, principles) ---------- */
.statements {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 56rem;
  border-top: 2px solid var(--ink);
}
.statements li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) 0.25rem;
  border-bottom: var(--frame);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-press), transform 500ms var(--ease-press);
}
.statements li.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .statements li { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.no-js .statements li { opacity: 1; transform: none; }
.statements .no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.45em 0.5em 0.38em;
  margin-top: 0.2em;
}
.statements li:hover .no {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.statements .st {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 36em;
}

/* ---------- figure rows (galleries) ---------- */
.figrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .figrow { grid-template-columns: 1fr; } }
.figrow .figure__frame { aspect-ratio: 3 / 2; border-radius: 6px; }

/* ---------- cross-link ledger (related services/conditions) ---------- */
.xlinks { border-top: 2px solid var(--ink); }
.xlinks__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "no h3 arr" "no p arr";
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  padding: 1.2rem 0.5rem 1.2rem 0.75rem;
  border-bottom: var(--frame);
  text-decoration: none;
  transition: background var(--dur-ui), padding-left var(--dur-ui) var(--ease-out);
}
.xlinks__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-ui) var(--ease-press);
}
.xlinks__row:hover::before { transform: scaleY(1); }
.xlinks__row:hover { background: var(--accent-wash); padding-left: 1.1rem; }
.xlinks__row .no {
  grid-area: no;
  align-self: start;
  margin-top: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.45em 0.5em 0.38em;
  transition: background var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui);
}
.xlinks__row:hover .no {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.xlinks__row h3 {
  grid-area: h3;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  transition: color var(--dur-ui);
}
.xlinks__row:hover h3 { color: var(--accent-deep); }
.xlinks__row .arr,
.xlinks__row h3 .arr {
  grid-area: arr;
  color: var(--accent-deep);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out);
  align-self: center;
}
.xlinks__row:hover .arr,
.xlinks__row:hover h3 .arr { opacity: 1; transform: none; }
.xlinks__row p {
  grid-area: p;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 34em;
}
@media (max-width: 640px) {
  .xlinks__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h3 arr" "p arr"; }
  .xlinks__row .no { display: none; }
}

/* ---------- honesty console (who it's for / not for) ---------- */
.honesty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--frame-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 760px) { .honesty { grid-template-columns: 1fr; } }
.honesty > div { padding: clamp(1.4rem, 2.5vw, 2rem); }
.honesty .for { border-right: var(--frame); }
@media (max-width: 760px) {
  .honesty .for { border-right: 0; border-bottom: var(--frame); }
}
.honesty h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
  padding: 0.45em 0.7em;
  margin-bottom: 1.2rem;
}
.honesty h3::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.honesty .for h3 { background: var(--accent); color: var(--accent-on); }
.honesty .notfor h3 { border: 1px solid var(--rule-strong); color: var(--ink-faint); }
.honesty ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.honesty li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.9575rem;
}
.honesty li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.6rem; height: 2px;
  background: var(--accent);
}
.honesty .notfor li::before { background: var(--rule-strong); }

/* ---------- proof quote strip (single attributed quote) ---------- */
.proofline {
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.9rem) 0 clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: var(--frame);
}
.proofline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  color: var(--rule-strong);
  background: var(--tick-strip);
}
.proofline blockquote {
  font-family: var(--font-quote);
  font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2rem);
  font-style: italic;
  font-weight: 450;
  line-height: 1.3;
  max-width: 30em;
  text-wrap: balance;
}
.proofline blockquote .qq { color: var(--accent); font-style: normal; }
.proofline cite {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.proofline cite::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--accent);
}

/* ---------- closing statement before booking ---------- */
.int-close {
  position: relative;
  text-align: left;
}
.int-close .container { position: relative; padding-top: 1.4rem; }
.int-close .container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  color: var(--rule-strong);
  background: var(--tick-strip);
}
.int-close h2, .int-close h3 { max-width: 18em; }
.int-close .int-hero__cta { margin-top: 1.6rem; }

/* ---------- staff long bios ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 860px) { .bio-grid { grid-template-columns: 1fr; } }
.bio-grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.bio-grid--solo .bio-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 3rem); }
.bio-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: start; }
@media (max-width: 560px) { .bio-card { grid-template-columns: 1fr; } }
.bio-card .figure__frame { aspect-ratio: 4 / 5; border-radius: 6px; }
.bio-card .figure__frame img { transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); }
.bio-card:hover .figure__frame img { transform: scale(1.03); filter: saturate(1); }
.bio-card .name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.bio-card .cred {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.45rem 0 0.9rem;
}
.bio-card .cred .spec {
  color: var(--accent-on);
  background: var(--accent);
  border-radius: 3px;
  padding: 0.35em 0.5em 0.28em;
}
.bio-card p { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- landing detail rows (index rows with summaries + thumb) ---------- */
.detail-rows { border-top: 2px solid var(--ink); }
.detail-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 220px);
  gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) 0.5rem clamp(1.6rem, 2.6vw, 2.4rem) 0.75rem;
  border-bottom: var(--frame);
  text-decoration: none;
  transition: background var(--dur-ui), padding-left var(--dur-ui) var(--ease-out);
}
.detail-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-ui) var(--ease-press);
}
.detail-row:hover::before { transform: scaleY(1); }
.detail-row:hover { background: var(--accent-wash); padding-left: 1.1rem; }
@media (max-width: 760px) {
  .detail-row { grid-template-columns: minmax(0, 1fr); }
  .detail-row .no { display: none; }
  .detail-row .figure { max-width: 260px; }
}
.detail-row .no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.45em 0.5em 0.38em;
  margin-top: 0.2em;
  transition: background var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui);
}
.detail-row:hover .no {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.detail-row h3 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  transition: color var(--dur-ui);
}
.detail-row h3 .arr {
  font-size: 1.1rem;
  color: var(--accent-deep);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.detail-row:hover h3 { color: var(--accent-deep); }
.detail-row:hover h3 .arr { opacity: 1; transform: none; }
.detail-row p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 44em; margin-top: 0.5rem; }
.detail-row .figure__frame { aspect-ratio: 4 / 3; border-radius: 6px; }
.detail-row:hover .figure__frame img { transform: scale(1.03); }
.detail-row .figure__frame img { transition: transform 500ms var(--ease-press); }