/*
 * Homepage grid hero. Replaces the previous .observatory-hero artwork hero.
 * Enqueued on the homepage only; no other page loads this file.
 */
.grid-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  height:min(800px,calc(100svh - 94px));min-height:740px;
  display:flex;align-items:center;justify-content:center;padding:64px var(--pad) 96px}
.grid-hero .grid-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.grid-hero .grid-stage canvas{display:block}
.grid-hero .copy-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 54% 48% at 50% 46%,#1c1c1ee0 0%,#1c1c1eb8 34%,#1c1c1e2e 64%,transparent 86%),
             linear-gradient(180deg,#1c1c1e60 0%,transparent 15%,transparent 90%,var(--bg) 100%)}
.grid-hero .hero-content{position:relative;z-index:2;width:100%;max-width:none;
  margin-left:auto;margin-right:auto;padding:0;text-align:center;pointer-events:none}
.grid-hero .hero-content .eyebrow{font:12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  text-indent:.12em;color:var(--ink);margin:0 0 20px}
.grid-hero .hero-content h1{font-size:clamp(24px,7.2vw,108px);font-weight:600;line-height:1.06;
  letter-spacing:-.042em;color:var(--ink);margin:0 auto 46px;max-width:none;text-shadow:none}
.grid-hero .hero-content h1 span{display:block;white-space:nowrap}
.grid-hero .hero-content h1 em{font-style:normal;color:var(--acid)}
.grid-hero .hero-content .action-row{display:flex;justify-content:center;margin:0;pointer-events:auto}
.grid-hero .hero-content .button{background:var(--bg);border:1px solid var(--acid);color:var(--acid);
  font-size:15px;font-weight:500;padding:17px 30px;gap:0;border-radius:4px}
.grid-hero .hero-content .button:hover{background:#262330;color:var(--acid)}
@media(max-width:760px){
  .grid-hero{height:min(700px,calc(100svh - 78px));min-height:640px;padding:44px var(--pad) 84px}
  .grid-hero .hero-content h1{margin-bottom:34px;letter-spacing:-.05em}
  .grid-hero .hero-content .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:18px}
  .grid-hero .hero-content .button{font-size:13px;padding:15px 24px}
  .grid-hero .copy-shade{background:radial-gradient(ellipse 72% 46% at 50% 44%,#1c1c1eee 0%,#1c1c1ec4 36%,#1c1c1e3a 68%,transparent 90%),linear-gradient(180deg,#1c1c1e60 0%,transparent 16%,transparent 88%,var(--bg) 100%)}
}
@media(prefers-reduced-motion:reduce){.grid-hero .grid-stage{opacity:.85}}

/* ---------------------------------------------------------------------------
 * Homepage evidence banner. Replaces the three-column .insight-strip with a
 * single thin, fully clickable announcement bar. Homepage only.
 * ------------------------------------------------------------------------- */
.icon-right{mask-image:url('../icons/arrow-right.svg')}
.news-banner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  background:var(--acid);color:var(--black);padding:13px var(--pad);
  transition:background .22s ease}
.news-banner:hover,.news-banner:focus-visible{background:#c0a7f0}
.news-banner:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.news-tag{justify-self:start;font-family:var(--display);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;line-height:1;color:var(--black);white-space:nowrap}
.news-body{text-align:center;font-size:14px;line-height:1.45;min-width:0}
.news-body strong{font-weight:600;letter-spacing:-.025em}
.news-go{justify-self:end;display:flex;align-items:center;gap:11px;
  font:11px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.news-go .ui-icon{width:19px;height:19px;transition:transform .22s ease}
.news-banner:hover .news-go .ui-icon,
.news-banner:focus-visible .news-go .ui-icon{transform:translateX(5px)}
@media(max-width:860px){
  .news-banner{grid-template-columns:auto auto;gap:10px 16px;padding:15px var(--pad)}
  .news-tag{grid-column:1;grid-row:1}
  .news-go{grid-column:2;grid-row:1;font-size:10px}
  .news-go .ui-icon{width:17px;height:17px}
  .news-body{grid-column:1/-1;grid-row:2;text-align:left;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .news-banner,.news-go .ui-icon{transition:none}
  .news-banner:hover .news-go .ui-icon{transform:none}
}

/* Origin section: centre the heading and paragraph on a shared midline. */
.observatory-home .origin-grid{align-items:center}
.observatory-home .origin-copy{padding-top:0}

/* ---------------------------------------------------------------------------
 * Section tones. Dark from the hero through "Look broader"; light from the
 * research section onward. The closing CTA keeps its lavender fill and the
 * footer stays dark. Homepage only.
 * ------------------------------------------------------------------------- */
/* "Look broader" head: size the headline column to its content so the
 * paragraph sits beside it instead of at a fixed 1fr boundary. */
.observatory-home .analysis-head{grid-template-columns:auto 1fr;gap:183px}
.observatory-home .analysis-head p{max-width:none} /* ends on the container edge, like the origin paragraph */
@media(max-width:760px){
  .observatory-home .analysis-head{grid-template-columns:1fr;gap:30px}
}

/* The readout panel is a "deeper" pop-up only; closer just highlights the group. */
.observatory-home .signal-screen[data-stage=closer] .signal-readout{opacity:0;transform:translateX(20px);pointer-events:none}

/* "Look broader" -> dark */
.observatory-home .analysis-section{background:var(--bg);color:var(--ink)}
.observatory-home .analysis-section p{color:var(--muted)}
.observatory-home .analysis-section .eyebrow{color:var(--muted)}
.observatory-home .analysis-instrument{border-color:var(--line)}
.observatory-home .analysis-bottom .text-link{color:var(--ink)}

/* Research: public releases run past on a flat marquee, right to left, at constant size, with the
 * edges fading into the background (the set is duplicated once for a seamless loop). Static list
 * when motion is off. Homepage only. */
.observatory-home .research-marquee{position:relative;margin-top:48px;padding:34px 0;border-top:1px solid #cbc5d4;border-bottom:1px solid #cbc5d4;overflow:hidden}
.observatory-home .research-marquee::before,.observatory-home .research-marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.observatory-home .research-marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.observatory-home .research-marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.observatory-home .marquee-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:mgr-marquee 56s linear infinite}
@keyframes mgr-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.observatory-home .research-marquee:focus-within .marquee-track{animation-play-state:paused}
.observatory-home .marquee-track li{flex:none;display:flex;align-items:flex-start;padding-right:72px}
.observatory-home .marquee-track li::before{content:"";flex:none;width:6px;height:6px;margin:12px 28px 0 0;background:var(--acid)}
.observatory-home .marquee-item{display:block;color:var(--black);text-decoration:none;white-space:nowrap}
.observatory-home .marquee-item strong{display:block;font:400 26px/1.1 var(--display);letter-spacing:-.04em;transition:color .2s}
.observatory-home .marquee-item span{display:block;margin-top:8px;font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#625b6c}
.observatory-home .marquee-item:hover strong{color:var(--acid)}
.observatory-home .marquee-item:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.observatory-home .marquee-caption{margin:48px auto 0;max-width:none;text-align:center;font:10px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#625b6c}
.observatory-home .marquee-caption+.research-marquee{margin-top:22px}
.observatory-home .marquee-more{margin:18px 0 0;text-align:right;font:10px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.observatory-home .marquee-more a{color:var(--black);border-bottom:1px solid currentColor;padding-bottom:3px}
.observatory-home .marquee-more a:hover{color:var(--acid)}
.observatory-home .research-threads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:80px;padding-top:48px;border-top:1px solid #cbc5d4}
.observatory-home .research-threads h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.04em;line-height:1.15;margin:0 0 16px;max-width:320px}
.observatory-home .research-threads p{font-size:14px;line-height:1.6;max-width:380px;margin:0 0 16px}
.observatory-home .research-threads .text-link{color:var(--black)}
html[data-motion=off] .observatory-home .research-marquee{overflow:visible;padding:28px 0}
html[data-motion=off] .observatory-home .research-marquee::before,html[data-motion=off] .observatory-home .research-marquee::after{display:none}
html[data-motion=off] .observatory-home .marquee-track{display:grid;width:auto;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px 32px;transform:none;animation:none}
html[data-motion=off] .observatory-home .marquee-track li{padding:0}
html[data-motion=off] .observatory-home .marquee-track li[data-clone]{display:none}
html[data-motion=off] .observatory-home .marquee-item{white-space:normal}
@media(max-width:760px){
  .observatory-home .research-marquee{margin-top:36px;padding:26px 0}
  .observatory-home .marquee-track{animation-duration:40s}
  .observatory-home .marquee-track li{padding-right:44px}
  .observatory-home .marquee-item strong{font-size:20px}
  .observatory-home .research-threads{grid-template-columns:1fr;gap:36px;margin-top:52px;padding-top:36px}
}

/* Research + audience -> light */
.observatory-home .research-section,
.observatory-home .audience-section{background:var(--paper);color:var(--black)}
.observatory-home .research-section p,
.observatory-home .audience-section p{color:#625b6c}
.observatory-home .research-section .eyebrow,
.observatory-home .audience-section .eyebrow{color:#625b6c}
.observatory-home .research-section .text-link,
.observatory-home .audience-section .text-link{color:var(--black)}
.observatory-home .evidence-feature{border-color:#cbc5d4}
.observatory-home .evidence-value{border-right-color:#cbc5d4}
.observatory-home .evidence-context .metric strong{color:var(--black)}
.observatory-home .evidence-context .metric>span{color:#625b6c}
.observatory-home .sample-note{color:#625b6c}
.observatory-home .audience-list details,
.observatory-home .audience-list details:last-child{border-color:#cbc5d4}
.observatory-home .audience-list summary>span:first-child{color:#625b6c}

/* The benchmark console stays a dark instrument inside the light section. */
.observatory-home .benchmark-console{border-color:#625b6c}
.observatory-home .benchmark-console p{color:var(--muted)}
.observatory-home .benchmark-meta>p:first-child{color:var(--ink)}
.observatory-home .benchmark-console .eyebrow{color:var(--muted)}
.observatory-home .benchmark-note{color:var(--muted)}
.observatory-home .benchmark-note a{color:var(--ink)}
@media(max-width:760px){
  .observatory-home .evidence-value{border-bottom-color:#cbc5d4}
}

/* Hairline separators between same-tone sections: full-bleed, very low contrast. */
.observatory-home .analysis-section{border-top:1px solid #ffffff12}
.observatory-home .audience-section{border-top:1px solid #1c1c1e14}

/* ---------------------------------------------------------------------------
 * Closing bar. One clickable line at heading scale, chevron at the right.
 * ------------------------------------------------------------------------- */
.icon-chevron-right{mask-image:url('../icons/chevron-right.svg')}
.closing-banner{display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:var(--paper);color:var(--black);padding:46px var(--pad);
  border-top:1px solid #1c1c1e14;transition:background .22s ease}
.closing-banner:hover,.closing-banner:focus-visible{background:#dcd4ec}
.closing-banner:focus-visible{outline:2px solid var(--black);outline-offset:-4px}
.closing-text{font-size:clamp(26px,6.4vw,96px);font-weight:500;letter-spacing:-.06em;
  line-height:1;white-space:nowrap}
.closing-banner .ui-icon{width:clamp(26px,4.6vw,66px);height:clamp(26px,4.6vw,66px);
  flex-shrink:0;transition:transform .22s ease}
.closing-banner:hover .ui-icon,
.closing-banner:focus-visible .ui-icon{transform:translateX(8px)}
@media(max-width:760px){.closing-banner{padding:30px var(--pad)}}
@media(prefers-reduced-motion:reduce){
  .closing-banner,.closing-banner .ui-icon{transition:none}
  .closing-banner:hover .ui-icon{transform:none}
}

/* Keep the homepage research caption on one line at desktop widths. */

@media(min-width:900px){
  .observatory-home #homepage-test-evidence .marquee-caption{white-space:nowrap}
}