/* Bright's Beaches: look and feel. Colours and fonts are the variables at the top. */
:root{--bg:#e9f1f4;--card:rgba(251,253,250,.82);--line:rgba(60,110,110,.16);--ink:#1d3a3c;--mute:#6a8587;--accent:#3f7f68;--accent2:#7fb7cf;
 --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"DM Sans",ui-rounded,"Avenir Next",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:15px/1.45 var(--sans);min-height:100vh;
 background:radial-gradient(900px 600px at 95% -10%,#cfe5f2 0%,transparent 62%),radial-gradient(800px 700px at -10% 45%,#d5ead9 0%,transparent 60%),var(--bg);background-attachment:fixed}
.layout{max-width:1180px;margin:0 auto;padding:34px 16px 60px;display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:28px;grid-template-areas:"top vid" "about vid";align-items:start}
.top{grid-area:top;min-width:0}
.hero{text-align:center;margin:6px 0 26px}
h1{font:700 clamp(44px,8vw,76px)/1 var(--serif);letter-spacing:-.03em;margin:0;color:#1d4a45}
.tagline{font:italic 500 clamp(17px,2.6vw,22px) var(--serif);color:var(--accent);margin:10px 0 0}
.hero::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.intro{margin:0 0 10px;font-size:15px;line-height:1.55}.intro a{color:var(--accent);font-weight:700;text-decoration:none}.intro a:hover{text-decoration:underline}
.sub{color:var(--mute);margin:0 0 10px;font-size:13px}
.sub a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}.sub a:hover{color:var(--accent)}
.tip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--accent);background:rgba(63,127,104,.1);border:1px solid rgba(63,127,104,.25);border-radius:999px;padding:5px 12px;margin:0 0 14px;font-weight:500}
.bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--mute)}
.legend{display:flex;align-items:center;gap:6px}.bar label{display:flex;gap:6px;align-items:center;cursor:pointer}
input[type=checkbox]{accent-color:var(--accent)}
section,#vid{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px 8px;margin-bottom:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(40,90,100,.08)}
h2{font:500 italic 17px var(--serif);color:var(--accent);margin:0 0 6px}
.row{display:grid;grid-template-columns:minmax(92px,1.7fr) repeat(7,minmax(0,1fr));align-items:center}
.row+.row{border-top:1px solid var(--line)}
.head{font-size:11px;color:var(--mute);text-align:center;line-height:1.25}
.head div:first-child{text-align:left}
.head div:nth-child(2){color:var(--accent);font-weight:700}
.sticky{position:sticky;top:0;z-index:5;background:rgba(233,241,244,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;margin:0 0 10px;border-bottom:1px solid var(--line);border-radius:0 0 14px 14px}
.name{font-size:14px;font-weight:500;padding:4px 6px 4px 0}
.name button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.name button:hover .nm{color:var(--accent)}.name button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.nm{border-bottom:1px dotted rgba(63,127,104,.5)}.play{font-size:9px;color:var(--accent)}
.name button.sel .nm{color:var(--accent);font-weight:700;border-bottom-style:solid}
.cell{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.cell:nth-child(2){background:rgba(127,183,207,.2);border-radius:10px}
.dot{border-radius:50%;flex:none}
.num{font-size:10px;color:var(--mute);display:none}.nums .num{display:block}
#msg{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:12px;font-size:14px;color:var(--mute)}
#about{grid-area:about;margin-top:16px}#about h2{margin-bottom:10px}#about p{margin:0 0 10px;font-size:15px;line-height:1.65;color:#2f4f50}#about a{color:var(--accent);font-weight:700;text-decoration:none}#about a:hover{text-decoration:underline}
#vid{grid-area:vid;position:sticky;top:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;margin-bottom:0}
#vid h3{margin:0;font:700 19px/1.2 var(--serif);color:var(--ink)}#vid h3 small{display:block;font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
#vnote{font-size:12px;color:#8a6a2f;background:rgba(214,168,70,.16);border-radius:10px;padding:5px 10px;margin:0}
#vbody video{cursor:pointer;display:block;width:auto;max-width:100%;height:min(calc(100vh - 230px),560px);aspect-ratio:9/16;border-radius:16px;background:#0e2a2b;box-shadow:0 10px 30px rgba(40,90,100,.25)}
#vbody .none{color:var(--mute);font-size:14px;padding:30px 10px}
.vfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font-size:12px;color:var(--mute)}.vfoot a{color:var(--accent);text-decoration:none;font-weight:700}
.pbtn{background:rgba(63,127,104,.1);color:var(--accent);border:1px solid rgba(63,127,104,.35);border-radius:999px;padding:6px 14px;font:700 13px var(--sans);cursor:pointer}.pbtn:hover{background:rgba(63,127,104,.2)}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 290px;column-gap:20px}}
@media(max-width:899px){.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "vid" "about";padding:22px 8px 40px}
 #vid{position:static;margin-bottom:14px}#vbody video{height:auto;width:min(100%,330px)}}
@media(max-width:520px){.name{font-size:12px}.head{font-size:10px}section{padding:12px 10px 4px}.sticky{padding:8px 10px}}