/* ============================================================
   WE MAKE TREASURES — OUR STORY (Studio)
   Page-specific pieces. Inherits tokens, type, motion & the
   editorial cs-ov / cs-quote chassis from system + case + service.
   Weight cap: 600 — nothing heavier, anywhere.
   ============================================================ */

/* ---------- hero: story eyebrow + facts tone ---------- */
.story-hero .cs-title { max-width: 18ch; }
.story-hero .cs-sub { max-width: 50ch; }

/* ---------- chapter rail: index tick on the vertical rule ---------- */
.cs-ov-eyebrow .ch-no { color: var(--coral); }
.cs-ov-sec--ink .cs-ov-eyebrow .ch-no { color: var(--coral); }
.cs-ov-sec--coral .cs-ov-eyebrow .ch-no { color: var(--ink); -webkit-text-stroke: 0; opacity: .55; }

/* chapter body: single full-width column */
.story-ch .cs-ov-body { column-count: 1; max-width: none; }
.story-ch .cs-ov-body p strong { font-weight: 600; }
.cs-ov-sec--ink.story-ch .cs-ov-body p strong { color: var(--paper); }
.cs-ov-sec--coral.story-ch .cs-ov-body p strong { color: var(--ink); }

/* ---------- full-bleed media band between chapters ---------- */
.story-media { position: relative; padding: 0; border-top: 1px solid var(--line-d);
  background: var(--ink); overflow: hidden; }
.story-media image-slot { display: block; width: 100%; height: clamp(340px, 54vw, 700px); }
.story-media-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,0) 45%, rgba(16,18,22,.82) 100%); }
.story-media-cap { position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px var(--s5);
  padding: var(--s5) var(--s6); width: 100%;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.story-media-cap .mc-name { color: var(--paper); }
.story-media-cap .mc-meta { color: rgba(255,255,255,.62); }

/* ---------- chapter media split: image beside the narrative ---------- */
.story-split-sec { padding: 0; }
.story-split { display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: stretch; }
.story-split-media { position: relative; overflow: hidden;
  border-right: 1px solid rgba(16,18,22,.28); }
.story-split-media image-slot { display: block; width: 100%; height: 100%;
  min-height: clamp(420px, 50vw, 660px); }
/* anchor the overflowing cover image to the left so the box stays in frame */
#story-gingerdead::part(image){ left: 0 !important; transform: translateY(-50%) !important; }
.story-split-body { padding: clamp(54px,7vw,116px) clamp(28px,3.4vw,64px); min-width: 0; }
.story-split-body .cs-ov-lead { max-width: 20ch; }
.story-split-prose { margin-top: clamp(26px,3vw,48px); max-width: 52ch; }
.story-split-prose p { font-size: clamp(16px,1.2vw,18px); line-height: 1.55; color: rgba(16,18,22,.78); text-wrap: pretty; }
.story-split-prose p + p { margin-top: var(--s4); }
.story-split-prose strong { font-weight: 600; color: var(--ink); }
.story-split-prose em { font-style: italic; }
@media (max-width: 860px){
  .story-split { grid-template-columns: 1fr; }
  .story-split-media { border-right: 0; border-bottom: 1px solid rgba(16,18,22,.28); }
  .story-split-media image-slot { min-height: clamp(280px, 56vw, 440px); }
  .story-split-body { padding: clamp(44px,9vw,68px) var(--s6); }
}

/* ============================================================
   NAME EVOLUTION — signature moment (coral ground)
   We Make Games → We Make Teasers → We Make Treasures
   ============================================================ */
.story-evo { text-align: center; overflow: hidden; }
.story-evo .evo-eyebrow { display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); }
.story-evo .evo-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.story-evo .evo-intro { margin: clamp(22px,2.6vw,34px) auto 0; max-width: 22ch;
  font-family: var(--sans); font-weight: 600; font-stretch: 100%;
  font-size: clamp(26px,3.6vw,52px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }

.evo-stack { display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px,2vw,26px); margin: clamp(40px,6vw,84px) 0 clamp(34px,4vw,56px); }
.evo-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.evo-step .evo-name { font-family: var(--sans); font-weight: 600; line-height: 0.96; letter-spacing: -0.02em; }
.evo-step .evo-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(16,18,22,.62); }

/* evo steps stay visible; we animate strike / logo on .in, not a base fade */
.evo-step.reveal { opacity: 1; transform: none; }

/* the two superseded names — start solid black, then cross out + dim on scroll-in */
.evo-step--old .evo-name { font-stretch: 100%; font-size: clamp(22px,3.4vw,42px);
  color: var(--ink); position: relative; display: inline-block;
  transition: color .55s ease; transition-delay: var(--evd, 0s); }
.evo-step--old .evo-name::after { content: ""; position: absolute; left: 0; right: 0; top: 54%;
  height: 2px; background: rgba(16,18,22,.55); transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.16,.84,.3,1); transition-delay: var(--evd, 0s); }
.evo-step--old.in .evo-name { color: rgba(16,18,22,.46); }
.evo-step--old.in .evo-name::after { transform: scaleX(1); }

/* connector tick between steps */
.evo-link { width: 1.5px; height: clamp(16px,2vw,30px); background: rgba(16,18,22,.34); }

/* the current name — monumental */
.evo-step--now { gap: clamp(12px,1.4vw,18px); }
.evo-step--now .evo-name { display: inline-flex; align-items: center; gap: clamp(12px,1.5vw,24px);
  font-stretch: 80%; font-size: clamp(46px,9.4vw,150px); letter-spacing: -0.03em; color: var(--ink); }
.evo-step--now .evo-name .evo-gem { width: clamp(30px,5vw,76px); height: auto; flex: 0 0 auto; display: block; }
.evo-step--now .evo-note { font-size: 12px; color: var(--ink); }

.evo-def { margin: clamp(30px,4vw,56px) auto 0; max-width: 56ch;
  font-size: clamp(18px,1.7vw,26px); line-height: 1.34; font-weight: 500;
  letter-spacing: -0.01em; color: rgba(16,18,22,.82); text-wrap: pretty; }
.evo-def strong { font-weight: 600; color: var(--ink); }

.evo-logo { display: block; width: clamp(320px, 80vw, 1180px); height: auto;
  opacity: 0; transform: translateY(18px) scale(.965); transform-origin: center bottom;
  transition: opacity .7s ease, transform .85s cubic-bezier(.16,.84,.3,1); }
.evo-step--now.in .evo-logo { opacity: 1; transform: none; }

/* motion-off / reduced-motion: show final struck + logo state, no animation */
[data-motion="off"] .evo-step--old .evo-name { color: rgba(16,18,22,.46); }
[data-motion="off"] .evo-step--old .evo-name::after { transform: scaleX(1); }
[data-motion="off"] .evo-logo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .evo-step--old .evo-name { color: rgba(16,18,22,.46); transition: none; }
  .evo-step--old .evo-name::after { transform: scaleX(1); transition: none; }
  .evo-logo { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 600px){
  .evo-step--now .evo-name { gap: 10px; }
}

/* ============================================================
   WHY IT MATTERS — pull quote support line
   ============================================================ */
.story-quote-support { max-width: 60ch; margin: clamp(34px,4vw,56px) auto 0; text-align: center;
  font-size: clamp(16px,1.3vw,19px); line-height: 1.6; color: rgba(255,255,255,.74); text-wrap: pretty; }

/* ============================================================
   BACKED BY BRETHREN — credibility (red on ink)
   ============================================================ */
.story-brethren-sec { padding: 0; }
.story-brethren { display: grid; grid-template-columns: 0.85fr 1px 1.15fr; align-items: stretch; }
.story-brethren .br-lead { padding: clamp(56px,8vw,120px) clamp(32px,4vw,72px) clamp(56px,8vw,120px) 0; }
.story-brethren .br-divider { background: var(--line-d); }
.story-brethren .br-body { padding: clamp(56px,8vw,120px) 0 clamp(56px,8vw,120px) clamp(32px,4vw,72px); }
.story-brethren .br-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--coral); display: flex; align-items: center; gap: 10px; }
.story-brethren .br-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--coral); }
.story-brethren h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(30px,4vw,60px);
  letter-spacing: -0.025em; line-height: 1.0; margin-top: var(--s5); text-wrap: balance; max-width: 14ch; color: var(--coral); }
.story-brethren .br-body p { font-size: clamp(17px,1.3vw,20px); line-height: 1.5;
  color: rgba(255,255,255,.74); text-wrap: pretty; max-width: 52ch; }
.story-brethren .br-body p strong { color: var(--paper); }
.story-brethren .br-body p + p { margin-top: var(--s5); }
.story-brethren .br-caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s6); }
.story-brethren .br-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 12px; border: 1px solid rgba(255,255,255,.3); color: var(--paper); }
.story-brethren .br-link { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s7);
  font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: color .18s, border-color .18s; }
.story-brethren .btn { margin-top: var(--s7); }
.story-brethren .br-link .arr { font-family: var(--mono); transition: transform .2s; }
.story-brethren .br-link:hover { color: var(--coral-press); border-color: var(--coral-press); }
.story-brethren .br-link:hover .arr { transform: translateX(4px); }
@media (max-width: 760px){ .story-brethren { grid-template-columns: 1fr; }
  .story-brethren .br-divider { display: none; }
  .story-brethren .br-lead { padding: clamp(48px,12vw,80px) 0 var(--s6); }
  .story-brethren .br-body { padding: 0 0 clamp(48px,12vw,80px); }
  .story-brethren h2 { max-width: none; } }

/* ============================================================
   TEAM — leadership / key people (mist ground)
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.6vw,44px); }
.team-member { display: flex; flex-direction: column; }
.tm-photo { display: block; aspect-ratio: 4/5; overflow: hidden;
  background: var(--mist-deep); }
.tm-photo image-slot { display: block; width: 100%; height: 100%; }
.team-member h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,1.9vw,27px);
  letter-spacing: -0.015em; line-height: 1.04; margin-top: var(--s5); }
.tm-role { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); margin-top: 9px; }
/* black-on-coral ground */
.story-team .tm-role { color: rgba(16,18,22,.66); }

/* wipe-in on scroll: photo clips L→R, name/role fade up after, staggered */
.story-team .team-member.reveal { opacity: 1; transform: none; }
.story-team .tm-photo { clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.16,.84,.3,1); transition-delay: var(--twd, 0s); }
.story-team .team-member.in .tm-photo { clip-path: inset(0 0 0 0); }
.story-team .team-member h3, .story-team .team-member .tm-role {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,.84,.3,1);
  transition-delay: calc(var(--twd, 0s) + .22s); }
.story-team .team-member.in h3, .story-team .team-member.in .tm-role { opacity: 1; transform: none; }
[data-motion="off"] .story-team .tm-photo,
[data-motion="off"] .story-team .team-member h3,
[data-motion="off"] .story-team .team-member .tm-role { clip-path: inset(0 0 0 0); opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce){
  .story-team .tm-photo { clip-path: inset(0 0 0 0); transition: none; }
  .story-team .team-member h3, .story-team .team-member .tm-role { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 720px){ .team-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   WHAT WE BELIEVE — three tenets (ink ground), full-bleed row
   ============================================================ */
.story-believe { padding-bottom: 0; }
.story-tenets { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-d); margin-top: clamp(40px,5vw,72px); }
.tenet { display: flex; flex-direction: column; gap: var(--s5);
  padding: clamp(36px,4vw,64px) clamp(22px,2vw,40px);
  border-left: 1px solid var(--line-d); }
.tenet:first-child { border-left: 0; padding-left: var(--s6); }
.tenet:last-child { padding-right: var(--s6); }
.tenet .tn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--coral); }
.tenet h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(23px,2.2vw,32px);
  letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.tenet p { font-size: clamp(15px,1.1vw,17px); line-height: 1.55; color: rgba(255,255,255,.7);
  text-wrap: pretty; margin-top: auto; }
@media (max-width: 820px){
  .story-tenets { grid-template-columns: 1fr; }
  .tenet { border-left: 0; border-top: 1px solid var(--line-d); padding-left: var(--s6); padding-right: var(--s6); }
  .tenet:first-child { border-top: 0; }
}