@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --ink:#0c1a2a; --navy:#0f2236; --teal:#2f7f8a; --teal-2:#5fb3b3; --mist:#dfeced;
  --paper:#f6f8f9; --line:rgba(15,34,54,.12); --white:#fff;
  --serif:"Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --horizon:48%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:6px}
.nowrap{white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---------- Top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:30;height:68px;display:flex;align-items:center;gap:28px;
  padding:0 clamp(20px,4vw,56px);color:#eef5f6;
  background:linear-gradient(to bottom,rgba(8,20,34,.55),rgba(8,20,34,0));}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.topbar{gap:14px}
.brand-mark{width:36px;height:26px;transform:scaleX(-1)}
.brand-name{font-family:var(--serif);font-size:19px;letter-spacing:.01em;font-weight:500}
.brand-name em{font-style:normal;opacity:.75}
.groups{display:flex;gap:6px}
.groups button{font-size:14px;letter-spacing:.02em;padding:8px 14px;border-radius:999px;opacity:.86;transition:background .2s,opacity .2s}
.groups button:hover,.groups button.on{opacity:1;background:rgba(255,255,255,.12)}
.btn-join{font-size:14px;font-weight:600;text-decoration:none;padding:10px 18px;border-radius:999px;
  background:#f4f8f8;color:var(--navy);box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .2s}
.btn-join:hover{transform:translateY(-1px)}
.menu-toggle{display:block;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);position:relative}
.menu-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:#fff}
.menu-toggle span:nth-child(1){top:14px}.menu-toggle span:nth-child(2){top:19.5px}.menu-toggle span:nth-child(3){top:25px}

/* ---------- Hero / scene ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:720px;overflow:hidden;color:#fff;background:#0b1a2b}
.sky{position:absolute;inset:0 0 calc(100% - var(--horizon)) 0;
  background:linear-gradient(to bottom,#081627 0%,#0f2a42 30%,#1f4f66 58%,#5f97a0 82%,#b9d4d4 100%)}
.stars{position:absolute;inset:0 0 45% 0;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 27% 8%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 44% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 12%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 78% 26%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 9%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 38%,#fff 50%,transparent 51%);}
.glow{position:absolute;left:50%;bottom:-6%;width:70vw;height:60%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,241,220,.55),rgba(255,236,210,.18) 45%,transparent 75%);}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:30%}
.lake{position:absolute;inset:var(--horizon) 0 0 0;
  background:linear-gradient(to bottom,#7fb0b4 0%,#3f7787 12%,#1d4a5e 40%,#11324a 70%,#0b2136 100%)}
.lake::before{content:"";position:absolute;inset:0 0 auto 0;height:28px;
  background:linear-gradient(to bottom,rgba(214,232,230,.55),transparent)}
.glint{position:absolute;left:50%;top:0;width:24vw;height:70%;transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 0%,rgba(255,240,215,.35),transparent 70%);filter:blur(4px)}
.shimmer{position:absolute;inset:0;width:100%;height:100%}
.sh{stroke-dasharray:60 40 120 60;animation:drift 14s linear infinite}
.sh.b{animation-duration:20s;animation-direction:reverse}
@keyframes drift{to{stroke-dashoffset:-560}}

.hero-copy{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto;padding:clamp(96px,13vh,130px) 24px 0}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;margin:0 0 18px;color:#bfe0df;font-weight:500}
.eyebrow.dark{color:var(--teal)}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1.12;margin:0;letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(5,15,28,.35)}
.sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,24px);margin:16px 0 0;color:#e4f1f1}
.hint{position:absolute;z-index:2;left:0;right:0;top:calc(var(--horizon) + 14px);text-align:center;margin:0;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(230,243,243,.75)}

/* ---------- Flock ---------- */
.flock{position:absolute;inset:0;z-index:3;pointer-events:none}
.swans{list-style:none;margin:0;padding:0}
.swan{position:absolute;left:var(--x);top:calc(var(--horizon) + var(--y));width:var(--w);transform:translateX(-50%);pointer-events:auto}
.swan.far{--w:76px;--lab:13.5px;z-index:1}
.swan.mid{--w:98px;--lab:14.5px;z-index:2}
.swan.near{--w:128px;--lab:17px;z-index:3}
.swan a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#fff;position:relative;-webkit-tap-highlight-color:transparent}
.bird,.reflect{display:block;width:100%;height:auto;aspect-ratio:200/140}
.bird{position:relative;z-index:2;filter:drop-shadow(0 0 6px rgba(225,240,242,.28)) drop-shadow(0 5px 8px rgba(4,14,26,.3));animation:bob 6s ease-in-out infinite;animation-delay:var(--d);transform-origin:50% 90%;transition:filter .3s}
.reflect{position:absolute;left:0;top:0;z-index:1;opacity:.26;filter:blur(1.2px);transform:scaleY(-.7);transform-origin:50% 91.4%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 75%);mask-image:linear-gradient(to top,#000,transparent 75%)}
.swan.flip .bird{--fx:-1}
.swan.flip .reflect{transform:scale(-1,-.7)}
.swan.far .bird{opacity:.95}
.ripple{position:absolute;left:8%;right:8%;top:calc(var(--w) * .58);height:calc(var(--w) * .1);border-radius:50%;border:1px solid rgba(220,238,238,.32);z-index:1;animation:ripple 6s ease-out infinite;animation-delay:var(--d)}
@keyframes bob{0%,100%{transform:scaleX(var(--fx,1)) translateY(0) rotate(0)}50%{transform:scaleX(var(--fx,1)) translateY(-3px) rotate(-.6deg)}}
@keyframes ripple{0%{transform:scale(.7);opacity:0}25%{opacity:.6}100%{transform:scale(1.25);opacity:0}}
.label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:calc(var(--w) * .1);position:relative;z-index:3;white-space:nowrap;
  padding:5px 12px 6px;border-radius:999px;transition:background .25s,color .25s,transform .25s}
.label b{font-family:var(--serif);font-weight:500;font-size:var(--lab);letter-spacing:.01em;text-shadow:0 1px 10px rgba(4,14,26,.6)}
.label small{font-size:11px;color:rgba(225,240,240,.75);letter-spacing:.03em}
.swan.near .label{background:rgba(9,25,40,.38);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 16px 8px;border-radius:14px}
.swan a:hover .label,.swan a:focus-visible .label{background:rgba(246,250,250,.96);color:#0f2236;transform:translateY(-2px)}
.swan a:hover .label b,.swan a:focus-visible .label b{text-shadow:none}
.swan a:hover .label small,.swan a:focus-visible .label small{color:#45606e}
.swan a:hover .bird,.swan a:focus-visible .bird{filter:drop-shadow(0 0 16px rgba(200,236,236,.6)) drop-shadow(0 5px 8px rgba(4,14,26,.25))}
.swan a:focus-visible{outline:none}

/* "Click here to see other swans": out on the water, behind the flock */
.more-swans{position:absolute;left:50%;top:calc(var(--horizon) + 2.2%);transform:translateX(-50%);pointer-events:auto;z-index:0;
  display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;border-radius:999px;color:#f3faf9;font-size:13.5px;letter-spacing:.06em;
  background:rgba(220,240,240,.12);border:1px solid rgba(230,245,245,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 30px rgba(190,230,230,.18);transition:background .25s,color .25s}
.more-swans:hover,.more-swans:focus-visible{background:rgba(246,250,250,.95);color:#0f2236}
.more-ring{width:10px;height:10px;border-radius:50%;background:#bfe6e3;box-shadow:0 0 0 0 rgba(191,230,227,.6);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(191,230,227,0)}100%{box-shadow:0 0 0 0 rgba(191,230,227,0)}}
.more-arrow{transition:transform .2s}.more-swans:hover .more-arrow{transform:translateX(3px)}
.more-end{display:none}

/* Mobile shore is off on desktop; the corner .shore is enough */
.mobile-shore{display:none}

/* Shore under the Lake Guide sign */
.shore{position:absolute;left:0;bottom:0;width:300px;height:120px;z-index:2;pointer-events:none}
.shore svg{width:100%;height:100%}

/* ---------- Panel (more swans) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(6,16,28,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel:focus{outline:none}
.panel{position:fixed;z-index:50;left:50%;top:50%;width:min(900px,calc(100vw - 40px));max-height:calc(100vh - 100px);overflow:auto;
  transform:translate(-50%,-46%);opacity:0;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(to bottom,#f7fafa,#eef4f4);color:var(--ink);border-radius:24px;padding:38px 42px 26px;box-shadow:0 30px 80px rgba(4,14,26,.45)}
.panel.show{opacity:1;transform:translate(-50%,-50%)}
.panel-close{position:absolute;right:18px;top:16px;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;color:#4a5e6b}
.panel-close:hover{background:#e3eded}
.panel h2{font-family:var(--serif);font-weight:500;font-size:36px;margin:0;color:var(--navy)}
.panel-lede{margin:6px 0 24px;color:#4b5f6c}
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tiles li{animation:rise .4s both;animation-delay:calc(var(--i) * 45ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.tiles a{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;height:100%;
  padding:16px 36px 16px 14px;text-decoration:none;border-radius:16px;border:1px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.tiles a:hover,.tiles a:focus-visible{border-color:rgba(47,127,138,.5);box-shadow:0 10px 30px rgba(15,34,54,.1);transform:translateY(-2px)}
.t-swan{grid-row:1 / span 2;width:44px;height:31px;align-self:center;filter:drop-shadow(0 2px 3px rgba(15,34,54,.25))}
.t-name{font-weight:600;font-size:15.5px;color:var(--navy)}
.t-desc{font-size:13px;color:#55697a;line-height:1.4}
.t-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--teal)}
.panel-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:#55697a}
.panel-foot button{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.foot{background:var(--navy);color:#b8cad3;font-size:14px;padding:26px 0 26px}
.foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-left:240px}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
.foot-links{display:flex;gap:18px}


/* ---------- Our latest 5: white (#5) turns to rich glowing silver-grey (#1) ---------- */
.latest-flock{
  position:absolute;left:50%;top:calc(var(--horizon) + 8.5%);z-index:6;
  width:330px;transform:translateX(-50%);pointer-events:auto;text-align:center;
}
.latest-kicker{
  margin:0 0 2px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#e8eef0;font-weight:600;text-shadow:0 1px 10px rgba(4,14,26,.55);
}
.latest-swans{position:relative;height:132px;list-style:none;margin:0;padding:0}
.latest-swan{position:absolute;width:var(--w);transform:translateX(-50%);pointer-events:auto}
.latest-swan.rank-1{left:48%;top:46%;--w:98px;z-index:5}
.latest-swan.rank-2{left:24%;top:26%;--w:82px;z-index:4}
.latest-swan.rank-3{left:12%;top:6%;--w:74px;z-index:3}
.latest-swan.rank-4{left:70%;top:4%;--w:72px;z-index:2}
.latest-swan.rank-5{left:86%;top:22%;--w:70px;z-index:1}
.latest-swan button{
  display:flex;flex-direction:column;align-items:center;position:relative;
  background:none;border:0;padding:0;cursor:pointer;width:100%;font:inherit;color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.latest-swan .bird,.latest-swan .reflect{display:block;width:100%;height:auto;aspect-ratio:200/140}
.latest-swan .bird{position:relative;z-index:2;animation:bob 6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 90%}
.latest-swan .reflect{position:absolute;left:0;top:0;z-index:1;opacity:.26;filter:blur(1.2px);transform:scaleY(-.7);transform-origin:50% 91.4%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 75%);mask-image:linear-gradient(to top,#000,transparent 75%)}
.latest-swan.flip .bird{--fx:-1}
.latest-swan.flip .reflect{transform:scale(-1,-.7)}
.latest-swan .ripple{position:absolute;left:8%;right:8%;top:58%;height:10%;border-radius:50%;border:1px solid rgba(220,238,238,.32);z-index:1;animation:ripple 6s ease-out infinite}
.latest-swan .halo,.latest-swan .rays{position:absolute;pointer-events:none;z-index:0;left:50%;border-radius:50%}
.latest-swan .halo{
  top:16%;width:165%;height:125%;transform:translate(-50%,-30%);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.9) 0%, rgba(210,220,226,.45) 32%, rgba(180,196,206,.14) 52%, transparent 70%);
  filter:blur(6px);
}
.latest-swan .rays{
  top:4%;width:190%;height:150%;transform:translate(-50%,-28%);
  background:repeating-conic-gradient(from 0deg at 50% 48%, rgba(235,242,245,0) 0deg 12deg, rgba(235,242,245,.2) 14deg 16deg, rgba(235,242,245,0) 18deg 30deg);
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%, #000 0%, transparent 62%);
  mask-image:radial-gradient(ellipse at 50% 48%, #000 0%, transparent 62%);
  animation:angel-rays 18s linear infinite;
}
.latest-swan .num{
  position:absolute;left:50%;top:-4px;z-index:4;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:0;line-height:1;
  background:rgba(15,34,54,.72);color:#f4f7f8;border:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 8px rgba(4,14,26,.35);
}
.latest-swan .label{
  display:none;margin-top:4px;position:relative;z-index:3;white-space:nowrap;
  padding:4px 10px 5px;border-radius:999px;font-size:12px;
  background:rgba(9,25,40,.5);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.latest-swan .label b{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.01em;text-shadow:0 1px 8px rgba(4,14,26,.55)}
.latest-swan.rank-1 .label{display:none}
.latest-swan button:hover .label,.latest-swan button:focus-visible .label{
  display:block;background:rgba(246,250,250,.96);color:#0f2236
}
.latest-swan button:hover .label b,.latest-swan button:focus-visible .label b{text-shadow:none;color:#0f2236}
.latest-swan button:focus-visible{outline:none}

/* #1 newest: richest silver-grey, brightest halo */
.latest-swan.rank-1 .halo{opacity:1;animation:angel-pulse 3.2s ease-in-out infinite}
.latest-swan.rank-1 .rays{opacity:.5}
.latest-swan.rank-1 .bird{
  filter:drop-shadow(0 0 10px rgba(230,238,242,.95)) drop-shadow(0 0 22px rgba(170,188,198,.7)) drop-shadow(0 5px 8px rgba(4,14,26,.3));
  animation:bob 6s ease-in-out infinite, angel-shine 3.2s ease-in-out infinite;
}
.latest-swan.rank-1 .reflect{opacity:.34;filter:blur(1.2px) drop-shadow(0 0 8px rgba(200,214,220,.45))}
.latest-swan.rank-1 .num{background:#3a4a54;border-color:rgba(230,238,242,.8);box-shadow:0 0 10px rgba(200,220,230,.45)}
.latest-swan.rank-1 .label{background:rgba(12,22,30,.55);border-color:rgba(210,222,228,.45)}

/* #2 */
.latest-swan.rank-2 .halo{opacity:.55;animation:angel-pulse 3.6s ease-in-out infinite}
.latest-swan.rank-2 .rays{opacity:.2}
.latest-swan.rank-2 .bird{filter:drop-shadow(0 0 8px rgba(220,230,234,.55)) drop-shadow(0 5px 8px rgba(4,14,26,.28))}

/* #3 */
.latest-swan.rank-3 .halo{opacity:.28}
.latest-swan.rank-3 .rays{display:none}
.latest-swan.rank-3 .bird{filter:drop-shadow(0 0 5px rgba(230,236,238,.3)) drop-shadow(0 5px 8px rgba(4,14,26,.25))}

/* #4 */
.latest-swan.rank-4 .halo{opacity:.1}
.latest-swan.rank-4 .rays{display:none}
.latest-swan.rank-4 .bird{filter:drop-shadow(0 0 4px rgba(255,255,255,.35)) drop-shadow(0 5px 8px rgba(4,14,26,.22))}

/* #5 oldest: a white swan, almost no glow */
.latest-swan.rank-5 .halo,.latest-swan.rank-5 .rays{display:none}
.latest-swan.rank-5 .bird{filter:drop-shadow(0 0 6px rgba(255,255,255,.5)) drop-shadow(0 5px 8px rgba(4,14,26,.2))}
.latest-swan.rank-5 .num{background:rgba(255,255,255,.88);color:#3a4a54;border-color:rgba(15,34,54,.15)}

.latest-caption{
  margin:2px 0 0;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.4;
  color:#e8eef0;text-shadow:0 1px 10px rgba(4,14,26,.65);max-width:32ch;margin-left:auto;margin-right:auto;
}

@keyframes angel-pulse{
  0%,100%{opacity:.72;transform:translate(-50%,-30%) scale(.94)}
  50%{opacity:1;transform:translate(-50%,-30%) scale(1.06)}
}
@keyframes angel-shine{
  0%,100%{filter:drop-shadow(0 0 10px rgba(230,238,242,.8)) drop-shadow(0 0 18px rgba(170,188,198,.5)) drop-shadow(0 5px 8px rgba(4,14,26,.3))}
  50%{filter:drop-shadow(0 0 16px rgba(255,255,255,1)) drop-shadow(0 0 26px rgba(180,200,210,.75)) drop-shadow(0 5px 8px rgba(4,14,26,.3))}
}
@keyframes angel-rays{to{transform:translate(-50%,-28%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .latest-swan .halo,.latest-swan .rays,.latest-swan .bird{animation:none!important}
  .latest-swan.rank-1 .halo{opacity:.95}
}

/* ---------- Latest-release panel ---------- */
.latest-panel:focus{outline:none}
.latest-panel{
  position:fixed;z-index:50;left:50%;top:50%;width:min(720px,calc(100vw - 40px));max-height:calc(100vh - 80px);overflow:auto;
  transform:translate(-50%,-46%);opacity:0;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(to bottom,#f7fafa,#eef4f4);color:var(--ink);border-radius:24px;
  padding:38px 42px 28px;box-shadow:0 30px 80px rgba(4,14,26,.45);
  border-top:5px solid #7d868d;
}
.latest-panel.show{opacity:1;transform:translate(-50%,-50%)}
.latest-panel h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,34px);margin:0 0 12px;color:var(--navy);line-height:1.2}
.latest-summary{margin:0 0 20px;color:#2a4150;font-size:1.05rem;line-height:1.55;max-width:62ch}
.stream-embed{position:relative;width:100%;aspect-ratio:16/9;background:#0b1a2b;border-radius:14px;overflow:hidden;
  border:1px solid rgba(15,34,54,.12);box-shadow:0 16px 32px -20px rgba(0,0,0,.45);margin:0 0 20px}
.stream-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stream-soon{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(ellipse at 50% 40%, #1a3348 0%, #0b1a2b 70%);
  color:#d7e4e8;font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.01em}
.stream-soon p{margin:0;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.latest-actions{margin:0 0 18px}
.latest-actions .btn{
  display:inline-flex;align-items:center;background:var(--navy);color:#f4f8f8;text-decoration:none;
  font-weight:600;padding:11px 18px;border-radius:999px;font-size:14px
}
.latest-actions .btn:hover{background:#1a3448}
.latest-actions .btn[aria-disabled="true"]{opacity:.72;cursor:not-allowed}
.latest-invite{margin:0;padding-top:16px;border-top:1px solid rgba(15,34,54,.1);color:#4b5f6c;font-size:15px;line-height:1.55}
.latest-invite a{color:var(--teal);font-weight:600;text-decoration:none}
.latest-invite a:hover{text-decoration:underline;text-underline-offset:3px}

html.latest-open,html.more-open,html.lg-open{overflow:hidden}

@media (max-width:820px){
  .latest-flock{
    position:relative;left:auto;top:auto;transform:none;width:auto;
    padding:4px 12px 8px;margin:0 0 2px;
  }
  .latest-kicker{color:#d7e4e8}
  .latest-swans{
    height:auto;display:flex;justify-content:space-between;align-items:flex-end;
    gap:2px;padding:8px 0 0;
  }
  .latest-swan{position:relative;left:auto;top:auto;transform:none;flex:1;max-width:72px}
  .latest-swan.rank-1,.latest-swan.rank-2,.latest-swan.rank-3,.latest-swan.rank-4,.latest-swan.rank-5{left:auto;top:auto;--w:100%}
  .latest-swan.rank-1{--w:100%;max-width:78px}
  .latest-swan .label,
  .latest-swan.rank-1 .label{display:block;white-space:normal;text-align:center;padding:3px 4px 4px;max-width:100%;
    font-size:10px;line-height:1.2}
  .latest-swan .label b{font-size:10.5px}
  .latest-caption{max-width:32ch;font-size:12.5px;color:#d7e4e8;margin-top:6px}
  .latest-panel{left:0;right:0;top:auto;bottom:0;width:100%;max-height:90vh;border-radius:22px 22px 0 0;
    padding:28px 18px 28px;transform:translateY(30px)}
  .latest-panel.show{transform:none}
  .latest-panel h2{font-size:26px}
}

/* ---------- Mobile: scrollable staggered flock ---------- */
@media (max-width:820px){
  .btn-join{padding:8px 14px;font-size:13px}
  .topbar{height:60px;background:linear-gradient(to bottom,rgba(8,20,34,.75),rgba(8,20,34,0))}
  .hero{height:auto;min-height:0;padding-bottom:90px;background:linear-gradient(to bottom,#7fb0b4 0,#3f7787 6%,#1d4a5e 18%,#11324a 50%,#0b2136 100%) 0 310px/100% calc(100% - 310px) no-repeat,#0b1a2b}
  .sky{bottom:auto;height:330px}
  .lake{top:310px;bottom:auto;height:220px;background:none}
  .hero-copy{padding-top:72px;height:310px}
  h1{font-size:28px}.sub{font-size:17px}
  .eyebrow{font-size:11px;margin-bottom:12px}
  .flock{position:relative;inset:auto;pointer-events:auto;padding:18px 16px 0}
  .more-swans{position:relative;left:auto;top:auto;transform:none;display:flex;margin:0 auto 14px;width:max-content;font-size:13px}
  .more-end{display:flex;margin:34px auto 0}
  .swans{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:14px}
  .swan{position:relative;left:auto;top:auto;transform:none;width:auto;display:flex;justify-content:center}
  .swan a{width:100%}
  .swan .bird{width:var(--w)}
  .swan .reflect{width:var(--w);left:calc(50% - var(--w) / 2)}
  .ripple{left:calc(50% - var(--w) * .42);right:auto;width:calc(var(--w) * .84)}
  .brand-name{font-size:17px;white-space:nowrap}
  .btn-join{white-space:nowrap}
  .swan:nth-child(even){transform:translateY(44px)}
  .swan.near{--w:128px;--lab:16px}
  .swan.mid{--w:112px;--lab:15px}
  .swan.far{--w:100px;--lab:14.5px}
  .swan:first-child{grid-column:1 / -1;--w:132px}
  .swan:first-child ~ .swan:nth-child(even){transform:none}
  .swan:first-child ~ .swan:nth-child(odd){transform:translateY(22px)}
  .swan.near .label{padding:6px 12px 7px}
  .shore{display:none}
  /* Fixed bottom shore: the Lake Guide stands here, so swan labels scroll above it */
  .mobile-shore{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    height:118px;
    z-index:55;
    pointer-events:none;
    background:linear-gradient(to top, #071520 0%, #0a1d2c 62%, rgba(10,29,44,0) 100%);
  }
  html.more-open .mobile-shore,
  html.lg-open .mobile-shore,
  html.latest-open .mobile-shore{opacity:0}
  .flock{padding:18px 16px 140px}
  .tiles{grid-template-columns:1fr}
  .panel{left:0;right:0;top:auto;bottom:0;width:100%;max-height:86vh;border-radius:22px 22px 0 0;padding:28px 18px 22px;transform:translateY(30px)}
  .panel.show{transform:none}
  .panel h2{font-size:30px}
  .foot-inner{padding-left:0;flex-direction:column;gap:8px;padding-bottom:140px}
  .wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}