/* ============================================================
   sector.css — layout for the per-sector article pages
   Relies on styles.css for :root tokens, fonts, .logo, .btn, .reveal
   ============================================================ */

/* ---------- Nav (light, sits over dark hero + dark body) ---------- */
.sp-nav{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,5vw,56px);transition:padding .4s,background .4s,backdrop-filter .4s}
.sp-nav.scrolled{padding:14px clamp(20px,5vw,56px);background:rgba(10,8,5,.55);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sp-nav__brand{display:flex;align-items:center;color:var(--ink)}
.sp-nav__brand .logo{height:21px}
.sp-nav__right{display:flex;align-items:center;gap:26px}
.sp-nav__back{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s}
.sp-nav__back:hover{color:var(--ink)}
.sp-nav__cta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);
  border:1px solid var(--line);padding:9px 18px;border-radius:40px;transition:.3s}
.sp-nav__cta:hover{background:var(--gold);color:#1a1408;border-color:var(--gold)}
@media(max-width:680px){.sp-nav__back{display:none}}

/* ---------- Hero banner ---------- */
.sp-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden}
.sp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(1.05)}
.sp-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,5,.45) 0%,rgba(10,8,5,.1) 40%,rgba(10,8,5,.9) 100%)}
.sp-hero__inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(20px,5vw,56px) clamp(40px,6vw,72px)}
.sp-breadcrumb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:22px}
.sp-breadcrumb a{color:var(--gold)}
.sp-breadcrumb a:hover{color:var(--gold-soft)}
.sp-hero__no{font-family:var(--display);font-weight:300;font-size:clamp(14px,1.4vw,18px);letter-spacing:.3em;color:var(--gold)}
.sp-hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(48px,10vw,140px);line-height:.95;margin:6px 0 18px}
.sp-hero__intro{max-width:620px;font-size:clamp(15px,1.5vw,19px);line-height:1.7;color:var(--ink);opacity:.85;font-weight:300}
.sp-hero__meta{margin-top:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}

/* ---------- Article sections ---------- */
.sp-wrap{max-width:1240px;margin:0 auto;padding:clamp(60px,8vw,110px) clamp(20px,5vw,56px)}
.sp-secthead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:46px}
.sp-secthead h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(18px,2vw,26px)}
.sp-secthead span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* Lead (first article, large) */
.sp-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(50px,7vw,90px)}
.sp-lead__media{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:16/11;background:var(--bg-2)}
.sp-lead__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1);filter:brightness(.9)}
.sp-lead:hover .sp-lead__media img{transform:scale(1.05)}
.sp-lead__k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.sp-lead__t{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.04;margin:14px 0 16px;letter-spacing:-.01em}
.sp-lead__e{color:var(--ink-dim);font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:46ch}
.sp-lead__read{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);border-bottom:1px solid var(--line);padding-bottom:6px;transition:.3s}
.sp-lead__read:hover{color:var(--ink);border-color:var(--gold)}
@media(max-width:820px){.sp-lead{grid-template-columns:1fr}}

/* Grid of remaining articles */
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,38px)}
.sp-card{display:block;cursor:pointer;group:card}
.sp-card__media{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--bg-2);margin-bottom:18px}
.sp-card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.86);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s}
.sp-card:hover .sp-card__media img{transform:scale(1.06);filter:grayscale(0) brightness(.98)}
.sp-card__k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.sp-card__t{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.7vw,25px);line-height:1.12;margin:9px 0 10px}
.sp-card__e{color:var(--ink-dim);font-weight:300;font-size:14px;line-height:1.65}
@media(max-width:820px){.sp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sp-grid{grid-template-columns:1fr}}

/* ---------- Other sectors strip ---------- */
.sp-more{border-top:1px solid var(--line);margin-top:clamp(60px,8vw,110px);padding-top:46px}
.sp-more h3{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.sp-more__row{display:flex;flex-wrap:wrap;gap:14px 34px}
.sp-more__row a{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.8vw,24px);
  color:var(--ink-dim);transition:color .3s;letter-spacing:.01em}
.sp-more__row a:hover{color:var(--ink)}

/* ---------- Footer ---------- */
.sp-footer{border-top:1px solid var(--line);padding:clamp(40px,6vw,70px) clamp(20px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sp-footer .logo{height:34px;color:var(--ink)}
.sp-footer__legal{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}