.tides-body { background:#060d1a; }
.tides-body main { max-width:1440px; margin:auto; padding:0 5%; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:100; background:var(--ink); color:var(--night-0); padding:12px; }
.skip-link:focus { top:15px; }
.tides-nav { display:flex; justify-content:space-between; align-items:center; min-height:92px; padding:0 5%; border-bottom:1px solid var(--line-soft); }
.tides-nav .wordmark { font-size:.85rem; letter-spacing:.19em; }
.tides-nav nav { display:flex; gap:32px; font-size:.95rem; }
.tides-nav nav a { color:var(--ink-dim); }
.tides-intro { display:grid; grid-template-columns:1.5fr 1fr; gap:8%; padding:75px 0 58px; align-items:end; }
.tides-eyebrow,.control-label,.intro-index,.coordinate,.chart-foot,.chapter-slider label,.spoiler-state { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.tides-eyebrow { color:var(--moon-bright); text-transform:uppercase; font-size:.7rem; letter-spacing:.17em; display:flex; align-items:center; gap:12px; margin-bottom:23px; }
.small-orbit { width:11px; height:11px; border:1px solid var(--moon-bright); border-radius:50%; box-shadow:3px 0 0 -1px #060d1a inset; }
.tides-intro h1 { font-family:var(--font-display); font-size:clamp(3rem,6.8vw,6.35rem); font-weight:300; line-height:1.04; letter-spacing:-.045em; }
.tides-intro h1 em { color:var(--moon-bright); font-weight:300; }
.intro-index { display:block; font-size:.65rem; color:#909aa9; text-transform:uppercase; letter-spacing:.16em; margin-bottom:16px; }
.intro-aside { padding:0 0 5px; max-width:370px; }
.intro-aside>p:first-of-type { font-size:1.48rem; line-height:1.45; margin-bottom:16px; }
.intro-small { color:var(--ink-dim); font-size:1rem; line-height:1.6; }
.quiet-link { display:inline-block; margin-top:20px; font-size:.95rem; }
.quiet-link span { margin-left:10px; }
.explorer { border:1px solid rgba(193,160,119,.22); background:#081221; scroll-margin-top:18px; }
.explorer-toolbar { display:flex; justify-content:space-between; align-items:center; padding:0 25px; border-bottom:1px solid var(--line); }
.tides-view-label { padding:19px 0; font-family:var(--font-display); font-size:1rem; color:var(--ink); }
.tides-view-label span { font-family:ui-monospace,SFMono-Regular,monospace; font-size:.6rem; color:#93a6b0; margin-left:17px; }
.crest-reading { margin-top:23px; border-top:1px solid var(--line); padding-top:18px; }
.crest-controls { display:flex; gap:7px; margin:8px 0 14px; }
.crest-controls button { min-height:35px; padding:2px 9px; font-size:.78rem; border:1px solid var(--line); }
.crest-controls button[aria-pressed=true] { color:var(--moon-bright); border-color:#b67f5b; }
.crest-reading blockquote { margin:0; font-size:1.04rem; line-height:1.65; color:var(--ink); }
.crest-reading mark { color:#efb18b; background:transparent; }
.crest-source { margin-top:14px; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.56rem; line-height:1.65; color:#8fa3b1; }
.crest-gate { padding:13px 0; color:var(--ink-dim); font-style:italic; font-size:.86rem; }
.crest-marker { cursor:pointer; outline:none; }
.crest-marker:focus-visible circle { stroke:#fff0d1; stroke-width:2.5; }
.tides-body button { font-family:var(--font-body); cursor:pointer; border:none; background:none; color:var(--ink-dim); font-size:.95rem; min-height:44px; }
.tides-body button:disabled { cursor:wait; opacity:.4; }
.spoiler-state { font-size:.62rem; color:#9badb6; letter-spacing:.03em; }
.motif-bar { display:flex; align-items:center; gap:20px; padding:15px 25px; border-bottom:1px solid var(--line-soft); }
.control-label { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#a3a9b0; line-height:1.6; }
.motif-controls { display:flex; gap:7px; flex-wrap:wrap; }
.motif-controls button { padding:3px 13px; border:1px solid transparent; border-radius:30px; font-size:.88rem; min-height:36px; }
.motif-controls button[aria-pressed=true] { color:var(--moon-bright); border-color:#a86a4766; background:#bc6a3010; }
.motif-controls button:hover { color:var(--ink); }
.motif-controls button::before { content:''; display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:currentColor; }
.explorer-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.chart-column { min-width:0; border-right:1px solid var(--line); }
.chart-head { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px 25px 0; }
.chart-head p { font-size:.8rem; color:var(--ink-dim); line-height:1.5; }
.chart-head button { white-space:nowrap; font-size:.8rem; color:var(--moon-bright); }
.chart-head button span { margin-left:9px; }
.chart-frame { position:relative; }
#tides-chart { display:block; width:100%; height:auto; }
#load-status { position:absolute; top:45%; text-align:center; width:100%; color:var(--ink-dim); font-size:.95rem; padding:0 20px; }
.chart-foot { display:flex; justify-content:space-between; gap:15px; padding:4px 25px 14px; font-size:.56rem; color:#99a4b2; line-height:1.6; }
.coordinate { white-space:nowrap; letter-spacing:.12em; }
.chart-instructions { padding:0 25px; color:var(--ink-dim); font-size:.8rem; }
.chapter-slider { display:flex; align-items:center; gap:24px; padding:18px 25px 23px; }
.chapter-slider label { white-space:nowrap; font-size:.58rem; text-transform:uppercase; color:#a3adb7; }
.chapter-slider output { margin-left:8px; color:var(--ink); }
.chapter-slider input { flex:1; min-width:0; accent-color:var(--moon-bright); cursor:pointer; min-height:30px; }
.chapter-panel { padding:26px 24px; }
.chapter-number { font-family:var(--font-display); font-size:4.5rem; line-height:1.3; font-weight:300; color:var(--moon-bright); letter-spacing:-.05em; margin:10px 0 5px; }
.chapter-number span { color:#63738a; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.75rem; letter-spacing:0; margin-left:12px; }
.chapter-panel h2 { font-family:var(--font-display); font-weight:400; font-size:1.25rem; line-height:1.35; margin:0 0 13px; }
.chapter-panel>p:not(.control-label) { color:var(--ink-dim); font-size:.92rem; line-height:1.6; }
.chapter-metric { display:grid; grid-template-columns:1fr auto; gap:3px 10px; border-top:1px solid var(--line); padding-top:17px; margin-top:23px; }
.chapter-metric>span:first-child { font-size:.78rem; color:var(--ink-dim); }
.chapter-metric strong { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1rem; font-weight:400; color:var(--ink); }
.chapter-metric>span:last-child { grid-column:1/-1; color:#91a1af; font-size:.74rem; }
.term-evidence { margin-top:10px; font-size:.76rem!important; color:#91a1af!important; }
.reader-choice { margin:21px 0; padding:19px 0 0; border-top:1px solid var(--line); }
.reader-choice label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.81rem; }
.reader-choice input { margin-top:6px; width:15px; height:15px; accent-color:var(--moon-bright); flex-shrink:0; }
.reader-choice small { color:#99a3ac; font-size:.72rem; line-height:1.5; display:block; margin-top:5px; }
#chapter-reading { font-size:.86rem; line-height:1.65; }
#chapter-interpretation { margin:9px 0 14px; color:var(--ink-dim); }
#chapter-research a { display:block; font-size:.8rem; margin:10px 0; }
.field-link { display:block; margin-top:22px; padding-top:17px; border-top:1px solid var(--line); font-size:.83rem; line-height:1.5; }
.field-link span { margin-left:5px; }
.explorer-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; justify-content:space-between; padding:11px 25px; border-top:1px solid var(--line); }
.explorer-bottom p { color:#96a2b0; font-size:.8rem; font-style:italic; }
.explorer-bottom button { color:var(--moon-bright); font-size:.8rem; }
#share-status { font-size:.8rem; color:var(--ink-dim); }
.below-water { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding:80px 0 62px; }
.below-water h2 { font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2.5rem); font-weight:300; line-height:1.3; }
.below-water p:not(.tides-eyebrow) { color:var(--ink-dim); margin-bottom:15px; font-size:1rem; }
.method { border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink-dim); font-size:.9rem; scroll-margin-top:30px; }
.method summary { cursor:pointer; padding:23px 0; color:var(--ink); }
.method summary span { float:right; }
.method>div { max-width:850px; padding:0 0 22px; }
.method p { margin-bottom:17px; }
.method ul { padding-left:20px; margin:20px 0; }
.method li { margin-bottom:10px; }
.method li strong { color:var(--ink); }
.tides-book { display:flex; align-items:center; justify-content:center; gap:45px; padding:75px 0; }
.tides-book img { width:125px; border:1px solid var(--line); box-shadow:8px 8px 25px #0006; }
.tides-book>div { max-width:550px; }
.tides-book h2 { font-family:var(--font-display); font-weight:300; font-size:2.3rem; line-height:1.3; margin-bottom:10px; }
.tides-book p:not(.tides-eyebrow) { color:var(--ink-dim); margin-bottom:20px; }
.tides-book .tides-eyebrow { margin-bottom:10px; }
.tides-book .quiet-link { margin-left:20px; }
.tides-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:27px 5%; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-dim); }
.tides-footer>a:first-child { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; color:var(--ink); }
.fallback { padding:20px; }
.tide-wave { cursor:pointer; outline:none; }

.tide-wave:focus-visible text { fill:#fff0ce; text-decoration:underline; }
.chart-hint { fill:#9eafbb; font-family:ui-monospace,SFMono-Regular,monospace; font-size:11px; letter-spacing:1px; }
@media(min-width:1600px) { .tides-body main { padding:0 60px; } }
@media(max-width:1000px) { .tides-intro h1 { font-size:5rem; } .explorer-grid { grid-template-columns:minmax(0,1fr) 240px; } .chapter-panel { padding:22px 18px; } .chart-foot .coordinate { display:none; } .motif-bar { flex-wrap:wrap; gap:8px; } }
@media(max-width:760px) { .tides-nav { min-height:76px; } .tides-nav nav { gap:18px; font-size:.8rem; } .tides-nav .wordmark { max-width:140px; line-height:1.5; font-size:.72rem; } .tides-intro { grid-template-columns:1fr; padding:45px 0 35px; gap:28px; } .tides-intro h1 { font-size:clamp(3.2rem,12vw,5rem); } .intro-aside { max-width:480px; } .intro-aside>p:first-of-type { font-size:1.25rem; } .intro-aside>p:first-of-type br { display:none; } .intro-index { margin-bottom:9px; } .explorer-toolbar { padding:0 17px; } .spoiler-state { font-size:.53rem; max-width:110px; line-height:1.5; text-align:right; } .motif-bar { padding:15px 17px; } .motif-controls { gap:2px; } .motif-controls button { padding:4px 9px; font-size:.82rem; min-height:40px; } .explorer-grid { grid-template-columns:1fr; } .chart-column { border-right:0; } .chart-head { padding:10px 17px 0; gap:8px; } .chart-head p { font-size:.69rem; max-width:220px; } .chart-head button { font-size:.72rem; } .chart-head button span { margin-left:3px; } #tides-chart { min-height:275px; } .chart-foot { padding:4px 17px 12px; font-size:.5rem; } .chart-instructions { padding:0 17px; } .chapter-slider { padding:14px 17px; gap:12px; } .chapter-panel { border-top:1px solid var(--line); padding:22px; } .chapter-number { font-size:3.3rem; margin:6px 0; } .chapter-panel h2 { font-size:1.4rem; } .chapter-metric { margin-top:18px; } .reader-choice { padding-top:15px; } .reader-choice label { font-size:.9rem; } .explorer-bottom { padding:14px 20px; gap:3px; } .below-water { grid-template-columns:1fr; gap:27px; padding:47px 0; } .below-water h2 { font-size:2rem; } .tides-book { gap:25px; padding:45px 0; align-items:flex-start; } .tides-book img { width:90px; margin-top:6px; } .tides-book h2 { font-size:1.7rem; } .tides-book .tides-eyebrow { font-size:.53rem; } .tides-book p:not(.tides-eyebrow) { font-size:.9rem; } .tides-book .quiet-link { margin-left:0; display:block; margin-top:12px; } .tides-footer { gap:12px; } .tides-footer span { flex-basis:100%; order:2; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
@media(max-width:760px) {
  .tides-view-label span { display:none; }
  .spoiler-state { max-width:82px; font-size:.5rem; }
  .tide-wave>text { font-size:16px; }
}