/* ==========================================================================
   FANG FUTURES — Why better matters
   An index page: the offering pages' heading over the rolling field, then the
   evidence as a full-bleed grid of uniform cards, newest first. Chrome is
   shared; the field is the home's, fixed behind everything.
   ========================================================================== */

/* --- the field, behind the whole page ---------------------------------------- */
.o-field{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:none;opacity:0}
html.motion .o-field{display:block;opacity:1}
html.motion .w-hero,html.motion .w-body{background:transparent}

/* --- hero: the offering pages' head, title on the left ---------------------------- */
.w-hero{position:relative;z-index:1;background:var(--bg);color:var(--fg1);min-height:60svh;display:grid;align-content:center;padding:140px var(--container-gutter) 72px}
.w-hero-inner{max-width:var(--container-max);margin-inline:auto;width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,120px)}
.w-hero-head{display:grid;gap:var(--space-5);justify-items:start}
.o-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);margin-bottom:var(--space-4)}
.o-crumb li{display:flex;align-items:center;gap:12px}
.o-crumb li+li::before{content:"";width:14px;height:1px;background:currentColor;opacity:.5}
.o-crumb a:hover,.o-crumb a:focus-visible{color:var(--fg1)}
.o-crumb [aria-current]{color:var(--fg1)}
.w-title{font-size:clamp(3rem,8.4vw,8rem);max-width:100%}
.w-title .line-mask{display:block;padding:.06em .04em .12em;margin:-.06em -.04em -.12em}

/* --- body: divider, then the grid ------------------------------------------------ */
.w-body{position:relative;z-index:1;background:var(--bg);color:var(--fg1);padding:0 var(--container-gutter) clamp(96px,14vh,160px)}
.w-divider{margin-bottom:clamp(28px,4vh,44px)}

/* the cards: one anatomy, every card the same */
.src-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.src{border-radius:var(--radius-soft);display:flex;flex-direction:column;gap:var(--space-4);padding:clamp(22px,2.2vw,30px);border:1px solid var(--hairline-strong);background:var(--bg);color:var(--fg1);text-decoration:none;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.src[hidden]{display:none}
.src-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);padding-bottom:12px;border-bottom:1px solid var(--hairline);transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.src-date{white-space:nowrap;color:var(--accent)}
.src-sum{font-weight:400;font-size:clamp(17px,1.25vw,19px);line-height:1.55;color:var(--fg1);text-wrap:pretty}
/* hover: the card floods Signal, everything on it goes white — as the offering cards do */
.src:hover,.src:focus-visible{background:var(--signal-orange);border-color:var(--signal-orange);color:var(--white)}
.src:hover .src-meta,.src:focus-visible .src-meta,.src:hover .src-date,.src:focus-visible .src-date{color:var(--white);border-color:rgba(255,255,255,.5)}
.src:hover .src-sum,.src:focus-visible .src-sum{color:var(--white)}

/* --- still field for screens that do not run the canvas ------------------------- */
@media (max-width:899px), (prefers-reduced-motion:reduce){
  .o-field{display:block;opacity:1;background:url(img/field-light-wide.svg) no-repeat center/cover}
  .w-hero,.w-body{background:transparent}
}
@media (max-width:899px){
  .o-field{background-image:url(img/field-light.svg)}
}

/* --- responsive ------------------------------------------------------------------- */
@media (max-width:1100px){
  .src-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .w-hero{padding:120px var(--container-gutter) 56px;min-height:0}
  .w-hero-inner{grid-template-columns:1fr}
  .src-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .w-divider{flex-direction:column;gap:6px}
  .o-crumb li:first-child{display:none}
  .o-crumb li:nth-child(2)::before{display:none}
}