/*
 * ClubMixed R&D page (/research/)
 * Ported from the Lovable "live-stream-to-xr" /research route.
 * Every rule is scoped to .research-page so the site theme is unaffected.
 */

/* Scoped reset: neutralises theme/Bootstrap element styles inside the page */
:where(.research-page) h1, :where(.research-page) h2, :where(.research-page) h3,
:where(.research-page) p, :where(.research-page) figure, :where(.research-page) dl,
:where(.research-page) dd, :where(.research-page) ol {
  margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
:where(.research-page) ol { padding: 0; list-style: none; }
:where(.research-page) dt { font-weight: inherit; }
:where(.research-page) strong { color: inherit; font-weight: 700; }
:where(.research-page) a { color: inherit; text-decoration: none; }
.research-page a:hover { text-decoration: none; }
:where(.research-page) img, :where(.research-page) svg, :where(.research-page) iframe { display: block; max-width: 100%; }
:where(.research-page) img { height: auto; }
:where(.research-page) iframe { border: 0; }
:where(.research-page) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.research-page button:focus { outline: none; }
.research-page *, .research-page *::before, .research-page *::after { box-sizing: border-box; }
.research-page .active { background: transparent; } /* theme's global .active adds a dark box */
.research-page { min-height: 100vh; background: var(--research-bg); color: var(--research-text); }

/* Shared button (was shadcn <Button>) */
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.rd-btn svg { width: 16px; height: 16px; flex: none; }

/* Hero layout (was Tailwind utilities) */
.rd-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.research-hero-wash { position: absolute; inset: 0; }
.research-hero-layout { position: relative; display: grid; align-items: center; gap: 3rem; }
.rd-hero-copy { max-width: 42rem; }
.research-hero-title { margin-top: 1.25rem; }
.rd-hero-lead { margin-top: 1.75rem; max-width: 42rem; }
.rd-hero-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.research-hero-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .rd-hero-actions { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 1024px) { .research-hero-layout { grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); } }

/* Introduction */
.replica-intro h2 { max-width: 48rem; }
.replica-intro p:last-child { max-width: 48rem; font-size: 1.125rem; }

/* Architecture (was Tailwind utilities) */
.rd-arch-grid { display: grid; gap: 2rem; margin-top: 2.25rem; }
.rd-arch-panel { border: 1px solid var(--research-dark-line); border-radius: 6px; background: var(--research-blue-deep); padding: 1.25rem; }
.rd-arch-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.rd-arch-row-future { grid-template-columns: minmax(0,1fr); }
.rd-arch-divider { margin-block: 1.5rem; border-top: 1px dashed var(--research-pink); }
.rd-arch-node { position: relative; }
.rd-arch-node button { width: 100%; height: 6rem; padding-inline: .75rem; text-align: center; font-size: 1rem; font-weight: 500; line-height: 1.3; transition: color .18s ease, border-color .18s ease; }
.rd-arch-arrow { position: absolute; right: -1.25rem; top: 2.25rem; z-index: 10; display: none; width: 16px; height: 16px; color: var(--research-cyan); }
.rd-arch-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; font-size: .875rem; }
.rd-arch-legend span { display: flex; align-items: center; gap: .5rem; }
.rd-legend-solid { display: block; width: 2rem; height: 1px; background: var(--research-cyan); }
.rd-legend-dashed { display: block; width: 2rem; border-top: 1px dashed var(--research-pink); }
.research-feature aside { border: 1px solid var(--research-dark-line); border-radius: 6px; }
.research-feature aside h3 { margin-top: 1.25rem; font-size: 1.5rem; line-height: 1.33; }
.research-feature aside p.research-on-dark-soft { margin-top: 1rem; line-height: 1.75rem; }
.research-feature aside .research-status { margin-top: 1.75rem; }
.research-status svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 640px) {
  .rd-arch-panel { padding: 2rem; }
  .rd-arch-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .rd-arch-row-future { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rd-arch-arrow { display: block; }
}
@media (min-width: 1024px) { .rd-arch-grid { grid-template-columns: 1.4fr .6fr; } }

/* Mars modes, method, misc */
.replica-segments button { padding-inline: 1rem; font-size: 1rem; font-weight: 500; }
.replica-row-chevron { height: 18px; flex: none; }
/* Collapse the image row too when the detail stacks to one column on mobile */
.replica-project-detail { grid-auto-rows: 0fr; }
.replica-project-row:is(.is-open,:hover,:focus-within) .replica-project-detail { grid-auto-rows: auto; }
.rd-publications-cta { margin-top: 1.5rem; }
.rd-video { aspect-ratio: 16/9; }
.rd-video iframe { width: 100%; height: 100%; }

/* Site header overlays the top of the page: clear it and keep anchors visible */
.research-hero-layout { padding-top: calc(3.5rem + 90px) !important; }
.research-page section[id] { scroll-margin-top: 100px; }
@media (max-width: 767px) { .research-hero-layout { padding-top: calc(3rem + 90px) !important; } }

/* ---- Component styles (from the original page) ---- */
.research-page { --research-bg:#fafaf7; --research-text:#171717; --research-soft:#3f3f3f; --research-muted:#66635f; --research-line:#d8d6d0; --research-blue:#0030ae; --research-blue-deep:#001b65; --research-cyan:#00ffff; --research-accent:#006b72; --research-pink:#c90659; --research-dark-line:rgba(255,255,255,.32); font-family:"Rubik",Arial,sans-serif; font-size:18px; line-height:1.6; color-scheme:light; }
.research-page h1,.research-page h2,.research-page h3,.research-page p { letter-spacing:0; } .research-page p { line-height:1.65; } .research-page h2 { font-size:clamp(1.875rem,3.2vw,2.625rem); line-height:1.12; font-weight:600; text-wrap:balance; } .research-page h3 { font-weight:600; }
.research-page section[id] { scroll-margin-top:92px; } .research-shell { width:min(100% - 2rem,1180px); margin-inline:auto; } .replica-content { padding-left:64px; padding-right:0; }
.replica-signal { --signal-progress:0px; --rail-x:max(calc((100% - 1180px)/2 + 16.5px),32.5px); position:relative; } .replica-waveform { position:absolute; z-index:3; top:0; bottom:0; left:var(--rail-x); width:28px; overflow:hidden; pointer-events:none; transform:translateX(-50%); } .replica-waveform svg { position:absolute; inset:0; display:block; width:28px; height:100%; overflow:visible; } .replica-waveform path { fill:none; stroke-width:1.25; stroke-linecap:round; } .replica-waveform-base path { stroke:var(--research-blue); opacity:.22; } .replica-waveform-progress { clip-path:inset(0 0 calc(100% - var(--signal-progress)) 0); } .replica-waveform-progress path { stroke:var(--research-pink); opacity:.5; } .replica-playhead { position:absolute; top:var(--signal-progress); left:0; width:28px; height:3px; border-radius:2px; background:var(--research-pink); box-shadow:0 0 0 2px var(--research-bg); transform:translateY(-1px); transition:top .12s ease-out; }
.research-section { position:relative; padding-block:clamp(3.25rem,6vw,5.25rem); border-bottom:1px solid var(--research-line); background:var(--research-bg); } .replica-section-heading { position:relative; padding-top:1rem; } .replica-section-node,.replica-hero-node { position:absolute; z-index:4; width:11px; height:11px; border:2px solid var(--research-blue); border-radius:50%; background:var(--research-bg); transition:background .18s ease,transform .18s ease,box-shadow .18s ease; } .replica-section-node { left:-53px; top:1.5rem; } .replica-standalone-node { top:.6rem; } .replica-hero-node { left:calc(var(--rail-x) - 5.5px); top:4rem; border-color:var(--research-cyan); background:var(--research-blue-deep); } .research-page[data-active-section="top"] #top .replica-hero-node,.research-page[data-active-section="introduction"] #introduction .replica-section-node,.research-page[data-active-section="portfolio"] #portfolio .replica-section-node,.research-page[data-active-section="mars-study"] #mars-study .replica-section-node,.research-page[data-active-section="method"] #method .replica-section-node,.research-page[data-active-section="architecture"] #architecture .replica-section-node,.research-page[data-active-section="publications"] #publications .replica-section-node,.research-page[data-active-section="products"] #products .replica-section-node,.research-page[data-active-section="evidence"] #evidence .replica-section-node,.research-page[data-active-section="creator-economy"] #creator-economy .replica-section-node,.research-page[data-active-section="partners"] #partners .replica-section-node,.research-page[data-active-section="roadmap"] #roadmap .replica-section-node { background:var(--research-pink); border-color:var(--research-pink); box-shadow:0 0 0 5px rgba(201,6,89,.16); transform:scale(1.25); }
.replica-section-code,.research-code,.replica-caption,.research-status { font-family:"IBM Plex Mono","Courier New",monospace; } .replica-section-code,.research-code { color:var(--research-muted); font-size:.875rem; font-weight:600; text-transform:uppercase; } .replica-section-heading h2 { margin-top:.65rem; } .replica-section-intro { max-width:760px; margin-top:1rem; color:var(--research-soft); }
.research-hero { position:relative; overflow:hidden; color:#fff; } .research-hero-wash { background:rgba(0,10,38,.87); } .research-hero-layout { min-height:0; padding-block:4rem 4.5rem; padding-left:64px; } .research-hero-title { max-width:14ch; font-size:clamp(2.4rem,4vw,3.75rem); line-height:1.03; font-weight:600; text-wrap:balance; } .research-kicker { color:var(--research-cyan); font-family:"IBM Plex Mono","Courier New",monospace; font-size:.875rem; font-weight:600; text-transform:uppercase; } .research-on-dark-soft { color:rgba(255,255,255,.86); } .research-on-dark-muted { color:rgba(255,255,255,.76); } .research-hero-links a { border-bottom:1px solid var(--research-cyan); color:#fff; font-weight:600; } .research-hero-links a:hover { color:var(--research-cyan); border-color:var(--research-pink); }
.replica-hero-collage { display:grid; grid-template-columns:1fr 1.78fr; gap:1.25rem 1rem; align-content:center; } .replica-hero-collage figure { margin:0; min-width:0; } .replica-hero-collage img { display:block; width:100%; border:1px solid rgba(255,255,255,.58); object-fit:cover; } .replica-hero-collage figcaption { margin-top:.5rem; color:rgba(255,255,255,.86); font-family:"IBM Plex Mono","Courier New",monospace; font-size:1rem; line-height:1.35; } .replica-collage-dj { grid-column:1/-1; } .replica-collage-dj img { aspect-ratio:16/9; } .replica-collage-headset img { aspect-ratio:1; object-fit:contain; background:#f6f6f2; } .replica-collage-venue img { aspect-ratio:16/9; }
.research-primary-button { min-height:3.2rem; height:auto; border-radius:999px; padding:.8rem 1.25rem; white-space:normal; background:var(--research-pink); color:#fff; font-size:1rem; font-weight:700; text-align:left; } .research-primary-button:hover { background:#a9004a; color:#fff; }
.replica-intro { display:grid; grid-template-columns:180px 1fr; gap:3rem; align-items:start; } .replica-intro img { width:180px; } .replica-intro h2 { margin-top:1rem; } .replica-intro p:last-child { margin-top:1.5rem; color:var(--research-soft); }
.replica-status-legend { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:2.25rem; padding-block:1rem; border-block:1px solid var(--research-line); } .research-status { display:inline-flex; align-items:center; gap:.45rem; color:var(--research-muted); font-size:.8125rem; font-weight:600; text-transform:uppercase; white-space:nowrap; } .replica-status-dot { position:relative; width:10px; height:10px; flex:none; overflow:hidden; border:1.5px solid currentColor; border-radius:50%; } .research-status.active .replica-status-dot { background:var(--research-blue); border-color:var(--research-blue); } .research-status.prototype .replica-status-dot { border-color:var(--research-blue); } .research-status.prototype .replica-status-dot::after { content:""; position:absolute; inset:0 50% 0 0; background:var(--research-blue); } .research-status.planned .replica-status-dot { background:transparent; border-color:var(--research-muted); } .research-status.direction .replica-status-dot { border-style:dashed; }
.replica-tracklist { border-bottom:1px solid var(--research-line); } .replica-project-row { border-top:1px solid var(--research-line); } .replica-project-summary { display:grid; width:100%; grid-template-columns:88px minmax(0,1fr) auto 20px; gap:1rem; align-items:center; padding:1.25rem 0; color:var(--research-text); text-align:left; } .replica-project-copy { display:grid; min-width:0; grid-template-columns:minmax(150px,.6fr) minmax(220px,1.4fr); gap:1rem; align-items:baseline; } .replica-project-copy strong { font-size:1.2rem; } .replica-project-copy>span { color:var(--research-soft); font-size:1.125rem; line-height:1.5; } .replica-row-chevron { width:18px; transition:transform .18s ease; } .replica-project-row:is(.is-open,:hover,:focus-within) .replica-row-chevron { transform:rotate(180deg); } .replica-project-detail { display:grid; grid-template-rows:0fr; grid-template-columns:minmax(0,1fr) 0; gap:0; opacity:0; overflow:hidden; transition:grid-template-rows .18s ease,grid-template-columns .18s ease,opacity .18s ease,padding .18s ease; } .replica-project-detail>* { min-height:0; } .replica-project-row:is(.is-open,:hover,:focus-within) .replica-project-detail { grid-template-rows:1fr; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:1.5rem; padding:0 0 1.5rem 104px; opacity:1; } .replica-project-detail p { color:var(--research-soft); } .replica-project-detail img { width:100%; aspect-ratio:16/9; object-fit:cover; } .replica-notes-label { display:block; margin-top:.8rem; color:var(--research-blue); font-family:"IBM Plex Mono","Courier New",monospace; font-size:.875rem; }
.replica-mars { position:relative; margin-top:2.25rem; } .replica-mars>img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; } .replica-mars-controls { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; margin:-1.9rem 1.5rem 0; position:relative; background:var(--research-bg); border:1px solid var(--research-line); padding:1rem; } .replica-segments { display:flex; border:1px solid var(--research-blue); } .replica-segments button { min-height:42px; border-radius:0; background:transparent; color:var(--research-blue); } .replica-segments button+button { border-left:1px solid var(--research-blue); } .replica-segments button.is-active { background:var(--research-blue); color:#fff; } .replica-mode-copy { display:grid; gap:.2rem; } .replica-mode-copy span { color:var(--research-soft); font-size:1rem; } .replica-pending { margin:1rem 1.5rem 0; color:var(--research-pink); font-weight:600; }
.replica-method-path { position:relative; display:grid; width:100%; min-height:210px; grid-template-columns:repeat(9,minmax(0,1fr)); margin-top:2.75rem; } .replica-method-curve { position:absolute; inset:0 0 auto; width:100%; height:120px; overflow:visible; pointer-events:none; } .replica-method-curve path { fill:none; stroke:var(--research-line); stroke-width:1.5; vector-effect:non-scaling-stroke; } .replica-method-path button { --method-y:72px; position:relative; z-index:1; display:flex; min-width:0; flex-direction:column; gap:.3rem; align-items:center; align-self:start; margin-top:var(--method-y); padding:1.3rem 0 0; text-align:center; color:var(--research-text); } .replica-method-path button:nth-of-type(2) { --method-y:38px; } .replica-method-path button:nth-of-type(3) { --method-y:30px; } .replica-method-path button:nth-of-type(4) { --method-y:43px; } .replica-method-path button:nth-of-type(5) { --method-y:66px; } .replica-method-path button:nth-of-type(6) { --method-y:82px; } .replica-method-path button:nth-of-type(7) { --method-y:70px; } .replica-method-path button:nth-of-type(8) { --method-y:42px; } .replica-method-path button:nth-of-type(9) { --method-y:48px; } .replica-method-node { position:absolute; top:-6px; left:50%; width:11px; height:11px; border:2px solid var(--research-blue); border-radius:50%; background:var(--research-bg); transform:translateX(-50%); transition:background .18s ease,transform .18s ease; } .replica-method-path button.is-active .replica-method-node { background:var(--research-pink); border-color:var(--research-pink); transform:translateX(-50%) scale(1.2); } .replica-method-path strong { max-width:100%; font-size:.95rem; line-height:1.25; white-space:nowrap; } .replica-mobile-method-copy { display:none; } .replica-method-detail { min-height:4rem; margin-top:1rem; border-left:2px solid var(--research-pink); padding-left:1rem; color:var(--research-soft); }
.research-feature { background:var(--research-blue); color:#fff; } .research-feature .replica-section-node { background:var(--research-blue); border-color:var(--research-cyan); } .research-feature .replica-section-code,.research-feature .replica-section-intro { color:#fff; } .research-feature .replica-section-intro { opacity:.9; } .research-feature .research-node,.research-feature .research-node-active { min-height:5.5rem; border:1px solid rgba(255,255,255,.55); border-radius:0; background:transparent; color:#fff; white-space:normal; } .research-feature .research-node:hover,.research-feature .research-node-active { border-color:var(--research-cyan); color:var(--research-cyan); } .research-feature aside { border-left:1px solid rgba(255,255,255,.48); padding:1.5rem; } .research-feature aside .research-status { color:#fff; }
.replica-catalogue { margin-top:2.25rem; border-block:1px solid var(--research-line); } .replica-catalogue article { display:grid; grid-template-columns:88px auto minmax(30px,1fr) auto; gap:1rem; align-items:end; padding:1.25rem 0; border-bottom:1px solid var(--research-line); } .replica-catalogue article:last-child { border:0; } .replica-catalogue h3 { font-size:1.2rem; } .replica-catalogue p { color:var(--research-muted); font-size:1rem; } .replica-leader { border-bottom:1px dotted var(--research-muted); transform:translateY(-.45rem); } .replica-catalogue-status { color:var(--research-pink); font-family:"IBM Plex Mono","Courier New",monospace; font-size:.875rem; }
.replica-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:2.25rem; border-block:1px solid var(--research-line); } .replica-products article { display:flex; min-width:0; flex-direction:column; padding:1.75rem; } .replica-products article+article { border-left:1px solid var(--research-line); } .replica-products h3 { font-size:1.4rem; } .replica-products p { margin-top:.75rem; color:var(--research-soft); font-size:1.125rem; } .replica-products article>div { display:grid; gap:.8rem; margin-top:auto; padding-top:1.5rem; } .replica-products a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--research-blue); font-weight:600; } .replica-products a svg { width:17px; flex:none; } .replica-products .replica-download { color:var(--research-pink); }
.replica-evidence { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:end; margin-top:2.25rem; } .replica-caption { margin-top:.5rem; color:var(--research-muted); font-size:1rem; } .replica-evidence-notes { display:grid; gap:.35rem; margin-top:1rem; } .replica-evidence-notes div { display:grid; grid-template-columns:96px 1fr; border-top:1px solid var(--research-line); padding-top:.35rem; } .replica-evidence-notes dt { color:var(--research-muted); font-family:"IBM Plex Mono","Courier New",monospace; font-size:.875rem; text-transform:uppercase; } .replica-evidence-notes dd { font-size:1rem; }
.replica-questions { display:grid; grid-template-columns:repeat(3,1fr); margin-top:2.25rem; border-block:1px solid var(--research-line); } .replica-questions article { padding:1.75rem; } .replica-questions article+article { border-left:1px solid var(--research-line); } .replica-questions h3 { margin-top:.75rem; font-size:1.3rem; } .replica-questions p { margin-top:.75rem; color:var(--research-soft); font-size:1.125rem; }
.replica-partners { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3rem; align-items:center; border-block:1px solid var(--research-line); padding-block:2.25rem; } .replica-partners h2 { margin-top:.75rem; } .replica-partners p { max-width:720px; margin-top:1rem; color:var(--research-soft); }
.replica-roadmap { display:grid; grid-template-columns:repeat(4,1fr); margin-top:2.75rem; } .replica-roadmap li { position:relative; border-top:1px solid var(--research-blue); padding:1.8rem 1.2rem 0 0; } .replica-roadmap-node { position:absolute; top:-7px; left:0; width:13px; height:13px; border:2px solid var(--research-blue); border-radius:50%; background:var(--research-bg); } .replica-roadmap h3 { margin-top:.6rem; font-size:1.25rem; } .replica-roadmap p { margin-top:.5rem; color:var(--research-soft); font-size:1.125rem; }
.research-page a:focus-visible,.research-page button:focus-visible { outline:3px solid var(--research-pink); outline-offset:3px; }
@media (max-width:1023px) { .replica-content { padding-right:2rem; } .research-hero-layout { max-width:760px; } .replica-project-summary { grid-template-columns:82px minmax(0,1fr) auto 18px; } .replica-project-copy { grid-template-columns:1fr; gap:.25rem; } }
@media (max-width:767px) { .replica-signal { --rail-x:16.5px; } .replica-content { padding-left:28px; } .replica-section-node { left:-33px; } .research-section { padding-block:3rem; } .research-hero-layout { display:block; min-height:0; padding:4rem 1rem 4rem 2rem; } .research-hero-title { font-size:clamp(2.1rem,9vw,2.8rem); } .replica-hero-collage { margin-top:2.5rem; } .replica-intro { grid-template-columns:1fr; gap:2rem; } .replica-intro img { width:150px; } .replica-project-summary { grid-template-columns:72px minmax(0,1fr) 18px; } .replica-project-summary .research-status { grid-column:2; } .replica-project-summary .replica-row-chevron { grid-column:3; grid-row:1/3; } .replica-project-detail,.replica-project-row:is(.is-open,:hover,:focus-within) .replica-project-detail { grid-template-columns:1fr; } .replica-project-row:is(.is-open,:hover,:focus-within) .replica-project-detail { padding:0 0 1.5rem 88px; } .replica-method-path { width:auto; min-height:0; grid-template-columns:1fr; margin-top:3rem; margin-left:.35rem; } .replica-method-curve { display:none; } .replica-method-path button,.replica-method-path button:nth-of-type(n) { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:start; margin-top:0; border-top:0; border-left:1px solid var(--research-line); padding:0 0 2rem 1.5rem; text-align:left; } .replica-method-node { top:.25rem; left:-6px; transform:none; } .replica-method-path button.is-active .replica-method-node { transform:scale(1.2); } .replica-method-path strong { min-height:0; font-size:1rem; overflow-wrap:normal; } .replica-mobile-method-copy { display:block; grid-column:2; color:var(--research-soft); font-size:1rem; } .replica-method-detail { display:none; } .replica-mars-controls { grid-template-columns:1fr; margin:-1rem .75rem 0; } .replica-products,.replica-questions { grid-template-columns:1fr; } .replica-products article+article,.replica-questions article+article { border-left:0; border-top:1px solid var(--research-line); } .replica-evidence,.replica-partners { grid-template-columns:1fr; } .replica-roadmap { grid-template-columns:1fr; margin-left:.35rem; } .replica-roadmap li { border-top:0; border-left:1px solid var(--research-blue); padding:0 0 2.5rem 1.5rem; } .replica-roadmap-node { top:.2rem; left:-7px; } }
@media (max-width:560px) { .research-shell { width:min(100% - 1.25rem,1180px); } .replica-signal { --rail-x:10px; } .replica-content { padding-left:24px; } .replica-section-node { left:-30px; } .research-primary-button { width:100%; } .replica-hero-collage { display:grid; min-height:0; grid-template-columns:1fr 1fr; gap:1rem; } .replica-hero-collage figure { position:static; width:auto; transform:none; } .replica-collage-dj { grid-column:1/-1; } .replica-collage-headset img,.replica-collage-venue img { aspect-ratio:1; } .replica-project-summary { grid-template-columns:1fr 18px; gap:.5rem; } .replica-project-summary>.research-code { grid-column:1; } .replica-project-copy { grid-column:1; } .replica-project-summary .research-status { grid-column:1; } .replica-project-detail,.replica-project-row.is-open .replica-project-detail { padding-left:0; } .replica-catalogue article { grid-template-columns:1fr auto; gap:.4rem 1rem; } .replica-catalogue article>.research-code { grid-column:1/-1; } .replica-leader { display:none; } .replica-catalogue-status { grid-column:2; grid-row:2; align-self:start; text-align:right; } .replica-segments { width:100%; } .replica-segments button { flex:1; padding-inline:.5rem; } }
@media (prefers-reduced-motion:reduce) { .research-page *,.research-page *::before,.research-page *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* Contrast: dark teal labels on light sections; cyan stays on dark ones */
.research-section:not(.research-feature) .research-kicker { color: var(--research-accent); }

/* White logo over the dark banner on this page */
header.header-dark .navbar-brand .navbar-logo-light { display: none !important; }
header.header-dark .navbar-brand .navbar-logo-dark { display: block !important; }

/* Compact layout refinements */
@media (min-width: 1024px) {
  .replica-project-summary { grid-template-columns: 88px minmax(0,1fr) 190px 20px; }
  .replica-project-summary .research-status { justify-self: start; }
}
.replica-mars > img { aspect-ratio: 2/1; }
@media (min-width: 768px) { .replica-method-path { min-height: 170px; } }
@media (min-width: 768px) { .replica-evidence { grid-template-columns: minmax(0,760px) auto; justify-content: space-between; } }