/* Page-specific styles for the deep-dive landing page (was inline). */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    min-height: 100vh;
    color: #eaf6fb;
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    display: flex; flex-direction: column; align-items: center;
    padding: 56px 10px 40px;
    background:
      radial-gradient(120% 78% at 50% -22%, rgba(126, 214, 255, .22), transparent 60%),
      linear-gradient(180deg, #0e5a7e 0%, #0a3f5c 24%, #072c42 48%, #04161f 76%, #020b12 100%);
    background-attachment: fixed;
  }

  /* ---------- the dive ---------- */
  .ocean { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

  .caustics {
    position: absolute; inset: 0; mix-blend-mode: screen; opacity: .55;
    background:
      radial-gradient(55% 30% at 28% 0%, rgba(130, 224, 255, .12), transparent 70%),
      radial-gradient(50% 26% at 68% 0%, rgba(130, 224, 255, .09), transparent 70%);
    animation: drift 19s ease-in-out infinite alternate;
  }
  @keyframes drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }

  .ray {
    position: absolute; top: -25%; height: 150%; transform-origin: top center;
    background: linear-gradient(180deg, rgba(155, 228, 255, .17), rgba(155, 228, 255, .03) 55%, transparent 80%);
    filter: blur(7px); mix-blend-mode: screen;
    animation: ray 13s ease-in-out infinite alternate;
  }
  @keyframes ray {
    from { transform: rotate(var(--r1)) translateX(-12px); opacity: .25; }
    to   { transform: rotate(var(--r2)) translateX(16px);  opacity: .6; }
  }

  /* fish — drift across at long intervals */
  .fish { position: absolute; left: 0; top: var(--top); z-index: 1; opacity: 0; will-change: transform, opacity; }
  .fish.r { animation: swimR var(--fd) linear infinite; }
  .fish.l { animation: swimL var(--fd) linear infinite; }
  .fish .shape { position: relative; display: block; width: var(--fw); height: calc(var(--fw) * .46);
    background: var(--fc); border-radius: 50% 58% 58% 50% / 50%;
    box-shadow: 0 0 14px -2px var(--fc); }
  .fish.l .shape { transform: scaleX(-1); }
  .fish .tail {
    position: absolute; right: 100%; top: 50%; width: 0; height: 0;
    border-top: calc(var(--fw) * .17) solid transparent;
    border-bottom: calc(var(--fw) * .17) solid transparent;
    border-right: calc(var(--fw) * .3) solid var(--fc);
    transform-origin: right center;
    animation: tailwag .45s ease-in-out infinite alternate;
  }
  .fish .eye { position: absolute; right: 16%; top: 32%;
    width: calc(var(--fw) * .085); height: calc(var(--fw) * .085);
    border-radius: 50%; background: #0a1018; }
  @keyframes tailwag { from { transform: translateY(-50%) rotate(-14deg); } to { transform: translateY(-50%) rotate(14deg); } }
  @keyframes swimR {
    0%   { transform: translateX(-14vw) translateY(0);    opacity: 0; }
    8%   { opacity: var(--op); }
    50%  { transform: translateX(50vw) translateY(-12px); }
    92%  { opacity: var(--op); }
    100% { transform: translateX(115vw) translateY(7px);  opacity: 0; }
  }
  @keyframes swimL {
    0%   { transform: translateX(115vw) translateY(0);    opacity: 0; }
    8%   { opacity: var(--op); }
    50%  { transform: translateX(50vw) translateY(-12px); }
    92%  { opacity: var(--op); }
    100% { transform: translateX(-14vw) translateY(7px);  opacity: 0; }
  }

  /* bubbles rising */
  .bubble {
    position: absolute; bottom: -6%; width: var(--s); height: var(--s); border-radius: 50%; z-index: 1;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.7), rgba(200,240,255,.12) 60%, transparent 72%);
    border: 1px solid rgba(195, 235, 255, .22);
    opacity: 0; will-change: transform, opacity;
    animation: rise var(--d) linear infinite;
  }
  @keyframes rise {
    0%   { transform: translateY(0) translateX(0);                  opacity: 0; }
    12%  { opacity: .85; }
    50%  { transform: translateY(-58vh) translateX(var(--drift)); }
    88%  { opacity: .65; }
    100% { transform: translateY(-116vh) translateX(0);            opacity: 0; }
  }

  /* kelp forest along the seabed */
  .kelp { position: absolute; bottom: -4px; z-index: 2; }
  .blade {
    position: absolute; bottom: 0; width: var(--w, 18px); height: var(--h);
    background: linear-gradient(180deg, var(--c1), var(--c2));
    border-radius: 50% 50% 7px 7px / 82% 82% 4% 4%;
    transform-origin: bottom center; filter: blur(.4px); opacity: .82;
    animation: sway var(--sd) ease-in-out infinite alternate;
    animation-delay: var(--sdelay, 0s);
  }
  @keyframes sway {
    from { transform: rotate(var(--a1)) skewX(calc(var(--a1) * -0.5)); }
    to   { transform: rotate(var(--a2)) skewX(calc(var(--a2) * -0.5)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .caustics, .ray, .fish, .bubble, .blade { animation: none !important; }
    .fish, .bubble { opacity: 0; }
  }

  /* ---------- content ---------- */
  header { text-align: center; margin-bottom: 40px; max-width: 720px; position: relative; z-index: 5; }
  h1 {
    font-size: clamp(40px, 8vw, 72px); font-weight: 800; letter-spacing: -0.03em;
    color: #aef0ff;
    text-shadow: 0 2px 30px rgba(120, 215, 255, .25);
  }
  .tag { color: #93b6c6; margin-top: 12px; font-size: 16px; line-height: 1.6; }

  .feed { width: 100%; max-width: 960px; display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 5; }
  .feed-label {
    font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #5f8497; margin: 4px 2px 2px; display: flex; align-items: center; gap: 10px;
  }
  .feed-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #1d4357, transparent); }

  .post {
    position: relative; display: block; text-decoration: none; color: inherit;
    width: 100%; border-radius: 20px; padding: 24px 28px 24px;
    border: 1px solid #173a4a; overflow: hidden;
    background-color: rgba(7, 22, 33, .55); backdrop-filter: blur(3px);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
  }
  .post:hover { transform: translateY(-4px); border-color: #ffffff44; }
  .post.taylor   { background-image: linear-gradient(150deg, #241b3aE6 0%, #14101fE6 55%, #1d1430E6 100%); box-shadow: 0 18px 50px rgba(110, 70, 200, .25); }
  .post.taylor:hover   { box-shadow: 0 26px 70px rgba(150, 100, 255, .42); }
  .post.olivia   { background-image: linear-gradient(150deg, #321526E6 0%, #15101cE6 55%, #2a1230E6 100%); box-shadow: 0 18px 50px rgba(210, 60, 110, .24); }
  .post.olivia:hover   { box-shadow: 0 26px 70px rgba(230, 80, 130, .4); }
  .post.bball    { background-image: linear-gradient(150deg, #2e1d12E6 0%, #161013E6 55%, #2a1a0eE6 100%); box-shadow: 0 18px 50px rgba(232, 115, 26, .22); }
  .post.bball:hover    { box-shadow: 0 26px 70px rgba(232, 115, 26, .38); }
  .post.curry    { background-image: linear-gradient(150deg, #2e2410E6 0%, #171208E6 55%, #2c1c0aE6 100%); box-shadow: 0 18px 50px rgba(212, 160, 40, .22); }
  .post.curry:hover    { box-shadow: 0 26px 70px rgba(232, 180, 60, .38); }
  .post.worldcup { background-image: linear-gradient(150deg, #10301dE6 0%, #0d1714E6 55%, #0e2a1aE6 100%); box-shadow: 0 18px 50px rgba(47, 175, 90, .22); }
  .post.worldcup:hover { box-shadow: 0 26px 70px rgba(60, 200, 110, .38); }
  .post .glow {
    position: absolute; top: -70px; right: -60px; width: 190px; height: 190px;
    border-radius: 50%; filter: blur(55px); opacity: .5;
  }
  .taylor .glow { background: #8b5cf6; }
  .olivia .glow { background: #e0356e; }
  .bball .glow { background: #e8731a; }
  .curry .glow { background: #d4a028; }
  .worldcup .glow { background: #2faf5a; }

  .post .icon {
    position: absolute; top: 20px; right: 22px; width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 20, 28, .5); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(2px);
  }
  .post .icon svg { width: 30px; height: 30px; }
  .taylor   .icon { color: #d9c9ff; box-shadow: 0 0 16px rgba(150, 100, 255, .32); }
  .olivia   .icon { color: #ff9fb8; box-shadow: 0 0 16px rgba(230, 80, 130, .32); }
  .bball    .icon { color: #ffb066; box-shadow: 0 0 16px rgba(232, 115, 26, .32); }
  .curry    .icon { color: #ffd166; box-shadow: 0 0 16px rgba(212, 160, 40, .32); }
  .worldcup .icon { color: #7fe0a0; box-shadow: 0 0 16px rgba(47, 175, 90, .32); }
  .post .byline, .post h2 { padding-right: 64px; }

  .byline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: #8d94a8; }
  .byline .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .taylor .byline .dot { background: #8b5cf6; }
  .olivia .byline .dot { background: #e0356e; }
  .bball .byline .dot { background: #e8731a; }
  .curry .byline .dot { background: #d4a028; }
  .worldcup .byline .dot { background: #2faf5a; }
  .byline time { font-weight: 700; color: #cfe2ec; }
  .byline .who { letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-size: 11.5px; }

  .post h2 { font-size: clamp(22px, 4.2vw, 27px); font-weight: 800; margin: 9px 0 9px; }
  .taylor h2 { color: #d9c9ff; }
  .olivia h2 { color: #ff9fb8; }
  .bball h2 { color: #ffb066; }
  .curry h2 { color: #ffd166; }
  .worldcup h2 { color: #7fe0a0; }
  .desc { color: #b3c2cf; font-size: 14px; line-height: 1.65; }
  .eras { display: flex; gap: 5px; margin: 16px 0 13px; }
  .eras i { height: 8px; border-radius: 8px; flex: 1; opacity: .85; }
  .meta { display: flex; gap: 14px; flex-wrap: wrap; color: #8997a4; font-size: 12.5px; }
  .meta b { color: #e8f1f8; }
  .go {
    margin-top: 18px; display: inline-block; font-weight: 800; font-size: 13.5px;
    color: #fff; padding: 9px 19px; border-radius: 999px;
  }
  .taylor .go   { background: linear-gradient(90deg, #6d4fc2, #a64fc2); box-shadow: 0 0 18px rgba(150,100,255,.4); }
  .olivia .go   { background: linear-gradient(90deg, #c2275a, #e0356e); box-shadow: 0 0 18px rgba(230,80,130,.4); }
  .bball .go    { background: linear-gradient(90deg, #c25a1a, #e8731a); box-shadow: 0 0 18px rgba(232,115,26,.4); }
  .curry .go    { background: linear-gradient(90deg, #b8860b, #d4a028); box-shadow: 0 0 18px rgba(212,160,40,.4); }
  .worldcup .go { background: linear-gradient(90deg, #1f8f4a, #2faf5a); box-shadow: 0 0 18px rgba(47,175,90,.4); }

  footer { margin-top: 46px; color: #4a6470; font-size: 12.5px; text-align: center; line-height: 1.7; max-width: 720px; position: relative; z-index: 5; }
  footer a { color: #7fa6b6; text-decoration: none; border-bottom: 1px solid #2d4855; }

  .home-link {
    position: fixed; top: 16px; left: 16px; z-index: 20;
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px 8px 11px; border-radius: 999px;
    font-size: 13px; font-weight: 700; text-decoration: none; color: #cfe2ec;
    background: rgba(7, 22, 33, .55); border: 1px solid #173a4a; backdrop-filter: blur(3px);
    transition: transform .2s, border-color .2s, color .2s;
  }
  .home-link:hover { transform: translateY(-1px); border-color: #ffffff44; color: #aef0ff; }
  .home-link svg { width: 15px; height: 15px; }