/* Homepage host for the approved jade oracle and cylindrical profile capsule. */
.homepage .orb-stage {
  --card-x: 77; --card-y: 53; --card-o: 0; --oracle-o: 0; --material-o: 1; --feedback-o: 0; --index-o: 0;
  --fallback-x: 50; --fallback-y: 50; --fallback-w: 30; --fallback-h: 48;
  position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none;
  opacity: var(--orb-stage-o, 0); background: transparent;
}
.homepage #orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: var(--material-o); }
.homepage .fallback-orb { display: none; position: absolute; left: calc(var(--fallback-x) * 1%); top: calc(var(--fallback-y) * 1%); width: calc(var(--fallback-w) * 1%); height: calc(var(--fallback-h) * 1%); transform: translate(-50%,-50%); border: 1px solid rgba(244,255,244,.84); border-radius: var(--fallback-radius,50%); background: radial-gradient(circle at 28% 24%,rgba(255,255,247,.98) 0 3%,rgba(255,255,247,.46) 6%,transparent 23%),radial-gradient(ellipse at 48% 42%,rgba(193,239,205,.8),rgba(79,174,111,.7) 48%,rgba(25,111,64,.82) 78%,rgba(20,92,58,.9)); box-shadow: inset 13px 14px 27px rgba(255,255,245,.28),inset -14px -16px 32px rgba(8,67,38,.22),0 0 34px rgba(46,139,87,.24),0 22px 52px rgba(20,92,58,.14); }
.homepage.no-webgl .fallback-orb { display: block; opacity: var(--fallback-o,0); }

.homepage .trust-rail { position: relative; z-index: 3; display: grid; min-height: 34svh; place-items: center; pointer-events: none; background: transparent; opacity: var(--rail-o,0); }
.homepage .logo-stream { position: fixed; top: 18vh; left: 0; width: 100%; overflow: hidden; color: rgba(31,61,48,.68); -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.homepage .logo-track { display: flex; width: max-content; align-items: center; gap: clamp(58px,7.2vw,122px); padding-left: clamp(58px,7.2vw,122px); animation: logo-drift 34s linear infinite; }
.homepage .logo-track > span { display: inline-flex; flex: none; align-items: center; min-height: 40px; white-space: nowrap; line-height: 1; }
.homepage .logo-barclays { font-family: Arial,sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.045em; }
.homepage .logo-jpm { font-family: Georgia,serif; font-size: 22px; letter-spacing: -.045em; }
.homepage .logo-yc { gap: 9px; font-family: Arial,sans-serif; font-size: 18px; font-weight: 500; }
.homepage .logo-yc b { display: grid; width: 28px; height: 28px; place-items: center; color: var(--paper); background: rgba(31,61,48,.66); font-size: 18px; font-weight: 400; }
.homepage .logo-nvidia { font-family: Arial,sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .015em; }
.homepage .logo-aws { position: relative; padding-bottom: 7px; font-family: Arial,sans-serif; font-size: 26px; letter-spacing: -.06em; }
.homepage .logo-aws::after { content: ""; position: absolute; left: 3px; right: -2px; bottom: 2px; height: 5px; border-bottom: 2px solid currentColor; border-radius: 0 0 60% 60%; transform: rotate(-2deg); }
.homepage .logo-microsoft { gap: 9px; font-family: Arial,sans-serif; font-size: 19px; font-weight: 500; }
.homepage .logo-microsoft i { width: 22px; height: 22px; background: conic-gradient(from 90deg,transparent 0 1%,currentColor 1% 24%,transparent 24% 26%,currentColor 26% 49%,transparent 49% 51%,currentColor 51% 74%,transparent 74% 76%,currentColor 76% 99%,transparent 99%); }
.homepage .logo-cohesity { font-family: Arial,sans-serif; font-size: 21px; font-weight: 650; letter-spacing: -.06em; }
@keyframes logo-drift { to { transform: translateX(calc(-50% - clamp(29px,3.6vw,61px))); } }

.homepage .oracle-copy { position: absolute; z-index: 4; left: 12vw; top: 23vh; width: min(560px,40vw); transform: translateY(calc((1 - var(--oracle-o)) * 8px)) scale(calc(.98 + var(--oracle-o) * .02)); transform-origin: left center; text-align: left; opacity: var(--oracle-o); }
.homepage .oracle-kicker { margin: 0 0 18px; color: rgba(20,92,58,.74); font: 500 10px/1.2 var(--face); letter-spacing: .14em; text-transform: uppercase; }
.homepage .oracle-copy h2 { margin: 0; color: #244137; font: 340 clamp(48px,5.5vw,76px)/.91 var(--face); letter-spacing: -.045em; font-variation-settings: "opsz" 76; }
.homepage .oracle-copy > p { max-width: 34em; margin: 20px 0 0; color: rgba(41,59,51,.66); font: 400 15px/1.55 var(--face); }
.homepage .search-window { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; width: 100%; margin: 34px 0 0; padding: 17px 0; border-top: 1px solid rgba(20,92,58,.24); border-bottom: 1px solid rgba(20,92,58,.16); border-radius: 0; text-align: left; background: transparent; box-shadow: none; }
.homepage .search-entry { min-width: 0; }
.homepage .search-entry small { display: block; margin-bottom: 4px; color: rgba(44,64,55,.52); font: 500 8px/1.2 var(--face); letter-spacing: .1em; text-transform: uppercase; }
.homepage .search-entry strong { display: block; overflow: hidden; color: var(--ink); font: 430 14px/1.2 var(--face); text-overflow: ellipsis; white-space: nowrap; }
.homepage .search-context { display: flex; align-items: center; gap: 4px; margin-top: 3px; overflow: hidden; color: rgba(44,64,55,.56); font: 400 10px/1.2 var(--face); text-overflow: ellipsis; white-space: nowrap; }
.homepage .brief-caret { flex: none; width: 1px; height: 10px; background: rgba(20,92,58,.72); animation: brief-caret 1.15s steps(1,end) infinite; }
@keyframes brief-caret { 50% { opacity: .18; } }
.homepage .search-upload,.homepage .search-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; font: 500 9px/1 var(--face); letter-spacing: .06em; text-transform: uppercase; }
.homepage .search-upload { gap: 6px; padding: 0 3px; color: rgba(36,65,52,.62); background: transparent; }
.homepage .search-upload svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.homepage .search-submit { min-height: auto; padding: 0 0 5px; color: var(--jade-deep); border-bottom: 1px solid rgba(20,92,58,.55); background: transparent; }
.homepage .search-options { display: flex; justify-content: flex-start; align-items: center; gap: 11px; margin-top: 12px; color: rgba(41,59,51,.54); font-size: 10px; }
.homepage .search-options i { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,92,58,.48); }

.homepage .orb-copy { --o: 0; position: absolute; z-index: 3; width: min(510px,39vw); opacity: min(1, calc(var(--o) * 40)); }
/* Words arrive in order - kicker, headline, body, then the rest - each rising a little, and leave in reverse. */
.homepage .orb-copy > * { --k: 3; --p: clamp(0, calc((var(--o) - var(--k) * .12) / .64), 1); opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 16px)); }
.homepage .orb-copy > :nth-child(1) { --k: 0; }
.homepage .orb-copy > :nth-child(2) { --k: 1; }
.homepage .orb-copy > :nth-child(3) { --k: 2; }
/* Mina's headline arrives word by word; "Perfect" in the page's italic jade. */
.homepage .chapter-gallery > h2 { opacity: 1; transform: none; }
.homepage .chapter-gallery h2 .w { --q: clamp(0, calc((var(--o) - .10 - var(--w) * .11) / .48), 1); display: inline-block; opacity: var(--q); transform: translateY(calc((1 - var(--q)) * .32em)); }
.homepage .chapter-gallery h2 em { font-style: italic; color: #0d6642; }
.homepage .chapter-folio { left: 12vw; top: 26vh; }
.homepage .chapter-counterpoint { left: 56vw; top: 26vh; width: min(525px,36vw); }
.homepage .chapter-gallery { left: 50%; top: 8vh; width: min(690px,68vw); transform: translateX(-50%); text-align: center; }
.homepage .orb-eyebrow { margin: 0 0 19px; color: var(--jade-deep); font: 400 13px/1.2 var(--face); letter-spacing: .035em; }
.homepage .orb-copy h2 { margin: 0; font: 365 clamp(48px,4.8vw,70px)/.98 var(--face); letter-spacing: -.04em; font-variation-settings: "opsz" 72; }
.homepage .chapter-gallery h2 { font-size: clamp(46px,4.2vw,62px); }
.homepage .orb-body { max-width: 35em; margin: 24px 0 0; color: var(--quiet); font: 400 16px/1.56 var(--face); }
.homepage .chapter-gallery .orb-body { margin-left: auto; margin-right: auto; }
.homepage .feedback-note { width: min(470px,100%); margin-top: 28px; }
.homepage .feedback-note small { display: block; margin-bottom: 5px; color: rgba(20,92,58,.62); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.homepage .feedback-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.homepage .feedback-options span { padding: 9px 12px; border: 1px solid rgba(20,92,58,.10); border-radius: 999px; color: rgba(44,64,55,.58); background: rgba(255,255,255,.25); font-size: 10px; line-height: 1; box-shadow: 0 5px 16px rgba(36,72,52,.035); }
.homepage .feedback-options .selected { border-color: rgba(20,92,58,.26); color: var(--jade-deep); background: rgba(111,191,149,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.36),0 8px 20px rgba(20,92,58,.06); }
.homepage .orb-chapter-index { position: absolute; z-index: 1; left: calc(var(--index-x,8) * 1vw); top: calc(var(--index-y,12) * 1vh); color: rgba(20,92,58,.045); font-size: clamp(150px,21vw,330px); font-weight: 250; line-height: .75; letter-spacing: -.09em; opacity: var(--index-o); }

/* Placed by journey-director.js with a transform (its own compositor layer: it moves without repainting). */
.homepage .person-stage { position: absolute; z-index: 4; left: 0; top: 0; transform: translate(-50%,-50%); opacity: 0; will-change: transform, opacity; }
.homepage .person-stage::before { content: ""; position: absolute; z-index: -1; inset: -13px; border: 1px solid rgba(118,231,159,.68); border-radius: 156px; box-shadow: 0 0 0 4px rgba(111,191,149,.045),0 0 24px rgba(46,139,87,.34),0 0 64px rgba(111,191,149,.18); }
.homepage .profile-card { position: relative; z-index: 2; width: 294px; height: 522px; padding: 14px; border-radius: 147px; }
.homepage .feedback-slip { --slip-o: 0; position: absolute; z-index: 1; left: calc(100% - 42px); top: 314px; display: grid; width: 218px; min-height: 116px; align-content: center; padding: 19px 21px 18px 62px; border: 1px solid rgba(20,92,58,.12); border-radius: 0 12px 12px 0; opacity: var(--slip-o); transform: translateX(calc((1 - var(--slip-o)) * -24px)); background: rgba(250,247,238,.96); box-shadow: 18px 20px 42px rgba(34,66,49,.10); }
.homepage .feedback-slip-two { top: 292px; }
.homepage .feedback-slip small { color: rgba(20,92,58,.58); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.homepage .feedback-slip strong { margin-top: 7px; color: var(--ink); font-size: 13px; font-weight: 440; }
.homepage .feedback-slip span { margin-top: 9px; color: rgba(53,71,62,.53); font-size: 9px; }
.homepage .card-shell { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.88); border-radius: inherit; background: linear-gradient(145deg,rgba(255,255,255,.52),rgba(235,243,236,.13) 46%,rgba(118,180,139,.025)); box-shadow: -14px -14px 38px rgba(255,255,255,.76),16px 24px 46px rgba(25,71,49,.13),inset -8px -12px 24px rgba(20,92,58,.05),inset 7px 8px 18px rgba(255,255,255,.55); -webkit-backdrop-filter: blur(11px) saturate(1.08); backdrop-filter: blur(11px) saturate(1.08); }
.homepage .profile-inner { position: relative; height: 100%; overflow: hidden; border-radius: 129px; text-align: center; background: linear-gradient(180deg,rgba(252,251,247,.62),rgba(244,246,239,.17) 58%,rgba(167,208,178,.02)); }
.homepage .card-light { position: absolute; z-index: 0; left: -15%; right: -15%; bottom: -8%; height: 43%; background: radial-gradient(ellipse at 50% 100%,rgba(20,92,58,.14),rgba(72,150,101,.045) 42%,transparent 77%); filter: blur(13px); opacity: .16; }
.homepage .profile-person { --o: 0; position: absolute; z-index: 2; inset: 0; opacity: var(--o); }
.homepage .portrait { position: absolute; left: 50%; top: 35px; width: 104px; height: 104px; transform: translateX(-50%); border: 6px solid rgba(255,255,255,.8); border-radius: 50%; background-image: url("assets/faces-atlas-color.jpg"); background-size: 1600% 1600%; box-shadow: 0 11px 26px rgba(35,65,50,.14); filter: saturate(.8) contrast(.93); }
/* Each candidate is a whole head at 320 px (tools/build-portraits.py), not a tight atlas tile. */
.homepage .profile-person .portrait { background-size: cover; background-position: 50% 50%; background-color: #e9e4d8; }
.homepage .portrait-evan { background-image: url("assets/portraits/evan.jpg"); }
.homepage .portrait-priya { background-image: url("assets/portraits/claire.jpg"); }
.homepage .portrait-owen { background-image: url("assets/portraits/owen.jpg"); }
.homepage .portrait-daniel { background-image: url("assets/portraits/daniel.jpg"); }
.homepage .portrait-mina { background-image: url("assets/portraits/mina.jpg"); }
.homepage .candidate { position: absolute; left: 22px; right: 22px; top: 154px; }
.homepage .candidate-name { margin: 0; font-size: 25px; line-height: 1.15; }
.homepage .candidate-role { min-height: 34px; margin: 8px auto 0; color: var(--quiet); font-size: 12px; line-height: 1.4; }
.homepage .candidate-badges { display: flex; min-height: 29px; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.homepage .open-badge,.homepage .contract-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; color: var(--jade-deep); background: rgba(111,191,149,.12); box-shadow: inset 0 0 0 1px rgba(20,92,58,.08); font-size: 7px; letter-spacing: .045em; text-transform: uppercase; }
.homepage .contract-badge { color: rgba(42,73,59,.75); background: rgba(255,255,255,.34); }
.homepage .open-badge i,.homepage .contract-badge i { width: 4px; height: 4px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 3px rgba(46,139,87,.1); }
.homepage .contract-badge i { background: rgba(44,94,69,.54); box-shadow: none; }
.homepage .match { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin: 23px 0 0; color: var(--jade-deep); }
.homepage .match span { font-size: 10px; letter-spacing: .075em; text-transform: uppercase; }
.homepage .match strong { font-size: 27px; font-weight: 420; line-height: 1; }
.homepage .match-note { display: block; margin-top: 5px; color: rgba(54,72,63,.47); font-size: 8px; letter-spacing: .02em; }
.homepage .candidate-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 23px; padding-top: 18px; border-top: 1px solid rgba(20,92,58,.08); }
.homepage .candidate-facts p { margin: 0; }
.homepage .candidate-facts p + p { border-left: 1px solid rgba(20,92,58,.08); }
.homepage .candidate-facts span,.homepage .candidate-facts strong { display: block; }
.homepage .candidate-facts span { margin-bottom: 5px; color: rgba(54,72,63,.48); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.homepage .candidate-facts strong { color: rgba(37,58,49,.84); font-size: 11px; font-weight: 430; }
.homepage .candidate-decision { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 17px; }
.homepage .candidate-decision span,.homepage .candidate-decision strong { padding: 7px 10px; border: 1px solid rgba(20,92,58,.10); border-radius: 999px; font-size: 7px; font-weight: 430; letter-spacing: .045em; text-transform: uppercase; }
.homepage .candidate-decision span { color: rgba(54,72,63,.48); }
.homepage .candidate-decision strong { color: var(--jade-deep); border-color: rgba(20,92,58,.24); background: rgba(111,191,149,.10); }
.homepage .candidate-feedback { margin: 15px auto 0; padding: 10px 12px; border-left: 1px solid rgba(20,92,58,.30); text-align: left; background: linear-gradient(90deg,rgba(111,191,149,.08),transparent); }
.homepage .candidate-feedback small,.homepage .candidate-feedback strong { display: block; }
.homepage .candidate-feedback small { color: rgba(20,92,58,.52); font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
.homepage .candidate-feedback strong { margin-top: 4px; color: var(--jade-deep); font-size: 10px; font-weight: 430; }
/* The scroll's length for the story on the fixed stage (journey-director.js beats), in screens of 100svh:
   the orb's runway (it rests beside the search, comes to the middle and opens into the silk) and, inside the
   page after the chapters, the capsule's (the silk winds into it; Evan, the judged round, Mina, the release). */
.homepage .orb-scroll { position: relative; z-index: -1; height: 250svh; pointer-events: none; }
.homepage .orb-scroll > div { height: 100svh; }
.homepage .pill-runway { height: 995svh; pointer-events: none; }

@media (max-width:900px) {
  .homepage .trust-rail { min-height: 34svh; }
  .homepage .logo-track { gap: 48px; padding-left: 48px; animation-duration: 26s; }
  .homepage .logo-track > span { transform: scale(.82); transform-origin: center; }
  .homepage .oracle-copy { left: 50%; top: 9vh; width: min(350px,88vw); transform: translateX(-50%) translateY(calc((1 - var(--oracle-o)) * 8px)) scale(calc(.98 + var(--oracle-o) * .02)); transform-origin: center top; text-align: center; }
  .homepage .oracle-kicker { margin-bottom: 12px; font-size: 8px; }
  .homepage .oracle-copy h2 { font-size: clamp(42px,12vw,58px); }
  .homepage .oracle-copy > p { width: 310px; max-width: 100%; margin: 15px auto 0; font-size: 11px; }
  .homepage .search-window { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; width: min(350px,90vw); margin: 21px auto 0; padding: 13px 0; }
  .homepage .search-entry small { font-size: 6px; }
  .homepage .search-entry strong { font-size: 10px; }
  .homepage .search-context { margin-top: 2px; font-size: 7px; }
  .homepage .brief-caret { height: 7px; }
  .homepage .search-upload { display: inline-flex; width: 30px; min-height: 30px; padding: 0; font-size: 0; }
  .homepage .search-submit { min-height: auto; padding: 0 0 4px; font-size: 6px; }
  .homepage .search-options { justify-content: center; gap: 8px; margin-top: 9px; font-size: 7px; }
  .homepage .orb-copy,.homepage .chapter-folio,.homepage .chapter-counterpoint,.homepage .chapter-gallery { left: 50%; top: 11vh; width: calc(100vw - 38px); transform: translateX(-50%); text-align: center; }
  .homepage .orb-copy h2,.homepage .chapter-gallery h2 { font-size: clamp(37px,10.7vw,48px); }
  .homepage .orb-eyebrow { margin-bottom: 9px; font-size: 10px; }
  .homepage .orb-body { width: 320px; max-width: 100%; margin: 12px auto 0; font-size: 12px; line-height: 1.42; }
  .homepage .feedback-note { width: min(335px,100%); margin: 13px auto 0; text-align: center; }
  .homepage .feedback-note small { font-size: 6px; }
  .homepage .feedback-options { justify-content: center; gap: 5px; margin-top: 7px; }
  .homepage .feedback-options span { padding: 6px 8px; font-size: 7px; }
  .homepage .orb-chapter-index { display: none; }
  .homepage .profile-card { width: 222px; height: 388px; border-radius: 111px; padding: 10px; }
  .homepage .person-stage::before { inset: -9px; border-radius: 119px; }
  .homepage .profile-inner { border-radius: 98px; }
  .homepage .portrait { top: 18px; width: 72px; height: 72px; border-width: 5px; }
  .homepage .candidate { left: 14px; right: 14px; top: 100px; }
  .homepage .candidate-name { font-size: 19px; }
  .homepage .candidate-role { min-height: 27px; margin-top: 4px; font-size: 9px; }
  .homepage .candidate-badges { min-height: 22px; gap: 3px; margin-top: 6px; }
  .homepage .open-badge,.homepage .contract-badge { gap: 3px; padding: 4px 5px; font-size: 5.5px; }
  .homepage .match { margin-top: 11px; gap: 6px; }
  .homepage .match span { font-size: 7px; }
  .homepage .match strong { font-size: 21px; }
  .homepage .match-note { margin-top: 2px; font-size: 6px; }
  .homepage .candidate-facts { margin-top: 10px; padding-top: 10px; }
  .homepage .candidate-facts span { margin-bottom: 2px; font-size: 5px; }
  .homepage .candidate-facts strong { font-size: 8px; }
  .homepage .candidate-decision { gap: 4px; margin-top: 9px; }
  .homepage .candidate-decision span,.homepage .candidate-decision strong { padding: 5px 6px; font-size: 5px; }
  .homepage .candidate-feedback { margin-top: 7px; padding: 7px 8px; }
  .homepage .candidate-feedback small { font-size: 5px; }
  .homepage .candidate-feedback strong { margin-top: 2px; font-size: 7px; }
  .homepage .feedback-slip { display: none; }
}

/* One visual vocabulary: a brief, a judgment, and its consequence. */
.homepage .journey-thread { position: absolute; left: 50%; top: 9%; width: min(440px,88%); transform: translateX(-50%); text-align: center; opacity: var(--thread-o,0); }
.homepage .journey-thread small { display: block; color: var(--quiet-ink); font-size: 12px; }
.homepage .journey-thread strong { display: block; margin-top: 9px; font-size: 27px; font-weight: 380; color: var(--jade-deep); }
.homepage .feedback-note small { font-size: 10px; color: var(--quiet-ink); }
.homepage .feedback-options span { font-size: 12px; box-shadow: none; }
.homepage .feedback-options .selected { background: rgba(111,191,149,calc(.02 + var(--feedback-o) * .14)); border-color: rgba(20,92,58,calc(.1 + var(--feedback-o) * .23)); box-shadow: none; }
.homepage .feedback-options .selected::before { content: "✓"; display: inline-block; margin-right: 5px; opacity: var(--feedback-o); }
.homepage .portrait { width: 96px; height: 96px; top: 29px; }
.homepage .candidate { top: 141px; }
.homepage .candidate-role { min-height: 33px; margin-top: 6px; }
.homepage .candidate-badges { min-height: 25px; margin-top: 7px; }
.homepage .open-badge,.homepage .contract-badge { font-size: 10px; text-transform: none; letter-spacing: 0; }
.homepage .match { margin-top: 19px; }
.homepage .match strong small { font-size: 11px; font-weight: 400; color: #6e7971; margin-left: 2px; }
.homepage .match-note { font-size: 10px; color: #5e7367; }
.homepage .candidate-facts { margin-top: 19px; padding-top: 14px; }
.homepage .candidate-facts span { font-size: 10px; letter-spacing: .015em; text-transform: none; color: #6e7971; }
.homepage .candidate-facts strong { font-size: 12px; }
.homepage .candidate-role,.homepage .candidate-facts span,.homepage .match-note,.homepage .match strong small { color: #3f5e4b; }
.homepage .open-badge,.homepage .contract-badge { color: #31553f; }
.homepage .orb-body { color: #5c685f; }
.homepage .search-entry small,.homepage .search-upload,.homepage .search-submit { font-size: 10px; }
.homepage .search-entry strong { font-size: 18px; }
.homepage .search-context { white-space: normal; overflow: visible; font-size: 12px; line-height: 1.4; }
.homepage .search-options { font-size: 11px; }
.homepage .search-window { grid-template-columns: minmax(0,1fr) auto; gap: 13px; }
.homepage .search-upload { display: none; }
.homepage .chapter:not(.close) h2 { font-size: clamp(36px,3.8vw,54px); line-height: 1.05; letter-spacing: -.025em; }
.homepage .words .capability-note { margin: 17px 0 0; font-size: 14px; }
.homepage .words .fit-proof { display: flex; align-items: center; gap: 17px; margin-top: 24px; color: var(--jade-deep); }
.homepage .fit-proof > strong { font-size: 46px; line-height: 1; font-weight: 350; letter-spacing: -.04em; }
.homepage .fit-proof > span { font-size: 13px; line-height: 1.4; }
.homepage .fit-proof small { display: block; margin-top: 4px; font-size: 10px; color: var(--quiet-ink); }
html.motion-paused .homepage .logo-track,html.motion-paused .homepage .brief-caret { animation-play-state: paused; }
@media(max-width:900px) {
  .homepage .oracle-copy { top: 10vh; }
  .homepage .oracle-copy > p { font-size: 13px; line-height: 1.5; }
  .homepage .search-entry small { font-size: 10px; }
  .homepage .search-entry strong { font-size: 16px; }
  .homepage .search-context { font-size: 11px; }
  .homepage .search-submit { font-size: 10px; }
  .homepage .search-options { font-size: 10px; }
  .homepage .orb-copy,.homepage .chapter-folio,.homepage .chapter-counterpoint,.homepage .chapter-gallery { top: 9vh; }
  .homepage .orb-copy h2,.homepage .chapter-gallery h2 { font-size: clamp(34px,10vw,42px); }
  .homepage .orb-body { font-size: 13px; }
  .homepage .feedback-note small { font-size: 10px; }
  .homepage .feedback-options span { font-size: 10px; }
  .homepage .portrait { top: 19px; width: 70px; height: 70px; }
  .homepage .candidate { top: 103px; }
  .homepage .candidate-name { font-size: 22px; }
  .homepage .candidate-role { min-height: 30px; font-size: 11px; margin-top: 5px; }
  .homepage .candidate-badges { flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .homepage .open-badge,.homepage .contract-badge { font-size: 10px; padding: 5px 6px; }
  .homepage .match { margin-top: 18px; }
  .homepage .match span { font-size: 10px; letter-spacing: .02em; }
  .homepage .match strong { font-size: 25px; }
  .homepage .match-note { margin-top: 5px; }
  .homepage .candidate-facts { display: none; }
  .homepage .journey-thread { top: 17%; }
  .homepage .journey-thread strong { font-size: 24px; }
  .homepage .chapter:not(.close) .words > p { font-size: 15px; }
  .homepage .words .fit-proof { justify-content: center; text-align: left; }
  .homepage .fit-proof > strong { font-size: 40px; }
  .homepage .fit-proof > span { font-size: 12px; }
}
@media(max-width:900px) and (max-height:740px) {
  .homepage .oracle-copy { top: 10vh; }
  .homepage .oracle-copy h2 { font-size: 38px; }
  .homepage .oracle-copy > p { margin-top: 12px; }
  .homepage .search-window { margin-top: 15px; }
  .homepage .orb-copy,.homepage .chapter-folio,.homepage .chapter-counterpoint,.homepage .chapter-gallery { top: 9vh; }
  .homepage .orb-copy h2,.homepage .chapter-gallery h2 { font-size: 31px; }
  .homepage .orb-body { margin-top: 9px; font-size: 12px; }
  .homepage .feedback-note { margin-top: 10px; }
  .homepage .feedback-options span { padding: 5px 7px; }
  .homepage .profile-card { height: 330px; }
  .homepage .portrait { top: 13px; width: 60px; height: 60px; }
  .homepage .candidate { top: 85px; }
  .homepage .candidate-name { font-size: 20px; }
  .homepage .match { margin-top: 10px; }
  .homepage .chapter:not(.close) h2 { font-size: 33px; }
}
@media(min-width:901px) and (max-height:780px) {
  .homepage .profile-card { height: 442px; }
  .homepage .portrait { top: 24px; width: 82px; height: 82px; }
  .homepage .candidate { top: 123px; }
  .homepage .candidate-facts { display: none; }
  .homepage .match { margin-top: 14px; }
}
@media (prefers-reduced-motion:reduce) { .homepage .orb-stage { transition:none; } .homepage .logo-track,.homepage .brief-caret { animation-play-state: paused; } }

/* Readable at a glance: the search copy and the story's small print on solid, darker inks. */
.homepage .oracle-kicker { color: #1d5a3c; font-weight: 600; }
.homepage .oracle-copy h2 { color: #1f3a30; }
.homepage .oracle-copy > p { color: #3d4a43; }
.homepage .search-window { border-top-color: rgba(20,92,58,.34); border-bottom-color: rgba(20,92,58,.24); }
.homepage .search-entry small { color: #4a5a51; font-weight: 600; }
.homepage .search-entry strong { color: #1f3a30; }
.homepage .search-context { color: #3f4c45; }
.homepage .brief-caret { background: #1d5a3c; }
.homepage .search-submit { color: #0b5a39; font-weight: 600; border-bottom-color: rgba(13,102,66,.7); }
.homepage .search-options { color: #46544c; }
.homepage .orb-eyebrow { color: #0b5a39; font-weight: 500; }
.homepage .orb-copy h2 { color: #1f3a30; }
.homepage .orb-body { color: #3d4a43; }
.homepage .feedback-note small { color: #3d4a43; font-weight: 600; }
.homepage .feedback-options span { color: #3d4a43; border-color: rgba(20,92,58,.2); }
.homepage .journey-thread small { color: #3d4a43; }
.homepage .candidate-name { color: #1d2e27; }
.homepage .candidate-role,.homepage .candidate-facts span,.homepage .match strong small { color: #2f4a3b; }
.homepage .match-note { color: #2f4a3b; }
.homepage .candidate-facts strong { color: #1d2e27; }
.homepage .open-badge,.homepage .contract-badge { color: #21432f; }

/* The judged round: each person gets a thumb and a note; the notes accumulate beside them. */
.homepage .judgments { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; max-width: 30em; }
.homepage .judgments li { --line-o: 0; --line-now: 0; display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; column-gap: 10px; opacity: calc(var(--line-o) * (.52 + .48 * var(--line-now))); transform: translateY(calc((1 - var(--line-o)) * 6px)); font-size: 15px; line-height: 1.4; color: #3d4a43; }
.homepage .judgments strong { color: #1d2e27; font-weight: 500; white-space: nowrap; }
.homepage .judge-note { color: #3d4a43; }
.homepage .judge-mark { position: relative; top: 3px; width: 20px; height: 20px; border-radius: 50%; }
.homepage .judge-mark::before,.homepage .judge-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; border-radius: 1px; background: currentColor; }
.homepage .judge-mark.pass { color: #f6f1e6; background: #1f2c26; }
.homepage .judge-mark.pass::before { transform: translate(-50%,-50%) rotate(45deg); }
.homepage .judge-mark.pass::after { transform: translate(-50%,-50%) rotate(-45deg); }
.homepage .judge-mark.keep { color: #f6f1e6; background: #0d6642; }
.homepage .judge-mark.keep::before { width: 5px; transform: translate(-95%,-10%) rotate(45deg); }
.homepage .judge-mark.keep::after { width: 9px; transform: translate(-30%,-80%) rotate(-50deg); }
/* A verdict is a stamp pressed onto the card: firm, dark for a rejection, jade for a keep. */
.homepage .verdict { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 10px 18px 10px 13px; border-radius: 999px; color: #f6f1e6; font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1;
  opacity: min(1, calc(var(--feedback-o) * 2.5)); transform: rotate(var(--tilt, -2.5deg)) scale(calc(1.24 - .24 * var(--feedback-o))); transform-origin: 50% 60%; }
.homepage .verdict svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: calc(24 * (1 - var(--feedback-o))); }
.homepage .verdict.pass { background: #1f2c26; box-shadow: 0 9px 20px rgba(18,28,23,.30), inset 0 0 0 1.5px rgba(246,241,230,.16); }
.homepage .verdict.keep { --tilt: 2deg; background: #0d6642; box-shadow: 0 9px 22px rgba(13,102,66,.32), inset 0 0 0 1.5px rgba(246,241,230,.2); }
/* A rejected person is crossed off: the portrait loses its colour, the name is struck, the rest recedes. */
.homepage .judged .portrait { filter: saturate(calc(.8 - .8 * var(--reject, 0))) contrast(.93) brightness(calc(1 - .05 * var(--reject, 0))); }
.homepage .judged .candidate-role,.homepage .judged .candidate-badges,.homepage .judged .match { opacity: calc(1 - .5 * var(--reject, 0)); }
.homepage .judged .candidate-name { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(31,44,38,calc(.7 * var(--reject, 0))); opacity: calc(1 - .25 * var(--reject, 0)); }
/* The cylinder (profile-drum.js): at rest a person is the flat card; turning, a sliced copy wraps the drum. */
.homepage .turn-slices { display: none; position: absolute; inset: 0; perspective: 1100px; pointer-events: none; }
.homepage .profile-person.turning > .turn-slices { display: block; }
.homepage .profile-person.turning > :not(.turn-slices) { visibility: hidden; }
.homepage .turn-slice { position: absolute; top: 0; bottom: 0; overflow: hidden; backface-visibility: hidden; transform-origin: 50% 50%; }
.homepage .turn-copy { position: absolute; top: 0; bottom: 0; }
/* A soft shadow crosses several slices and would show each seam; as the person begins to turn (--shade,
   profile-drum.js) the copies' shadows fade out over the first few degrees, too early to be noticed. */
.homepage .turn-copy .portrait { box-shadow: 0 11px 26px rgba(35,65,50,calc(.14 * var(--shade, 1))); }
.homepage .turn-copy .verdict.pass { box-shadow: 0 9px 20px rgba(18,28,23,calc(.30 * var(--shade, 1))), inset 0 0 0 1.5px rgba(246,241,230,.16); }
.homepage .turn-copy .verdict.keep { box-shadow: 0 9px 22px rgba(13,102,66,calc(.32 * var(--shade, 1))), inset 0 0 0 1.5px rgba(246,241,230,.2); }
/* The capsule's jade outline follows the judgement: grey for a rejection, brighter for a keep. */
.homepage .person-stage::before { filter: saturate(calc(1 - .9 * var(--neg, 0))) brightness(calc(1 + .14 * var(--pos, 0))); }
.homepage .judged .candidate-badges:empty { min-height: 25px; }
.homepage .chapter-counterpoint .orb-body { max-width: 30em; }
@media (max-width:900px) {
  .homepage .judgments { gap: 7px; margin: 12px auto 0; max-width: 340px; text-align: left; }
  .homepage .judgments li { grid-template-columns: 18px auto 1fr; column-gap: 7px; font-size: 12px; line-height: 1.35; }
  .homepage .judge-mark { top: 2px; width: 16px; height: 16px; }
  .homepage .judge-mark::before,.homepage .judge-mark::after { width: 7px; }
  .homepage .judge-mark.keep::before { width: 4px; }
  .homepage .judgments strong { font-size: 12px; }
  .homepage .verdict { margin-top: 14px; padding: 8px 14px 8px 10px; font-size: 12px; }
  .homepage .verdict svg { width: 13px; height: 13px; }
  .homepage .chapter-counterpoint .orb-body { display: none; }
}
@media (max-width:900px) and (max-height:740px) {
  .homepage .judgments { gap: 5px; margin-top: 8px; }
  .homepage .judgments li { font-size: 11px; }
  .homepage .verdict { margin-top: 9px; }
}
@media(min-width:901px) and (max-height:780px) {
  .homepage .judgments { margin-top: 18px; gap: 10px; }
  .homepage .judgments li { font-size: 14px; }
  .homepage .verdict { margin-top: 16px; }
}
/* The hero's words hold their place while they fade, so the page never carries them into the character. */
.homepage .copy { position: fixed; }

/* The header on the way down (try-ren.js): the lockup glides right and settles into a raised paper pill.
   At the top it is the plain wordmark, exactly as the resting hero was approved. */
.homepage .wordmark { --try-pad: 22px; position: relative; isolation: isolate; transform-origin: 100% 50%; transition: transform 1.2s cubic-bezier(.6,.02,.2,1), color .5s ease; }
.homepage .top.try .wordmark { transform: translateX(var(--try-x, 0px)) scale(var(--try-s, 1)); }
.homepage .wm-try { position: absolute; right: 0; top: 50%; font-style: normal; letter-spacing: 0; color: var(--jade-deep); white-space: nowrap; opacity: 0; transform: translate(.5em,-50%); transition: opacity .25s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.homepage .wordmark .wm-text, .homepage .wordmark .wm-glyph { transition: opacity .25s ease; }
.homepage .top.try .wm-text, .homepage .top.try .wm-glyph { opacity: 0; }
.homepage .wordmark::before { content: ""; position: absolute; z-index: -1; top: calc(var(--try-pad) * -.66); bottom: calc(var(--try-pad) * -.66); right: calc(var(--try-pad) * -1); left: calc(100% - var(--try-w, 2.5em) - var(--try-pad)); border-radius: 999px; background: #f7f3ea;
  box-shadow: -6px -6px 14px rgba(255,255,255,.95), 6px 7px 16px rgba(150,133,101,.27), inset 0 0 0 1px rgba(255,255,255,.6);
  opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform 1.2s cubic-bezier(.6,.02,.2,1), box-shadow .35s ease; }
/* Going: the pill forms as the lockup lands. Coming back: it clears first, then the lockup returns. */
.homepage .top.try .wordmark::before { opacity: 1; transform: none; transition: opacity .6s ease .45s, transform 1.2s cubic-bezier(.6,.02,.2,1), box-shadow .35s ease; }
.homepage .top.try .wm-try { opacity: 1; transform: translate(0,-50%); transition-delay: .6s, .5s; }
.homepage .top.try .wordmark:hover, .homepage .top.try .wordmark:focus-visible { color: var(--jade-deep); }
.homepage .top.try .wordmark:hover::before, .homepage .top.try .wordmark:active::before { box-shadow: inset 4px 4px 10px rgba(150,133,101,.25), inset -4px -4px 10px rgba(255,255,255,.92); }
.homepage .top.try .wordmark:focus-visible { outline: none; }
.homepage .top.try .wordmark:focus-visible::before { box-shadow: -6px -6px 14px rgba(255,255,255,.95), 6px 7px 16px rgba(150,133,101,.27), 0 0 0 2px var(--jade); }
.homepage .top.try-still .wordmark, .homepage .top.try-still .wordmark::before, .homepage .top.try-still .wm-try { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .homepage .wordmark, .homepage .wordmark::before, .homepage .wm-try { transition: opacity .3s ease; }
}
@media (max-width:900px) { .homepage .wordmark { --try-pad: 17px; } }
/* The lockup and the pill change places without crossing the screen (Carlos, 2026-10-05: "the Ren logo
   transition from the phone is pretty ugly"; desktop too: "I'm fine with fixing the blank moment"). Since the
   pill carries no name, the glide moved an empty link across the frame: the lockup faded, nothing showed for a
   moment, then the pill appeared mid-way and slid; coming back, REN 人 was drawn over the fading pill. Now the
   lockup fades where it stands, the link moves while none of it shows, and the pill forms at the right; coming
   back, the pill clears first, then the lockup returns. The pill's words are roman (Carlos, 2026-10-05). */
@media (prefers-reduced-motion: no-preference) {
  .homepage .wordmark, .homepage .top.try .wordmark { transition: transform 0s linear .18s, color .5s ease; }
  .homepage .wordmark .wm-text, .homepage .wordmark .wm-glyph { transition: opacity .5s ease .19s; }
  .homepage .top.try .wm-text, .homepage .top.try .wm-glyph { transition: opacity .18s ease-in; }
  .homepage .wordmark::before { transition: opacity .18s ease-in, transform .18s ease-in, box-shadow .35s ease; }
  .homepage .top.try .wordmark::before { transition: opacity .5s ease .18s, transform .6s cubic-bezier(.16,1,.3,1) .18s, box-shadow .35s ease; }
  .homepage .wm-try { transition: opacity .18s ease-in, transform .18s ease-in; }
  .homepage .top.try .wm-try { transition: opacity .5s ease .22s, transform .6s cubic-bezier(.16,1,.3,1) .2s; }
}

/* Mina, the one (journey-director.js --ring, --bloom): a jade ring draws round her portrait to 93, then a seal. */
.homepage .portrait-mina { overflow: visible; }
.homepage .score-ring { position: absolute; left: -15px; top: -15px; width: calc(100% + 30px); height: calc(100% + 30px); transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.homepage .ring-track { fill: none; stroke: rgba(13,102,66,.13); stroke-width: 2.2; }
.homepage .ring-fill { fill: none; stroke: #0d6642; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - 93 * var(--ring, 0)); opacity: min(1, calc(var(--ring, 0) * 8)); }
.homepage [data-person="5"] { --seal: clamp(0, calc((var(--ring, 0) - .78) * 4.5), 1); }
.homepage .seal { position: absolute; right: -12px; bottom: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0d6642; box-shadow: 0 6px 14px rgba(13,102,66,.28), 0 0 0 3px rgba(250,248,242,.95); opacity: var(--seal); transform: scale(calc(.55 + .45 * var(--seal))); }
.homepage .seal svg { width: 15px; height: 15px; fill: none; stroke: #f6f1e6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width:900px) {
  .homepage .score-ring { left: -11px; top: -11px; width: calc(100% + 22px); height: calc(100% + 22px); }
  .homepage .seal { right: -10px; bottom: -5px; width: 24px; height: 24px; }
  .homepage .seal svg { width: 12px; height: 12px; }
}