/* relaxingsleepmusic.com — "Low Tide". Written from scratch Nov 3 2026. Almanac paper + deep sea; square controls, hairline rules. */
@font-face{font-family:"Brygada";src:url(/fonts/brygada.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Brygada";src:url(/fonts/brygada-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/spacegrotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--paper:#EFEAE0;--paper2:#E4DDCF;--ink:#12302F;--ink2:#3E5856;--sea:#0F2A2E;--sea2:#173B40;--tide:#2E9A8F;--foam:#CFE3DC;--moon:#F3D9A4;--coral:#C95F3F;--rule:rgba(18,48,47,.22);
 --serif:"Brygada",Georgia,serif;--sans:"Space Grotesk",system-ui,sans-serif;--w:1180px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);padding-bottom:96px}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--tide)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--sea);color:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* masthead: almanac line over a ruled row */
.mast{max-width:var(--w);margin:0 auto;padding:0 24px}
.mast-line{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:3px double var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-g{width:40px;height:40px;border-radius:8px}
.brand-t{font:600 22px/1 var(--serif);letter-spacing:-.01em}.brand-t i{font-weight:500;color:var(--tide)}
.nav{display:flex;gap:4px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:14px;display:flex;align-items:baseline;gap:6px;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}
.nn{font-size:10px;color:var(--ink2);font-variant-numeric:tabular-nums}
/* type */
.kick{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
.kick a{text-decoration:none}
.h1{font:500 clamp(38px,5.4vw,70px)/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 18px}
.h1 em{font-style:italic;color:var(--tide)}
.h2{font:500 clamp(28px,3.2vw,40px)/1.1 var(--serif);margin:0 0 12px;letter-spacing:-.01em}
.h3{font:600 20px/1.2 var(--serif);margin:0 0 8px}
.lede{font-size:18px;max-width:60ch;color:var(--ink2);margin:0 0 22px}
/* buttons: square, hairline, never pills */
.go,.act{font:500 15px/1 var(--sans);border-radius:2px;cursor:pointer;padding:13px 18px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.go{background:var(--sea);color:var(--paper);border:1px solid var(--sea)}.go:hover{background:var(--tide);border-color:var(--tide);color:#fff}
.act{background:transparent;color:var(--ink);border:1px solid var(--ink)}.act:hover{background:var(--ink);color:var(--paper)}
.act.pc-on,.go.pc-on{box-shadow:inset 0 -3px 0 var(--coral)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;padding-top:48px;padding-bottom:56px;align-items:start}
.len{border:0;margin:0 0 18px;padding:0}.len legend{font-size:13px;margin-bottom:8px;color:var(--ink2)}
.len-g{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink);max-width:420px}
.len-g label{position:relative;cursor:pointer}.len-g label+label{border-left:1px solid var(--ink)}
.len-g input{position:absolute;opacity:0;inset:0}
.len-g span{display:block;text-align:center;padding:12px 4px;font-size:12px;color:var(--ink2)}.len-g b{display:block;font:500 26px/1 var(--serif);color:var(--ink)}
.len-g input:checked+span{background:var(--sea);color:var(--foam)}.len-g input:checked+span b{color:var(--moon)}
.len-g input:focus-visible+span{outline:2px solid var(--coral);outline-offset:-4px}
.times{font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums;border-left:3px solid var(--tide);padding-left:12px}
.chart{margin:0;background:var(--sea);color:var(--foam);padding:20px 20px 14px;border-radius:4px}
.ebb{width:100%;height:auto;display:block}
.ebb .grid{stroke:rgba(207,227,220,.14)}.ebb .lab{fill:rgba(207,227,220,.6);font:11px var(--sans)}
.ebb .water{fill:url(#wg)}.ebb .crest{fill:none;stroke:var(--foam);stroke-width:2}
.ebb .dot{fill:var(--sea);stroke:var(--foam);stroke-width:1.5}.ebb .dot.on{fill:var(--moon);stroke:var(--moon)}
.ebb .moon{fill:var(--moon)}
.chart figcaption{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(207,227,220,.7);padding:8px 2px 12px;border-bottom:1px solid rgba(207,227,220,.2)}
.ebb-list{list-style:none;margin:0;padding:6px 0 0;max-height:260px;overflow:auto;font-size:14px}
.ebb-list li{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid rgba(207,227,220,.1)}
.ebb-list button{all:unset;cursor:pointer;display:contents}
.ebb-list .tm{font-variant-numeric:tabular-nums;color:var(--moon);font-size:12px}
.ebb-list .sf{font-size:12px;color:rgba(207,227,220,.6);font-variant-numeric:tabular-nums}
.ebb-list li.on{color:var(--moon)}
/* tide table */
.band{padding-top:48px;padding-bottom:48px;border-top:1px solid var(--rule)}
.band-h{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;align-items:end;margin-bottom:20px}.band-h .kick{grid-column:1/-1;margin:0}.band-h .h2{margin:0}.band-h p:last-child{margin:0;color:var(--ink2)}
.tt-wrap{overflow-x:auto}
.tt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tt th,.tt td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}
.tt thead th{font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--ink)}
.tt tbody th a{font:500 22px/1.1 var(--serif);text-decoration:none}.tt tbody th small{display:block;font-size:13px;color:var(--ink2);font-weight:400;margin-top:4px;max-width:46ch}
.tt .num{white-space:nowrap}.tt .mini{width:210px}
.ebb-mini{width:100%;height:48px;display:block}.ebb-mini .fill{fill:rgba(46,154,143,.18)}.ebb-mini .ln{fill:none;stroke:var(--tide);stroke-width:2;vector-effect:non-scaling-stroke}
/* how */
.how{padding-top:48px;padding-bottom:56px;border-top:1px solid var(--rule)}
.how-g{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;padding:0;margin:0;counter-reset:h}
.how-g li{counter-increment:h;border-top:1px solid var(--ink);padding-top:14px;color:var(--ink2)}
.how-g li::before{content:counter(h,decimal-leading-zero);display:block;font:500 40px/1 var(--serif);color:var(--tide);margin-bottom:10px}
.how-g b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.art{margin:0 0 56px}.art img{width:100%;max-height:520px;object-fit:cover}
.art figcaption{font-size:12px;color:var(--ink2);padding-top:8px}
.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;padding-bottom:64px}
.faq{margin:0}.faq div{border-bottom:1px solid var(--rule);padding:14px 0}.faq dt{font:600 18px/1.3 var(--serif)}.faq dd{margin:6px 0 0;color:var(--ink2)}
.lic{background:var(--paper2);padding:24px;border-left:3px solid var(--sea);align-self:start}
.cred{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.cred code{font:500 14px var(--sans);background:var(--paper);padding:8px 10px;border:1px solid var(--rule)}
/* inner pages */
.pg-top{padding-top:44px;padding-bottom:64px}
.set-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:28px}
.set-c{margin:0;background:var(--sea);padding:18px;border-radius:4px}.set-c .ebb-mini{height:150px}.set-c .ebb-mini .ln{stroke:var(--foam)}.set-c .ebb-mini .fill{fill:rgba(207,227,220,.14)}
.set-c figcaption{color:rgba(207,227,220,.7);font-size:12px;padding-top:8px}
.facts{display:flex;gap:0;margin:0 0 20px;border:1px solid var(--rule);width:max-content;max-width:100%}
.facts div{padding:10px 16px}.facts div+div{border-left:1px solid var(--rule)}.facts dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}.facts dd{margin:0;font:500 20px var(--serif);font-variant-numeric:tabular-nums}
.trs{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tr{display:grid;grid-template-columns:28px 38px 40px minmax(0,1fr) 120px 48px auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.tr-n{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.tr-p{width:36px;height:36px;border:1px solid var(--ink);background:transparent;border-radius:2px;cursor:pointer;display:grid;place-items:center;padding:0}
.tr-p span{width:0;height:0;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.tr-p.now span{width:10px;height:12px;border:0;margin:0;background:linear-gradient(90deg,var(--paper) 0 3px,transparent 3px 7px,var(--paper) 7px) ,transparent;box-shadow:inset 3px 0 var(--paper),inset -3px 0 var(--paper)}
.tr-p.now{background:var(--sea);border-color:var(--sea)}
.tr img{border-radius:2px}
.tr-t b{display:block;font-weight:500}.tr-t small{color:var(--ink2);font-size:13px}
.tr.on .tr-t b{color:var(--tide)}
.tr-soft{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.tr-soft i{flex:1;height:4px;background:var(--paper2);position:relative}.tr-soft i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--s)*1%);background:var(--tide)}
.tr-soft em{font-style:normal;width:22px;text-align:right}
.tr-d{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.tr-l{display:flex;gap:10px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}.tr-l a{color:var(--ink2)}.tr-l .dl{color:var(--ink);font-weight:600}
.next{margin-top:24px}
.sort{display:inline-flex;border:1px solid var(--ink);margin:6px 0 18px}
.sbtn{font:500 13px var(--sans);background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--ink)}.sbtn+.sbtn{border-left:1px solid var(--ink)}.sbtn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.prose{max-width:760px}.prose h2{font:500 26px/1.2 var(--serif);margin:32px 0 8px}.prose p{margin:0 0 14px}
.inl{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.nf{min-height:50vh}
/* footer */
.foot{background:var(--sea);color:var(--foam);padding:48px 0 28px;margin-top:0}
.foot-g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-big{font:italic 500 32px/1.1 var(--serif);color:var(--moon);margin:0 0 12px}
.foot-h{font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(207,227,220,.7);margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0}.foot li{padding:3px 0}.foot a:hover{color:var(--moon)}
.fine{font-size:12px;color:rgba(207,227,220,.65);margin-top:28px;border-top:1px solid rgba(207,227,220,.15);padding-top:16px}
/* player: waterline strip */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sea);color:var(--foam);box-shadow:0 -1px 0 rgba(207,227,220,.2)}
.pb-line{height:3px;background:rgba(207,227,220,.12)}.pb-line i{display:block;height:100%;background:var(--moon);transform-origin:0 50%;transform:scaleX(0)}
.pb-in{max-width:var(--w);margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:44px minmax(0,1.3fr) auto minmax(0,1.4fr) auto auto;gap:16px;align-items:center}
.pb-c{border-radius:2px}
.pb-t{margin:0;min-width:0}.pb-t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-t span{font-size:12px;color:rgba(207,227,220,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pb-k{display:flex;gap:6px}
.sq{width:38px;height:38px;border:1px solid rgba(207,227,220,.4);background:transparent;color:var(--foam);border-radius:2px;cursor:pointer;display:grid;place-items:center;padding:0}
.sq svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
.sq-main{width:46px;height:46px;background:var(--foam);color:var(--sea);border-color:var(--foam)}.sq-main svg{width:14px;height:14px;stroke:none}
.sq:hover{border-color:var(--moon);color:var(--moon)}.sq-main:hover{background:var(--moon);color:var(--sea)}
.pb-s{display:flex;align-items:center;gap:10px;font-size:12px;font-variant-numeric:tabular-nums;color:rgba(207,227,220,.75)}
.pb-seek{flex:1;accent-color:var(--moon);min-width:60px}
.pb-lw{margin:0;font-size:12px;color:var(--moon);white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-dl{font-size:12px;font-weight:600;color:var(--foam);border:1px solid rgba(207,227,220,.4);padding:8px 10px;border-radius:2px;text-decoration:none}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;border-radius:2px}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:960px){.hero,.two,.set-g,.band-h{grid-template-columns:1fr}.how-g{grid-template-columns:1fr}.foot-g{grid-template-columns:1fr 1fr}.foot-g>div:first-child{grid-column:1/-1}
 .tr{grid-template-columns:24px 36px 40px minmax(0,1fr) 44px}.tr-soft{display:none}.tr-l{grid-column:4/-1;justify-content:flex-start}
 .pb-in{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:8px 14px}.pb-s,.pb-lw,.pb-dl{display:none}.pb-k .sq:not(.sq-main){width:34px;height:34px}
 .tt .mini{display:none}}
@media (max-width:560px){.mast-line span:last-child{display:none}.mast-row{flex-direction:column;align-items:flex-start;gap:10px}.nav{gap:2px 16px}
 .wrap,.mast{padding:0 16px}.hero{padding-top:28px;gap:28px}.len-g b{font-size:22px}.tt th,.tt td{padding:12px 6px}.tt tbody th a{font-size:18px}.tt td.num:nth-child(4){display:none}.tt thead th:nth-child(4){display:none}
 .tr img{display:none}.tr{grid-template-columns:22px 36px minmax(0,1fr) 40px}.tr-l{grid-column:3/-1}.facts dd{font-size:17px}.facts div{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}