/* The list: the same chart-room-at-night palette as the rest of Lookout (deep teal-black, cream, gold, slab headings,
   mono numbers), laid out as one long scroll of panels. The flash-sheet version is parked in parked/list-flash.css. */
:root{
  --bg:#0f2a33; --ink:#f1e4c3; --ink2:rgba(241,228,195,.7); --ink3:rgba(241,228,195,.5); --white:#fff;
  --red:#ff9f7a; --teal:#5fb3c0; --gold:#ffd98a; --coral:#f0a070; --green:#7fd38f;
  --panel:rgba(10,30,40,.55); --line:rgba(241,228,195,.18); --shade:rgba(241,228,195,.1); --night:rgba(0,0,0,.3);
  --serif:"Libre Baskerville",Georgia,serif; --slab:"Alfa Slab One",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.5}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,217,138,.45)}
a:hover{border-bottom-color:var(--gold)}
h1,h2,h3,h4{font-family:var(--slab);font-weight:400;margin:0}
section,header,footer{max-width:1100px;margin:0 auto;padding:18px 16px}
section{padding-bottom:10px}
h2{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:10px 0 12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h2::after{content:"";flex:1;border-top:1px solid var(--line);align-self:center}
h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 6px}
.more{font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-bottom:2px solid rgba(255,217,138,.5);white-space:nowrap}
.meta{color:var(--ink2);font-size:.76rem;line-height:1.45}
small{font-size:.55em;letter-spacing:.05em;margin-left:.2em}
b{font-weight:600;color:var(--white)}
.masthead{display:flex;align-items:center;gap:14px;padding-top:26px;padding-bottom:6px}
.masthead .rose{width:52px;height:52px;flex:none}
.masthead h1{font-size:1.3rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.masthead .sub{font-size:.72rem;color:var(--ink2);margin:5px 0 0}
.masthead .stamp{font-size:.7rem;color:var(--ink3);margin:2px 0 0}
.hero{display:grid;grid-template-columns:1fr;gap:12px;padding-top:12px}
@media(min-width:760px){.hero{grid-template-columns:3fr 2fr}}
.hero>div,.card,.chart canvas,.cams figure{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.hero>div{padding:14px 16px}
.label{font-family:var(--slab);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink2);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.huge{font-weight:600;font-size:clamp(2.8rem,10vw,4.2rem);line-height:1;color:var(--white);margin:6px 0 2px}
.huge small{font-size:.35em;color:var(--ink);font-weight:400}
.huge-sm{font-size:1.5rem;margin:8px 0 4px;color:var(--white)}
.huge-sm b{font-weight:600}
.trend{font-size:.82rem;color:var(--gold)}
.badge{display:inline-block;border-radius:999px;padding:0 9px;font-size:.68rem;margin-left:6px;background:var(--gold);color:#0f2a33;font-weight:600}
.badge.down{background:var(--teal)}
.zone{margin:8px 0 4px;font-family:var(--serif);font-size:.88rem;color:var(--ink)}
.next{font-size:.76rem;color:var(--ink2);margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.card{padding:9px 11px}
.card h4{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);min-height:2.2em;font-family:var(--mono);font-weight:400}
.card .big{font-weight:600;font-size:1.7rem;line-height:1.1;color:var(--white)}
.card .big small{font-size:.45em;color:var(--ink);font-weight:400}
.card .dir{font-size:.85rem;margin:2px 0;color:var(--ink)}
.card .arrow{display:inline-block;color:var(--gold);font-size:1.1rem;transition:transform .4s}
.card .meta{font-size:.72rem}
.card[data-id="buoy"],.card[data-id="home"],.card[data-id="C5456"]{border-color:rgba(255,217,138,.5)}
.chart canvas{width:100%;display:block}
.chart #cur{margin-top:8px}
.toggles{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;font-size:.74rem;color:var(--ink2)}
.toggles label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.toggles input{accent-color:#ffd98a}
.toggles i{width:20px;height:3px;border-radius:2px;display:inline-block}
.two{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.whales .lead{font-family:var(--slab);font-size:1.05rem;line-height:1.3;color:var(--gold);margin:0 0 12px}
ul.sightings,ul.dets,.ferries ul,.forecast ul{list-style:none;padding:0;margin:0}
ul.sightings li,ul.dets li,.ferries li,.forecast li{padding:6px 0;border-bottom:1px dotted rgba(241,228,195,.3);font-size:.78rem;line-height:1.4}
ul li time{font-size:.72rem;color:var(--ink2);margin-right:6px}
.note{display:block;font-family:var(--serif);color:var(--ink2);font-size:.76rem}
.alert{color:var(--red);font-weight:600}
.cams .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.cams figure{margin:0;overflow:hidden}
.cams img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cams figcaption{padding:5px 10px;font-size:.72rem;color:var(--ink2)}
.cams figcaption time{float:right;color:var(--ink3)}
.marine p{font-size:.82rem;margin:0 0 8px;font-family:var(--serif);color:var(--ink)}
.marine p b{font-family:var(--mono)}
footer{border-top:1px solid var(--line);margin-top:20px;padding-bottom:90px;font-size:.7rem;color:var(--ink3);text-align:center;line-height:1.5}
footer a{color:var(--ink2)}
@media(max-width:700px){footer{padding-bottom:72px}.masthead{padding-top:18px}.cards{grid-template-columns:1fr 1fr}}