/* IRGF landing page — shares the documentation palette, standalone layout */

:root{
  --bg:#ffffff; --bg-alt:#f6f8fb; --bg-sink:#eef2f7;
  --fg:#14202c; --fg-soft:#4a5768; --fg-mute:#6b7a8c;
  --line:#dde5ee; --line-soft:#e9eff5;
  --accent:#2f5d8c; --accent-soft:#e7f0f9; --accent-ink:#1b3f63;
  --warn:#8a6d1f; --warn-bg:#fdf6d8; --warn-line:#e6cf8a;
  --radius:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#12181f; --bg-alt:#171f28; --bg-sink:#1c2530;
  --fg:#e6edf4; --fg-soft:#b3c1d0; --fg-mute:#8496a8;
  --line:#2a3542; --line-soft:#222c37;
  --accent:#7fb3e0; --accent-soft:#1b2b3a; --accent-ink:#a8cdec;
  --warn:#e3c375; --warn-bg:#2b2617; --warn-line:#4d431f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.012em}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

.wrap{max-width:1080px; margin:0 auto; padding:0 1.6rem}

/* ---------------- header ---------------- */
header.site{
  position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
header.site .wrap{display:flex; align-items:center; gap:1.2rem; height:60px}
.logo{display:flex; align-items:baseline; gap:.55rem; margin-right:auto}
.logo .mark{font-weight:800; font-size:1.2rem; letter-spacing:.06em; color:var(--accent-ink)}
.logo .sub{font-size:.76rem; color:var(--fg-mute); letter-spacing:.02em}
header.site nav{display:flex; align-items:center; gap:1.25rem}
header.site nav a{font-size:.87rem; color:var(--fg-soft)}
header.site nav a:hover{color:var(--accent); text-decoration:none}
.themetoggle{
  border:1px solid var(--line); background:var(--bg-alt); color:var(--fg-soft);
  border-radius:8px; width:2rem; height:2rem; cursor:pointer; font-size:.9rem; line-height:1;
}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:inline}
@media (max-width:760px){
  header.site nav a.hide-sm{display:none}
  .logo .sub{display:none}
  header.site nav{gap:1rem}
  header.site nav a{font-size:.85rem}
  header.site .wrap{gap:.8rem}
}

/* ---------------- hero ---------------- */
.hero{padding:3.6rem 0 2.4rem; border-bottom:1px solid var(--line-soft)}
.eyebrow{
  display:inline-block; font-size:.73rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:.3rem .65rem; border-radius:999px; margin-bottom:1rem;
}
.hero h1{font-size:2.65rem; line-height:1.12; margin:0 0 .3rem; font-weight:780}
.hero .expand{font-size:1.05rem; color:var(--fg-mute); margin:0 0 1.1rem; letter-spacing:.01em}
.hero .lede{font-size:1.13rem; color:var(--fg-soft); max-width:64ch; margin:0 0 1.7rem}
.btns{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.btn{
  display:inline-block; padding:.62rem 1.15rem; border-radius:8px; font-size:.94rem;
  font-weight:600; border:1px solid var(--accent);
}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn.ghost{color:var(--accent); background:transparent}
.btn.ghost:hover{background:var(--accent-soft)}
html[data-theme="dark"] .btn.primary{color:#0f1720}
html[data-theme="dark"] .btn.primary:hover{background:var(--accent-ink); color:#0f1720}
.factline{margin:1.3rem 0 0; font-size:.85rem; color:var(--fg-mute)}
.factline b{color:var(--fg-soft); font-weight:650}

/* ---------------- generic sections ---------------- */
section{padding:3rem 0; border-bottom:1px solid var(--line-soft)}
section[id],div[id]{scroll-margin-top:74px}
section > .wrap > h2{
  font-size:1.55rem; margin:0 0 .5rem; font-weight:740;
}
section .kicker{
  font-size:.73rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg-mute); margin:0 0 .5rem;
}
section .intro{color:var(--fg-soft); max-width:66ch; margin:0 0 1.8rem}

.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.2rem}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.4rem}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem 1.25rem;
  background:var(--bg-alt);
}
.card h3{margin:0 0 .4rem; font-size:1rem; color:var(--accent-ink)}
.card p{margin:0; font-size:.91rem; color:var(--fg-soft)}
.card p + p{margin-top:.6rem}
a.card{display:block}
a.card:hover{border-color:var(--accent); text-decoration:none}

/* status band */
.status{background:var(--warn-bg); border-bottom:1px solid var(--warn-line)}
.status .wrap{display:flex; gap:1.1rem; align-items:flex-start; padding-top:1.4rem; padding-bottom:1.4rem}
.status .dot{
  flex:0 0 auto; margin-top:.35rem; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--warn);
}
.status h2{font-size:1.02rem; margin:0 0 .3rem; color:var(--warn)}
.status p{margin:0; font-size:.93rem; color:var(--fg-soft); max-width:78ch}
.status p + p{margin-top:.5rem}

/* framework figure */
.figrow{display:grid; grid-template-columns:1.05fr .95fr; gap:1.8rem; align-items:center}
@media (max-width:860px){ .figrow{grid-template-columns:1fr} }
.figrow img{
  width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; padding:.6rem;
}
.speclist{list-style:none; margin:0; padding:0}
.speclist li{
  padding:.6rem 0 .6rem 6rem; text-indent:-6rem;
  border-bottom:1px solid var(--line-soft); font-size:.93rem; color:var(--fg-soft);
}
.speclist li.plain{padding-left:0; text-indent:0}
.speclist li:last-child{border-bottom:0}
.speclist b{color:var(--fg); font-weight:660}
.speclist .tag{
  display:inline-block; min-width:5.4rem; font-family:var(--mono); font-size:.75rem;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:5px;
  padding:.08rem .4rem; margin-right:.6rem;
}

/* the seventeen questions */
.qgrid{
  columns:2; column-gap:2.4rem; margin:0; padding:0 0 0 1.3rem;
  font-size:.93rem; color:var(--fg-soft);
}
.qgrid li{margin:.42rem 0; break-inside:avoid}
@media (max-width:720px){ .qgrid{columns:1} }

/* contribute */
.asks{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.1rem; margin-bottom:1.8rem}
.ask{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.15rem; background:var(--bg)}
.ask h3{margin:0 0 .35rem; font-size:.98rem}
.ask p{margin:0 0 .6rem; font-size:.9rem; color:var(--fg-soft)}
.ask .send{font-size:.85rem; font-weight:600}
.ask.wanted{border-left-color:var(--warn)}

.checklist{margin:.4rem 0 0; padding-left:1.25rem; font-size:.93rem; color:var(--fg-soft)}
.checklist li{margin:.3rem 0}

/* faq */
details.faq{
  border-bottom:1px solid var(--line-soft); padding:.85rem 0;
}
details.faq summary{
  cursor:pointer; font-weight:640; font-size:.98rem; list-style:none;
  display:flex; align-items:flex-start; gap:.6rem;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+"; color:var(--accent); font-weight:700; line-height:1.5}
details.faq[open] summary::before{content:"\2013"}
details.faq p{margin:.6rem 0 .2rem 1.2rem; font-size:.93rem; color:var(--fg-soft); max-width:74ch}

/* contact */
.contact{background:var(--bg-alt)}
.contact .mailbig{
  display:inline-block; font-size:1.18rem; font-weight:700; margin:.3rem 0 .9rem;
}
.cite{
  font-family:var(--mono); font-size:.82rem; background:var(--bg-sink); color:var(--fg-soft);
  border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem;
  max-width:74ch; line-height:1.6;
}

footer.site{padding:2rem 0 3rem; font-size:.85rem; color:var(--fg-mute)}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between}
footer.site a{color:var(--fg-soft)}

@media (max-width:640px){
  .hero h1{font-size:2.05rem}
  .hero{padding-top:2.6rem}
  section{padding:2.3rem 0}
}
@media print{
  header.site,.themetoggle,.btns{display:none}
  body{font-size:11pt}
  section{border:0; padding:1rem 0}
}