/* Lake Erie Gazetteer · "Cyanotype Atlas" (redesign 2026-10-10, see ../DESIGN.md). Light theme only. One file, self-hosted OFL fonts, no third parties. */
@font-face{font-family:Fraunces;src:url(fonts/fraunces-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/franklin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/franklin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#FFFFFF;--mist:#EDF2F4;--ink:#0B1A23;--ink-2:#13293A;--cyan:#145A73;--cyan-lt:#7FB3C8;--slate:#4A5A64;--lamp:#F2B84B;--alert:#B3261E;--rule:#D5DEE3;
--amber:#8A5A00;--stale:#5F666C;
--serif:Fraunces,Georgia,"Times New Roman",serif;--sans:"Libre Franklin","Helvetica Neue",Arial,system-ui,sans-serif;--mono:var(--sans);
--w:76rem;--pad:20px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-wrap:break-word;overflow-x:clip;font-variant-numeric:lining-nums}
img,svg{max-width:100%;height:auto}
a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;margin:1.5em 0 .5em;color:var(--ink);letter-spacing:-.01em}
h1{font-size:2.1rem;margin-top:.5em}
h2{font-size:1.6rem}
h3,.h3{font-size:1.2rem}
p,ul,ol,dl,table,figure{margin:0 0 1rem}
small,.small{font-size:.875rem}
.muted{color:var(--slate)}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:.95em;letter-spacing:.01em}
.sc{font-variant-caps:normal}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:46rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:9}
.skip:focus{left:8px;top:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kick{font:600 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 .5rem}
/* utility strip + header */
.util{background:var(--mist);color:var(--slate);border-bottom:1px solid var(--rule);font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.util-in{max-width:var(--w);margin:0 auto;padding:9px var(--pad);display:flex;justify-content:space-between;gap:12px}
.util-shores{display:none}
.hd{background:var(--paper);border-bottom:1px solid var(--rule)}
.hd-in{max-width:var(--w);margin:0 auto;padding:12px var(--pad) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:48px}
.brand:hover{color:var(--ink)}
.brand svg{width:40px;height:40px;flex:none}
.brand b{display:block;font:600 1.35rem/1.05 var(--serif);letter-spacing:-.01em}
.brand i{display:block;font:600 .68rem/1.5 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.nav{width:100%}
.nav ul{list-style:none;margin:0 0 0 -10px;padding:0;display:flex;flex-wrap:wrap}
.nav a{display:flex;align-items:center;min-height:48px;padding:0 10px;color:var(--ink);text-decoration:none;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--cyan-lt)}
.nav a[aria-current=page]{border-bottom-color:var(--cyan)}
.crumbs{max-width:var(--w);margin:0 auto;padding:4px var(--pad) 0;font-size:.82rem;color:var(--slate)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.crumbs li+li::before{content:"/";padding:0 .55em;color:var(--rule)}
.crumbs a{color:var(--slate);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.main{max-width:var(--w);margin:0 auto;padding:0 var(--pad) 56px}
.contour{height:1px;border:0;margin:40px 0;background:var(--rule)}
/* full-bleed bands */
.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.band{padding:48px 0;margin-top:56px;margin-bottom:56px}
.band-in{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.band.mist{background:var(--mist)}
.band.ink{background:var(--ink);color:#DCE6EB}
.band.ink h2,.band.ink h3,.band.ink h3 a{color:#fff}
.band.ink .kick{color:var(--lamp)}
.band.ink a{color:#fff}
.band.ink :focus-visible{outline-color:var(--lamp)}
.sec{margin:56px 0}
.sh{border-left:4px solid var(--cyan);padding:2px 0 2px 16px;margin:0 0 28px}
.sh h2{margin:0}
.band.ink .sh{border-left-color:var(--lamp)}
/* home hero: light, photo-led (museum-collection opening). Photo runs edge to edge: on top on phones, the full right half on desktop. */
.hero{background:var(--paper);color:var(--ink);margin-bottom:0;border-bottom:1px solid var(--rule)}
.hero-in{margin:0 auto;padding:0 0 36px;display:grid}
.hero-txt{padding:28px var(--pad) 0}
.hero .kick{color:var(--cyan);display:flex;align-items:center;gap:12px}
.hero .kick::before{content:"";width:28px;height:4px;background:var(--lamp);flex:none}
.hero h1{color:var(--ink);font-size:2.6rem;line-height:1.02;margin:0 0 .4em;letter-spacing:-.025em}
.hero .lede{font:400 1.2rem/1.5 var(--serif);color:var(--slate);max-width:34rem;margin:0 0 1.5rem}
.hero-fig{margin:0;background:var(--mist)}
.hero-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-fig figcaption{font-size:.74rem;color:var(--slate);padding:8px var(--pad) 0}
/* at-a-glance strip (also the fact-page answer box) */
.glance{border-bottom:1px solid var(--rule)}
.glance-row{display:grid;grid-template-columns:1fr}
.glance .ans{padding:24px 0;border-top:1px solid var(--rule);background:none;border-left:0;border-right:0;border-bottom:0}
.glance .ans:first-child{border-top:0}
.ans h3{font:600 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 .6rem}
.ans .big{font:600 1.45rem/1.3 var(--serif);margin:0 0 .5rem}
.ans .asrc{font-size:.8rem;color:var(--slate);letter-spacing:.04em}
.card.ans,.ans{border-top:3px solid var(--cyan)}
.glance .ans{border-top-width:1px}
/* generic grids and cards (inner pages) */
.grid{display:grid;gap:20px;grid-template-columns:1fr}
.card{background:var(--paper);border:1px solid var(--rule);padding:20px}
.card h2,.card h3{margin-top:0}
.card h2 a,.card h3 a{display:inline-flex;align-items:center;min-height:44px}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.92rem}
.more::after{content:"\2192";margin-left:.4em;transition:transform .15s}
.more:hover::after{transform:translateX(3px)}
.links a:not(.inl){display:inline-flex;align-items:center;min-height:44px}
a.ext{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
a.fnc{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:.85rem}
/* photo cards (home lighthouses) */
.pcards{display:grid;gap:36px 24px;grid-template-columns:1fr}
.pcard h3{margin:0 0 .4rem;font-size:1.3rem}
.pcard h3 a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pcard h3 a:hover{color:var(--cyan);text-decoration:underline}
.pc-img{margin:0 0 14px;overflow:hidden;background:var(--mist)}
.pc-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.pcard:hover .pc-img img{transform:scale(1.03)}
.pcard .kick{color:var(--slate);margin:0}
.pc-cr{font-size:.72rem;color:var(--slate);margin:.4rem 0 0}
/* stories band (home shipwrecks) */
.stories{display:grid;grid-template-columns:1fr;gap:0}
.stories li{border-top:1px solid rgba(220,230,235,.22);padding:22px 0}
.stories h3{margin:0 0 .5rem;font-size:1.35rem}
.stories h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.stories h3 a:hover{text-decoration:underline;text-decoration-color:var(--lamp)}
.stories p:last-child{margin:0;color:#C9D6DD}
/* climb call-out */
.climb{border-top:4px solid var(--ink);border-bottom:1px solid var(--rule);padding:32px 0;margin:56px 0;display:grid;gap:8px;align-items:end}
.climb h2{margin:0 0 .5rem;font-size:1.8rem}
.climb-txt p:last-child{margin:0;max-width:40rem}
/* shop catalogue */
.catalog{border-top:1px solid var(--ink)}
.catalog .prod{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.catalog .prod h3{margin:0 0 .2rem;font-size:1.25rem}
.catalog .prod h3 a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.catalog .prod h3 a:hover{color:var(--cyan);text-decoration:underline}
.catalog .prod p{margin:0;color:var(--slate)}
.catalog .prod .price{color:var(--ink)}
/* entry record (lighthouse / wreck / storm pages) */
.rec{border-bottom:1px solid var(--rule);padding:24px 0 16px;margin:8px 0 28px;position:relative}
.rec::before{content:"";display:block;width:56px;height:4px;background:var(--lamp);margin:0 0 18px}
.rec h1{margin:0 0 .25em;font-size:2.3rem;letter-spacing:-.02em}
.rec .line{font:400 .9rem/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--slate);margin:0 0 .8rem;letter-spacing:.01em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .5rem;padding:0;list-style:none}
.chip{display:inline-block;border:1px solid var(--cyan);color:var(--cyan);background:var(--paper);padding:.18rem .55rem;font:600 .72rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.chip.her{border-color:var(--ink);color:var(--ink)}
.chip.aging{border-color:var(--amber);color:var(--amber);background:#FFF7E6}
.chip.stale{border-color:var(--stale);color:var(--stale);background:#F2F3F4}
.pill{display:inline-block;background:var(--ink);color:#fff;font:600 .85rem/1.4 var(--sans);font-variant-numeric:tabular-nums;padding:.25rem .6rem;letter-spacing:.04em}
.cap{font-size:.84rem;color:var(--slate)}
.note{border-left:4px solid var(--cyan);background:var(--mist);padding:12px 16px;margin:0 0 1rem;font-size:.95rem}
.note.warn{border-left-color:var(--amber);background:#FFF7E6}
.note.stale{border-left-color:var(--stale);background:#F2F3F4}
.note.alert{border-left-color:var(--alert);background:#FDF1F0}
.lead{font:400 1.2rem/1.55 var(--serif)}
.intro{font:400 1.2rem/1.55 var(--serif);max-width:46rem}
.story{max-width:46rem}
.cols{display:grid;gap:32px;grid-template-columns:1fr}
.box{background:var(--mist);border:0;padding:20px 22px;margin:0 0 20px}
.box h2{font:600 .78rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 .8rem}
.facts{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:6px 16px;margin:0;font-size:.95rem}
.facts dt{color:var(--slate);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding-top:.15em}
.facts dd{margin:0;font-variant-numeric:tabular-nums}
.law{background:#FFF;border:1px solid var(--rule);border-top:4px solid var(--ink);padding:16px 18px;margin:0 0 20px}
.law h2{margin-top:0;font-size:1.2rem}
/* figures and photos */
.photo{margin:0 0 20px}
.photo img{display:block;width:100%;height:auto;background:var(--mist)}
.photo figcaption{font-size:.76rem;color:var(--slate);margin-top:6px}
/* maps (inline SVG) */
.mapbox{background:var(--paper);border:1px solid var(--rule);padding:10px;margin:0 0 10px}
.map{display:block;width:100%;height:auto}
.m-land{fill:#F4F6F5}
.m-grat{stroke:rgba(20,90,115,.14);stroke-width:1;fill:none}
.m-lake.d1{fill:#D9E8EF}
.m-lake.d2{fill:#B3D0DD}
.m-lake.d3{fill:#86B3C7}
.m-shore{fill:none;stroke:var(--cyan);stroke-width:1.4}
.m-lbl{font:600 14px var(--sans);fill:var(--slate);letter-spacing:.16em}
.m-deg{font:400 12px var(--sans);fill:var(--slate)}
.m-route{fill:none;stroke:var(--alert);stroke-width:2;stroke-dasharray:6 5}
.m-light{fill:var(--lamp);stroke:var(--ink);stroke-width:.8}
.m-light.hl{fill:var(--alert)}
.m-wreck{stroke:var(--ink);fill:none}
.m-wreck.hl{stroke:var(--alert)}
.m-links circle{fill:transparent}
.m-links{display:none}
.legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.84rem;color:var(--slate);margin:0 0 .5rem;padding:0;list-style:none}
.legend svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
/* lists of entries */
.list{list-style:none;margin:0 0 1rem;padding:0;border-top:1px solid var(--ink)}
.list li{border-bottom:1px solid var(--rule);padding:10px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.list a.t{font:600 1.08rem/1.3 var(--serif);display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:none}
.list a.t:hover{color:var(--cyan);text-decoration:underline}
.list .meta{font-size:.84rem;color:var(--slate)}
.cols3{columns:1}
/* filters */
.filters{margin:0 0 16px}
.filters p{margin:0 0 6px;font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.filters ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.filters a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--rule);background:var(--paper);text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600}
.filters a:hover{border-color:var(--ink)}
.filters a[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* tables */
.tbl{overflow-x:auto;margin:0 0 1rem;border-top:1px solid var(--ink);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--rule)}
thead th{background:var(--mist);font:600 .74rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
tbody th{font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:.84rem;color:var(--slate);padding:8px 12px;caption-side:bottom}
/* footnotes, sources */
sup.fn{font-size:.68em;line-height:0;margin-left:2px;color:var(--slate);font-family:var(--sans);font-weight:400}
sup.fn a{text-decoration:none;font-weight:600}
.rv{white-space:nowrap}
.src{font-size:.86rem;padding-left:1.4rem}
.src li{margin-bottom:.4rem}
.arch{color:var(--amber);font-size:.85em}
/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--ink);background:var(--ink);color:#fff;font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn-2{background:transparent;color:var(--ink)}
.btn-2:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-lt{background:#fff;border-color:#fff;color:var(--ink)}
.btn-lt:hover{background:var(--lamp);border-color:var(--lamp);color:var(--ink)}
.btn-ol{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn-ol:hover{background:#fff;color:var(--ink);border-color:#fff}
.band.ink .btn-lt,.hero .btn-lt{color:var(--ink)}
.btn[disabled]{background:var(--stale);border-color:var(--stale);cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1rem}
form .f{margin:0 0 16px}
label{font-weight:600;display:block;margin:0 0 4px}
label[for]:not(.ck){display:flex;align-items:flex-end;min-height:44px;margin:0 0 2px}
input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid #7D8C95;border-radius:0;min-height:48px;padding:10px 12px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:0;border-color:var(--ink)}
textarea{min-height:120px}
.ck{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-weight:400;padding:8px 0}
.ck input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.err{color:var(--alert);font-weight:600;font-size:.92rem;margin:4px 0 0}
.help{font-size:.86rem;color:var(--slate);margin:4px 0 0}
fieldset{border:1px solid var(--rule);padding:12px 16px;margin:0 0 16px}
legend{font-weight:600;padding:0 4px}
.payee{border:1px solid var(--rule);border-left:4px solid var(--cyan);background:var(--paper);padding:12px 16px;margin:0 0 16px;font-size:.95rem}
/* sponsor box */
.spons{border:1px solid var(--rule);border-top:3px solid var(--lamp);background:var(--paper);padding:14px 18px;margin:0 0 20px}
.spons h2{font:600 .78rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem}
.spons ul{list-style:none;margin:0 0 .6rem;padding:0}
.spons li{padding:6px 0;border-bottom:1px solid var(--rule)}
.spons .lab{font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7A5200;margin-right:6px}
.spons a.biz{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.spons .rep{font-size:.84rem;display:inline-flex;align-items:center;min-height:44px}
.nolist{list-style:none;padding:0;margin:0 0 1rem}
/* shop (product pages, shop grid) */
.prod .price{font:600 1.6rem/1.1 var(--serif);font-variant-numeric:lining-nums}
.prod ul{padding-left:1.2rem}
.card.prod{border-top:3px solid var(--ink)}
.buybar{position:sticky;bottom:0;z-index:5;background:var(--ink);color:#fff;padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:12px}
.buybar b{font:600 1.15rem var(--serif)}
.buybar .btn{background:#fff;border-color:#fff;color:var(--ink)}
.buybar :focus-visible{outline-color:var(--lamp)}
/* share */
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 1rem;padding:0;list-style:none}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:600 .8rem var(--sans);letter-spacing:.06em;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--ink)}
.share [hidden]{display:none}
/* charts */
.chart{display:block;width:100%;height:auto;background:var(--paper)}
.chartfig{margin:0 0 10px;border:1px solid var(--rule);background:var(--paper);padding:10px}
details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.embed{width:100%;min-height:120px;font:400 13px/1.45 ui-monospace,Menlo,Consolas,monospace}
.qr{display:none}
/* status / order */
.status{font:400 1.2rem/1.5 var(--serif)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
/* footer */
.ft{background:var(--mist);color:var(--ink);font-size:.9rem;border-top:4px solid var(--ink)}
.ft-in{max-width:var(--w);margin:0 auto;padding:36px var(--pad) 40px}
.ft a{color:var(--ink)}
.ft a:hover{color:var(--cyan)}
.ft-top{display:grid;gap:12px;padding:0 0 18px;border-bottom:1px solid var(--rule);margin:0 0 14px}
.ft-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:600 1.5rem/1.1 var(--serif);min-height:48px}
.ft-brand svg{width:40px;height:40px}
.ft-explore ul{list-style:none;margin:0 0 0 -10px;padding:0;display:flex;flex-wrap:wrap}
.ft-explore a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;font:600 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ft-links{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:0 16px}
.ft-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--slate)}
.ft-legal p{margin:0 0 .6rem;max-width:60rem;color:var(--slate)}
.ft-pow{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rule);font:600 .74rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ft-pow a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.ft .nav-note{font-weight:600;color:var(--ink);letter-spacing:.02em}
@media (min-width:600px){
 :root{--pad:28px}
 h1{font-size:2.6rem}
 .util-shores{display:inline}
 .hero h1{font-size:3.3rem}
 .grid.g2{grid-template-columns:1fr 1fr}
 .grid.g3{grid-template-columns:1fr 1fr}
 .pcards{grid-template-columns:1fr 1fr}
 .stories{grid-template-columns:1fr 1fr;column-gap:32px}
 .cols3{columns:2;column-gap:32px}
 .rec h1{font-size:2.9rem}
 .ft-top{grid-template-columns:auto 1fr;align-items:center}
 .ft-explore ul{justify-content:flex-end}
}
@media (min-width:960px){
 .nav{width:auto}
 .hd-in{padding-bottom:0;flex-wrap:nowrap}
 .nav ul{margin:0}
 .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;align-items:stretch}
 .hero-txt{grid-column:1;grid-row:1;justify-self:end;align-self:center;width:min(100%,calc(var(--w) / 2));padding:80px 56px 80px var(--pad)}
 .hero-fig{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:36rem}
 .hero-fig img{flex:1 1 0;height:auto;aspect-ratio:auto;min-height:0}
 .hero-fig figcaption{padding:10px 20px 12px;background:var(--paper)}
 .hero h1{font-size:4.4rem}
 .hero .lede{font-size:1.35rem}
 .glance-row{grid-template-columns:repeat(3,1fr)}
 .glance .ans{border-top:0;border-left:1px solid var(--rule);padding:32px 32px 28px}
 .glance .ans:first-child{border-left:0;padding-left:0}
 .grid.g3{grid-template-columns:1fr 1fr 1fr}
 .pcards{grid-template-columns:repeat(3,1fr)}
 .stories{grid-template-columns:repeat(3,1fr);column-gap:40px}
 .band{padding:72px 0}
 .climb{grid-template-columns:1fr auto;gap:40px}
 .climb .btns{margin:0}
 .cols{grid-template-columns:minmax(0,1fr) 20rem}
 .cols3{columns:3}
 .m-links{display:inline}
 .buybar{display:none}
 .catalog .prod{grid-template-columns:minmax(0,22rem) 1fr auto;column-gap:40px}
 .catalog .prod>div{display:contents}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{
 .util,.hd .nav,.crumbs,.ft-links,.ft-top,.share,.spons,.buybar,.skip,.btns,.filters,form,.nop{display:none!important}
 body{background:#fff;font-size:11pt}
 .hd,.ft,.hero,.band{background:#fff!important;color:#000!important;border:0}
 .hero h1,.band h2,.band h3,.band a{color:#000!important}
 .ft{margin:0}
 .rec,.box,.card,.law,.note{break-inside:avoid;border-color:#999}
 a{color:#000}
 .qr{display:block;width:30mm;height:30mm;float:right;margin:0 0 4mm 4mm}
 .cols{display:block}
 .main{padding-bottom:0}
}
.pc-none{background:var(--ink);aspect-ratio:3/2;display:flex;align-items:flex-end}
.pc-none svg{display:block;width:100%;height:auto}
@media (max-width:599px){
 .nav ul{margin:0;justify-content:space-between;flex-wrap:nowrap}
 .nav a{padding:0 4px;font-size:.7rem;letter-spacing:.08em}
 .nav li:first-child a{padding-left:0}
 .nav li:last-child a{padding-right:0}
}
/* product page: head + body on the left, a sticky buy panel on the right */
.pp{margin-top:24px}
.pp-head h1{margin:0 0 .4em}
.pp-buy{background:var(--mist);border-top:4px solid var(--ink);padding:20px 22px;margin:0 0 28px}
.pp-buy .price{font-size:2.4rem;margin:0 0 .8rem}
.pp-buy .btns{flex-direction:column}
.pp-buy .btn{width:100%}
.pp-buy .cap{margin:0}
.pp-body ul{columns:1}
.pp-body .facts{margin-bottom:1.5rem}
.pp-body .facts + .note,.pp-body .facts + .cap{margin-top:0}
@media (min-width:960px){
 .pp{display:grid;grid-template-columns:minmax(0,1fr) 22rem;column-gap:64px;align-items:start}
 .pp-head{grid-column:1;grid-row:1}
 .pp-buy{grid-column:2;grid-row:1/span 2;position:sticky;top:24px;margin-top:8px}
 .pp-body{grid-column:1;grid-row:2}
 .pp-body ul{columns:2;column-gap:32px}
}
/* shop index cards */
.grid .card.prod{display:flex;flex-direction:column}
.grid .card.prod h2{font-size:1.35rem}
.grid .card.prod .price{margin-top:auto}
.buybar .cap,.buybar .muted,.buybar span{color:#C9D6DD}
body{display:flex;flex-direction:column;min-height:100vh}
.main{flex:1 0 auto;width:100%}
.util,.hd,.crumbs,.ft{flex:none;width:100%}
/* AdEngine banner (v1.0.10): one slot between </main> (56px bottom padding) and the footer, on reference pages only. The label
   and the reserved height (16px label + 4px + 90, or 250 on phones) sit on the <ins>, so the banner moves nothing when it lands
   and a no-fill (tag.js sets display:none on the <ins>) takes the label, the space and the wrapper with it. Hidden in print. */
.ae-slot{flex:none;width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad) 56px}
.ae-slot ins.adengine{display:block;max-width:728px;min-height:110px;margin:0 auto;text-align:center;text-decoration:none}
.ae-slot ins.adengine::before{content:"Advertisement";display:block;margin-bottom:4px;font:600 11px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ae-slot ins.adengine a{display:inline-block;vertical-align:top}
.ae-slot:has(>ins.adengine[style*="none"]){display:none}
@media (max-width:767px){.ae-slot ins.adengine{max-width:300px;min-height:270px}}
@media print{.ae-slot{display:none}}