/* DEWR / Stillwater Studio / V4
   Concept: deep Flathead-water blues + crisp typography + delicate glass
   Adapted conceptually from Yarinsasson's 2025 layered frosted-card demonstration.
   CSS only; existing content structure and approved images unchanged.
   The optical treatment belongs to a few floating surfaces, not every block.
*/

:root {
 --dewr-night:#061b31;
 --dewr-depth:#0a2948;
 --dewr-water:#1c5278;
 --dewr-light:#8dcce6;
 --dewr-white:#f8fcff;
 --dewr-soft:#c6e0ef;
 --dewr-line:rgba(241,252,255,.24);
 --dewr-pane:rgba(181,220,241,.115);
 --dewr-pane-hover:rgba(201,232,248,.175);
 --dewr-elevation:0 24px 70px -25px rgba(0,12,29,.47),0 6px 24px -10px rgba(0,22,46,.28);
 --dewr-radius:30px;
 --forest:#0c3856;
 --forest2:#0b2f4c;
 --cream:#092c49;
 --paper:#ecf6fb;
 --muted:#c8e0ee;
 --line:rgba(241,252,255,.22);
 --ink:#f7fcff;
 --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 --serif:var(--sans);
}
html {background:var(--dewr-night);scroll-padding-top:120px;}
body {
 color:var(--dewr-white);
 background:
  radial-gradient(ellipse 48% 34% at 7% -8%,rgba(70,153,197,.42),transparent 90%),
  radial-gradient(ellipse 30% 43% at 110% 34%,rgba(40,102,160,.33),transparent 91%),
  radial-gradient(ellipse 55% 32% at -20% 81%,rgba(49,132,164,.22),transparent 92%),
  linear-gradient(148deg,#153d61 0%,#0b3152 29%,#082745 59%,#061b31 100%);
 background-attachment:fixed;
 background-repeat:no-repeat;
 min-height:100vh;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
body .wrap {width:min(1240px,calc(100% - 104px));}
body .prototype {
 width:fit-content;max-width:calc(100% - 35px);margin:16px auto 14px;
 border:1px solid rgba(246,253,255,.18);
 color:rgba(230,246,255,.75);
 background:rgba(255,255,255,.065);
 border-radius:100px;
 font-size:10px;font-weight:600;letter-spacing:.045em;
 padding:7px 18px;
 box-shadow:0 6px 22px rgba(0,12,30,.12);
}
body .prototype strong {color:#fff;}

/* Floating navigation: a dark transparent glass island, rather than an opaque white slab. */
body > header {
 width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)));
 margin:10px auto 21px;
 position:sticky;top:14px;z-index:130;
 border:1px solid rgba(233,250,255,.35);
 border-radius:25px;
 background:linear-gradient(122deg,rgba(209,235,251,.19),rgba(186,226,248,.11) 61%,rgba(166,218,242,.13));
 -webkit-backdrop-filter:blur(22px) saturate(145%);
 backdrop-filter:blur(22px) saturate(145%);
 box-shadow:0 20px 48px -20px rgba(0,10,28,.68),0 5px 16px rgba(0,17,40,.22),
 inset 0 1px rgba(255,255,255,.36),inset 0 -1px rgba(175,225,245,.11);
 overflow:visible;
 isolation:isolate;
}
body > header > .brand-row {height:80px;width:calc(100% - 58px);}
body > header .site-brand {gap:13px;color:#f8fcff;}
body > header .symbol {width:44px;height:44px;border-radius:14px;
 background:rgba(237,250,255,.11);border:1px solid rgba(230,250,255,.44);}
body > header .symbol span {color:#f4fcff;}
body > header .symbol:before,body > header .symbol:after{border-color:rgba(237,252,255,.42);}
body > header .brand-text strong {font-weight:690;font-size:14px;line-height:1.18;color:#f8fcff;letter-spacing:-.02em;}
body > header .brand-text small {font-size:9px;letter-spacing:.085em;color:#bdd9e9;}
body > header .desktop-nav{gap:clamp(10px,1.7vw,26px);}
body > header .desktop-nav a{color:#eef7ff;font-size:12px;font-weight:580;letter-spacing:.005em;}
body > header .desktop-nav a:hover{color:white;}
body > header .desktop-nav .nav-cta {
 border-radius:100px;
 background:rgba(250,253,255,.92);color:#0b3251;
 padding:11px 19px;font-weight:690;
 box-shadow:0 3px 12px rgba(0,20,43,.12),inset 0 1px rgba(255,255,255,.95);
}
body > header .desktop-nav .nav-cta:hover{color:#092b48;background:white;}
body > header .menu-button {
 border-radius:13px;color:#f4fbff;
 background:rgba(255,255,255,.12);border:1px solid rgba(242,253,255,.28);
}
body > header .mobile-menu.open {
 border:1px solid rgba(233,251,255,.20);
 border-radius:18px;margin:0 14px 15px;width:calc(100% - 28px);
 background:rgba(10,47,75,.93);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 18px 35px rgba(0,15,32,.3);
}
body > header .mobile-menu a{color:#f4fbff;}
/* All material layers stay BEHIND content. Previous V3 overlay painted over text. */
body > header::before,
body > main > section::before,
body > section.sub-hero::before,
body > main.page-area::before,
body > main > .cskt-v13-shell::before,
body > .cskt-v13-shell::before {
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
 background:
  radial-gradient(ellipse 37% 25% at 7% 0%,rgba(255,255,255,.20),transparent 82%),
  linear-gradient(90deg,transparent 0%,rgba(255,255,255,.13) 24%,transparent 74%);
 -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
 opacity:.60;
}
body > header::after,
body > main > section::after,
body > section.sub-hero::after,
body > main.page-area::after,
body > main > .cskt-v13-shell::after,
body > .cskt-v13-shell::after {
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
 background:linear-gradient(0deg,rgba(176,227,251,.085),transparent 47%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
   inset 0 -1px 0 rgba(7,33,61,.16),
   inset 2px 0 7px -5px rgba(242,252,255,.35);
}
/* The normal content stacking order is stable and accessible. */
body > header > *,body > main > section > *,
body > section.sub-hero > *,body > main.page-area > *,
body > main > .cskt-v13-shell > *,body > .cskt-v13-shell > *
{position:relative;z-index:1;}

/* Main material surfaces: transparent enough to retain depth behind them. */
body > main > section,
body > section.sub-hero,
body > main.page-area,
body > main > .cskt-v13-shell,
body > .cskt-v13-shell {
 position:relative;
 width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)));
 margin:20px auto;
 overflow:hidden;isolation:isolate;
 border:1px solid rgba(238,253,255,.28);
 border-radius:var(--dewr-radius);
 background:linear-gradient(133deg,rgba(194,229,248,.155),rgba(183,220,241,.095) 65%,rgba(183,226,249,.12));
 -webkit-backdrop-filter:blur(17px) saturate(130%);
 backdrop-filter:blur(17px) saturate(130%);
 box-shadow:var(--dewr-elevation),inset 0 1px rgba(255,255,255,.23);
 color:var(--dewr-white);
}
body > main > section:not(.hero):not(.library):not(.sub-hero):not(.cskt-v13-hero),
body > main.page-area {
 background:linear-gradient(133deg,rgba(206,234,250,.15),rgba(162,213,241,.07) 65%,rgba(160,216,244,.12));
}
body .hero {
 background:linear-gradient(115deg,rgba(180,222,249,.13),rgba(145,203,236,.065) 67%,rgba(162,221,249,.095));
 min-height:0;
}
body .hero-grid {min-height:540px;width:calc(100% - 104px);max-width:none;grid-template-columns:52% 48%;}
body .hero-content {align-self:center;padding:68px 52px 72px 0;}
body .hero h1 {
 font-family:var(--sans);font-size:clamp(42px,4.6vw,72px);
 font-weight:710;line-height:1.055;letter-spacing:-.059em;
 color:#fff;margin:18px 0 26px;max-width:760px;
}
body .hero .eyebrow {color:#9cd1ee;font-size:10px;letter-spacing:.13em;}
body .hero p {color:#d8eaf5;line-height:1.73;font-size:15px;max-width:560px;}
body .hero-media {
 margin:26px 0;min-height:440px;
 border-radius:22px;border:1px solid rgba(236,251,255,.27);
 box-shadow:0 16px 40px rgba(0,14,38,.26),inset 0 1px rgba(255,255,255,.2);
 overflow:hidden;
}
body .hero-media img {object-fit:cover;}
body .hero-media .caption {background:rgba(4,25,48,.62);border:1px solid rgba(255,255,255,.2);
 border-radius:10px;font-size:10px;backdrop-filter:blur(8px);}
body .buttons {margin-top:32px;gap:11px;}
body .button {
 padding:15px 23px;min-height:47px;border-radius:100px;
 font-weight:680;font-size:12px;letter-spacing:.003em;
 transition:transform .17s ease,background .17s ease,box-shadow .17s ease;
}
body .button-light {
 background:#fff;color:#0c2f4d;
 box-shadow:inset 0 1px rgba(255,255,255,.95),0 4px 12px rgba(2,22,43,.13);
}
body .button-outline{
 color:#eff9ff;border:1px solid rgba(233,250,255,.38);
 background:rgba(255,255,255,.085);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
body .button:hover{transform:translateY(-2px);}
body .section{padding:77px 0;}
body .eyebrow{font-size:10px;letter-spacing:.13em;color:#a0cfe7;}
body .section-head{margin-bottom:32px;}
body .section-head h2,
body .mission h2,body .library h2,
body .sub-hero h1 {
 font-family:var(--sans);
 color:#f9fcff;
 font-weight:690;letter-spacing:-.05em;
}
body .section-head h2{font-size:clamp(33px,3.6vw,52px);}
body .section-head p{color:#c7deed;font-size:14px;line-height:1.75;}
/* The article's key idea: tangible glass surface with SHARP content placed above it. */
body .hub-link-grid {gap:15px;}
body .hub-choice,body .program,body .project {
 position:relative;isolation:isolate;
 background:linear-gradient(140deg,rgba(242,252,255,.155),rgba(213,239,251,.075) 73%,rgba(205,237,255,.10));
 border:1px solid rgba(240,251,255,.22);
 border-radius:22px;
 box-shadow:0 10px 25px rgba(0,16,35,.13),inset 0 1px rgba(255,255,255,.16);
 -webkit-backdrop-filter:blur(8px) saturate(118%);backdrop-filter:blur(8px) saturate(118%);
 color:#fff;
 transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
body .hub-choice::before,body .program::before,body .project::before {
 content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);
 pointer-events:none;z-index:0;
}
body .hub-choice::after,body .program::after,body .project::after {
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
 background:linear-gradient(0deg,rgba(202,233,251,.07),transparent 52%);
}
body .hub-choice > *,body .program > *,body .project > *{position:relative;z-index:1;}
body .hub-choice {min-height:210px;padding:29px;gap:12px;}
body .hub-choice h3,body .program h3,body .project h3 {
 font-family:var(--sans);font-size:clamp(19px,1.65vw,25px);
 font-weight:680;color:white;letter-spacing:-.035em;line-height:1.15;
}
body .hub-choice p,body .program p,body .project p{color:#d3e7f3;line-height:1.67;font-size:13px;}
body .hub-choice span,body .hub-choice a,body .program .index,body .project a{color:#b1dcf3;}
body .hub-choice:hover,body .program:hover,body .project:hover{
 background:linear-gradient(140deg,rgba(247,253,255,.22),rgba(208,237,252,.125));
 box-shadow:0 16px 31px rgba(0,13,35,.24),inset 0 1px rgba(255,255,255,.28);
 transform:translateY(-3px);
}
body .hub-choice:focus-visible,body .program:focus-visible{outline:3px solid #a8e5ff;outline-offset:3px;}
/* Other page archetypes: the hero floats dark, the long-form reading surface can be lighter. */
body .sub-hero,body .cskt-v13-hero {
 background:linear-gradient(128deg,rgba(206,236,250,.15),rgba(171,223,247,.075));
 color:#fff;
 padding:71px 0;
}
body .sub-hero h1,body .cskt-v13-hero h1{color:white;font-size:clamp(40px,5vw,70px);}
body .sub-hero p,body .cskt-v13-hero p{color:#d2e5f0;}
body .sub-hero .eyebrow,body .breadcrumbs,body .breadcrumbs a{color:#acd6ea;}
body main.page-area {
 background:linear-gradient(140deg,rgba(236,248,255,.88),rgba(222,241,252,.82));
 color:#15374e;
 padding:67px 0 86px;
}
body main.page-area .article p,body main.page-area .article li{color:#2b5064;}
body main.page-area .article h2,body main.page-area .article h3,body main.page-area .article h4{color:#10344d;font-family:var(--sans);}
body main.page-area .article h2{font-weight:680;letter-spacing:-.04em;}
body main.page-area .sidebox {
 top:122px;background:rgba(252,255,255,.44);
 border:1px solid rgba(255,255,255,.8);border-radius:18px;
 box-shadow:0 6px 18px rgba(5,37,61,.07);
}
body main.page-area .sidebox a,body main.page-area .doc-links a,body main.page-area .source-link {color:#135275;}
body main.page-area .doc-links a,body main.page-area .article aside {
 background:rgba(255,255,255,.56);
 border:1px solid rgba(255,255,255,.81);border-radius:15px;
}
body main.page-area .article img{border-radius:17px;}
body .cskt-v13-shell {
 background:linear-gradient(140deg,rgba(234,247,255,.91),rgba(221,241,252,.85));
 color:#143e54;
 padding:49px;
}
body .cskt-v13-shell p,body .cskt-v13-shell label{color:#2a526b;}
body .cskt-v13-card,body .cskt-v13-panel,body .cskt-v13-control,body .cskt-v13-embed {
 border-radius:17px;background:rgba(255,255,255,.49);
 border:1px solid rgba(255,255,255,.8);color:#15394f;
 box-shadow:0 8px 26px -20px rgba(14,63,88,.18),inset 0 1px rgba(255,255,255,.7);
}
body .cskt-v13-card h2{color:#153950;}
body .cskt-v13-card p{color:#35576b;}
body .cskt-v13-card:hover{background:rgba(255,255,255,.69);transform:translateY(-2px);}
/* Dark reading interfaces where white-on-dark is appropriate */
body .library {
 background:linear-gradient(128deg,rgba(9,44,70,.62),rgba(7,37,65,.75));
 border:1px solid rgba(238,251,255,.20);
 color:white;padding:78px 0;
}
body .library h2{color:#f6fbff;}
body .library p,body .library .eyebrow{color:#d2e9f6;}
body .library .searchbox,body .library .search-controls select{
 background:rgba(253,255,255,.93);
 border:1px solid rgba(255,255,255,.85);
 border-radius:14px;color:#143e54;
}
body .mission,body .stat-strip,body .action-band{
 background:linear-gradient(138deg,rgba(189,229,249,.15),rgba(119,192,231,.08));
}
body .mission .intro,body .mission blockquote,body .mission cite{color:#e3f2fb;}
body .mission blockquote{border-left-color:rgba(202,237,255,.49);}
body .stats strong,body .stats small{color:#e4f5ff;}
body .stat-strip .stats div{border-color:rgba(231,251,255,.18);}
body .action-grid h2{color:#f5fbff;}
body > footer.footer {
 width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)));
 margin:20px auto;border-radius:28px;
 color:#eff8ff;
 background:linear-gradient(126deg,rgba(165,220,248,.105),rgba(137,202,237,.065));
 border:1px solid rgba(237,253,255,.2);
 box-shadow:0 22px 48px rgba(0,12,30,.23),inset 0 1px rgba(255,255,255,.14);
 padding:51px 0 24px;
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
body > footer.footer p,body > footer.footer a{color:#d5e9f3;}
body > footer.footer .copyright{border-top-color:rgba(231,251,255,.17);color:#b8d4e5;}
body .source-link{color:#bee4fb;}
/* Reduce overexposure: no chromatic fringe or optical displacement. */
html[data-dewr-refract="yes"] body > header {
 -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
 backdrop-filter:blur(22px) saturate(145%)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 body > header{background:#143e60;}
 body > main > section,body > section.sub-hero{background:#184a6e;}
 body main.page-area,body .cskt-v13-shell{background:#e8f3fa;}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 body > header{background:#0a3557!important;border-color:#96c9e3;}
 body > main > section,body > section.sub-hero{background:#164b71!important;border-color:#91c9e4;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
 body main.page-area,body .cskt-v13-shell{background:#e9f5fb!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
 body .hub-choice,body .program,body .project {background:#245b7e!important;}
 body > header::before,body > header::after,
 body > main > section::before,body > main > section::after{display:none!important;}
}
@media (max-width:1080px){
 body .hero-grid{width:calc(100% - 70px);grid-template-columns:51% 49%;}
 body .hero-content{padding-right:28px;}
 body > header .brand-row{width:calc(100% - 34px);}
}
@media (max-width:760px){
 body{background-attachment:scroll;}
 body > header{top:9px;border-radius:20px;margin:9px auto 12px;width:calc(100% - 24px);}
 body > header > .brand-row{height:71px;width:calc(100% - 26px);}
 body > header .symbol{height:41px;width:41px;border-radius:12px;}
 body > header .brand-text strong{font-size:12px;}
 body > header .brand-text small{font-size:8px;}
 body > main > section,body > section.sub-hero,body main.page-area,body .cskt-v13-shell,body > footer.footer {
  width:calc(100% - 24px);margin:12px auto;border-radius:21px;
 }
 body .wrap{width:calc(100% - 38px);}
 body .hero-grid{grid-template-columns:1fr;width:calc(100% - 38px);min-height:0;}
 body .hero-content{padding:43px 0 27px;}
 body .hero h1{font-size:clamp(38px,9.4vw,61px);letter-spacing:-.054em;}
 body .hero-media{height:265px;min-height:0;margin:0 0 19px;border-radius:16px;}
 body .section{padding:50px 0;}
 body .section-head h2{font-size:35px;}
 body .hub-choice{min-height:0;padding:23px;}
 body .sub-hero,body .cskt-v13-hero{padding:49px 0;}
 body main.page-area{padding:49px 0 67px;}
 body .cskt-v13-shell{padding:26px 19px;}
 body > footer.footer{padding:35px 0 24px;}
}
@media(prefers-reduced-motion:reduce){
 body .hub-choice,body .program,body .project,body .button{transition:none!important;}
}


/* V4 polishing pass — typography, navigation reflection and foreground controls.
   The light line is intentionally a one-pixel grazing reflection, not a wide flare. */
body > header::before {
  background:linear-gradient(90deg,transparent 6%,rgba(255,255,255,.34) 30%,rgba(255,255,255,.18) 62%,transparent 92%)
    top center/91% 1px no-repeat;
  opacity:.77;
}
body > header::after{
  background:linear-gradient(0deg,rgba(174,227,250,.065),transparent 33%);
  opacity:.78;
}
body .hero .button-light{
  background:#f8fcff;
  color:#0b304e;
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 6px 16px rgba(0,16,39,.20),inset 0 1px #fff;
}
body .hero .button-light:hover{background:#fff;color:#092a46;}
body .hero .button-outline{
  color:#f7fcff;
  background:rgba(236,250,255,.11);
  border:1px solid rgba(234,251,255,.35);
  box-shadow:inset 0 1px rgba(255,255,255,.10);
}
body .hero .button-outline:hover{background:rgba(238,251,255,.18);}
@media (max-width:760px){
 body > header .site-brand{min-width:0;flex:1 1 auto;gap:9px;}
 body > header .brand-text{min-width:0;max-width:175px;}
 body > header .brand-text strong{font-size:11.5px;line-height:1.18;letter-spacing:-.023em;}
 body > header .brand-text small{display:none;}
 body > header .symbol{flex:0 0 37px;width:37px;height:37px;}
 body > header .menu-button{flex-shrink:0;padding:9px 11px;font-size:12px;}
 body > header .brand-row{gap:7px;}
}


/* Native navigation script introduced an opaque brand plate, visually splitting
   the floating capsule. Remove that separate plate: the whole nav is one glass piece. */
body > header .site-brand {
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
body > header .site-brand::before,body > header .site-brand::after {
  content:none!important;display:none!important;
}
body > header .cskt-nav-rail {background:transparent!important;box-shadow:none!important;}