/* ============================================================
   Interas Research: v5 "warm edition" palette overrides
   Scope: every rule below is scoped under .v5 (the v5 page's body
   carries class="v4 v5"); nothing here touches styles.css or any
   rule that other pages (v4-film/nofilm, vektor.html, site/*) read.

   Palette tokens
   --------------
   cream     #F5F0EA  page ground. Replaces the near-white --bg
             (#FAFAF8) everywhere, including the "paper" panel,
             which gets a slightly deeper warm value instead of grey.
   charcoal  #2C2E2D  dark-section ground. Replaces the near-black
             --ink (#161512) everywhere --ink was used as the DARK
             background (header, .sec-close, footer) *and* as the
             main heading/text colour on light grounds -- charcoal
             reads correctly in both roles, so redefining --ink once
             covers both.
   brass     #C79A5C  same value as the existing --accent; the one
             warm accent (kickers on dark grounds, rules, mark).
   brass-text #7A5A2E  brass darkened for small text on light
             grounds -- used for kicker/label text. Darkened one
             notch past the spec's #8A6634 because kickers also sit
             on the deeper --paper tone (#EDE6DC), not just cream;
             #8A6634 cleared 4.5:1 on cream but fell to ~4.2:1 on
             paper, so brass-text is tuned to the worst-case ground
             (5.1:1 on paper, 5.6:1 on cream). --accent-text (the v4
             bronze) is retargeted to this value so .byo-cell .k
             inherits it automatically.
   dusty blue #8FB0C9  Identity / Gateway / Runtime card tint only.
             Never used as text colour on cream (2.0:1, fails).

   Contrast rule
   -------------
   brass-text on cream · brass on charcoal · blue is never text on
   cream, only a card tint/hairline. Every other pair rides the
   existing --body/--muted/--faint/--bg/--ink roles, which keep
   their original job (dark text on light, light text on dark) and
   are re-verified against the new, slightly darker cream ground.
   ============================================================ */

body.v5{
  /* page grounds */
  --bg:#F5F0EA;                 /* cream: was near-white #FAFAF8 */
  --paper:#EDE6DC;              /* deeper warm panel: was grey #F4F3EF */
  --ink:#2C2E2D;                /* charcoal: was near-black #161512 */

  /* hairlines: charcoal mixed into cream, not cool grey */
  --line:rgba(44,46,45,.18);
  --line-heavy:rgba(44,46,45,.85);

  /* no red, no teal anywhere in v5 */
  --stinger:#2C2E2D;

  /* named palette tokens, for the overrides below */
  --cream:#F5F0EA;
  --cream-paper:#EDE6DC;
  --charcoal:#2C2E2D;
  --brass:#C79A5C;
  --brass-text:#7A5A2E;
  --dusty-blue:#8FB0C9;
}

/* --accent-text feeds .byo-cell .k directly; retarget bronze -> brass-text.
   .v4{--accent-text:#946B33;} is (0,1,0); .v5.v4 is (0,2,0) and wins outright. */
.v5.v4{--accent-text:var(--brass-text);}

/* ---------- Header: cream backdrop, charcoal type (no grey-white band) ---------- */
.v5 header{
  background:var(--bg);
  border-bottom:1px solid rgba(44,46,45,.18);
}
.v5 header.scrolled{
  box-shadow:0 1px 0 rgba(44,46,45,.18);
}
.v5 header .brand{color:var(--ink);}
.v5 header .brand-tag{color:rgba(44,46,45,.72);} /* was rgba(250,250,248,.58) on dark */
/* diamond's 3rd/4th strokes were lightened for the dark header; on cream the
   SVG's own darker defaults (left untouched) already read correctly, so
   cancel the lightened header-only override instead of inventing a new pair */
.v5 header .brand-diamond line:nth-child(3){stroke:#78828E;}
.v5 header .brand-diamond line:nth-child(4){stroke:#4E5866;}

.v5 header nav.primary a{color:rgba(44,46,45,.72);} /* was rgba(250,250,248,.72) */
.v5 header nav.primary a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.v5 header nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}
.v5 header .nav-toggle span{background:var(--ink);}
.v5 header .nav-actions .btn{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.v5 header .nav-actions .btn:hover{background:#1E201F;color:var(--bg);}
/* mobile dropdown panel already rides var(--bg)/var(--muted)/var(--line-heavy)
   ("the open panel is paper again" -- styles.css comment), so it re-colours
   to cream/charcoal automatically; no override needed here. */

/* ---------- Kickers, labels: brass-text on cream, brass on charcoal ---------- */
.v5.v4 .kicker{color:var(--brass-text);}
.v5.v4 .sec-close .kicker{color:var(--brass);}
.v5.v4 .creed-k{color:var(--brass-text);}
.v5.v4 .problems .pn{color:var(--brass-text);} /* was var(--muted) */
/* .byo-cell .k already follows --accent-text, retargeted above */

/* ---------- Identity / Gateway / Runtime cards: dusty-blue tint, never as text ---------- */
/* mixed in srgb (not oklch): oklch's perceptual mixing pulled the 18% tint
   much darker than its component percentages suggest, which crushed the
   label/secondary-text contrast below 4.5:1. srgb mixing is the linear,
   predictable one. */
/* A plain mix with the warm cream cancels the blue (15% lands on neutral
   grey rgb 230,230,229), so the fill is a fixed pale dusty blue instead;
   every label on it still clears 5:1. */
.v5.v4 .byo-cell{
  background:#E3EBF1;
  border-color:var(--dusty-blue);
}
/* the "Amazon Bedrock AgentCore on AWS; OpenShell." aside: --muted (tuned
   for the plain cream ground) drops under 4.5:1 once the blue tint is
   under it, so this one span gets its own darker warm grey instead of
   inheriting --muted. */
.v5.v4 .byo-cell .v span{color:#5A564E;}

/* ---------- Dark sections (.sec-close, footer): charcoal ground, cream text ---------- */
/* background/heading colour cascade from --bg/--ink above; only the
   hand-mixed near-white rgba() values below need the cream swap */
.v5 .sec-close .inner p{color:rgba(245,240,234,.75);}      /* was rgba(250,250,248,.75) */
.v5.v4 .footer-links a{color:rgba(245,240,234,.72);}        /* was rgba(250,250,248,.72) */
.v5 .closing-q{color:rgba(245,240,234,.72);}                /* was rgba(250,250,248,.72) */
.v5 footer{border-top:1px solid rgba(245,240,234,.14);}     /* was rgba(250,250,248,.14) */

/* styles.css hard-codes the old ink here, so these two need a literal swap */
.v5 .rule-double::before{background:rgba(44,46,45,.45);}
.v5.v4 .btn-primary:hover{background:#1E201F;color:var(--bg);}

/* ---------- Where we work: six industries, 3x2 grid, plain-sentence subtext ---------- */
/* the old all-caps mono label read as a slogan; these are full sentences now,
   so they get body type in sentence case */
.v5.v4 .domain .d-sub{
  font-family:var(--sans);font-size:var(--fs-small);line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--body);max-width:34ch;
}
@media (max-width:960px){ .v5.v4 .domains{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .v5.v4 .domains{grid-template-columns:1fr;} }

/* ---------- Vektor: questions left, demo video right ---------- */
/* one-word answers left the right half of the table empty, so the demo
   moves up beside it; closing line and BYO strip run full width below */
.v5 .vk-split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px;align-items:start;margin-top:8px;
}
.v5 .vk-split .qa{margin-top:0;}
.v5 .vk-split .qa-row{grid-template-columns:minmax(0,1fr) 7.5em;gap:24px;padding:18px 0;align-items:baseline;}
.v5 .vk-split .demo{margin:0;grid-template-columns:1fr;gap:14px;}
.v5 .vk-split .demo-note{order:2;padding-bottom:0;}
@media (max-width:960px){
  .v5 .vk-split{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:600px){
  .v5 .vk-split .qa-row{grid-template-columns:1fr;gap:4px;}
}
/* closing line sits under the video; the side column stretches to the
   questions' height so the line's last row lands on the last question */
.v5 .vk-split{align-items:stretch;}
.v5 .vk-side{display:flex;flex-direction:column;justify-content:space-between;gap:32px;}
.v5 .vk-side .vektor-close{margin:0 0 18px;}
@media (max-width:960px){ .v5 .vk-side .vektor-close{margin:0;} }

/* Vektor answers: one word each, so they match the questions' type */
.v5.v4 .vk-split .qa-a{
  font-size:var(--fs-sub);line-height:1.3;letter-spacing:-.01em;color:var(--ink);
}
.v5.v4 .vk-split .qa-a b{font-weight:600;}
.v5 .vk-split .qa-row{grid-template-columns:minmax(0,1fr) 11em;}
@media (max-width:600px){ .v5 .vk-split .qa-row{grid-template-columns:1fr;} }
/* bigger answers need room: questions and video split the width evenly */
.v5 .vk-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;}
.v5 .vk-split .qa-row{grid-template-columns:minmax(0,1fr) 10.5em;gap:20px;}
@media (max-width:960px){ .v5 .vk-split{grid-template-columns:1fr;} }
@media (max-width:600px){ .v5 .vk-split .qa-row{grid-template-columns:1fr;gap:4px;} }
/* answers in the questions' serif, same weight and style */
.v5.v4 .vk-split .qa-a{font-family:var(--serif);font-style:normal;}

/* Mission: one plain line underneath, on the same 20px indent */
.v5.v4 .sec-head .mission-sub{
  font-family:var(--sans);font-style:normal;font-size:var(--fs-body);
  line-height:1.6;color:var(--ink);max-width:34em;margin:14px 0 0;padding-left:20px;
}

/* Mission set like the Vision statement: same left edge, same h2 type */
.v5.v4 .creed-k:has(+ .mission){padding-left:0;}
.v5.v4 .sec-head .mission{
  font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;line-height:1.1;
  padding:0;margin:0;max-width:none;
}
.v5.v4 .sec-head .mission-sub{padding-left:0;margin-top:20px;}