/* Front page: the original airy editorial layout, tuned for legibility. */
.hero {
  overflow:hidden;
  background:radial-gradient(ellipse at 84% 38%,var(--tint),transparent 60%),var(--background);
  border-bottom:1px solid var(--line);
  padding:70px 0 76px
}
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,65px); align-items:center }
.hero-copy { min-width:0 }
.hero-kicker { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.2px; margin-bottom:28px }
.red-dot { display:block; width:7px; height:7px; flex:none; border-radius:50%; background:var(--primary) }
.typewriter { display:inline-grid; min-width:0 }
.typewriter-sizer,.typewriter-ink { grid-area:1/1 }
.typewriter-sizer { visibility:hidden }
.typewriter-ink.typing:after { content:""; display:inline-block; height:1em; margin-left:3px; border-right:1px solid currentColor; vertical-align:-.2em; animation:caret 1s steps(1) infinite }
@keyframes caret { 50% { border-color:transparent } }
.hero h1 { font-size:clamp(43px,4.4vw,64px); line-height:1.13; letter-spacing:-.055em; margin:0 0 25px }
.hero h1 span { color:var(--primary) }
.hero-copy>p { max-width:470px; font-size:16px; line-height:1.85; margin:0 }
.hero-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.hero-buttons .button { border-radius:9px; padding:13px 19px; font-size:12px; gap:13px }
.hero .button.ghost { background:var(--surface-soft); color:var(--text) }
.hero .button.ghost:hover,.hero .button.ghost:focus-visible { background:var(--primary); color:#fff }
.hero-footnote { display:flex; align-items:center; gap:12px; margin-top:32px; color:var(--muted); font-size:11px; line-height:1.5 }
.mini-logo { display:grid; place-items:center; width:40px; height:40px; padding:4px; border:1px solid var(--line); border-radius:50%; background:white; flex:none }
.mini-logo img { width:100%; height:100%; object-fit:contain }
.hero-art { position:relative; min-width:0; padding:0 12px 19px 0 }
.hero-image { position:relative; height:490px; overflow:hidden; border-radius:90px 22px 22px 22px; background:var(--surface-soft); box-shadow:0 20px 40px #20101010 }
.hero-image>img { width:100%; height:100%; object-fit:cover; object-position:64% center }
.hero-image:after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,#191819a8) }
.hero-slider:after { display:none!important }
.photo-label { position:absolute; top:16px; right:16px; z-index:2; border-radius:20px; padding:6px 10px; color:white; background:#171717a8; font-size:10px }
.image-caption { position:absolute; z-index:2; left:34px; bottom:73px; color:white }
.image-caption>span { display:block; margin-bottom:9px; font-size:10px; letter-spacing:1.5px; font-weight:750 }
.image-caption strong { font-size:30px; line-height:1.18; letter-spacing:-.035em }

/* --- Continuous Hero Slider Stream --- */
.hero-slider { position:relative; height:490px; overflow:hidden; border-radius:90px 22px 22px 22px; background:#171415; box-shadow:0 24px 50px rgba(45,15,20,.16); user-select:none; -webkit-user-select:none; touch-action:pan-y; outline:none }
.slider-header-bar { display:none!important }
.slider-progress-group { display:none!important }
.slider-nav-arrows { display:none!important }

.hero-slider-track { display:flex; width:100%; height:100%; will-change:transform }
.hero-slide { flex:0 0 100%; width:100%; min-width:100%; height:100%; position:relative; overflow:hidden }
.slide-photo { width:100%; height:100%; object-fit:cover; object-position:62% center; transform:scale(1.0); transition:transform 3s cubic-bezier(.25,1,.5,1); will-change:transform; user-select:none; pointer-events:none }
.hero-slide.is-active .slide-photo { transform:scale(1.04) }
.slide-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,12,14,.35) 0%,rgba(16,12,14,.02) 30%,rgba(16,12,14,.35) 60%,rgba(16,12,14,.82) 86%,rgba(16,12,14,.92) 100%); pointer-events:none }

.hero-slide .image-caption { position:absolute; z-index:4; left:34px; bottom:84px; color:#ffffff; pointer-events:none; max-width:calc(100% - 60px) }
.caption-kicker { display:inline-block; font-size:10px; font-weight:800; letter-spacing:2px; color:#ffb4b4; margin-bottom:9px; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity .3s ease .1s,transform .3s cubic-bezier(.16,1,.3,1) .1s }
.caption-title { display:block; font-size:30px; line-height:1.18; letter-spacing:-.035em; font-weight:800; color:#ffffff; text-shadow:0 2px 18px rgba(0,0,0,.5); opacity:0; transform:translateY(10px); transition:opacity .32s ease .15s,transform .32s cubic-bezier(.16,1,.3,1) .15s }
.hero-slide.is-active .caption-kicker,.hero-slide.is-active .caption-title { opacity:1; transform:translateY(0) }

.glass-badge {
  position:absolute; z-index:3; bottom:0; left:-24px; right:52px;
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border:0; border-radius:15px;
  box-shadow:0 12px 28px #16161617
}
.glass-badge .icon-box { width:42px; height:42px; flex:none }
.glass-badge strong { display:block; font-size:12px; line-height:1.4; margin-bottom:2px }
.glass-badge div>span { font-size:10px; color:var(--muted) }
.quick-section { background:var(--surface); border-bottom:1px solid var(--line) }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:25px 0 }
.quick-grid>a { display:flex; align-items:center; gap:14px; min-width:0; padding:4px 20px; border-right:1px solid var(--line) }
.quick-grid>a:first-child { padding-left:0 }
.quick-grid>a:last-child { padding-right:0; border:0 }
.quick-icon { color:var(--link); flex:none }
.quick-grid>a>svg { margin-left:auto; color:var(--muted) }
.quick-grid h3 { font-size:13px; letter-spacing:-.01em; margin:0 0 2px }
.quick-grid p { font-size:12px; line-height:1.5; margin:0 }
.quick-grid>a:hover h3 { color:var(--link) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:7%; align-items:start }
.about-grid h2 { font-size:clamp(28px,2.6vw,39px); line-height:1.35 }
.about-grid .muted { color:var(--muted) }
.about-grid .lead { font-size:17px; line-height:1.8; color:var(--text) }
.about-grid p:not(.lead) { font-size:14px; line-height:1.85 }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; border:0; padding:0 }
.section-heading:after { display:none }
.section-heading h2 { font-size:31px; margin:0 }
.section-heading .eyebrow { margin-bottom:8px }
.committee-section { background:var(--surface-soft); border-block:1px solid var(--line) }
.feature-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px }
.feature-card {
  display:flex; flex-direction:column; min-width:0; min-height:300px; padding:29px;
  border:0; border-radius:17px; background:var(--surface);
  box-shadow:0 5px 18px #00000009;
  transition:transform .2s,background-color .2s,color .2s,box-shadow .2s
}
.feature-card:hover,.feature-card:focus-visible {
  transform:translateY(-3px); background:var(--primary); color:#fff;
  box-shadow:0 13px 27px #9d11112b
}
.feature-card h3 { font-size:24px; margin:19px 0 10px; line-height:1.27 }
.feature-card p { font-size:13px; line-height:1.75; margin:0; color:var(--muted); transition:color .2s }
.feature-card:hover p,.feature-card:focus-visible p { color:#fff }
.feature-card .icon-box { transition:background-color .2s,color .2s }
.feature-card:hover .icon-box,.feature-card:focus-visible .icon-box { background:#ffffff26; color:#fff }
.feature-main { background:var(--surface); color:var(--text) }
.feature-number { font-size:29px; font-weight:600; line-height:1 }
.feature-main .feature-number { color:var(--link); transition:color .2s }
.feature-main:hover .feature-number,.feature-main:focus-visible .feature-number { color:#fff }
.feature-number small { font-size:10px; letter-spacing:1px; font-weight:800; opacity:.85 }
.round-arrow { display:flex; align-items:center; justify-content:flex-end; width:39px; height:39px; margin-top:auto; margin-left:auto; color:var(--link); transition:color .2s }
.feature-main:hover .round-arrow,.feature-main:focus-visible .round-arrow { color:#fff }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; font-size:10px; letter-spacing:.7px; font-weight:800 }
.committee-section .source-note { margin-bottom:0; font-size:11px }
.document-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.document-card { border:0; border-radius:13px; background:var(--surface); padding:21px; min-height:117px; box-shadow:0 5px 18px #00000009 }
.document-card h3 { font-size:15px; margin:5px 0 5px }
.document-card p { font-size:13px; margin:0; line-height:1.6 }
.document-card .mini-label { font-size:10px }
.updates-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:7%; padding-bottom:75px }
.updates-grid h2 { font-size:30px }
.quiet-state { display:flex; gap:18px; align-items:flex-start; border-block:1px solid var(--line); padding:30px 0; margin:25px 0 }
.quiet-state>svg { color:var(--link); flex:none; margin-top:2px }
.quiet-state h3 { font-size:16px; margin:0 0 8px }
.quiet-state p { font-size:13px; line-height:1.75; margin:0 }
.news-brief { margin:0; border-top:0; padding:17px 0 }
.news-brief:first-of-type { border-top:1px solid var(--line) }
.news-brief h3 { margin:5px 0 }
.news-brief h3 a:hover { color:var(--link) }
.protocol-card { background:var(--surface-soft); border:0; border-radius:18px; padding:33px }
.protocol-card h3 { color:var(--link); font-size:30px; line-height:1.25 }
.protocol-card h3 span { color:var(--text) }
.protocol-card p { font-size:13px; line-height:1.85 }
.protocol-card .source-note { font-size:11px }
.membership-wrap { padding-bottom:75px }
.membership-banner {
  display:flex; align-items:center; justify-content:space-between; gap:35px;
  padding:37px 45px; border-radius:17px; background:var(--surface); color:var(--text);
  border:0; box-shadow:0 5px 18px #00000009
}
.membership-banner .eyebrow { color:var(--link); margin-bottom:8px }
.membership-banner h2 { font-size:30px; margin-bottom:6px }
.membership-banner p { color:var(--muted); margin:0; font-size:13px }
.membership-banner .button { border-radius:9px; white-space:nowrap }
html[data-theme=dark] .hero { background:radial-gradient(ellipse at 85% 40%,#352225,transparent 60%),var(--background) }
html[data-theme=dark] .hero h1 span { color:#ff8585 }
html[data-theme=dark] .hero .button.ghost { background:var(--surface-soft) }
html[data-theme=dark] .hero .button.ghost:hover,html[data-theme=dark] .hero .button.ghost:focus-visible { background:var(--primary) }
@media(max-width:1050px) {
  .hero { padding:52px 0 60px }
  .hero h1 { font-size:clamp(38px,4.7vw,52px) }
  .hero-image { height:430px }
  .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 0 }
  .quick-grid>a:nth-child(2) { border-right:0 }
  .quick-grid>a:nth-child(3) { padding-left:0 }
  .feature-grid { gap:12px }
  .feature-card { padding:22px }
  .feature-card h3 { font-size:21px }
}
@media(max-width:700px) {
  .hero { padding:38px 0 43px }
  .hero-grid { grid-template-columns:1fr; gap:34px }
  .hero-kicker { font-size:9px; letter-spacing:.5px; margin-bottom:22px }
  .hero h1 { font-size:clamp(37px,9vw,49px); letter-spacing:-.05em }
  .hero-copy>p { font-size:14px; line-height:1.8 }
  .hero-buttons { margin-top:24px }
  .hero-buttons .button { padding:12px 14px; font-size:11px }
  .hero-footnote { margin-top:22px }
  .hero-art { padding:0 0 17px 10px }
  .hero-image { height:355px; border-radius:58px 18px 18px 18px }
  .hero-slider { height:360px; border-radius:58px 18px 18px 18px }
  .slider-header-bar { top:14px; left:16px; right:14px }
  .slider-progress-group { max-width:130px }
  .slider-counter { font-size:10px; padding:3px 8px }
  .slider-header-meta .photo-label { font-size:9px; padding:3px 8px }
  .hero-slide .image-caption { bottom:78px; left:20px; max-width:calc(100% - 105px) }
  .caption-title { font-size:23px }
  .caption-kicker { font-size:9px; letter-spacing:1.5px; margin-bottom:5px }
  .slider-nav-arrows { right:14px; bottom:74px; gap:6px }
  .slider-arrow-btn { width:34px; height:34px }
  .image-caption { bottom:77px; left:23px }
  .image-caption strong { font-size:27px }
  .glass-badge { left:0; right:20px; padding:13px 15px }
  .quick-grid { padding:21px 0; gap:16px 0 }
  .quick-grid>a { padding:5px 9px; gap:9px }
  .quick-grid>a>svg { display:none }
  .quick-grid h3 { font-size:11px }
  .quick-grid p { font-size:9px }
  .quick-icon svg { width:21px; height:21px }
  .about-grid,.updates-grid { grid-template-columns:1fr; gap:18px }
  .about-grid h2 { font-size:30px }
  .about-grid .lead { font-size:15px }
  .section-heading { align-items:start; flex-direction:column; gap:10px }
  .section-heading h2 { font-size:27px }
  .feature-grid { grid-template-columns:1fr; gap:12px }
  .feature-card { min-height:225px; padding:25px }
  .feature-main { min-height:280px }
  .feature-card h3 { font-size:23px }
  .document-grid { grid-template-columns:1fr }
  .document-card { min-height:0; padding:18px }
  .updates-grid { padding-bottom:52px }
  .membership-wrap { padding-bottom:50px }
  .membership-banner { flex-direction:column; align-items:start; padding:27px; gap:20px }
  .membership-banner h2 { font-size:26px }
  .membership-banner .button { width:100% }
}
@media(max-width:380px) {
  .hero-kicker { font-size:8px }
  .hero h1 { font-size:35px }
  .hero-image { height:310px }
  .hero-slider { height:320px }
  .slider-progress-group { max-width:90px }
  .caption-title { font-size:19px }
  .glass-badge { right:5px }
  .glass-badge strong { font-size:11px }
  .glass-badge div>span { font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
  .typewriter-ink.typing:after { animation:none }
  .feature-card { transition:none }
  .hero-slider-track { transition:none!important }
  .slide-photo { transition:none!important; transform:none!important }
  .slider-progress-segment.is-active .progress-bar-fill { animation:none!important }
  .caption-kicker, .caption-title { transition:none!important; opacity:1!important; transform:none!important }
}

