/* Research section landing. Page-scoped components, prefix .res-
   Foundation tokens and components come from wldm.css. */

/* ------------------------------------------------ hero (ink, full bleed) */

.res-hero{
  background:var(--ink-deep);color:var(--on-ink);
  padding:var(--hero-y) 0 var(--sec-y);
  position:relative;overflow:hidden;
}
.res-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(243,240,230,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,240,230,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 12% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 12% 0%,#000 10%,transparent 72%);
}
.res-hero .brx-container{position:relative}

.res-masthead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-ink-label);margin:0 0 var(--s4);
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.res-dot{width:7px;height:7px;border-radius:50%;background:var(--ny);flex:none}

.res-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,64px);align-items:start;
}
.res-h1{color:var(--wh);max-width:17ch}
.res-h1 em{font-style:italic;color:var(--ny)}
/* the bar sits on the H1 cap line so the lead and the heading start together */
.res-bar{margin:12px 0 var(--s4)}
.res-lead{color:var(--on-ink-lead);font-size:var(--fs-body);line-height:1.6;max-width:56ch}
.res-hero-cta{margin-top:var(--s5)}

/* ------------------------------------------------ the shelf */

.res-shelf-sec{padding-top:calc(var(--sec-y) * .62)}
.res-shelf{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0}

.res-spine{position:relative;padding-top:6px}
.res-spine-line{position:absolute;left:11px;top:0;bottom:0;width:1.5px;background:var(--line);display:block}
.res-spine-mark{
  position:absolute;left:9px;top:0;width:5px;height:64px;border-radius:var(--r-pill);
  background:var(--ny);box-shadow:0 0 0 1px rgba(42,43,41,.22);
  transform:translateY(0);transition:transform .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1);
}
.res-planks{display:flex;flex-direction:column;gap:var(--s5)}

.res-plank{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.res-plank::before{
  content:"";position:absolute;left:-32px;top:36px;width:32px;height:1.5px;background:var(--line);
}
.res-plank:hover,.res-plank:focus-within{
  transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--hair-strong);
}
.res-index{
  position:absolute;left:clamp(26px,3.2vw,40px);top:-11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink);
  background:var(--ny);border-radius:var(--r-pill);padding:3px 10px;margin:0;
}

.res-plank--lead{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,3.4vw,46px);
  background:linear-gradient(160deg,rgba(225,255,1,.16),rgba(246,244,236,0) 62%),var(--surface);
}
.res-plank--lab{max-width:660px}

.res-card-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s3);
}
.res-card-title{margin:0;max-width:20ch}
.res-card-title--sm{max-width:22ch}
.res-card-link{text-decoration:none;background-image:linear-gradient(var(--ny),var(--ny));
  background-repeat:no-repeat;background-size:0 8px;background-position:0 88%;
  transition:background-size .4s cubic-bezier(.2,.7,.2,1)}
.res-plank:hover .res-card-link{background-size:100% 8px}
/* the title link covers the whole plank, so any click on the card opens the study.
   Buttons and links inside the card sit above that overlay. */
.res-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);z-index:1}
.res-card-cta,.res-more{position:relative;z-index:2}
.res-card-cta{margin-top:var(--s4)}
.res-card-blurb{margin:var(--s4) 0 0;color:var(--ink-soft);max-width:48ch}
.res-card-meta{
  margin:var(--s4) 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.res-more{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s5);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--ny);padding-bottom:5px;min-height:24px;
  transition:gap .25s ease;
}
.res-more:hover{gap:16px}

/* the three pull-out figures */
.res-figures{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.res-fig{background:var(--bg);padding:18px 20px}
.res-fig-n{
  font-family:var(--head);font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin:0;color:var(--ink);
}
.res-fig-k{margin:10px 0 0;font-size:var(--fs-small);font-weight:300;line-height:1.5;color:var(--ink-soft)}

/* ------------------------------------------------ responsive */

@media (max-width:1080px){
  .res-plank--lead{grid-template-columns:minmax(0,1fr)}
  .res-figures{flex-direction:row;flex-wrap:wrap}
  .res-fig{flex:1 1 220px}
}
@media (max-width:960px){
  .res-hero-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s5)}
  .res-h1{max-width:20ch}
}
@media (max-width:820px){
  .res-shelf{grid-template-columns:minmax(0,1fr)}
  .res-spine{display:none}
  .res-plank::before{display:none}
  .res-planks{gap:var(--s6)}
  .res-figures{flex-direction:column}
  .res-plank--lab{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .res-spine-mark,.res-card-link,.res-more,.res-plank{transition:none}
}