/* ============================================================
   v3-pages.css — Red Banana v3 "THE OBJECT", INTERIOR lane.
   RB-V3-DIRECTION-CONTRACT.md §7 (file list): capabilities.html,
   work.html, about.html, contact.html, privacy.html, 404.html and
   this stylesheet are the INTERIOR lane's only files. Loads AFTER
   v3.css and assets/css/v3-type.css on every interior page, so every
   token and component class those two files already define (.wrap,
   .v3-section, .kicker, .btn/.btn-primary/.btn-ghost, .cta-row,
   .v3-nav*, #contact-cta/.foot-grid/.foot-meta/.foot-links/.legal,
   .mono, h1/h2/h3 scale) is reused as-is, never redeclared here.

   VERMILION BUDGET (SIGNATURE-MOMENTS.md, contract §8 A2): INTERIOR
   gets NONE of the site-wide --red uses. No selector in this file
   sets --red, #e2422e or any vermilion value. The one pre-existing
   inline vermilion (the ".station-close" dot beside the copyright
   line, present in the 70ea6f1 footer on all six pages) is neutralised
   to --grey-5 directly in each page's markup, not overridden here —
   see this lane's parts/WIRING.md block for the reasoning.

   Component classes below are the INTERIOR lane's own — none of them
   existed in v3.css before this file, except where a comment says
   "already styled by v3.css, no rule needed here".
   ============================================================ */

/* ------------------------------------------------------------
   BUILD 1 (SIGNATURE-MOMENTS.md "8. Five details nobody asks for",
   BUILD 1: page transition, native, zero JS). This lane's half: the
   SAME rule the INTEGRATOR adds to v3.css for index.html, reproduced
   here verbatim so the six interior pages get the identical dark
   cross-fade on every real navigation between them (and to/from
   index.html). Browsers without View Transitions support fall back to
   an ordinary instant navigation, which needs no detection.
   Torque `in`  = cubic-bezier(0.7, 0, 0.84, 0)   (SIGNATURE-MOMENTS.md
   Torque `out` = cubic-bezier(0.16, 1, 0.3, 1)    "Easing set")
   See this lane's parts/WIRING.md block: this text was written from
   SIGNATURE-MOMENTS.md's own prose spec (the integrator's actual
   v3.css bytes were not visible to this lane at time of writing, so
   byte-identity is asked for at integration, not assumed here). ---- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: v3-vt-fade-to-black 0.22s cubic-bezier(0.7, 0, 0.84, 0) both;
}
::view-transition-new(root) {
  animation: v3-vt-fade-from-black 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes v3-vt-fade-to-black {
  to { opacity: 0; }
}
@keyframes v3-vt-fade-from-black {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none;
  }
}

/* ------------------------------------------------------------
   PAGE HEAD — the sheet-kicker/eyebrow/h1/lede block every interior
   page opens with. The outer .v3-section--head modifier only adds
   clearance under the fixed .v3-nav (v3.css's nav is position:fixed,
   the old .site-header was not, so every interior page needs this
   top offset now, matching the hero's own 90px top pad in v3.css).
   ------------------------------------------------------------ */
.v3-section--head {
  padding-top: clamp(120px, 18vw, 176px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.page-head .sheet-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-5);
  margin: 0 0 0.9em;
}
.page-head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow, 0.8125rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-6);
  margin: 0 0 1.2em;
}
.page-head h1 { margin-bottom: 0.5em; }
.page-head h1 em { font-style: normal; color: var(--grey-6); }
.page-head .lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--grey-6);
  max-width: 46rem;
}
.page-head .cta-row { margin-top: 1.6em; }

/* ------------------------------------------------------------
   SECTION RHYTHM — .first is the section immediately after the page
   head; it does not need the full .v3-section top pad twice.
   ------------------------------------------------------------ */
.v3-section.first { padding-top: 0; }

/* ------------------------------------------------------------
   PROSE — long-form reading blocks (about.html, work.html's
   "engineering underneath", contact.html, privacy.html).
   ------------------------------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { margin: 1.6em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--grey-6); }
.prose p b { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; color: var(--grey-6); }
.prose ul li { margin-bottom: 0.6em; }
.prose ul li b { color: var(--ink); font-weight: 600; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--grey-1);
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  padding: 0.1em 0.4em;
}
.prose small { color: var(--grey-5); }

/* .h3-like: an <h2> that should read at h3 scale/weight (museum-plaque
   headings throughout capabilities/work/about/contact). */
.h3-like {
  font-size: var(--size-h3);
  line-height: 1.2;
}

/* about.html's opening statement: a slightly larger lead paragraph
   with its first sentence set off, not a literal drop-cap (none of
   the vendored display faces ship the swash/ornament a real drop-cap
   wants, and a fabricated one would be the "template tell" taste-skill
   warns against). */
.statement {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--ink);
  max-width: 44rem;
  margin-bottom: 1.4em;
}
.statement .drop { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   CASE (work.html: Handloom Haat, Replicas) — tombstone + description
   two-column grid, museum-plaque grammar (PRODUCT.md Voice).
   ------------------------------------------------------------ */
.case {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 1.6fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; }
}
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-6);
  border: 1px solid var(--grey-3);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.9em;
  margin-bottom: 1.2em;
}
.tomb {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--grey-5);
  border-top: 1px solid var(--grey-2);
  padding-top: 14px;
}
.tomb b { color: var(--ink); font-weight: 600; }
.venue {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--grey-6);
  margin-bottom: 0.8em;
}
/* .stat-row / .stat already fully styled by v3.css (same class names,
   same DOM shape as this shell's own case-study slot) — no rule here. */

/* ------------------------------------------------------------
   TABLE (work.html: the six-station table)
   ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; margin: 32px 0 0; }
.stations {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.stations caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-5);
  margin-bottom: 10px;
}
.stations th, .stations td {
  text-align: left;
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--grey-2);
  vertical-align: top;
}
.stations th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-5);
  font-weight: 500;
}
.stations td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.stations td:nth-child(2) { color: var(--grey-6); white-space: nowrap; }
.stations td:last-child { color: var(--grey-6); }
/* Bob 47, fix C4 (25 Sep 2026): below 600px the three-column table clipped
   its third column and stretched rows to ~500px of empty space. Each row
   becomes a card: station and panel on one line, description under them.
   The header row stays in the accessibility tree, visually hidden. */
@media (max-width: 600px) {
  .stations thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stations tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--grey-2); }
  .stations td { display: block; padding: 0; border-top: 0; }
  .stations td:first-child { white-space: normal; }
  .stations td:nth-child(2) { white-space: normal; text-align: right; }
  .stations td:last-child { grid-column: 1 / -1; }
  .stations td:last-child:empty { display: none; }
}

/* ------------------------------------------------------------
   MEDIA FIGURE (work.html: the Handloom Haat corridor photograph)
   ------------------------------------------------------------ */
.media { margin: 0; }
.media img { width: 100%; border-radius: var(--radius); }
.media figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grey-5);
  margin-top: 10px;
}

/* ------------------------------------------------------------
   PLAQUES (capabilities.html: RB.001-RB.006)
   ------------------------------------------------------------ */
.plaques {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--grey-2);
  border: 1px solid var(--grey-2);
}
@media (max-width: 880px) {
  .plaques { grid-template-columns: 1fr; }
}
.plaque {
  background: var(--ground);
  padding: clamp(28px, 3vw, 40px);
}
.plaque .acc {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--grey-5);
  margin-bottom: 0.8em;
}
.plaque h2 { margin-bottom: 0.5em; }
.plaque p { color: var(--grey-6); }
.deep { list-style: none; margin: 1.2em 0; padding: 0; }
.deep li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.7em;
  color: var(--grey-6);
  font-size: 0.9375rem;
}
.deep li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 1px;
  background: var(--grey-5);
}
.medium {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.9;
  color: var(--grey-5);
  border-top: 1px solid var(--grey-2);
  padding-top: 12px;
  margin-top: 1.2em;
}

/* ------------------------------------------------------------
   METHOD (capabilities.html)
   ------------------------------------------------------------ */
.sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 880px) {
  .method { grid-template-columns: repeat(2, 1fr); }
}
.step { border-top: 1px solid var(--grey-2); padding-top: 16px; }
.step .no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--grey-5);
  margin-bottom: 0.8em;
}
.step h3 { font-size: 1.125rem; margin-bottom: 0.5em; }
.step p { color: var(--grey-6); font-size: 0.9375rem; }

/* ------------------------------------------------------------
   CONTACT (contact.html)
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.ctl-mail {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--ink);
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: 0.1em;
}
.ctl-mail:hover, .ctl-mail:focus-visible { border-bottom-color: var(--ink); }
.form-soon { color: var(--grey-5); font-size: 0.875rem; }
.brief-card {
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}
.brief-card h2 { margin-bottom: 0.8em; }
.brief-card ul { list-style: none; margin: 0; padding: 0; }
.brief-card ul li {
  border-top: 1px solid var(--grey-2);
  padding: 12px 0;
  color: var(--grey-6);
  font-size: 0.9375rem;
}
.brief-card ul li:first-child { border-top: none; }

/* ------------------------------------------------------------
   404 — Moment "the dark room": no hero canvas is mounted here
   (BUILD 3, this lane's own WIRING.md block: the objectless hero
   API does not exist yet, so this page ships the reduced-motion/
   static plinth frame per Moment 1's own documented fallback, never
   the live scene). .v3-404-stage is a plain composed image, at rest:
   plinth, lights, reflector, no object, no canvas, no GLB request.
   ------------------------------------------------------------ */
.v3-404-stage {
  position: relative;
  margin: clamp(32px, 6vw, 56px) 0 0;
  aspect-ratio: 16 / 9;
  max-width: 640px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(159, 208, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 82%, rgba(255, 216, 168, 0.14), transparent 65%),
    var(--ground);
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.v3-404-stage .plinth {
  position: absolute;
  left: 50%; bottom: 18%;
  width: 42%; height: 10%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--grey-3), var(--grey-1));
  border-radius: var(--radius);
}
.v3-404-stage .plinth::after {
  /* the reflection: an empty plinth reflecting nothing, which is the
     joke Moment "BUILD 3" asks for, needing no explanatory line */
  content: "";
  position: absolute;
  left: 0; top: 100%;
  width: 100%; height: 60%;
  background: linear-gradient(180deg, rgba(82, 82, 82, 0.35), transparent);
}
.v3-404-stage figcaption {
  position: absolute;
  left: 16px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-5);
}

/* ------------------------------------------------------------
   FOUNDER (founder.html) — a museum wall label for a person, now
   carrying Vivek's full approved story (content/FOUNDER.md, approved
   25 Sep 2026 -- see tests/copy-guard.test.mjs). Portrait sits left of
   the text on desktop, above it on phones (DOM order already puts the
   portrait first, so the phone stack needs no reordering, only the
   grid collapsing to one column). Desktop-only: the portrait column
   sticks in place (position: sticky, top: 96px -- 96px clears the
   fixed .v3-nav the same way [data-slot="founder-head"] already
   accounts for it via .v3-section--head's top padding) so it stays
   beside the story while the (now much longer) text column scrolls
   past it. Sticky is switched off under the 720px breakpoint below,
   where the grid itself collapses to one column and a sticky portrait
   would only crowd a phone screen for no benefit.
   ------------------------------------------------------------ */
.founder-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 720px) {
  .founder-layout { grid-template-columns: 1fr; }
}
/* Plinth-dark rectangle, 3:4, thin chamfer top-right corner. Now holds
   the founder photograph (a <figure><picture><img>...) but keeps the
   same box: the museum-label chamfer and frame are the figure's, and
   the img fills it edge to edge via object-fit: cover. */
.founder-portrait {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 280px;
  margin: 0;
  background: var(--grey-1);
  border: 1px solid var(--grey-3);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  position: sticky;
  top: 96px;
}
@media (max-width: 720px) {
  .founder-portrait { position: static; top: auto; }
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-text .eyebrow { margin-top: 0; }
.founder-text p { color: var(--grey-6); max-width: 62ch; }
.founder-text p + p { margin-top: 0.9em; }

/* Bold tagline directly under the kicker -- "An engineer by
   training..." -- reads as display caps at h3 scale (same numbers
   .h3-like gives an <h2>), even though the element itself is a <p>
   wrapping a <strong> (RULING: the source's own ** bold span, not a
   heading -- it does not belong in the document outline). */
.founder-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  font-size: var(--size-h3);
  line-height: 1.15;
  color: var(--ink);
  margin: 0.5em 0 0.9em;
  max-width: 62ch;
}
.founder-tagline strong { font-weight: inherit; }

/* The "Short excerpt" paragraph, used once, directly under the
   tagline, as the page's lead -- set off from the running story below
   it with a touch more size/contrast, same measure. */
.founder-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink);
  max-width: 62ch;
  margin-bottom: 1.4em;
}

/* The running story: long-form reading, capped at a 62ch measure
   (v3.css's own default p{max-width:62ch}, restated here so this
   section's measure cannot silently drift if .founder-text's rule
   above ever changes). */
.founder-story { max-width: 62ch; }
.founder-story p { color: var(--grey-6); max-width: 62ch; }
.founder-story p + p { margin-top: 0.9em; }
.founder-story .founder-close strong { font-weight: inherit; }

/* Section headings -- the source's own ## headings -- read as display
   caps at h3 scale (.h3-like, already used this way on every other
   interior page) with 64px of clearance above, per the founder-page
   layout brief. Halved under 760px, matching this file's existing
   founder-slot padding halving just below. */
.founder-story h2.h3-like {
  margin-top: 64px;
  margin-bottom: 0.6em;
}
.founder-story h2.h3-like:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .founder-story h2.h3-like { margin-top: 32px; }
}

/* Bob 25 addendum, 25 Sep 2026 (post nav/footer logo wiring, rb-v3/qa/
   founder-1440x900.png): the page's three .v3-section blocks each inherit
   the generic --section-pad-y rhythm (72-160px top AND bottom, tuned for a
   long page), which stacked into a roughly 330px dead void between the
   On View case study and Contact. Founder scope only (data-slot selectors
   below match only this page's three sections), no copy touched: caps
   every founder section gap at 96px desktop / 64px phone, contact directly
   after the case study. */
[data-slot="founder-head"] { padding-bottom: 48px; }
/* .first also matched: founder-on-view carries class="v3-section first",
   and the section-rhythm block's own .v3-section.first{padding-top:0} (two
   classes, specificity 0,2,0) otherwise wins over a bare attribute selector
   (0,1,0) and silently zeroed this padding-top -- verified live, this is
   the fix. */
[data-slot="founder-on-view"].first { padding-top: 48px; }
[data-slot="founder-on-view"] { padding-bottom: 48px; }
[data-slot="founder-contact"] { padding-top: 48px; }
@media (max-width: 760px) {
  [data-slot="founder-head"] { padding-bottom: 32px; }
  [data-slot="founder-on-view"].first { padding-top: 32px; }
  [data-slot="founder-on-view"] { padding-bottom: 32px; }
  [data-slot="founder-contact"] { padding-top: 32px; }
}

/* ------------------------------------------------------------
   WORK CASES (work.html #work-cases, 25 Sep 2026) — five further
   article.case studies under the Handloom Haat case. Reuses .case
   (grid), .kicker, .h3-like and .cs-tomb as they are. Phone: one
   column, figure above text (DOM order). Desktop: two equal columns,
   the figure side alternating left/right per article. The figure
   carries the same museum-label chamfer box as .founder-portrait
   above (identical clip-path, frame and fill; declared again here
   only because that rule is sticky and 3:4, this one is 16:10 and
   in flow). No vermilion.
   ------------------------------------------------------------ */
.case--study {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(32px, 5vw, 64px) 0;
  border-top: 1px solid var(--grey-2);
}
.case--study:first-child { border-top: 0; padding-top: 0; }
.case--study:nth-of-type(even) .case-figure { order: 2; }
.case--study.case--no-figure { grid-template-columns: 1fr; }
.case-figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--grey-1);
  border: 1px solid var(--grey-3);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.case-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-body .kicker { margin-bottom: 0.8em; }
.case-body h2 { margin-bottom: 0.6em; }
.case-body p { color: var(--grey-6); }
.case-body .cs-tomb { margin-top: 20px; }
.case-body .cs-tomb dd { color: var(--ink); }
.case-link a, .case-credit {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.case-link a {
  color: var(--ink);
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: 0.1em;
}
.case-link a:hover, .case-link a:focus-visible { border-bottom-color: var(--ink); }
.case-credit { color: var(--grey-6); }
@media (max-width: 880px) {
  .case--study { grid-template-columns: 1fr; align-items: start; }
  .case--study:nth-of-type(even) .case-figure { order: 0; }
}
/* work.html only: the generic --section-pad-y rhythm stacks between the
   last case and the Replicas block into a dead void (rb-v3/qa/work-cases-3
   .png); cap both edges, same fix founder.html carries above. */
[data-slot="work-cases"] { padding-bottom: 48px; }
[data-slot="replicas"] { padding-top: 48px; }
@media (max-width: 760px) {
  [data-slot="work-cases"] { padding-bottom: 32px; }
  [data-slot="replicas"] { padding-top: 32px; }
}