/* Aquagazer design system — world: Descent. Shared by every template. */
:root{
--abyss:#01131F;
--deep:#05375A;
--cyan:#2FE3F2;
--aqua:#8CFFE8;
--coral:#FF5A46;
--violet:#8B6BFF;
--sun:#FFC94A;
--foam:#F0FCFF;
--f2:rgba(240,252,255,.78);
--f3:rgba(240,252,255,.55);
/* .34 measured 2.99 against the page background, and every use of it is small
text: photograph pending, the affiliate disclosure, the small print under a
card. .48 measures 4.8, which clears AA, and keeps a tier below --f3. */
--f4:rgba(240,252,255,.48);
--line:rgba(240,252,255,.15);
--disp:"Bodoni Moda",Georgia,"Times New Roman",serif;
--ui:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif;
--out:cubic-bezier(.16,1,.3,1);
--pad:clamp(20px,4.4vw,64px);
--col:min(1440px,100%);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--abyss);color:var(--foam);font-family:var(--ui);font-size:18px;line-height:1.6;overflow-x:clip;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0;font-weight:500;font-family:var(--disp);letter-spacing:-.02em;line-height:1;text-wrap:balance;font-variation-settings:"opsz" 14}
p{margin:0 0 1.05em;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--cyan);color:var(--abyss)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--abyss),0 0 0 4px rgba(140,255,232,.7)} /* the default; families below override it. box-shadow follows the element radius */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#03202F}
::-webkit-scrollbar-thumb{background:#1B6E8E;border-radius:99px;border:3px solid #03202F}
.wrap{width:var(--col);margin:0 auto;padding:0 var(--pad)}
.eyeless{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,252,255,.78)}
/* ═══════════ THE WATER ═══════════ */
.bg{position:fixed;inset:0;z-index:-5;background:linear-gradient(180deg,#37D6EA 0%,#12A2CC 14%,#0A6E9A 38%,#053E60 66%,#010B14 100%)}
.bg-deep{position:fixed;inset:0;z-index:-4;opacity:0;background:linear-gradient(180deg,#042B45 0%,#01192A 38%,#000407 100%)}
.bg-rays{position:fixed;inset:-15% -20%;z-index:-3;opacity:.85;
background:repeating-linear-gradient(96deg,rgba(160,255,240,.16) 0 5px,transparent 5px 76px),
repeating-linear-gradient(84deg,rgba(47,227,242,.12) 0 3px,transparent 3px 108px);
mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 46%,transparent 78%);
animation:sway 34s ease-in-out infinite alternate}
@keyframes sway{from{transform:translate3d(-2%,0,0) skewX(-1.4deg)}to{transform:translate3d(2%,16px,0) skewX(1.8deg)}}
.bg-grain{position:fixed;inset:0;z-index:-2;opacity:.16;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.motes{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.motes i{position:absolute;bottom:-40px;border-radius:50%;
background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(160,255,240,.24) 45%,transparent 73%);
animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.55);opacity:0}12%{opacity:.85}100%{transform:translateY(-118vh) translateX(38px) scale(1.15);opacity:0}}
@supports (animation-timeline: scroll()){
.bg-deep{animation:toDark linear both;animation-timeline:scroll(root);animation-range:2% 88%}
.bg-rays{animation:sway 34s ease-in-out infinite alternate,goDark linear both;
animation-timeline:auto,scroll(root);animation-range:normal,0 46%}
.gauge .pip{animation:pipdrop linear both;animation-timeline:scroll(root)}
.reveal{animation:rise-in linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
.par{animation:parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.drawline{animation:draw linear both;animation-timeline:view();animation-range:entry 30% cover 46%}
}
@keyframes toDark{to{opacity:1}}
@keyframes goDark{to{opacity:0}}
@keyframes pipdrop{to{transform:translateY(230px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes parallax{from{transform:translateY(-4%) scale(1.1)}to{transform:translateY(4%) scale(1.1)}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
/* ═══════════ DEPTH GAUGE ═══════════ */
.gauge{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:20;display:flex;gap:11px;align-items:stretch;
padding:16px 13px;border-radius:40px;background:rgba(1,19,31,.4);backdrop-filter:blur(8px);
border:1px solid rgba(240,252,255,.11)}
.gauge .rail{position:relative;width:1px;height:242px;background:linear-gradient(180deg,rgba(240,252,255,.55),rgba(240,252,255,.06))}
.gauge .rail span{position:absolute;left:-3px;width:7px;height:1px;background:rgba(240,252,255,.35)}
.gauge .pip{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--aqua);
border:1px solid rgba(1,19,31,.55);box-shadow:0 3px 10px -2px rgba(0,0,0,.6)}
.gauge .pip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(140,255,232,.42)}
.gauge ol{list-style:none;margin:0;padding:0;height:242px;display:flex;flex-direction:column;justify-content:space-between;white-space:nowrap;
font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,252,255,.62)}
/* 1240 was not enough: the fixed gauge ends near 120px and the centred column does not
clear that until about 1552px, so it was sitting on the first lines at every laptop
width. See tools/gauge_overlap.py for the arithmetic. */
@media (max-width:1560px){.gauge{display:none}}
@media (min-width:1241px){.wrap{padding-left:158px}.carebar .inner{padding-left:158px}}
/* ═══════════ MAST ═══════════ */
.mast{position:absolute;top:0;left:0;right:0;z-index:15}
.mast .wrap{display:flex;align-items:baseline;gap:28px;padding-top:26px;flex-wrap:wrap}
.logo{font-family:var(--disp);font-size:28px}
.logo i{font-style:italic;color:var(--aqua)}
.mastnav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
.mastnav a{font-size:14px;font-weight:600;color:var(--f2);padding-bottom:3px;border-bottom:1.5px solid transparent;
transition:color .2s var(--out),border-color .2s var(--out)}
.mastnav a:hover,.mastnav a[aria-current]{color:var(--foam);border-bottom-color:var(--cyan)}
/* ═══════════ HERO ═══════════ */
/* flex-end overflows past the START edge when the content is taller than the box, which
put the title under the sticky masthead and clipped its first line. margin-top:auto on
the child is the same alignment without that failure. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
/* the masthead is out of flow at this width, so the hero reserves its height */
justify-content:flex-start;padding:clamp(88px,9vh,116px) 0 0;overflow:clip}
/* functional, not decorative: the dark pocket is what lets the photograph's black ground disappear under mix-blend-mode:screen */
.hero::before{content:"";position:absolute;right:-14%;top:-6%;width:78%;height:96%;z-index:0;pointer-events:none;
background:radial-gradient(closest-side,rgba(1,19,31,.95),rgba(1,19,31,.62) 46%,rgba(1,19,31,.18) 70%,transparent 84%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(104deg,rgba(1,19,31,.72) 0%,rgba(1,19,31,.52) 26%,rgba(1,19,31,.16) 52%,transparent 68%)}
/* the water line: you are at the surface */
.surfaceline{position:absolute;left:-10%;right:-10%;top:0;height:120px;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(214,255,251,.5),rgba(140,255,232,.14) 42%,transparent 100%);
filter:blur(10px);opacity:.7}
.hero-fish{position:absolute;
right:calc(max(0px,(100% - 1440px) / 2) - 2%);
top:10%;width:min(54%,760px);z-index:1;mix-blend-mode:screen;will-change:translate,rotate;
animation:hover 13s ease-in-out infinite alternate;filter:saturate(1.1)}
@keyframes hover{from{transform:translate3d(0,-18px,0) rotate(-2deg)}to{transform:translate3d(-22px,20px,0) rotate(2.4deg)}}
/* the title is sized to this column, so the column is the container it measures */
.hero .wrap{position:relative;z-index:2;padding-bottom:0;margin-top:auto;container-type:inline-size}
/* the photograph and the scale plate both sit in the right half from the fold down, so
the title stops before them instead of running underneath */
/* the plate reaches 47.6% of the column at the tightest width, measured */
@media (min-width:981px){.hero h1,.hero .kick{max-width:42%}}
.hero .kick{font-size:13px;font-weight:800;color:rgba(240,252,255,.82);letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.hero .kick a:hover{color:var(--aqua)}
.hero h1{--tl:6;font-size:clamp(50px,min(17cqi,84cqi / var(--tl)),240px);line-height:.88;
letter-spacing:-.035em;position:relative;font-weight:500;font-variation-settings:"opsz" 22;
overflow-wrap:normal}
.hero h1 .sp{display:block;font-style:italic;font-weight:400;font-size:min(.29em,34px);font-variation-settings:"opsz" 14;
letter-spacing:-.01em;color:var(--aqua);margin-top:.2em;margin-left:.04em;max-width:24ch}
.hero .claim{max-width:20em;margin:30px 0 0;font-size:clamp(19px,2vw,24px);line-height:1.42}
.hero .claim b{color:var(--sun);font-weight:800}
.scrollcue{display:flex;align-items:center;gap:14px;margin:38px 0 0;font-size:11.5px;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:rgba(240,252,255,.78)}
.scrollcue .ln{width:64px;height:1px;background:linear-gradient(90deg,var(--aqua),transparent);position:relative;overflow:hidden}
.scrollcue .ln::after{content:"";position:absolute;inset:0;background:var(--aqua);animation:sweep 2.6s var(--out) 5}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* key numbers rail at the fold */
.keyrail{margin-top:clamp(34px,5vw,64px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.keyrail div{padding:22px 26px 26px;border-left:1px solid var(--line)}
.keyrail div:first-child{border-left:0;padding-left:0}
.keyrail .k{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:rgba(240,252,255,.82)}
.keyrail .v{font-family:var(--disp);font-size:clamp(34px,4vw,54px);line-height:1;margin-top:12px;font-weight:500;font-variation-settings:"opsz" 22}
.keyrail .v small{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:rgba(240,252,255,.88);margin-top:10px;letter-spacing:0}
.keyrail .hot .v{color:var(--sun)}.keyrail .cool .v{color:var(--aqua)}.keyrail .warn .v{color:var(--coral);font-size:clamp(21px,2.1vw,26px)}
@media (max-width:900px){.keyrail{grid-template-columns:1fr 1fr}.keyrail div:nth-child(odd){border-left:0;padding-left:0}}
/* ═══════════ STATIONS ═══════════ */
main{position:relative;z-index:2}
.station{padding:clamp(70px,10vw,150px) 0 0;position:relative}
.stationhead{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(24px,3vw,44px)}
.stationhead .no{font-family:var(--disp);font-size:clamp(34px,3.8vw,54px);color:rgba(255,120,96,.62);line-height:1;font-variant-numeric:tabular-nums}
.stationhead h2{font-size:clamp(38px,5.6vw,84px);letter-spacing:-.035em}
.stationhead h2 em{font-style:italic;color:var(--aqua)}
.lead{font-family:var(--disp);font-size:clamp(28px,3.4vw,46px);line-height:1.16;max-width:20em;letter-spacing:-.02em}
.lead em{font-style:italic;color:var(--aqua)}
.prose{font-size:17.5px;color:var(--f2);max-width:36em}
.prose strong{color:var(--foam);font-weight:700}
.prose h3{font-family:var(--ui);font-size:19px;font-weight:800;letter-spacing:-.01em;margin:28px 0 8px;color:var(--foam)}
.g2{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.5vw,72px);align-items:start}
.g2.tight{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);align-items:start}
@media (max-width:900px){.g2,.g2.tight{grid-template-columns:1fr}.g3{grid-template-columns:1fr}}
/* the record sheet is three columns and one of them is a sentence. Sharing the row with
the disagreement panel needs more width than --col ever reaches, so it does not: the
panel sits below it, full width, which suits a two panel comparison anyway. */
#record .g2{grid-template-columns:1fr}
#record tbody td:last-child{min-width:24em}
#record table{max-width:1000px} /* a sentence column 1000px wide is not a reading width */
@media (max-width:640px){
/* the sheet is the page, so it wraps to the screen rather than scrolling off it */
#record tbody td:last-child{min-width:0}
#record table{font-size:15px}
#record th,#record td{padding-right:12px}
#record td.n{white-space:normal;font-size:19px}
}
/* and a scroll container behind that, for a value longer than any we hold today */
@media (max-width:900px){#record .g2 > div{overflow-x:auto}}
/* photo blocks */
.shot{position:relative;overflow:hidden;border-radius:2px;outline:1px solid rgba(240,252,255,.16);outline-offset:-1px}
.cinema,.zonefig{outline:1px solid rgba(240,252,255,.12);outline-offset:-1px}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,150,190,.30),rgba(1,19,31,.42));mix-blend-mode:multiply}
.strip .fr{position:relative}
.strip .fr::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,150,190,.18),rgba(1,19,31,.28));mix-blend-mode:multiply}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;font-size:13px;color:var(--f2);
background:linear-gradient(180deg,transparent,rgba(1,19,31,.86))}
.bleedL{margin-left:calc(var(--pad) * -1)}
.bleedR{margin-right:calc(var(--pad) * -1)}
/* full-bleed cinematic band */
.cinema{position:relative;margin-top:clamp(60px,8vw,120px);min-height:clamp(420px,64vh,760px);display:flex;align-items:flex-end;overflow:clip}
.cinema img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.1)}
.cinema::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(1,19,31,.78) 0%,rgba(1,19,31,.14) 34%,rgba(1,19,31,.9) 100%)}
.cinema .wrap{padding-top:80px;padding-bottom:56px}
.cinema h2{font-size:clamp(38px,5.6vw,82px);max-width:14em}
.cinema p{margin-top:16px;max-width:34em;font-size:18px;color:var(--f2)}
.credit{position:absolute;right:14px;bottom:10px;font-size:10.5px;color:var(--f4);letter-spacing:.08em}
/* variants strip */
.strip{display:flex;gap:14px;overflow-x:auto;padding:4px 0 20px;scroll-snap-type:x mandatory;
scrollbar-width:thin;margin-right:calc(var(--pad) * -1)}
.strip figure{margin:0;flex:0 0 clamp(230px,25vw,320px);scroll-snap-align:start}
.strip .fr{aspect-ratio:4/5;overflow:hidden;background:#000;border:1px solid rgba(240,252,255,.22)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out),filter .8s var(--out);filter:saturate(1.05)}
.strip figure:hover img{transform:scale(1.06);filter:saturate(1.2)}
.strip figcaption{margin-top:12px;font-size:14px;color:var(--f2)}
.strip figcaption b{display:block;font-family:var(--disp);font-size:23px;color:var(--foam);letter-spacing:-.02em;margin-bottom:4px}
/* ═══════════ INSTRUMENTS: parameters as glass tubes of water ═══════════ */
.panel{margin-top:clamp(20px,3vw,40px)}
.tube-row{display:grid;grid-template-columns:clamp(180px,17vw,265px) 1fr;gap:clamp(20px,3vw,50px);
align-items:center;padding:clamp(28px,3.6vw,48px) 0;border-top:1px solid var(--line)}
.tube-row:first-child{border-top:1px solid rgba(240,252,255,.34)}
.tube-row .head .k{font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:rgba(240,252,255,.72)}
.tube-row .head .val{font-family:var(--disp);font-size:clamp(44px,5.4vw,78px);line-height:.94;margin-top:10px;
letter-spacing:-.03em;font-weight:500;font-variation-settings:"opsz" 22;white-space:nowrap}
.tube-row .head .val sup{font-size:.4em;vertical-align:.66em;margin-left:.08em;font-weight:400}
.tube-row .head .val.long{font-size:clamp(34px,3.6vw,50px);letter-spacing:-.02em}
.tube-row .head .note{font-size:14.5px;color:var(--f2);margin:14px 0 0;max-width:21em}
.tube-row.temp .val{color:var(--sun)}
.tube-row.ph .val{color:#BCEB6E}
.tube-row.gh .val{color:#F0C97C}
.tube{position:relative;padding-top:16px}
.glass{position:relative;height:clamp(66px,7.2vw,96px);border-radius:999px;overflow:hidden;
background:linear-gradient(180deg,rgba(2,26,40,.75),rgba(2,18,31,.5));
border:1px solid rgba(240,252,255,.24);
box-shadow:inset 0 2px 0 rgba(240,252,255,.16),inset 0 -12px 24px -12px rgba(0,0,0,.85),0 18px 38px -24px rgba(0,8,14,.95)}
.glass::after{content:"";position:absolute;left:2%;right:2%;top:5%;height:30%;pointer-events:none;
border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0))}
.water{position:absolute;top:0;bottom:0;overflow:hidden;transform-origin:left center}
.water .fill{position:absolute;inset:0}
.temp .water .fill{background:linear-gradient(90deg,#39C8E8,#7FE3C6 40%,#F2D06A 76%,#EF9F3E)}
.ph .water .fill{background:linear-gradient(90deg,#E9DB4E,#BCEB6E 32%,#5BC98E 62%,#3E9FD0)}
.gh .water .fill{background:linear-gradient(90deg,#E4F7F8,#CDE9D8 32%,#E8CE8E 70%,#D2A052)}
.water::after{content:"";position:absolute;left:0;right:0;top:0;height:44%;
background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0))}
.water .bub{position:absolute;bottom:-6px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.72);
animation:tubeup linear infinite}
@keyframes tubeup{0%{transform:translateY(0) scale(.65);opacity:0}22%{opacity:.9}100%{transform:translateY(-96px) scale(1);opacity:0}}
.tube:hover .water{animation:slosh 1.5s var(--out)}
@keyframes slosh{0%{transform:none}28%{transform:skewX(-2.4deg) scaleX(1.012)}62%{transform:skewX(1.5deg) scaleX(.996)}100%{transform:none}}
.meniscus{position:absolute;top:-13px;bottom:-13px;width:2px;
background:linear-gradient(180deg,transparent,var(--foam) 20%,var(--foam) 80%,transparent)}
.meniscus b{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;
background:var(--foam);border:1px solid rgba(1,19,31,.45)}
.meniscus i{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;font-style:normal;
font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--foam)}
.etch{position:absolute;inset:0;pointer-events:none}
.etch span{position:absolute;top:0;width:1px;height:100%;background:rgba(240,252,255,.18);
box-shadow:1px 0 0 rgba(1,19,31,.32)}
.ends{display:flex;justify-content:space-between;margin-top:15px;font-size:12px;font-weight:700;
color:rgba(240,252,255,.68);letter-spacing:.06em}
.ends span{white-space:nowrap}
.ends span.lit{color:var(--foam)}
/* ── footprint: same missed water change, three volumes, three concentrations ── */
.foot-compare{margin-top:clamp(46px,5.6vw,82px);border-top:1px solid rgba(240,252,255,.34);padding-top:clamp(24px,3vw,40px)}
.foot-compare .grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,29vw,430px);gap:clamp(26px,3.6vw,56px);align-items:end}
.foot-compare .say{font-family:var(--disp);font-size:clamp(20px,2.05vw,28px);line-height:1.24;letter-spacing:-.018em;
color:var(--foam);margin:0;text-wrap:pretty}
.foot-compare .say em{font-style:italic;color:var(--sun)}
.foot-compare .say + .fine{margin-top:16px;font-size:14px;color:var(--f2);max-width:26em}
.tanks{display:flex;align-items:flex-end;gap:clamp(14px,2.2vw,32px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tanks::-webkit-scrollbar{display:none}
.tanks .t{flex:0 0 auto}
/* the vessel: glass with thickness, a meniscus and real substrate */
.vessel{position:relative;border-radius:3px;overflow:hidden;
background:linear-gradient(180deg,#0E6E92 0%,#0A5678 46%,#073E5C 100%);
box-shadow:inset 0 0 0 1px rgba(240,252,255,.5),inset 0 0 0 3px rgba(6,44,64,.55),
inset 0 0 0 4px rgba(240,252,255,.16),0 18px 38px -22px rgba(0,8,14,.95)}
.vessel .rim{position:absolute;left:0;right:0;top:0;height:5px;
background:linear-gradient(180deg,rgba(232,255,252,.85),rgba(140,200,215,.25))}
.vessel .meni{position:absolute;left:4px;right:4px;top:15%;height:2px;
background:linear-gradient(90deg,rgba(226,255,250,.85),rgba(226,255,250,.3));
box-shadow:0 3px 8px -2px rgba(0,10,18,.5)}
.vessel .spec{position:absolute;left:6%;top:20%;width:26%;bottom:34%;border-radius:40%;
background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
.vessel .sub{position:absolute;left:0;right:0;bottom:0;height:16%;
background:linear-gradient(180deg,#8E7A56,#6E5C3F);
box-shadow:inset 0 2px 0 rgba(255,255,255,.14)}
/* sand grain inside the vessel, not a decorative page grid: the detector matches the two-layer repeat, the material is the point */
.vessel .sub::after{content:"";position:absolute;inset:0;opacity:.5;
background-image:radial-gradient(circle at 20% 40%,rgba(255,255,255,.5) 0 .7px,transparent 1px),
radial-gradient(circle at 62% 70%,rgba(255,255,255,.35) 0 .6px,transparent 1px);
background-size:7px 7px,9px 9px}
/* the load: same waste, diluted by volume */
.vessel .load{position:absolute;left:0;right:0;bottom:16%;top:15%;
background:linear-gradient(0deg,rgba(224,140,52,.92),rgba(224,140,52,.22) 62%,rgba(224,140,52,0));
mix-blend-mode:normal}
.t5 .vessel .load{opacity:1}
.t10 .vessel .load{opacity:.5}
.t20 .vessel .load{opacity:.25}
/* the scale reference that earns "drawn to scale" */
.vessel .ruler{position:absolute;left:8%;bottom:26%;height:1px;background:var(--foam);
box-shadow:0 0 0 1px rgba(1,19,31,.4)}
.vessel .ruler::before,.vessel .ruler::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--foam)}
.vessel .ruler::before{left:0}
.vessel .ruler::after{right:0}
.vessel .rulerlab{position:absolute;left:8%;bottom:calc(26% + 7px);font-size:9.5px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;color:var(--foam);white-space:nowrap}
.tanks .t .nm{font-family:var(--disp);font-size:clamp(20px,2.1vw,27px);margin-top:15px;font-weight:500}
.tanks .t .dim{font-size:12.5px;color:rgba(240,252,255,.72);font-weight:600;margin-top:2px}
.tanks .t.best .nm{color:var(--aqua)}
.tanks .conc{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.tanks .conc b{font-family:var(--disp);font-size:22px;font-weight:600;color:#F0A93E}
.tanks .t20 .conc b{color:var(--aqua)}
.tanks .conc span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,252,255,.6)}
.tanks .verdictline{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:rgba(240,252,255,.58);margin-top:8px}
.tanks .t.best .verdictline{color:var(--aqua)}
.loadkey{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:12.5px;color:var(--f2)}
.loadkey i{width:34px;height:10px;border-radius:2px;display:block;
background:linear-gradient(90deg,rgba(224,140,52,.25),rgba(224,140,52,.92))}
@media (max-width:900px){
.tube-row{grid-template-columns:1fr;gap:20px;padding:26px 0}
.tube-row .head .val{font-size:clamp(40px,12vw,58px)}
.foot-compare .grid{grid-template-columns:1fr;gap:26px;align-items:start}
.tanks{gap:12px}
.vessel .rulerlab{font-size:8.5px}
.tanks .conc b{font-size:18px}
}
/* ═══════════ TABLE ═══════════ */
table{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0 26px}
caption{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--f3);padding-bottom:14px}
th,td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--f2)}
thead th{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f3);border-bottom:1px solid rgba(240,252,255,.32)}
tbody tr{transition:background .2s var(--out)}
tbody tr:hover{background:rgba(140,255,232,.05)}
tbody th{color:var(--foam);font-weight:700}
/* nowrap here set the table width from the longest value: 64 characters on the java moss
record, about 640px of unbreakable text, so the record scrolled sideways. 12em keeps
every figure on one line, the 90th percentile being 40 characters. nowrap_audit.py. */
td.n{font-family:var(--disp);font-size:21px;color:var(--aqua);min-width:12em;letter-spacing:-.01em;font-weight:600;font-variation-settings:"opsz" 11}
td.blank{color:var(--coral);font-weight:700;font-size:14px}
/* disagreement */
.dispute{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:rgba(1,19,31,.42)}
.dispute > div{padding:28px 30px 30px}
.dispute > div:first-child{border-right:1px solid var(--line)}
.dispute h3{font-family:var(--ui);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--f3);margin-bottom:14px}
.dispute q{font-family:var(--disp);font-size:clamp(21px,2.3vw,27px);line-height:1.28;quotes:none;display:block;color:var(--foam)}
.dispute .out{grid-column:1/-1;border-top:1px solid var(--line);background:rgba(140,255,232,.07);font-size:17px;color:var(--f2)}
.dispute .out b{color:var(--aqua);font-weight:800}
@media (max-width:800px){.dispute{grid-template-columns:1fr}.dispute > div:first-child{border-right:0;border-bottom:1px solid var(--line)}}
/* zones over photo */
.zonefig{position:relative;margin:20px 0 0;overflow:clip;min-height:clamp(380px,58vh,620px);display:flex;flex-direction:column;justify-content:flex-end}
.zonefig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.zonefig::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,19,31,.35),rgba(1,19,31,.82))}
.zrow{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 26px;border-top:1px solid var(--line);
font-weight:700;font-size:15.5px;color:var(--f3);transition:background .3s var(--out),color .3s var(--out)}
.zrow:hover{background:rgba(240,252,255,.06);color:var(--foam)}
.zrow.live{background:linear-gradient(90deg,rgba(47,227,242,.34),rgba(47,227,242,.02));color:var(--foam)}
.zrow.live b{color:var(--aqua)}
.zrow .tag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
/* mates */
.mate{display:grid;grid-template-columns:minmax(190px,.9fr) 1.6fr auto;gap:22px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);
transition:transform .3s var(--out),background .3s var(--out)}
.mate:hover{transform:translateX(10px);background:linear-gradient(90deg,rgba(140,255,232,.07),transparent)}
.mate .nm{font-family:var(--disp);font-size:clamp(25px,2.6vw,34px);letter-spacing:-.015em;color:var(--foam);font-weight:500}
.mate .why{font-size:16px;color:var(--f2)}
.mate .vd{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
border:1px solid rgba(140,255,232,.4);color:var(--aqua);background:rgba(140,255,232,.09);white-space:nowrap}
.mate .vd.warn{border-color:rgba(255,201,74,.45);color:var(--sun);background:rgba(255,201,74,.09)}
.mate .vd.no{border-color:rgba(255,90,70,.5);color:#FF8E7F;background:rgba(255,90,70,.11)}
@media (max-width:760px){.mate{grid-template-columns:1fr auto}.mate .why{grid-column:1/-1}}
/* the black band */
.blackband{position:relative;margin-top:clamp(50px,7vw,100px);padding:clamp(56px,7vw,104px) 0 clamp(46px,6vw,88px);
background:linear-gradient(180deg,rgba(0,4,8,.55),rgba(0,4,8,.88) 42%,rgba(0,4,8,.62));
border-top:1px solid rgba(240,252,255,.16);border-bottom:1px solid rgba(240,252,255,.16)}
.threefails{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(34px,4vw,58px)}
.threefails div{border-top:1px solid rgba(255,120,96,.42);padding-top:16px}
.threefails b{font-family:var(--disp);font-weight:400;font-size:26px;color:var(--coral);margin-right:10px}
.threefails span{display:block;margin-top:10px;font-size:15.5px;color:var(--f2)}
@media (max-width:820px){.threefails{grid-template-columns:1fr}}
/* pull */
.pull{font-family:var(--disp);font-size:clamp(36px,5.8vw,88px);line-height:1.02;letter-spacing:-.038em;max-width:14em;margin:0}
.pull span{font-style:italic;color:var(--coral)}
/* faq */
.faq{border-top:1px solid rgba(240,252,255,.3);margin-top:10px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 54px 24px 0;position:relative;
font-family:var(--disp);font-size:clamp(22px,2.5vw,32px);letter-spacing:-.015em;font-weight:500;color:var(--foam);transition:color .2s var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--aqua)}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:17px;height:1.5px;background:var(--cyan)}
.faq summary::before{content:"";position:absolute;right:19.7px;top:calc(50% - 8px);width:1.5px;height:17px;background:var(--cyan);
transition:transform .26s var(--out),opacity .26s var(--out)}
.faq details[open] summary::before{transform:scaleY(0);opacity:0}
.faq .a{padding:0 0 26px;color:var(--f2);max-width:36em;font-size:17px}
.faq .a p:last-child{margin-bottom:0}
/* gear + method */
.gear{border:1px solid var(--line);padding:26px 28px 24px;background:linear-gradient(168deg,rgba(255,90,70,.15),rgba(1,19,31,.45))}
.gear h3{font-size:27px;margin-bottom:8px}
.gear > p{font-size:14.5px;color:var(--f2);margin-bottom:14px}
.gear ul{list-style:none;margin:0;padding:0}
/* The note used to be nowrap in a flex row, so a sentence took the whole row and the label
collapsed to one word a line. The label column will not go under 9em and the note wraps. */
.gear li{display:grid;grid-template-columns:minmax(9em,auto) minmax(0,1.6fr);gap:6px 22px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);font-size:16px;font-weight:600}
.gear li a{border-bottom:1.5px solid rgba(255,201,74,.5);transition:color .2s var(--out),border-color .2s var(--out)}
.gear li a:hover{color:var(--sun);border-bottom-color:var(--sun)}
.gear li span{font-size:12.5px;color:var(--f3);font-weight:700;text-align:right;line-height:1.5}
@media (max-width:700px){.gear li{grid-template-columns:1fr}.gear li span{text-align:left}}
.gear .disc{font-size:12.5px;color:var(--f3);margin:16px 0 0;line-height:1.55}
.method{margin-top:22px;position:relative;padding:26px 28px 22px;border:1px solid var(--line);
background:linear-gradient(168deg,rgba(240,252,255,.10),rgba(1,19,31,.34));
backdrop-filter:blur(9px) saturate(1.06);
box-shadow:0 22px 50px -30px rgba(1,19,31,.9)}
/* the accent the depth gauge uses, laid along the top edge so the card reads as an instrument */
.method::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,rgba(140,255,232,.72),rgba(140,255,232,.06) 62%,transparent)}
.method h3{font-size:clamp(20px,1.9vw,25px);margin-bottom:18px;letter-spacing:-.015em}
.method dl{display:grid;grid-template-columns:minmax(6.5em,auto) 1fr;gap:0 22px;margin:0;
font-size:14.5px}
.method dt{font-weight:700;color:var(--f3);font-size:12.5px;letter-spacing:.02em;
padding:12px 0 13px;border-top:1px solid rgba(240,252,255,.11)}
.method dd{margin:0;color:var(--f2);padding:12px 0 13px;
border-top:1px solid rgba(240,252,255,.11)}
.method dl>dt:first-of-type,.method dl>dd:first-of-type{border-top:0;padding-top:0}
/* a short column beside a tall one, which is what sticky is for. The cell has to stretch first:
.g2 is align-items:start, so without this the card has no room to travel. */
.g2>:has(>.method){align-self:stretch}
.g2 .method{position:sticky;top:76px}
@media (max-width:900px){.g2 .method{position:static}}
.method dd a{border-bottom:1px solid rgba(140,255,232,.5)}
.method dd a:hover{color:var(--aqua)}
.sticky{position:sticky;top:28px}
/* The sidecar: the gear box and the provenance, side by side. It used to be .sticky with no
column around it, which put it under the fixed depth gauge and let the next section paint over
it. .sticky stays for anything that is genuinely a column beside something taller. */
.sidecar{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,34px)}
.sidecar .method{margin-top:0}
/* related */
.relgrid{display:grid;grid-template-columns:repeat(var(--rc,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.relgrid a{background:rgba(1,19,31,.6);padding:28px 24px 30px;transition:background .25s var(--out),transform .25s var(--out)}
.relgrid a:hover{background:rgba(47,227,242,.14)}
.relgrid .t{font-family:var(--disp);font-size:27px;letter-spacing:-.02em}
.relgrid .s{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f3);margin-top:12px}
@media (max-width:900px){.relgrid{grid-template-columns:1fr 1fr}}
footer{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(1,19,31,0),rgba(120,100,68,.28))}
footer a:hover{color:var(--aqua)}
/* ═══════════ LIQUID: pointer reactive water ═══════════ */
.pointerlight{position:fixed;inset:0;z-index:-2;pointer-events:none;
background:radial-gradient(clamp(280px,32vw,520px) circle at var(--mx,50%) var(--my,38%),
rgba(160,255,240,calc(.16 + var(--vel,0) * .20)),transparent 66%)}
#ripple{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.8}
.blob{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
pointer-events:none;z-index:60;mix-blend-mode:screen;will-change:transform;
background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.92),rgba(160,255,240,.34) 44%,transparent 72%);
transform:translate3d(-200px,-200px,0)}
.blob::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(160,255,240,.22)}
@media (hover:none),(pointer:coarse){.blob{display:none}}
/* liquid distortion on photographs */
.shot img,.strip img,.cinema img,.zonefig img{filter:url(#liquid) saturate(1.06)}
.shot:hover img,.strip figure:hover img{filter:url(#liquid-strong) saturate(1.16)}
/* liquid sweep through table rows */
tbody tr{background-image:linear-gradient(90deg,rgba(160,255,240,.16),rgba(160,255,240,.02));
background-size:0 100%;background-repeat:no-repeat;transition:background-size .55s var(--out)}
tbody tr:hover{background:none;background-image:linear-gradient(90deg,rgba(160,255,240,.16),rgba(160,255,240,.02));
background-size:100% 100%;background-repeat:no-repeat}
/* magnetic chips */
.vd,.tag,.verdictline{will-change:transform}
/* letter wave in the title */
.hero h1 .ltr{display:inline-block;will-change:transform}
.hero h1:hover .ltr{animation:ltrwave .85s var(--out) both;animation-delay:calc(var(--i) * 42ms)}
@keyframes ltrwave{0%{transform:none}34%{transform:translateY(-.075em) rotate(-1.6deg)}68%{transform:translateY(.045em) rotate(1deg)}100%{transform:none}}
/* liquid underline on the mast */
.mastnav a{position:relative;border-bottom:0!important;padding-bottom:6px}
.mastnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;opacity:0;
background:radial-gradient(6px 4px at 10% 60%,var(--cyan),transparent 70%),
radial-gradient(6px 4px at 38% 30%,var(--aqua),transparent 70%),
radial-gradient(6px 4px at 66% 65%,var(--cyan),transparent 70%),
radial-gradient(6px 4px at 92% 35%,var(--aqua),transparent 70%);
transition:opacity .28s var(--out),transform .5s var(--out);transform:translateY(4px)}
.mastnav a:hover::after,.mastnav a[aria-current]::after{opacity:.95;transform:none;animation:swim-line 2.4s ease-in-out infinite alternate}
@keyframes swim-line{from{background-position:0 0}to{background-position:6px 2px}}
/* ═══════════ STICKY CARE BAR ═══════════ */
.carebar{position:fixed;top:0;left:0;right:0;z-index:18;transform:translateY(-101%);opacity:0;
background:rgba(0,10,18,.84);backdrop-filter:blur(16px) saturate(1.25);
border-bottom:1px solid rgba(240,252,255,.18)}
.carebar .inner{width:var(--col);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:0;height:56px;overflow-x:auto;scrollbar-width:none}
.carebar .inner::-webkit-scrollbar{display:none}
.carebar .bm{font-family:var(--disp);font-size:19px;padding-right:22px;white-space:nowrap}
.carebar .bm i{font-style:italic;color:var(--aqua)}
.carebar dl{display:flex;align-items:baseline;gap:9px;margin:0;padding:0 20px;border-left:1px solid var(--line);white-space:nowrap}
.carebar dt{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f3)}
.carebar dd{margin:0;font-family:var(--disp);font-size:21px;color:var(--foam)}
.carebar dd.na{font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--coral);border-bottom:1px dashed rgba(255,90,70,.6)}
.carebar .jump{margin-left:auto;padding-left:22px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--aqua);white-space:nowrap}
.carebar .jump:hover{color:var(--foam)}
@supports (animation-timeline: scroll()){
.carebar{animation:barin linear both;animation-timeline:scroll(root);animation-range:82vh 100vh}
}
@keyframes barin{from{transform:translateY(-101%);opacity:0}to{transform:none;opacity:1}}
/* ═══════════ LIGHT BAND: the lit shallows ═══════════ */
.lightband{position:relative;margin-top:clamp(46px,7vw,100px);padding:clamp(64px,8vw,116px) 0 clamp(52px,7vw,100px);
color:#06293A;background:linear-gradient(180deg,#EAFBFF 0%,#D6F2F8 58%,#C2E8F1 100%);
clip-path:polygon(0 26px,7% 12px,19% 30px,31% 10px,44% 28px,57% 8px,69% 26px,82% 11px,93% 27px,100% 16px,
100% calc(100% - 18px),92% calc(100% - 4px),80% calc(100% - 22px),67% calc(100% - 6px),53% calc(100% - 24px),
40% calc(100% - 8px),27% calc(100% - 22px),14% calc(100% - 5px),0 calc(100% - 20px))}
.lightband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(1,19,31,.16))}
.lightband .stationhead h2{color:#04202F}
.lightband .stationhead h2 em{color:#0E7E96}
.lightband .stationhead .no{color:rgba(200,58,32,.85)} /* .62 measured 2.47 on the darkest stop, and this is 34 to 54px display type that needs 3.0; .85 measures 3.77 with the same hue */
.lightband .prose{color:#22485A}
.lightband .prose strong{color:#04202F}
.lightband .strip figcaption{color:#23495B}
.lightband .strip figcaption b{color:#04202F}
.lightband .strip .fr{border-color:rgba(6,41,58,.28)}
.lightband .stripfade{background:linear-gradient(90deg,rgba(222,245,250,0),rgba(222,245,250,.9))}
/* The band sets its own text color, so everything that inherits is fine here. What follows sets
a color explicitly against the deep water: the matrix, the FAQ answers, the method box, the
bullet lists, and every hairline in --line, which is 15% white and invisible on a pale ground.
Measured against #C2E8F1, the darkest stop of the gradient above, because a color that
clears AA in the middle of the band can fail at the bottom of it. */
.lightband .matrix td{color:#06293A}
.lightband .matrix td.txt,.lightband .matrix.gear2 td.txt:last-child{color:#22485A}
.lightband .matrix td b,.lightband .matrix td strong{color:#04202F}
.lightband .matrix thead th{color:rgba(6,41,58,.72)}
.lightband .matrix th,.lightband .matrix td{border-bottom-color:rgba(6,41,58,.22)}
.lightband .matrix tbody tr:hover{background:rgba(6,41,58,.05)}
.lightband .matrix td.na3,.lightband .matrix td.no4{color:#B32E1C}
.lightband .matrix td a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.46)}
.lightband .matrix td a:hover{color:#04202F;border-bottom-color:#0B6C80}
.lightband .matrixwrap .matrix tbody th,
.lightband .matrixwrap .matrix thead th:first-child{background:#E7F9FD;color:rgba(6,41,58,.72);
box-shadow:1px 0 0 rgba(6,41,58,.22)}
.lightband .matrix.gear2 tbody th a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.46)}
.lightband .matrix caption{color:rgba(6,41,58,.72)}
.lightband .faq{border-top-color:rgba(6,41,58,.3)}
.lightband .faq details{border-bottom-color:rgba(6,41,58,.22)}
.lightband .faq summary::after,.lightband .faq summary::before{background:#0B6C80}
.lightband .faq summary:hover{color:#0B6C80}
.lightband .faq .a{color:#22485A}
.lightband .faq .a b,.lightband .faq .a strong{color:#04202F}
.lightband .faq .a a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.46)}
.lightband .method{border-color:rgba(6,41,58,.22);
background:linear-gradient(168deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
box-shadow:0 20px 44px -32px rgba(6,41,58,.5)}
.lightband .method::before{background:linear-gradient(90deg,rgba(11,108,128,.7),
rgba(11,108,128,.08) 62%,transparent)}
.lightband .method dt,.lightband .method dd{border-top-color:rgba(6,41,58,.16)}
.lightband .method dt{color:rgba(6,41,58,.72)}
.lightband .method dd{color:#22485A}
.lightband .method dd a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.52)}
.lightband .pts li{border-top-color:rgba(6,41,58,.22)}
.lightband .pts li b,.lightband .pts li strong{color:#04202F}
.lightband .pts li a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.46)}
.lightband .pts li::before{background:#0B6C80}
.lightband .pts.warn li::before{background:#B32E1C}
.lightband .build .sub2{color:rgba(6,41,58,.72)}
.lightband .matrix thead th.sp2{color:#04202F}
.lightband .keyrail .k{color:rgba(6,41,58,.72)}
.lightband .keyrail .v small{color:#22485A}
.lightband .tube-row .head .k{color:rgba(6,41,58,.72)}
.lightband .tube-row .head .note{color:#22485A}
.lightband .meniscus i{color:#04202F}
.lightband .ends{color:rgba(6,41,58,.72)}
.lightband .ends span.lit{color:#04202F}
.lightband .fill .fk{color:rgba(6,41,58,.72)}
.lightband .etch span{background:rgba(6,41,58,.16);box-shadow:1px 0 0 rgba(255,255,255,.5)}
/* Text that has no ground of its own, so it takes the band palette. .prose h3 is the one that
matters: it is the subheading of every two column station and it appears in 94 light bands. */
.lightband .prose h3{color:#04202F}
.lightband .faq summary{color:#04202F}
.lightband .mate .nm{color:#04202F}
.lightband .mate .why{color:#22485A}
.lightband .mate{border-top-color:rgba(6,41,58,.22)}
.lightband .fail{border-bottom-color:rgba(6,41,58,.22)}
.lightband .fail p{color:#22485A}
.lightband .threefails b{color:#B32E1C}
.lightband .footnote{color:rgba(6,41,58,.72);border-top-color:rgba(6,41,58,.22)}
.lightband .tanks .t .dim{color:rgba(6,41,58,.72)}
.lightband .tanks .conc span{color:rgba(6,41,58,.72)}
.lightband .plate .pl{color:rgba(6,41,58,.72)}
.lightband caption,.lightband thead th{color:rgba(6,41,58,.72);
border-bottom-color:rgba(6,41,58,.28)}
.lightband tbody th{color:#04202F}
.lightband td,.lightband th{color:#06293A}
/* Cards that bring their own dark ground. Translucent dark over a pale band composites to a mid
slate, which fails against the light text on it and against the band around it, so the ground
goes opaque and the text stays as designed. */
.lightband .dispute{background:rgba(1,19,31,.9);border-color:rgba(6,41,58,.3)}
.lightband .gear{background:linear-gradient(168deg,rgba(255,90,70,.22),rgba(1,19,31,.92));
border-color:rgba(6,41,58,.3)}
.lightband .guides a{background:rgba(1,19,31,.9)}
.lightband .guides a:hover{background:rgba(4,32,44,.95)}
.lightband .build{background:rgba(1,19,31,.9);border-color:rgba(6,41,58,.3)}
.lightband .method{background:rgba(255,255,255,.44)}
/* scroll affordance on the strip */
.striphold{position:relative}
.stripfade{position:absolute;top:0;bottom:64px;right:calc(var(--pad) * -1);width:58px;pointer-events:none;z-index:2;
background:linear-gradient(90deg,rgba(1,19,31,0),rgba(1,19,31,.7))}
/* ═══════════ MICRO POLISH ═══════════ */
:target,[id]{scroll-margin-top:78px}
.pull{text-wrap:balance}
td.n{color:var(--aqua)}
.dispute q{position:relative}
.dispute q::before{content:"C";position:absolute;left:-.52em;top:-.05em;color:var(--coral);opacity:.72}
.zrow.live b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;border-radius:50%;
background:var(--aqua);box-shadow:0 0 0 0 rgba(140,255,232,.7);animation:beat 2.6s ease-out infinite;vertical-align:middle}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(140,255,232,.55)}70%{box-shadow:0 0 0 11px rgba(140,255,232,0)}100%{box-shadow:0 0 0 0 rgba(140,255,232,0)}}
.faq summary{transition:color .2s var(--out),transform .3s var(--out)}
.faq summary:hover{transform:translateX(8px)}
.keyrail .warn .v .dash{border-bottom:1px dashed rgba(255,90,70,.55);padding-bottom:4px}
.keyrail .warn .v{font-family:var(--ui);font-size:19px;font-weight:800;letter-spacing:-.01em}
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:16px;
background:radial-gradient(12px 10px at 8% 100%,rgba(240,252,255,.14),transparent 70%),
radial-gradient(14px 11px at 26% 100%,rgba(240,252,255,.10),transparent 70%),
radial-gradient(11px 9px at 47% 100%,rgba(240,252,255,.13),transparent 70%),
radial-gradient(15px 12px at 68% 100%,rgba(240,252,255,.09),transparent 70%),
radial-gradient(12px 10px at 88% 100%,rgba(240,252,255,.12),transparent 70%)}
/* ── mobile: the masthead joins the flow and the nav becomes one scrolling row ── */
@media (max-width:980px){
/* position handled in the sticky block below */
.mast .wrap{padding-top:20px;gap:14px;flex-wrap:nowrap;align-items:center}
.mastnav{margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:20px;
-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 82%,transparent)}
.mastnav::-webkit-scrollbar{display:none}
.mastnav a{white-space:nowrap}
.logo{font-size:24px;white-space:nowrap}
.hero{min-height:auto;padding:22px 0 0}
.hero::after{background:linear-gradient(170deg,rgba(1,19,31,.28) 0%,rgba(1,19,31,.62) 46%,rgba(1,19,31,.34) 100%)}
.hero-fish{position:relative;right:auto;top:auto;width:100%;max-width:none;max-height:42svh;object-fit:contain;object-position:right center;margin:-6px -4% 2px auto;display:block}
/* 175vw / longest word is the column mobile has, measured, so a long single word
shrinks to fit instead of running off the right edge */
.hero h1{font-size:clamp(44px,min(23cqi,200cqi / var(--tl)),120px);max-width:100%}
.hero .claim{margin-top:22px}
.surfaceline{height:80px}
.keyrail{margin-top:34px}
.keyrail div{padding:18px 16px 20px}
.carebar .inner{height:52px}
}
@media (prefers-reduced-motion:reduce){
.bg-rays,.hero-fish,.motes i,.gauge .pip,.scrollcue .ln::after,.reveal,.par,.drawline,.zrow.live b::after{animation:none!important}
.carebar{animation:none!important;transform:none;opacity:1;position:sticky}
.blob,#ripple,.pointerlight{display:none!important}
.shot img,.strip img,.cinema img,.zonefig img,.shot:hover img,.strip figure:hover img{filter:none!important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
}
/* ═══════════ GUIDES GRID (shared component) ═══════════ */
.guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);margin-top:8px}
.guides a{background:rgba(1,19,31,.55);padding:26px 22px 28px;transition:background .25s var(--out)}
.guides a:hover{background:rgba(47,227,242,.14)}
.guides .t{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.guides .s{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f3);margin-top:12px}
.guides .d{font-size:14px;color:var(--f2);margin-top:12px}
@media (max-width:1000px){.guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.guides{grid-template-columns:1fr}}
/* ═══════════ COMMUNITY BUILDS (shared component) ═══════════ */
.builds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:10px}
.build{border:1px solid var(--line);background:rgba(1,19,31,.5);padding:24px 24px 22px;position:relative;
transition:border-color .3s var(--out),transform .3s var(--out)}
.build:hover{border-color:rgba(140,255,232,.5);transform:translateY(-3px)}
.build .vol{font-family:var(--disp);font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.03em}
.build .sub2{font-size:13px;color:var(--f3);margin-top:5px}
.build ul{list-style:none;margin:18px 0 0;padding:0}
.build li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:12px 0;
border-top:1px solid var(--line);font-size:15px}
.build li i{width:9px;height:9px;border-radius:50%;display:block;align-self:center}
.build li.s-surface i{background:var(--aqua)}
.build li.s-mid i{background:var(--cyan)}
.build li.s-bottom i{background:var(--sun)}
.build li b{font-weight:700;color:var(--foam)}
.build li span{font-family:var(--disp);font-size:18px;font-weight:500;white-space:nowrap}
.build .warn2{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,201,74,.32);font-size:13.5px;color:#FFD98A}
.build .empty2{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,90,70,.32);font-size:13.5px;color:#FF9583}
@media (max-width:1000px){.builds{grid-template-columns:1fr}}
/* ═══════════ SEARCH FIELD (shared component) ═══════════ */
.finder{margin-top:clamp(30px,4vw,48px);max-width:760px}
.finder form{position:relative;display:flex;align-items:center;gap:14px;height:clamp(62px,6.4vw,76px);padding:0 8px 0 26px;
border-radius:999px;background:linear-gradient(180deg,rgba(2,26,40,.82),rgba(2,18,31,.62));
border:1px solid rgba(240,252,255,.3);
box-shadow:inset 0 2px 0 rgba(240,252,255,.16),inset 0 -12px 24px -12px rgba(0,0,0,.85),0 22px 44px -26px rgba(0,8,14,.95)}
.finder form::after{content:"";position:absolute;left:2%;right:2%;top:6%;height:30%;pointer-events:none;
border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0))}
.finder svg{flex:none;opacity:.8}
.finder input{flex:1;min-width:0;background:none;border:0;color:var(--foam);font-family:var(--ui);
font-size:clamp(16px,1.5vw,19px);font-weight:600;outline:none}
.finder input::placeholder{color:rgba(240,252,255,.5);font-weight:500}
.finder button{flex:none;height:calc(100% - 16px);padding:0 clamp(18px,2vw,28px);border:0;border-radius:999px;cursor:pointer;
background:var(--cyan);color:#04202C;font-family:var(--ui);font-size:14.5px;font-weight:800;letter-spacing:.04em;
transition:transform .22s var(--out),background .22s var(--out)}
.finder button:hover{transform:translateY(-1px);background:var(--aqua)}
.finder .hint{margin:16px 0 0;font-size:13.5px;color:var(--f2)}
.finder .hint a{border-bottom:1px solid rgba(140,255,232,.45)}
.finder .hint a:hover{color:var(--aqua)}
@media (max-width:640px){
.finder form{height:auto;flex-wrap:wrap;padding:14px 16px;border-radius:26px}
.finder input{width:100%;padding:6px 0}
.finder button{width:100%;height:46px}
}
/* ═══════════ WIDE TABLE WRAPPER (shared component) ═══════════ */
.matrixwrap{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* ═══════════ SKIP LINK (shared component) ═══════════ */
.skip{position:fixed;top:-120px;left:14px;z-index:80;padding:14px 20px;border-radius:0 0 14px 14px;
background:var(--cyan);color:#04202C;font-family:var(--ui);font-size:13px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
box-shadow:0 14px 30px -14px rgba(0,8,14,.9);transition:top .18s var(--out)}
.skip:focus,.skip:focus-visible{top:0;outline:2px solid var(--abyss);outline-offset:-4px}
/* ═══════════ FOOTER (shared component) ═══════════ */
footer.foot{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(1,19,31,0),rgba(120,100,68,.26))}
footer.foot .wrap{display:block;padding-top:clamp(34px,4.4vw,52px);padding-bottom:clamp(40px,5vw,64px)}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px)}
.footgrid .mark{font-family:var(--disp);font-weight:500;font-size:23px;letter-spacing:-.01em}
.footgrid .mark b{color:var(--aqua);font-weight:500}
.footgrid h4{font-family:var(--ui);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--f3);margin-bottom:16px}
.footgrid ul{list-style:none;margin:0;padding:0}
.footgrid li{margin-bottom:11px}
.footgrid a{font-size:14.5px;color:var(--f2);transition:color .18s var(--out)}
.footgrid a:hover{color:var(--aqua)}
.foot .blurb{font-size:14.5px;color:var(--f3);max-width:28em;margin:14px 0 0}
.footnote{margin-top:clamp(30px,3.6vw,46px);padding-top:20px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--f4)}
.stack-sm{margin-top:14px}
@media (max-width:980px){.footgrid{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.footgrid{grid-template-columns:1fr}}
/* A record with no photograph on file says so, in the same voice as the cards. */
.hero-pending{position:absolute;right:2%;top:12%;width:min(46%,600px);aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;border:1px solid var(--line);background:rgba(15,31,39,.42)}
.hero-pending .bi{font-family:var(--disp);font-style:italic;font-size:clamp(19px,2.2vw,27px);color:rgba(240,252,255,.62)}
.hero-pending .pl{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--f4)}
@media (max-width:980px){.hero-pending{position:relative;right:auto;top:auto;width:100%;margin:0 0 12px}}
/* One or two sheets keep a card width instead of stretching into a banner. */
.relgrid.few{grid-template-columns:repeat(var(--rc,1),minmax(0,340px));justify-content:start;background:none;border:0;gap:16px}
.relgrid.few a{border:1px solid var(--line)}
@media (max-width:900px){.relgrid.few{grid-template-columns:1fr}}
/* One or two sheets keep a card width here too, rather than a full bleed banner. */
.guides.few{grid-template-columns:repeat(auto-fit,minmax(0,340px));justify-content:start;background:none;border:0;gap:16px}
.guides.few a{border:1px solid var(--line)}
@media (max-width:900px){.guides.few{grid-template-columns:1fr}}
/* Asking for something that is not written yet, through a page that exists. */
/* Literal strings: a response header, an nginx directive, a query string. Set in the UI
face rather than a monospace one, because this design carries two typefaces on purpose
and a third one for a handful of inline strings is not a good trade. Weight and a tint
carry the distinction instead. */
code{font-family:var(--ui);font-size:.92em;font-weight:700;letter-spacing:.01em;
padding:1px 6px;border-radius:3px;background:rgba(140,255,232,.1);color:var(--aqua)}
.matrix code{font-size:.95em}
.askbtn{display:inline-block;border-radius:999px;padding:13px 22px;background:var(--cyan);color:#04202C;font-weight:800;font-size:14.5px;transition:background .2s var(--out),transform .2s var(--out)}
.askbtn:hover{background:var(--aqua);transform:translateY(-1px)}
/* ── Back to the surface ─────────────────────────────────────────────────────
Revealed by the scroll position itself, so it costs no script. Where scroll
timelines are unsupported the button simply stays visible, which is a worse
design than the intended one but never a missing feature. */
/* The same pill as .askbtn, because this is the other control on the page that wants to
be found: filled --cyan on #04202C at 10.7:1, rather than a translucent circle sitting
within a few percent of the page behind it. The word carries what an arrow only implies.
No backdrop-filter: it was propping up a fill that is now solid. */
.totop{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:19;
display:inline-flex;align-items:center;gap:9px;padding:12px 20px 12px 15px;
border-radius:999px;border:1px solid rgba(4,32,44,.22);
background:var(--cyan);color:#04202C;font-size:13px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;
box-shadow:0 8px 26px rgba(1,19,31,.6);
transition:background .25s var(--out),translate .25s var(--out),box-shadow .25s var(--out)}
.totop:hover{background:var(--aqua);translate:0 -3px;box-shadow:0 12px 30px rgba(1,19,31,.66)}
.totop svg{display:block}
@supports (animation-timeline:scroll(root)){
.totop{opacity:0;pointer-events:none;animation:totop-rise linear both;
animation-timeline:scroll(root);animation-range:260px 480px}
@keyframes totop-rise{
from{opacity:0;pointer-events:none;translate:0 14px}
to{opacity:1;pointer-events:auto;translate:0 0}}
}
/* 13px not 11px: at 11 the pill measured 43px tall, under the 44px touch minimum */
@media (max-width:600px){.totop{padding:13px 17px 13px 13px;font-size:12px;gap:8px;right:12px;bottom:12px}}
@media (prefers-reduced-motion:reduce){
.totop{animation:none;opacity:1;pointer-events:auto;transition:none}
.totop:hover{translate:none}
}
/* ── Consent, and the single measurement it gates ────────────────────────────
Shown only when inc/consent.php finds no stored choice, through a class it puts on the
root element in head. Showing it from script instead would flash it in for everybody who
already answered. With JavaScript off the class is never set, so the bar never appears
and neither does the tag it gates. */
.aqbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
border-top:1px solid rgba(140,255,232,.5);background:rgba(1,19,31,.94);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 -18px 40px rgba(1,19,31,.5)}
.aq-ask .aqbar{display:block}
/* var(--pad) on the horizontal axis, not 0. The shorthand here replaced both axes, so
.wrap's own gutter was not narrowed but deleted, and on a phone the heading, the
paragraph and both buttons sat flush against each edge of the screen. */
.aqbar .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:clamp(18px,3vw,44px);align-items:center;padding:18px var(--pad)}
.aqbar h2{font-family:var(--disp);font-size:20px;font-weight:500;margin:0 0 6px;
letter-spacing:-.02em}
.aqbar p{margin:0;font-size:14.5px;line-height:1.5;color:var(--f2);max-width:62em}
.aqbar p b{color:var(--foam);font-weight:800}
.aqbar-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* .askbtn was written for an anchor, so a button needs the three things it assumes */
.aqbar .askbtn{border:0;cursor:pointer;font-family:var(--ui);font-size:14.5px}
/* refusing is one click on a control the same size as accepting, next to it */
.aqbar-no{border:1px solid rgba(240,252,255,.34);background:transparent;color:var(--foam);
border-radius:999px;padding:12px 20px;font-family:var(--ui);font-size:14.5px;
font-weight:800;cursor:pointer;
transition:border-color .2s var(--out),background .2s var(--out)}
.aqbar-no:hover{border-color:var(--foam);background:rgba(240,252,255,.08)}
.aqbar-no:focus-visible{outline:none;border-color:rgba(140,255,232,.72);
box-shadow:0 0 0 1px rgba(140,255,232,.5),0 0 0 5px rgba(140,255,232,.12)}
.aqbar-act a{font-size:13.5px;color:var(--f2);border-bottom:1px solid rgba(140,255,232,.5)}
.aqbar-act a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
/* the bar and back to top would otherwise sit on top of each other */
.aq-ask .totop{bottom:calc(clamp(14px,2vw,28px) + 108px)}
@media (max-width:820px){
.aqbar .wrap{grid-template-columns:1fr;gap:14px}
.aq-ask .totop{display:none}
}
/* the two buttons the privacy page uses to change the answer later */
.aqswitch{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.aqswitch .askbtn{border:0;cursor:pointer;font-family:var(--ui);font-size:14.5px}
#aq-consent-state{font-size:13.5px;color:var(--f2)}
/* Search sits in the masthead as one more place to go, not as a widget. */
.mastnav .find{display:inline-flex;align-items:center;gap:7px}
.mastnav .find svg{width:14px;height:14px;flex:none;opacity:.75;transition:opacity .2s var(--out)}
.mastnav .find:hover svg,.mastnav .find[aria-current] svg{opacity:1}
/* ── A numbered list of failures ─────────────────────────────────────────────
The number carries the row, so this is a rule and a figure rather than one
more grid of cards. */
.fails{margin-top:26px;border-top:1px solid var(--line)}
/* two structures carry this class: a label plus prose on the topic pages, and a bare
note inside a card on the silos. the bare note is the default, and the two column
layout is opted into by having a label, so neither has to be tagged by hand. */
.fail{display:block;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line)}
.fail:has(.fr){display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:clamp(18px,2.6vw,44px);align-items:start}
/* a numeral does not need 44% of the row. that variant is the one that wraps its
heading and prose in a div; the sentence variant leaves the prose a bare p. */
.fail:has(> .fr + div){grid-template-columns:clamp(52px,5.6vw,84px) minmax(0,1fr)}
.fail .fr{font-family:var(--disp);font-size:clamp(26px,2.9vw,40px);line-height:1.04;color:var(--coral);
font-variation-settings:"opsz" 16;text-wrap:balance}
.fail h3{font-size:clamp(20px,2.1vw,27px);margin:0 0 8px}
.fail p{font-size:15.5px;color:var(--f2);max-width:52em;margin:0}
@media (max-width:700px){
.fail{padding:20px 0}
.fail:has(.fr){grid-template-columns:1fr;gap:6px}
.fail .fr{font-size:30px}
}
/* The water column as a panel, when there is no photograph behind it. */
.zones{margin-top:24px;border:1px solid var(--line);background:rgba(1,19,31,.42)}
.zones .zrow:first-child{border-top:0}
/* A cell that cites its own source should look like it does. */
.matrix td a{border-bottom:1px solid rgba(140,255,232,.42);transition:color .18s var(--out),border-color .18s var(--out)}
.matrix td a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
/* The field matrix: written for the silo hub, now also used by a record that
compares species, so it lives in the shared sheet the record page loads. */
.matrix{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.matrix th,.matrix td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.matrix thead th{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f3);
border-bottom:1px solid rgba(240,252,255,.32);white-space:nowrap}
.matrix thead th.sp2{font-family:var(--disp);font-size:clamp(18px,1.8vw,23px);font-weight:500;letter-spacing:-.02em;
text-transform:none;color:var(--foam)}
.matrix tbody th{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f3);min-width:8em;text-wrap:balance}
.matrix td{font-family:var(--disp);font-size:19px;font-weight:500;color:var(--foam)}
.matrix td.na3{font-family:var(--ui);font-size:12.5px;font-weight:800;color:var(--coral)}
.matrix td.txt{font-family:var(--ui);font-size:14.5px;font-weight:600;color:var(--f2)}
.matrix tbody tr:hover{background:rgba(140,255,232,.05)}
/* ── The masthead stays put on a phone ──────────────────────────────────────
On a small screen this site is one long scroll, and losing the way out of a
page after the first screen costs more than the 54px the bar takes. It is in
flow until it sticks, so nothing overlaps at rest. */
@media (max-width:980px){
.mast{position:sticky;top:0;z-index:30;
background:rgba(0,10,18,.82);
-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(140,255,232,.14)}
.mast .wrap{padding-top:0;min-height:54px;align-items:center}
.logo{font-size:21px}
.mastnav{gap:18px}
.mastnav a{font-size:13px;padding-bottom:2px}
.mastnav a::after{height:3px}
.mastnav .find{gap:6px}
.mastnav .find svg{width:13px;height:13px}
/* the record bar arrives under the masthead rather than behind it */
.carebar{top:54px}
.carebar .inner{height:48px}
}
@media (max-width:600px){
.mast .wrap{min-height:50px;gap:12px}
.logo{font-size:19px}
.carebar{top:50px}
}
/* ── The dropdown under the search field ────────────────────────────────────
Same panel on the front page and on the search page. Built by script, so it
is styled here and referenced nowhere in the markup. */
.finder{position:relative}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
border:1px solid rgba(140,255,232,.28);border-radius:6px;overflow:hidden;
/* opaque. It overlays the section below the hero now, and at .94 with a blur the
heading behind it read through the last row. */
background:#020D17;
box-shadow:0 26px 60px -20px rgba(0,0,0,.75)}
.sugg .s-row{display:flex;align-items:baseline;gap:14px;padding:14px 20px;
border-top:1px solid rgba(240,252,255,.08);text-decoration:none}
.sugg .s-row:first-child{border-top:0}
.sugg a.s-row:hover,.sugg a.s-row.on{background:rgba(47,227,242,.14)}
.sugg .s-t{font-family:var(--disp);font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--foam)}
.sugg .s-n{font-size:12.5px;color:var(--f3);white-space:nowrap}
.sugg .s-k{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--f3);white-space:nowrap}
.sugg .s-q{background:rgba(255,90,70,.06)}
.sugg .s-q .s-t{color:var(--f2)}
.sugg .s-q .s-k{color:#FF9583}
.sugg .s-none{font-size:14.5px;color:var(--f2);display:block;padding:16px 20px}
@media (max-width:600px){
.sugg .s-t{font-size:17px}
.sugg .s-n{display:none}
.sugg .s-row{padding:12px 16px;gap:10px}
}
/* The pairing grid. Six columns of figures, so the cells carry a second line
instead of a legend: what the number means is easier to read beside it. */
.matrix.pairs{min-width:920px;font-size:14px}
.matrix.pairs th,.matrix.pairs td{padding:12px 14px}
.matrix.pairs td{font-size:17px;line-height:1.15}
.matrix.pairs td small{display:block;margin-top:5px;font-family:var(--ui);font-size:11px;
font-weight:700;letter-spacing:.04em;color:var(--f3);text-transform:none}
.matrix.pairs td.no4{font-family:var(--ui);font-size:12.5px;font-weight:800;color:var(--coral)}
.matrix.pairs td.na3 small,.matrix.pairs td.no4 small{color:var(--f3)} /* was .32 alpha, which measured 2.85 against the page and needs 4.5 */
.matrix.pairs td.self3{color:var(--f3);opacity:.45}
/* The layer count per volume, as a strip under the stocking grid. Four numbers
read faster than a seventh table row on an axis they do not belong to. */
.fills{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);margin-top:24px}
.fill{background:rgba(1,19,31,.55);padding:16px 18px}
.fill .fv{font-family:var(--disp);font-size:clamp(20px,2.2vw,27px);font-weight:500;letter-spacing:-.02em;color:var(--aqua)}
.fill .fk{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--f3)}
/* The reason behind a blank. Reads as a citation list rather than a warning,
because that is what it is: the note the source did not give us a figure for. */
.whyblank{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
.wb{background:rgba(1,19,31,.55);padding:18px 20px}
.wb .wbk{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--f3)}
.wb .wbk a{color:var(--aqua);border-bottom:1px solid rgba(140,255,232,.42)}
.wb .wbk a:hover{border-bottom-color:var(--aqua)}
.wb p{margin:8px 0 0;font-size:16.5px;line-height:1.62;color:var(--f2)}
@media (min-width:820px){.whyblank{grid-template-columns:1fr 1fr}}
/* The gathered setup list. Three columns of prose rather than figures, so it
drops the display face the field matrix uses for numbers. */
.matrix.gear2{min-width:640px}
.matrix.gear2 tbody th{white-space:nowrap;vertical-align:top}
.matrix.gear2 tbody th a{color:var(--aqua);border-bottom:1px solid rgba(140,255,232,.42);
font-size:11px;font-weight:800;letter-spacing:.11em}
.matrix.gear2 tbody th a:hover{border-bottom-color:var(--aqua)}
.matrix.gear2 td.txt{font-size:16px;color:var(--foam)}
.matrix.gear2 td.txt:last-child{color:var(--f2)}
/* A pairing that works at one setting. The band is a real figure, so it keeps the
display face; only the note under it changes color, because that is the warning. */
.matrix.pairs td.tight4 small{color:var(--sun)}
.fail.tight5{border-color:rgba(255,201,74,.35)}
.fail.tight5 .fr{color:var(--sun)}
/* The contact address. Same shape as the button, minus the affordance, because
the proxy in front of the site rewrites a mailto into a JavaScript dependency. */
.askbtn.addr{cursor:text;user-select:all}
.askbtn.addr:hover{transform:none}
/* An eight column grid scrolls, and the row header is the one cell you cannot
lose while it does: without it a band of 72 to 82 belongs to nobody. */
.matrixwrap .matrix tbody th,
.matrixwrap .matrix thead th:first-child{position:sticky;left:0;z-index:2;background:#04202C;
box-shadow:1px 0 0 var(--line)}
/* The footer column headings. They were h4 under an h2, which skipped a level on
every page; the level moved and the look did not. */
.fh{margin:0 0 14px;font-family:var(--ui);font-size:11px;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:var(--f3)}
/* The footnote sat at .34 alpha and measured 2.99 against the page. */
.footnote{color:var(--f3)}
/* Print. A care record is a page people take to a shop, so the liquid layer, the
navigation and the decoration come off and the figures stay. */
@media print{
.bg,.bg-deep,.bg-rays,.bg-grain,.pointerlight,#ripple,.blob,.motes,.gauge,
.mast,.foot,.totop,.carebar,.skip,.sugg,.strip,.striphold{display:none!important}
html,body{background:#fff!important;color:#111!important}
.wrap{max-width:none;padding:0}
h1,h2,h3,h4,.stand3,.stand4,.lede2,.prose,.prose p,.matrix,.matrix th,.matrix td,
.method dt,.method dd,.faq summary,.faq .a p,.keyrail .k,.keyrail .v{color:#111!important}
.station{padding:12px 0!important;border:0!important}
.reveal{opacity:1!important;transform:none!important;animation:none!important}
.matrixwrap{overflow:visible!important}
.matrix{min-width:0!important;font-size:11pt}
.matrix tbody th,.matrixwrap .matrix thead th:first-child{position:static!important;background:none!important;box-shadow:none!important}
.faq details{border-color:#ccc!important}
.faq details>.a{display:block!important;height:auto!important;opacity:1!important}
.faq summary::marker,.faq summary::-webkit-details-marker{display:none}
a{color:#111!important;text-decoration:underline}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
.g2,.g3,.fills,.whyblank,.policy,.conds,.steps2{display:block!important}
.no4,.na3,.tight4{color:#111!important}
@page{margin:14mm}
}
/* Links the writing implied and did not carry. Marked so they read as a reference
rather than as emphasis: the underline is the affordance, the color is not. */
.xlink{color:inherit;border-bottom:1px solid rgba(140,255,232,.42);
transition:color .18s var(--out),border-color .18s var(--out)}
.xlink:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
/* A pointer out of a block to the page that gathers the same thing across the
site. Quieter than the prose links, because it is a footnote to the block. */
.more2{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--f3)}
.more2 a{color:var(--aqua);border-bottom:1px solid rgba(140,255,232,.42)}
.more2 a:hover{border-bottom-color:var(--aqua)}
/* The plate a record shows when it has no photograph: the recorded adult length
against an inch ruler. It replaced an empty box with the words photograph
pending in it, and it draws nothing at all when the size field is blank. */
/* right and top come from the column, not the window: --col caps the content at 1440px,
so a viewport anchored panel drifts hundreds of pixels off the grid on a wide screen */
.plate{position:absolute;
right:calc(max(0px,(100% - 1440px) / 2) + var(--pad));
top:50%;transform:translateY(-50%);
width:min(46%,600px);margin:0;padding:26px 28px 22px;
display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);background:rgba(15,31,39,.42)}
.plate .bi{font-family:var(--disp);font-style:italic;font-size:clamp(18px,2vw,25px);color:var(--f2)}
.plate .scale{position:relative;height:88px;border-top:1px solid var(--line);padding-top:26px}
.plate .bar{position:absolute;top:26px;height:14px;border-radius:7px;
background:linear-gradient(90deg,var(--cyan),var(--aqua))}
.plate .bar.tail{background:linear-gradient(90deg,rgba(140,255,232,.55),rgba(140,255,232,.16));
border-radius:0 7px 7px 0}
.plate .barlabel{position:absolute;left:0;top:50px;white-space:nowrap;font-family:var(--disp);
font-size:16px;color:var(--foam)}
.plate .ruler{position:absolute;left:0;right:0;top:4px;height:14px}
.plate .ruler span{position:absolute;top:0;transform:translateX(-50%);font-size:10px;font-weight:800;
letter-spacing:.08em;color:var(--f3)}
.plate .ruler span::after{content:"";position:absolute;left:50%;top:14px;width:1px;height:5px;
background:var(--line)}
.plate .unit{position:absolute;left:0;bottom:0;font-size:10.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--f3)}
.plate .scale.none4{height:auto;padding:20px 0 0;font-size:15px;color:var(--coral)}
.plate .layer4{align-self:flex-start;padding:5px 11px;border:1px solid var(--line);font-size:10.5px;
font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f3)}
.plate .pl{font-size:12.5px;line-height:1.5;color:var(--f3)}
@media (max-width:980px){.plate{position:relative;right:auto;top:auto;transform:none;width:100%;margin:0 0 14px}}
/* The search field had outline:none and no :focus-visible rule to put anything back.
.finder input outranks the bare :focus-visible selector on specificity, so the one
control most people reach for with a keyboard had no focus indicator at all. The
ring goes on the whole field rather than the bare input, because the input has no
border of its own and the field around it is what reads as the control. */
/* the state goes on the pill, which is the form: .finder also wraps the hint line under
it and has no radius, so a ring there drew a square around the helper text */
.finder form:focus-within{
border-color:rgba(140,255,232,.6);
box-shadow:inset 0 2px 0 rgba(240,252,255,.16),
inset 0 0 0 1px rgba(140,255,232,.26),
0 0 0 6px rgba(140,255,232,.07),
0 -12px 24px -12px rgba(0,0,0,.85);
}
/* the input draws nothing of its own. clearing outline alone left the global ring
box-shadow, which is a rectangle on an element with no radius. */
.finder input:focus-visible{outline:none;box-shadow:none}
/* the clear button is Chrome's, because the input is type=search. Left alone it is a dim
grey glyph nobody chose; this makes it the same foam the text is. */
.finder input::-webkit-search-cancel-button{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;margin-left:14px;cursor:pointer;
background-color:var(--foam);
-webkit-mask:url("data:image/svg+xml;utf8,") center/17px 17px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/17px 17px no-repeat;
border-radius:50%;opacity:.82;transition:opacity .18s var(--out),background-color .18s var(--out);
}
.finder input::-webkit-search-cancel-button:hover,
.finder input:focus::-webkit-search-cancel-button{opacity:1}
.finder input::-webkit-search-cancel-button:hover{opacity:1;transform:scale(1.08)}
/* ── Focus, by kind of control ───────────────────────────────────────────────
One blanket outline used to box everything, pills and inline links alike, with
a four pixel gap that floated off the shape. These follow the shape instead.
Everything here is :focus-visible only, so a mouse never triggers it. */
/* A link is a link whether or not it has a class, so the underline treatment is the
default and the families below opt out of it. The old arrangement listed the quiet
families by class and let everything unclassed fall through to the ring, which put a
floating rectangle on 37 elements of the homepage alone. */
a:focus-visible{
outline:none;
box-shadow:none;
color:var(--aqua);
border-bottom:2px solid var(--aqua);
text-decoration:none;
}
/* Pills and buttons: the border lifts and a soft halo follows the radius. Same treatment
as the search pill, and nothing floats off the shape. */
.askbtn:focus-visible,
.totop:focus-visible,
.filters label:focus-visible,
.mini label:focus-visible,
.card2 .askbtn:focus-visible{
outline:none;
border-bottom:0;
border-color:rgba(140,255,232,.72);
box-shadow:0 0 0 1px rgba(140,255,232,.5),0 0 0 5px rgba(140,255,232,.12);
}
/* Flat cards and rows: focus mirrors the hover each of these already has, and adds a 2px
inset edge. Inset, so it draws on the boundary rather than four pixels outside it. */
.rec:focus-visible{
outline:none;border-bottom:0;
border-color:rgba(140,255,232,.55);
background:rgba(6,50,74,.5);
box-shadow:inset 0 0 0 2px rgba(140,255,232,.55);
}
.guides a:focus-visible,
.azlist a:focus-visible{
outline:none;border-bottom:0;
background:rgba(47,227,242,.14);
box-shadow:inset 0 0 0 2px rgba(140,255,232,.5);
}
.symptoms a:focus-visible{
outline:none;border-bottom:0;
background:rgba(255,90,70,.12);
box-shadow:inset 0 0 0 2px rgba(255,120,96,.6);
}
/* wide rows take a bar on the leading edge, the same idea as a question row */
.sugg a.s-row:focus-visible,
.sugg li a:focus-visible{
outline:none;border-bottom:0;
background:rgba(47,227,242,.14);
box-shadow:inset 3px 0 0 var(--aqua);
}
.azbar a:focus-visible{
outline:none;border-bottom:0;
box-shadow:inset 0 -2px 0 var(--aqua);
color:var(--foam);
}
/* The inline list that used to live here is now the default for every a, above. What is
left is the wordmark, which is an anchor with a display face and wants the underline
tight against the letters rather than under the padding. */
.logo:focus-visible,
.mark:focus-visible{
outline:none;box-shadow:none;
color:var(--aqua);
border-bottom:2px solid var(--aqua);
text-decoration:none;
}
/* the masthead links own a hidden underline element; focus is that element arriving */
.mastnav a:focus-visible{outline:none;box-shadow:none;color:var(--foam)}
.mastnav a:focus-visible::after{opacity:1}
/* the search word is a nav word: measured, it has no background, no border and no radius,
so it takes the same swim line as its siblings rather than a pill treatment */
.mastnav a.find:focus-visible{box-shadow:none;border-bottom:0;color:var(--foam)}
.mastnav a.find:focus-visible::after{opacity:1}
/* a question is a wide row, so it takes a bar on the leading edge rather than a ring
around the whole width of the page */
.faq summary:focus-visible{
outline:none;
color:var(--aqua);
box-shadow:inset 3px 0 0 var(--aqua); /* replaces the default ring, not added to it */
}
/* fields: the border moves and a soft glow sits inside it */
.contact .card2 input:focus-visible,
.queue input:focus-visible,
.nores input:focus-visible,
.notify input:focus-visible{
outline:none;
border-color:rgba(140,255,232,.75);
box-shadow:inset 0 0 0 1px rgba(140,255,232,.3),0 0 0 4px rgba(140,255,232,.10);
}
/* the skip link is meant to be seen the moment it is focused, so it keeps a hard edge */
/* a visually hidden radio has no appearance to indicate; the label beside it carries the
state, so the input itself paints nothing */
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{box-shadow:none}
.skip:focus,.skip:focus-visible{outline:2px solid var(--abyss);outline-offset:-4px}
@media (prefers-contrast: more){
/* where the system asks for more contrast, the ring goes solid and opaque */
.askbtn:focus-visible,.totop:focus-visible,.guides a:focus-visible,.azlist a:focus-visible,
.rec:focus-visible,.filters label:focus-visible{box-shadow:0 0 0 2px var(--abyss),0 0 0 4px var(--aqua)}
}
/* ── the display axis ────────────────────────────────────────────────────────────
Bodoni Moda carries opsz 6 to 96. The high end is a poster cut whose hairlines are
drawn thin enough to fall out of the raster on screen: at opsz 26 and above the N
loses both verticals and reads as a backslash, the e loses its bar, the t loses its
crossbar. Rendered at 58, 84, 112 and 148px the ceiling is 22, and it does not rise
with the size. So: 22 for display, 14 for headings in text, 11 for figures in a
table. Do not raise these. font-optical-sizing:auto is worse, not better, because it
maps the axis to the used size in points and walks straight back into the dropout. */
.stationhead h2,
.cinema h2,
.pull,
.chead h1,
.ghead h1,
.verdicts .n4,
.h-hero h1,
.calc h2,
.hubhead h1,
.phead h1,
.uhead h1,
.azgroup .letter{font-variation-settings:"opsz" 22}
/* ── A list in running prose ─────────────────────────────────────────────────────
Until now every list on the site was scoped to one component and lived in that
component's stylesheet, so a record page, which loads only aqua.css, had no list to
reach for and all nine records had none. This is the shared one. */
.pts{list-style:none;margin:20px 0 0;padding:0}
.pts li{position:relative;padding:13px 0 13px 23px;border-top:1px solid var(--line);
font-size:16.5px;line-height:1.6;color:var(--f2)}
.pts li:first-child{border-top:0;padding-top:2px}
/* absolute, not a grid track: grid would blockify a into its own item and push the
rest of the sentence onto a second row */
.pts li::before{content:"";position:absolute;left:0;top:22px;width:7px;height:7px;
border-radius:50%;background:var(--aqua)}
.pts li:first-child::before{top:11px}
.pts li b,.pts li strong{color:var(--foam);font-weight:700}
.pts li a{color:var(--aqua);border-bottom:1px solid rgba(140,255,232,.42)}
.pts li a:hover{border-bottom-color:var(--aqua)}
/* the same list where the items are things that go wrong */
.pts.warn li::before{background:var(--coral)}
@media (max-width:600px){.pts li{font-size:15.5px;padding-left:20px}}
/* ═══════════ MOBILE: the four faults measured at 375px ═══════════ */
/* The back to top target. It is a zero height marker at the start of the document now,
because the masthead it used to live on is sticky on mobile: the browser was already
at the target, so the jump moved the page by the 78px of scroll-margin below and
stopped there. Measured before this: 1200 to 1122. After: 1200 to 0. */
#top{display:block;height:0;scroll-margin-top:0}
/* Nine destinations do not fit on one phone line, and the row that held them hid six of
them behind a gesture nothing announced: 604px of nav in a 231px box, with a fade at
82% that cut "Plants" mid word. A disclosure shows all nine. Hidden checkbox and
label, the pattern the silo filters already use, so it needs no script. The input
keeps its box so it stays keyboard reachable. */
.navt{position:absolute;opacity:0;pointer-events:none}
.navb{display:none}
.navscrim{display:none}
@media (max-width:980px){
.navb{display:inline-flex;align-items:center;gap:9px;margin-left:auto;cursor:pointer;
font-family:var(--ui);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--f2);padding:9px 15px;border:1px solid rgba(240,252,255,.24);border-radius:999px;
transition:border-color .2s var(--out),color .2s var(--out)}
.navb .bars{position:relative;width:15px;height:10px;flex:none}
.navb .bars::before,.navb .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;
background:currentColor;transition:transform .24s var(--out)}
.navb .bars::before{top:0}
.navb .bars::after{bottom:0}
.navt:checked ~ .navb{color:var(--foam);border-color:rgba(140,255,232,.62)}
.navt:checked ~ .navb .bars::before{transform:translateY(4.25px) rotate(45deg)}
.navt:checked ~ .navb .bars::after{transform:translateY(-4.25px) rotate(-45deg)}
.navt:focus-visible ~ .navb{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(140,255,232,.2)}
.mastnav{position:absolute;left:0;right:0;top:100%;margin:0;display:none;
flex-direction:column;gap:0;mask-image:none;-webkit-mask-image:none;
/* the panel holds nine destinations, a search field and up to six suggestions, which
measured 988px on an 812px screen. It scrolls rather than running off the bottom. */
max-height:calc(100svh - 54px);overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
/* opaque, not translucent. The masthead above it already carries a
backdrop-filter, and a second one nested inside it let the hero heading read
straight through the menu items at about a third contrast. A menu has to be
legible before it is atmospheric. */
background:#020D17;
border-bottom:1px solid rgba(140,255,232,.2);
box-shadow:0 26px 52px -20px rgba(0,0,0,.82)}
.navt:checked ~ .mastnav{display:flex}
/* The way out of the panel. It closed only from the button that opened it, so tapping
the page, which is what everybody tries first, did nothing.
Not position:fixed: .mast carries backdrop-filter on this breakpoint, and a non-none
backdrop-filter makes an element the containing block for its fixed descendants, so a
fixed scrim inside the header would be clipped to the header's own height. Absolute at
top:100% resolves against .mast, which sticky already positions.
Faintly dark as well as clickable. At full brightness behind it the open panel read as
something floating with no relationship to what it covered. */
.navscrim{position:absolute;left:0;right:0;top:100%;height:100svh;
background:rgba(1,10,18,.5);cursor:default}
.navt:checked ~ .navscrim{display:block}
.mastnav a{font-size:15.5px;font-weight:700;padding:14px var(--pad);
border-top:1px solid rgba(240,252,255,.08);white-space:normal}
.mastnav a:first-child{border-top:0}
.mastnav a::after{display:none}
.mastnav a[aria-current]{color:var(--foam);background:rgba(47,227,242,.1);
box-shadow:inset 3px 0 0 var(--cyan)}
.mastnav .find{justify-content:flex-start}
}
/* A wide table scrolls, and on a touch screen nothing said so: 335px of a 640px table,
with the rest reading as text chopped off mid word. The note is a sticky pseudo element
inside the scroller, so it stays at the left edge while the table moves under it, and
the inner shadow marks the cut. */
@media (max-width:900px){
.matrixwrap{position:relative}
/* the caption is as wide as the table, so it scrolled away with it and took the only
statement of what the table is with it */
.matrixwrap caption{position:sticky;left:0;width:-moz-max-content;width:max-content;
max-width:calc(100vw - var(--pad) * 2 - 2px)}
.matrixwrap::after{content:"Scroll the table sideways for the rest";
position:sticky;left:0;display:block;width:max-content;max-width:100%;
margin-top:11px;font-family:var(--ui);font-size:11px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;color:var(--f3)}
}
/* The dropdown had no ceiling, so on a phone with the keyboard up its last rows sat
under the keyboard with no way to reach them. */
@media (max-width:600px){
.sugg{max-height:min(46svh,320px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
/* The right edge of a table that scrolls. An inset shadow on the container was invisible
because the cells paint their own backgrounds over it, so this fades the composited
result instead. The fade is a registered property animated on the container's own
inline scroll timeline, so it is at full strength while there is more table to the
right and gone once you reach the end. Without scroll timelines no mask is applied
and the note under the table is the whole affordance. */
@property --mwfade{syntax:"";inherits:false;initial-value:100%}
@supports (animation-timeline:scroll(self inline)) and (mask-image:linear-gradient(#000,#000)){
@media (max-width:900px){
.matrixwrap{
-webkit-mask-image:linear-gradient(90deg,#000 0 var(--mwfade),transparent);
mask-image:linear-gradient(90deg,#000 0 var(--mwfade),transparent);
animation:mw-edge linear both;
animation-timeline:scroll(self inline);
animation-range:70% 100%;
}
@keyframes mw-edge{from{--mwfade:84%}to{--mwfade:100%}}
}
}
/* The suggestion panel has a ceiling on a phone, so the same treatment the wide tables
get: the bottom edge fades while there is more list below it and clears at the end. */
@property --sgfade{syntax:"";inherits:false;initial-value:100%}
@supports (animation-timeline:scroll(self block)) and (mask-image:linear-gradient(#000,#000)){
@media (max-width:600px){
.sugg{
-webkit-mask-image:linear-gradient(180deg,#000 0 var(--sgfade),transparent);
mask-image:linear-gradient(180deg,#000 0 var(--sgfade),transparent);
animation:sg-edge linear both;
animation-timeline:scroll(self block);
animation-range:70% 100%;
}
@keyframes sg-edge{from{--sgfade:88%}to{--sgfade:100%}}
}
}
/* ── the nav search field, mobile only ──────────────────────────────────────────
The masthead carries a link on desktop and a form on a phone. Both are in the
markup on every page; this is which one is visible. The form lives inside the
disclosure panel, so it costs nothing until the menu is open. */
.navfind{display:none}
.navfind label{position:absolute;left:-9999px}
@media (max-width:980px){
.mastnav .find{display:none}
.navfind{display:block;margin:0;max-width:none;padding:14px var(--pad) 16px;
border-bottom:1px solid rgba(240,252,255,.08)}
/* .finder is the hero component and its mobile block wraps the form, then makes the
input and the button full width. Without these three the field renders as a stack:
icon, text, and a button the width of the panel. */
.navfind form{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;height:auto;
padding:11px 14px;background:rgba(1,19,31,.72);border:1px solid rgba(240,252,255,.22);
border-radius:999px;box-shadow:none;
transition:border-color .2s var(--out),box-shadow .2s var(--out)}
.navfind form::after{display:none}
.navfind form:focus-within{border-color:rgba(140,255,232,.6);
box-shadow:0 0 0 4px rgba(140,255,232,.1)}
.navfind svg{width:17px;height:17px;flex:none;opacity:.7}
.navfind input{flex:1 1 auto;width:auto;min-width:0;padding:0;background:none;border:0;
outline:none;color:var(--foam);font-family:var(--ui);font-size:15.5px;font-weight:600}
.navfind input::placeholder{color:var(--f3);font-weight:500}
.navfind input:focus-visible{outline:none;box-shadow:none}
.navfind button{flex:none;width:auto;height:auto;border:0;cursor:pointer;border-radius:999px;
background:var(--cyan);color:#04202C;font-family:var(--ui);font-size:13px;font-weight:800;
letter-spacing:.02em;padding:9px 16px}
.navfind button:hover{transform:none;background:var(--aqua)}
/* the suggestion panel hangs off .finder, which here is inside a scrolling panel:
let it push the panel taller rather than escape it */
.navfind .sugg{position:static;margin-top:10px;box-shadow:none;max-height:none}
}
/* ═══════════ NOTE PROSE ═══════════
Three templates used to print these fields through esc_html, so the emphasis and the links the
records author into them arrived as visible tags. Now that they render they have to look like
something: the anchor treatment is the one .matrix td a already uses, an aqua hairline that
fills in on hover, because the base a{color:inherit} leaves a link in a table invisible.
The source column is also the longest prose on the page, up to 2,951 characters, and it now
arrives as paragraphs from aq_paragraphs(). This is the air between them. */
td.src{max-width:46em}
td.src p{margin:0}
td.src p+p{margin-top:.95em}
td b,td strong{color:var(--foam);font-weight:700}
td a,.fail p a,.refuse .blank2 a{border-bottom:1px solid rgba(140,255,232,.42);
transition:color .18s var(--out),border-color .18s var(--out)}
td a:hover,.fail p a:hover,.refuse .blank2 a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
.fail p b,.fail p strong{color:var(--foam);font-weight:700}
.refuse .blank2 b{color:#FFC9BE;font-weight:700}
/* the pale bands need the mirror of each of those, measured against the darkest stop of the
gradient rather than the middle: #0B6C80 is 4.53 there and the shade above it is 3.63 */
.lightband td b,.lightband td strong{color:#04202F}
.lightband td a,.lightband .fail p a{color:#0B6C80;border-bottom-color:rgba(11,108,128,.46)}
.lightband td a:hover,.lightband .fail p a:hover{color:#04202F;border-bottom-color:#0B6C80}
.lightband .fail p b,.lightband .fail p strong{color:#04202F}
@media (max-width:700px){
td.src p+p{margin-top:.8em}
}
/* Every generated block printed one field into one element however long the field was, so each
of them was a wall: dense_audit.py measures div.blank2 at a median of 453 characters and
div.out at 789, against 288 for the prose an author writes. They arrive as paragraphs now. */
.dispute .out p{margin:0}
.dispute .out p+p{margin-top:.8em}
p.prose+p.prose{margin-top:.9em}
.method dd p{margin:0}
.method dd p+p{margin-top:.55em}