/* ============================================================ SHARED WATERS — design system Palette, type and signature elements per project plan §3. ============================================================ */ :root{ --ink:#0E1B22; /* deep water ink */ --abyss:#0A1114; /* below-the-waterline */ --paper:#ECF1EF; /* glacial paper */ --paper-2:#E2EAE7; --river:#3D7EA6; /* surface water */ --river-lt:#8FB9CF; --sandstone:#C79554; /* aquifer rock */ --sandstone-dp:#8A5F2E; --line:rgba(14,27,34,.16); --line-dk:rgba(236,241,239,.14); /* cooperation scale: high tension -> strong cooperation */ --c1:#A6402F; --c2:#C07A3F; --c3:#A9A48A; --c4:#5E8F6C; --c5:#1F6E58; --nodata:#6E7A7D; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:"Newsreader",Georgia,serif; font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} ::selection{background:var(--river);color:#fff} .mono{font-family:"IBM Plex Mono",monospace} a{color:inherit} img,video{max-width:100%;display:block} :focus-visible{outline:2px solid var(--sandstone);outline-offset:3px} /* ---------- NAV ---------- */ .sw-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:18px;padding:14px 28px;background:rgba(236,241,239,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);transition:background .4s,border-color .4s} .sw-nav.on-dark{background:rgba(10,17,20,.55);border-color:rgba(236,241,239,.1)} .sw-nav.on-dark .brand,.sw-nav.on-dark .navlinks a{color:var(--paper)} .brand{font-family:"Besley",serif;font-weight:700;font-size:17px;letter-spacing:.02em;text-decoration:none; display:flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap} .brand .tick{width:22px;height:14px;display:inline-block;flex:none} .navlinks{display:flex;gap:24px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em; text-transform:uppercase;align-items:center} .navlinks a{text-decoration:none;opacity:.75;transition:opacity .2s;color:var(--ink)} .navlinks a:hover,.navlinks a:focus-visible{opacity:1} .navlinks a.ext{border:1px solid currentColor;padding:4px 10px;border-radius:2px;opacity:.6} .navlinks a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--sandstone);padding-bottom:2px} /* hamburger toggle + slide-in panel (both injected by shared.js). The panel is appended to , NOT inside .sw-nav — the nav's backdrop-filter would otherwise make position:fixed children resolve against the nav, not the viewport. */ .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-8px -10px -8px 0; color:var(--ink);flex:none;z-index:2;min-height:44px;min-width:44px} .sw-nav.on-dark .nav-toggle{color:var(--paper)} .nav-toggle svg{display:block;width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .nav-scrim{position:fixed;inset:0;z-index:48;background:rgba(10,17,20,.42);opacity:0;pointer-events:none;transition:opacity .3s} .nav-scrim.open{opacity:1;pointer-events:auto} .nav-menu{position:fixed;top:0;right:0;bottom:0;z-index:49;width:min(82vw,300px);background:var(--paper); box-shadow:-18px 0 46px rgba(14,27,34,.2);padding:74px 26px 30px;transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column} .nav-menu.open{transform:none} .nav-menu a{display:block;font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.07em; text-transform:uppercase;color:var(--ink);text-decoration:none;padding:15px 2px; border-bottom:1px solid var(--line);opacity:.82} .nav-menu a:hover,.nav-menu a:focus-visible{opacity:1} .nav-menu a.ext{color:var(--river);border-bottom:0;margin-top:6px} .nav-menu a[aria-current="page"]{color:var(--river);opacity:1} @media(max-width:980px){ /* collapse to the hamburger + slide-in panel (holds every link, reachable) */ .nav-toggle{display:flex;align-items:center;justify-content:center} .navlinks{display:none} body.menu-open{overflow:hidden} } @media(min-width:981px){.nav-menu,.nav-scrim{display:none}} @media(max-width:560px){.sw-nav{padding:12px 16px}.brand{font-size:15px}} /* longer wordmarks need room beside the hamburger on the narrowest phones */ @media(max-width:380px){.brand{font-size:13.5px;letter-spacing:0}} @media(max-width:330px){.brand{font-size:12.5px}} /* reading progress */ .progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--river),var(--river-lt)); z-index:60;width:0%} /* ---------- SECTION SHELLS ---------- */ section{padding:clamp(80px,10vw,130px) 24px} .wrap{max-width:1220px;margin:0 auto} .measure{max-width:720px;margin:0 auto} .wide{max-width:1160px;margin:0 auto} .sec-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--river);margin-bottom:14px} .sec-eyebrow.sand{color:var(--sandstone)} h2{font-family:"Besley",serif;font-weight:600;font-size:clamp(30px,3.6vw,48px);line-height:1.08;max-width:18em} .sec-lede{max-width:640px;font-size:20px;margin-top:18px;color:rgba(14,27,34,.78)} .dark{background:var(--ink);color:var(--paper)} .dark .sec-lede{color:rgba(236,241,239,.72)} .abyss-bg{background:var(--abyss);color:var(--paper)} /* ---------- CHAPTER (story pages) ---------- */ .chapter{padding:clamp(90px,11vw,130px) 24px} .ch-label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase; color:var(--river);display:flex;align-items:center;gap:16px;margin-bottom:22px} .ch-label::after{content:"";flex:1;height:1px;background:var(--line)} .dark .ch-label,.abyss-bg .ch-label{color:var(--sandstone)} .dark .ch-label::after,.abyss-bg .ch-label::after{background:var(--line-dk)} h2.ch-title{font-family:"Besley",serif;font-weight:600;font-size:clamp(30px,4vw,50px);line-height:1.08;margin-bottom:30px} .measure p+p{margin-top:1.35em} .lede::first-letter{font-family:"Besley",serif;font-weight:700;font-size:4.6em;float:left;line-height:.78; padding:8px 12px 0 0;color:var(--river)} .sand-accent .lede::first-letter{color:var(--sandstone)} .pull{border-left:3px solid var(--river);padding:6px 0 6px 26px;margin:44px 0;font-family:"Besley",serif; font-style:italic;font-size:clamp(22px,2.4vw,29px);line-height:1.35;color:rgba(14,27,34,.85)} .dark .pull,.abyss-bg .pull{color:rgba(236,241,239,.88)} .sand-accent .pull{border-color:var(--sandstone)} .caption{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;color:rgba(14,27,34,.55); margin-top:14px;line-height:1.6} .dark .caption,.abyss-bg .caption{color:rgba(236,241,239,.45)} /* ---------- STORY HERO (video/photo full-bleed) ---------- */ .hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--abyss)} .hero .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero .scrim{position:absolute;inset:0;background: linear-gradient(180deg,rgba(10,17,20,.42) 0%,rgba(10,17,20,.12) 40%,rgba(10,17,20,.72) 100%)} .hero-inner{position:relative;z-index:3;padding:0 clamp(24px,7vw,96px) 90px;max-width:1150px} .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase; color:var(--river-lt);margin-bottom:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .eyebrow .code{border:1px solid rgba(143,185,207,.45);padding:3px 9px;border-radius:2px} .sand-accent .eyebrow{color:var(--sandstone)} .sand-accent .eyebrow .code{border-color:rgba(199,149,84,.5)} .hero h1{font-family:"Besley",serif;font-weight:600;font-size:clamp(56px,10vw,148px);line-height:.95; color:var(--paper);letter-spacing:-.015em;text-shadow:0 2px 40px rgba(0,0,0,.35)} .hero .dek{font-size:clamp(19px,2.2vw,26px);color:rgba(236,241,239,.85);font-weight:300;max-width:660px; margin-top:26px;font-style:italic;text-shadow:0 1px 20px rgba(0,0,0,.4)} .hero .byline{margin-top:34px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:rgba(236,241,239,.5)} .hero .badge-line{position:absolute;top:96px;right:clamp(24px,6vw,80px);z-index:3;text-align:right} .coopbadge{display:inline-flex;align-items:center;gap:10px;background:rgba(10,17,20,.55); border:1px solid rgba(236,241,239,.18);padding:12px 18px;border-radius:3px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:left} .coopbadge i{width:12px;height:12px;border-radius:50%;flex:none} .coopbadge span{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)} .coopbadge small{display:block;font-size:9.5px;color:rgba(236,241,239,.55);letter-spacing:.08em;margin-top:2px} .scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3; font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.3em; color:rgba(236,241,239,.5);text-transform:uppercase} .hero .media-credit{position:absolute;bottom:10px;right:14px;z-index:3;font-family:"IBM Plex Mono",monospace; font-size:9.5px;letter-spacing:.08em;color:rgba(236,241,239,.4);text-transform:uppercase} /* ---------- PHOTO FIGURE (widescreen, with credit) ---------- */ .photo-band{padding:0} figure.photo{position:relative;overflow:hidden;border-radius:6px;margin:clamp(40px,6vw,64px) 0} figure.photo.bleed{border-radius:0;margin:0} figure.photo img{width:100%;height:100%;object-fit:cover;min-height:320px;max-height:78vh} figure.photo.tall img{min-height:60vh} figure.photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px 16px; color:rgba(236,241,239,.9);font-size:15.5px;font-style:italic; background:linear-gradient(0deg,rgba(10,17,20,.78),rgba(10,17,20,.28) 70%,transparent)} figure.photo .credit{display:block;margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:9.5px; font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,241,239,.5)} figure.photo .credit a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(236,241,239,.35)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:clamp(40px,6vw,64px) 0} .duo figure.photo{margin:0} .duo figure.photo img{max-height:52vh} @media(max-width:760px){.duo{grid-template-columns:1fr}} /* ---------- STAT BAND ---------- */ .stats{background:var(--river);color:#fff} .sand-accent .stats{background:var(--sandstone-dp)} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:48px 40px;max-width:1120px;margin:0 auto} .stat b{font-family:"Besley",serif;font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.02;display:block; font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap} .stat span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; opacity:.85;display:block;margin-top:10px} .stat small{display:block;margin-top:8px;font-size:14.5px;opacity:.75;font-style:italic;line-height:1.5} /* ---------- NAMES WALL ---------- */ .names-wall{display:flex;flex-wrap:wrap;gap:10px 38px;align-items:baseline;margin:40px 0 30px} .names-wall b{font-family:"Besley",serif;font-weight:500;font-size:clamp(30px,4.4vw,58px);line-height:1.25; color:var(--paper);opacity:.92} .names-wall span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--sandstone);margin-left:10px} .names p.note{color:rgba(236,241,239,.7);max-width:680px} /* ---------- BASIN MAP PANEL ---------- */ .basin-panel{background:linear-gradient(180deg,#0F2130,#0A161F);border-radius:6px; padding:clamp(18px,3vw,40px);overflow:hidden;position:relative} .basin-panel canvas,.basin-panel svg{display:block;width:100%;height:auto} .sand-accent .basin-panel{background:linear-gradient(180deg,#1E1409,#0F0A04)} /* ---------- TIMELINE ---------- */ .timeline{position:relative;max-width:820px;margin:50px auto 0;padding-left:34px} .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--river-lt),var(--river))} .sand-accent .timeline::before{background:linear-gradient(180deg,var(--sandstone),var(--sandstone-dp))} .tl-item{position:relative;padding:0 0 46px 26px} .tl-item::before{content:"";position:absolute;left:-33px;top:7px;width:12px;height:12px;border-radius:50%; background:var(--paper);border:3px solid var(--river)} .tl-item.keystone::before{background:var(--river);box-shadow:0 0 0 5px rgba(61,126,166,.2)} .sand-accent .tl-item::before{border-color:var(--sandstone)} .sand-accent .tl-item.keystone::before{background:var(--sandstone);box-shadow:0 0 0 5px rgba(199,149,84,.2)} .tl-item .yr{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;color:var(--river);font-weight:500} .sand-accent .tl-item .yr{color:var(--sandstone-dp)} .tl-item h3{font-family:"Besley",serif;font-weight:600;font-size:22px;margin:6px 0 8px} .tl-item p{font-size:17px;color:rgba(14,27,34,.75);max-width:600px} /* ---------- COOPERATION GAUGE + SUBDIALS ---------- */ .gauge-wrap{max-width:860px;margin:52px auto 0} .gauge{display:flex;gap:6px;position:relative;padding-top:44px} .gauge .seg{flex:1;height:16px;border-radius:2px;opacity:.35} .gauge .seg.active{opacity:1;box-shadow:0 0 24px rgba(255,255,255,.18)} .gauge .marker{position:absolute;top:0;transform:translateX(-50%);text-align:center} .gauge .marker .pin{width:2px;height:34px;background:var(--paper);margin:0 auto} .gauge .marker b{font-family:"Besley",serif;font-size:17px;white-space:nowrap;display:block;margin-bottom:6px} .gauge-labels{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:rgba(236,241,239,.5);margin-top:12px} .subdials{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;margin-top:58px} .subdial{border:1px solid var(--line-dk);border-radius:4px;padding:22px} .subdial h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--sandstone);margin-bottom:14px} .subdial .track{height:8px;border-radius:4px;background:rgba(236,241,239,.12);overflow:hidden} .subdial .fill{height:100%;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.9,.35,1)} .in .subdial .fill,.subdial.in .fill{transform:scaleX(1)} .subdial p{font-size:14.5px;color:rgba(236,241,239,.65);margin-top:12px;line-height:1.55} .subdial .val{font-family:"Besley",serif;font-size:19px;margin-top:12px;color:var(--paper)} .subdial .datum{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.02em;line-height:1.55; margin-top:12px;padding-top:12px;border-top:1px solid var(--line-dk);color:var(--sandstone)} /* per-story conflict strip (Pacific Institute) */ .conflict-strip{max-width:820px;margin:44px auto 0;border:1px solid var(--line-dk);border-radius:4px;padding:26px 28px} .dark .conflict-strip,.abyss-bg .conflict-strip{border-color:var(--line-dk)} .conflict-strip h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--c1);margin-bottom:16px} .conflict-strip .cs-row{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline} .conflict-strip .cs-n{font-family:"Besley",serif;font-size:clamp(30px,4vw,46px);color:var(--paper);line-height:1;font-variant-numeric:tabular-nums} .conflict-strip .cs-n small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:rgba(236,241,239,.55);margin-top:8px;font-weight:400} .conflict-strip .cs-types{display:flex;gap:18px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:12px;color:rgba(236,241,239,.7)} .conflict-strip .cs-types b{color:var(--paper);font-weight:500} .conflict-strip .cs-note{margin-top:16px;font-size:13.5px;font-style:italic;color:rgba(236,241,239,.5);line-height:1.55} .light .conflict-strip{border-color:var(--line)} .light .conflict-strip .cs-n{color:var(--ink)} .light .conflict-strip .cs-n small,.light .conflict-strip .cs-types{color:rgba(14,27,34,.6)} .light .conflict-strip .cs-types b{color:var(--ink)} .light .conflict-strip .cs-note{color:rgba(14,27,34,.5)} /* inline institution card in story cooperation chapters */ .rbo-inline{max-width:820px;margin:44px auto 0;border:1px solid var(--line-dk);border-radius:5px;padding:26px 28px; display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline} .rbo-inline .ac{grid-row:1/3;font-family:"Besley",serif;font-size:clamp(26px,4vw,40px);color:var(--sandstone); font-weight:600;align-self:center;letter-spacing:.02em} .rbo-inline h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--sandstone);margin-bottom:2px} .rbo-inline .nm{font-family:"Besley",serif;font-size:19px;color:var(--paper);line-height:1.25} .rbo-inline p{grid-column:2;font-size:15px;color:rgba(236,241,239,.7);line-height:1.55;margin-top:6px} .rbo-inline .lk{grid-column:2;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px} .rbo-inline .lk a{color:var(--sandstone)} .rbo-inline.empty .ac{color:rgba(236,241,239,.3)} .light .rbo-inline{border-color:var(--line)} .light .rbo-inline .nm{color:var(--ink)} .light .rbo-inline p{color:rgba(14,27,34,.7)} .coop-note{max-width:820px;margin:52px auto 0;font-style:italic;font-size:16px;color:rgba(236,241,239,.6); border-top:1px solid var(--line-dk);padding-top:24px} .coop-note a{color:var(--sandstone)} /* ---------- TREATY CARDS ---------- */ .tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1120px;margin:48px auto 0} .tr-card{background:#fff;border-radius:5px;padding:28px 26px;border-top:4px solid var(--river); box-shadow:0 1px 3px rgba(14,27,34,.08);display:flex;flex-direction:column;gap:12px} .sand-accent .tr-card{border-top-color:var(--sandstone)} .tr-card .yr{font-family:"Besley",serif;font-weight:700;font-size:34px;color:var(--river)} .sand-accent .tr-card .yr{color:var(--sandstone-dp)} .tr-card h3{font-family:"Besley",serif;font-weight:600;font-size:20px;line-height:1.25} .tr-card p{font-size:15.5px;color:rgba(14,27,34,.7);flex:1} .tr-card .meta{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:rgba(14,27,34,.5);border-top:1px solid var(--line);padding-top:12px} .tr-counter{text-align:center;margin-top:56px;font-family:"Besley",serif;font-size:clamp(20px,2.4vw,26px); font-style:italic;color:rgba(14,27,34,.75)} .tr-counter b{font-weight:700;font-style:normal;color:var(--river);font-size:1.5em} .sand-accent .tr-counter b{color:var(--sandstone-dp)} /* ---------- VOICES: EXPERT + LOCAL ---------- */ .voice{max-width:920px;margin:0 auto;display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:start} @media(max-width:640px){.voice{grid-template-columns:1fr;gap:20px}} .voice .face{width:150px;height:150px;border-radius:50%;overflow:hidden;position:relative;flex:none; border:1px solid var(--line-dk)} .voice .face img{width:100%;height:100%;object-fit:cover} .voice .face .monogram{width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:"Besley",serif;font-size:48px;font-weight:600;color:var(--sandstone); background:radial-gradient(ellipse at 30% 25%,#22303A,#101B22)} .light .voice .face .monogram{background:radial-gradient(ellipse at 30% 25%,#DCE5E1,#C7D3CE);color:var(--river)} .light .voice .face{border-color:var(--line)} .voice blockquote{font-family:"Besley",serif;font-style:italic;font-size:clamp(21px,2.3vw,27px);line-height:1.4} .voice .who{margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase} .voice .who b{display:block;font-size:13px} .voice .who span{opacity:.6} .voice .placeholder-flag{display:inline-block;margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;border:1px dashed currentColor;opacity:.45; padding:4px 9px;border-radius:2px} .voice-context{max-width:920px;margin:0 auto 46px;font-size:17px;color:rgba(236,241,239,.65)} .light .voice-context{color:rgba(14,27,34,.65)} /* ---------- NEXT STORY ---------- */ .next{background:var(--abyss);color:var(--paper);padding:100px 24px} .next-card{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center; text-decoration:none;border-radius:8px} @media(max-width:760px){.next-card{grid-template-columns:1fr}} .next-art{border-radius:6px;min-height:280px;position:relative;overflow:hidden} .next-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.22,.9,.35,1)} .next-card:hover .next-art img{transform:scale(1.045)} .next h2{font-family:"Besley",serif;font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.06;margin:14px 0 16px} .next p{color:rgba(236,241,239,.7);font-size:17px} .next .cta{display:inline-block;margin-top:28px;font-family:"IBM Plex Mono",monospace;font-size:12.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--sandstone);text-decoration:none; border:1px solid var(--sandstone-dp);padding:13px 22px;border-radius:3px;transition:all .25s} .next-card:hover .cta,.next .cta:hover{background:var(--sandstone);color:var(--abyss)} .explore-links{max-width:920px;margin:70px auto 0;padding-top:30px;border-top:1px solid var(--line-dk); display:flex;flex-wrap:wrap;gap:14px 30px;font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:.08em;text-transform:uppercase} .explore-links a{color:rgba(236,241,239,.7);text-decoration:none;border-bottom:1px solid rgba(236,241,239,.25);padding-bottom:2px} .explore-links a:hover{color:var(--sandstone);border-color:var(--sandstone)} /* ---------- FOOTER ---------- */ .sw-footer{background:var(--ink);color:rgba(236,241,239,.6);padding:70px 24px 44px;border-top:1px solid var(--line-dk)} .foot-grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px} @media(max-width:800px){.foot-grid{grid-template-columns:1fr}} .sw-footer h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--sandstone);margin-bottom:16px} .sw-footer p,.sw-footer li{font-size:15px;line-height:1.7} .sw-footer ul{list-style:none} .sw-footer a{color:rgba(236,241,239,.85);text-decoration:none;border-bottom:1px solid rgba(236,241,239,.25)} .sw-footer a:hover{border-color:var(--sandstone)} .foot-brand{font-family:"Besley",serif;font-size:22px;font-weight:600;color:var(--paper);margin-bottom:14px} .foot-base{max-width:1220px;margin:54px auto 0;padding-top:22px;border-top:1px solid var(--line-dk); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:rgba(236,241,239,.35)} /* ---------- REVEAL / MOTION ---------- */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.35,1)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} @media (prefers-reduced-motion: reduce){ .rv,.rv-d1,.rv-d2,.rv-d3{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .subdial .fill{transform:none;transition:none} .next-art img{transition:none} } /* ---- story "basin in data" interactive maps (basin-layers.js) ---- */ .bl-sec{max-width:1120px;margin:0 auto;padding:0 24px} .bl-sec .bl-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(14,27,34,.5)} .bl-sec h2.bl-h{font-family:"Besley",serif;font-weight:600;font-size:clamp(24px,3.2vw,38px);line-height:1.05;max-width:16em;margin:.18em 0 0;color:var(--ink)} .bl-sec .bl-lede{font-family:"Newsreader",serif;font-size:clamp(15px,1.7vw,18px);line-height:1.5;color:rgba(14,27,34,.72);max-width:60ch;margin:10px 0 16px} .bl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .bl-tabs button{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:9px 14px;border:1px solid rgba(14,27,34,.14);background:#fff;border-radius:20px;cursor:pointer;color:rgba(14,27,34,.7);min-height:40px;transition:all .15s} .bl-tabs button:hover{border-color:var(--river-lt)} .bl-tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} .bl-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid rgba(14,27,34,.14);border-radius:8px;background:#F6F8F7;overflow:hidden} @media(max-width:820px){.bl-wrap{grid-template-columns:1fr}} .bl-scene{display:block;width:100%;height:auto;background:linear-gradient(180deg,#eef3f1,#e7edea)} .bl-side{padding:24px 22px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(14,27,34,.1)} @media(max-width:820px){.bl-side{border-left:0;border-top:1px solid rgba(14,27,34,.1)}} .bl-note{font-family:"Newsreader",serif;font-size:15.5px;line-height:1.55;color:rgba(14,27,34,.82)} .bl-note .fig{font-family:"Besley",serif;font-weight:600;font-size:clamp(26px,3.6vw,40px);color:var(--river-dp,#2E6489);display:block;line-height:1.02;margin-bottom:8px} .bl-note .lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(14,27,34,.5);display:block;margin-bottom:9px} .bl-note b{color:var(--ink)} .bl-src{font-family:"IBM Plex Mono",monospace;font-size:11px;color:rgba(14,27,34,.5);margin-top:12px;line-height:1.6} .bl-scene text{font-family:"IBM Plex Mono",monospace} .bl-disc{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--sandstone-dp,#8A5F2E);background:rgba(199,149,84,.13);border:1px solid rgba(138,95,46,.3);border-radius:4px;padding:3px 8px;display:inline-block;margin-bottom:12px} /* legal strip in the footer (Sources · Disclaimer · Privacy · About) */ .foot-legal{font-size:10.5px;letter-spacing:.1em;margin-top:16px;color:rgba(236,241,239,.34);text-transform:uppercase} .foot-legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,241,239,.14);padding-bottom:2px} .foot-legal a:hover,.foot-legal a:focus-visible{color:var(--paper);border-color:rgba(236,241,239,.5)} /* ---- research note: OUR paraphrase of a named scholar's published argument. Deliberately NOT the .voice treatment — no portrait, no quotation marks, no italic display type — so it can never read as words we put in their mouth. */ .rnote{max-width:820px;margin:0 auto;border-left:2px solid var(--sandstone);padding:2px 0 2px 30px} @media(max-width:640px){.rnote{padding-left:20px}} .rnote p.arg{font-family:"Newsreader",serif;font-size:clamp(18px,2vw,22px);line-height:1.52;color:rgba(236,241,239,.9);margin:0} .rnote p.arg + p.arg{margin-top:14px} .light .rnote p.arg{color:rgba(14,27,34,.86)} .rnote .attr{margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;line-height:1.7} .rnote .attr b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sandstone)} .light .rnote .attr b{color:var(--sandstone-dp)} .rnote .attr span{display:block;opacity:.62;text-transform:none;letter-spacing:.04em;font-size:11.5px;margin-top:4px} .rnote .attr a{color:var(--river-lt);text-decoration:none;border-bottom:1px solid rgba(143,185,207,.35)} .light .rnote .attr a{color:var(--river)} .rnote .basis{display:inline-block;margin-top:15px;font-family:"IBM Plex Mono",monospace;font-size:9.5px; letter-spacing:.13em;text-transform:uppercase;color:rgba(236,241,239,.42); border:1px solid rgba(236,241,239,.16);border-radius:3px;padding:4px 9px} .light .rnote .basis{color:rgba(14,27,34,.45);border-color:rgba(14,27,34,.16)}