/* Ring Energy — AI governance assessment. Five slides, their brand.
   Built on the same discipline as The SETT Signal: one idea per slide,
   sources behind a reveal, nothing on the face that is not needed. */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; font-synthesis:none; }
html { overflow-x:clip; scroll-behavior:smooth; scroll-snap-type:y proximity; }
img,svg { max-width:100%; height:auto; display:block; }
button { font:inherit; color:inherit; }

body {
  font-family: var(--font-body); font-size:17px; line-height:1.6;
  color: var(--text); background: var(--bg); -webkit-font-smoothing:antialiased;
}

h1,h2 { font-family: var(--font-display); font-weight:400; line-height:1.12;
        letter-spacing:-.01em; color: var(--text-hi); }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); }
h3 { font-family: var(--font-sub); font-weight:700; font-size:1.05rem;
     letter-spacing:.01em; color: var(--text-hi); }
p { max-width: 62ch; }
a { color: var(--primary); }

.shell { width: min(var(--shell), 100% - var(--gutter)*2); margin-inline:auto; }

.slide { min-height:100svh; scroll-snap-align:start; display:grid; align-content:center;
         padding-block: var(--s8); position:relative; }
.slide + .slide { border-top:1px solid var(--rule); }
.tag { font-family: var(--font-sub); font-size:.72rem; letter-spacing:.2em;
       text-transform:uppercase; color: var(--primary); font-weight:700; }
.lede { font-size:1.15rem; color: var(--text); max-width:56ch; }
.small { font-size:.9rem; color: var(--text-mute); }

/* ---- cover: their navy, their gradient ---- */
.cover { background: var(--bg-deep); color: var(--white); }
.cover h1, .cover .lede { color: var(--white); }
.cover .tag { color: var(--rei-green-lt); }
.cover .mark { height:64px; width:auto; margin-bottom: var(--s7); }
.cover .rule { height:4px; width:120px; background: var(--rei-accent-grad);
               margin: var(--s6) 0; border-radius:2px; }
.cover .meta { font-family: var(--font-sub); font-size:.8rem; letter-spacing:.16em;
               text-transform:uppercase; color: rgba(255,255,255,.6); }

/* ---- the eight checks ---- */
.checks { display:grid; gap:0; margin-top: var(--s6); border-top:1px solid var(--rule); }
.check { display:grid; grid-template-columns: 2.2rem 1fr auto; gap: var(--s4);
         align-items:baseline; padding-block: var(--s4);
         border-bottom:1px solid var(--rule); }
.check .n { font-family: var(--font-sub); font-size:.8rem; color: var(--text-mute); }
.check .what { font-size:1rem; color: var(--text-hi); }
.check .what small { display:block; color: var(--text-mute); font-size:.85rem;
                     margin-top:.15rem; max-width:52ch; }
.check .verdict { font-family: var(--font-sub); font-weight:700; font-size:.76rem;
                  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.v-yes  { color: var(--ok); }
.v-part { color: var(--part); }
.v-no   { color: var(--none); }

.tally { display:flex; gap: var(--s6); flex-wrap:wrap; margin-top: var(--s6);
         padding-top: var(--s5); border-top:2px solid var(--rule); }
.tally div { display:grid; gap:.2rem; }
.tally .n2 { font-family: var(--font-display); font-size:2.6rem; line-height:1; }
.tally .l2 { font-family: var(--font-sub); font-size:.72rem; letter-spacing:.16em;
             text-transform:uppercase; color: var(--text-mute); }

/* ---- three reads ---- */
.reads { display:grid; gap: var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
         margin-top: var(--s7); }
.read { border-top:3px solid var(--primary); padding-top: var(--s4); }
.read:nth-child(2) { border-top-color: var(--rei-teal); }
.read:nth-child(3) { border-top-color: var(--rei-green); }
.read h3 { margin-bottom: var(--s3); }
.read p { font-size:.95rem; color: var(--text); }

/* ---- sector cards ---- */
.cases { display:grid; gap: var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
         margin-top: var(--s6); }
.case { background: var(--bg-soft); border-radius: var(--r-md); padding: var(--s5); }
.case .big { font-family: var(--font-display); font-size:2rem; color: var(--primary);
             line-height:1; margin-bottom: var(--s3); }
.case p { font-size:.92rem; }
.case .who { font-family: var(--font-sub); font-size:.72rem; letter-spacing:.14em;
             text-transform:uppercase; color: var(--text-mute); margin-top: var(--s3); }

/* ---- the offer ---- */
.steps { display:grid; gap: var(--s4); margin-top: var(--s6); }
.step2 { display:grid; grid-template-columns:auto 1fr; gap: var(--s4); align-items:start; }
.step2 .dot { width:30px; height:30px; border-radius:50%; background: var(--rei-accent-grad);
              display:grid; place-items:center; font-family:var(--font-sub);
              font-size:.78rem; color:var(--white); font-weight:700; }

/* ---- sources: present, but behind a reveal so the front stays clean ---- */
details.src { margin-top: var(--s7); border-top:1px solid var(--rule); padding-top: var(--s4); }
details.src summary { cursor:pointer; font-family: var(--font-sub); font-size:.76rem;
                      letter-spacing:.16em; text-transform:uppercase; color: var(--primary);
                      list-style:none; }
details.src summary::-webkit-details-marker { display:none; }
details.src summary::before { content:'▸ '; }
details.src[open] summary::before { content:'▾ '; }
details.src ol { margin-top: var(--s4); padding-left:1.2rem; }
details.src li { font-size:.82rem; color: var(--text-mute); margin-bottom:.5rem;
                 line-height:1.5; word-break:break-word; }

.foot { padding-block: var(--s6); border-top:1px solid var(--rule);
        font-size:.8rem; color: var(--text-mute); }
.nav { position:fixed; right: var(--gutter); top:50%; translate:0 -50%; z-index:20;
       display:grid; gap:9px; }
.nav a { width:8px; height:8px; border-radius:50%; background: var(--rule); display:block;
         transition: background .3s var(--ease), transform .3s var(--ease); }
.nav a[aria-current] { background: var(--primary); transform:scale(1.5); }
@media (max-width:900px){ .nav{display:none} }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; scroll-snap-type:none; } }