/* ═══════════════════════════════════════════════════════════
   PARQOO · DIVE SKIN  —  deep-sea reskin layered over parqoo.css
   Loaded AFTER parqoo.css so it overrides tokens + key surfaces.
   The whole site recolors because everything references :root.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* abyssal palette */
  --ink:    #04101a;
  --ink-2:  #071c2a;
  --ink-3:  #0b2838;
  --ivory:  #eaf6ff;
  --ivory-dim:#a9cbdf;
  --mute:   #6f96ad;
  --line:   #14323f;
  --line-2: #1e495d;
  /* aqua replaces gold as the accent */
  --gold:   #8fd2f4;
  --gold-2: #c2ebff;
  --amethyst: oklch(0.62 0.10 250);
  --emerald:  oklch(0.66 0.10 195);
  --sapphire: oklch(0.55 0.12 235);
  --abyss:#03070d;
  --aqua:#9fdcff;
}

html,body{ background:var(--abyss); }
/* always reserve the scrollbar gutter so fixed right-edge chrome never shifts */
html{ overflow-y:scroll; scrollbar-gutter:stable; }
::selection{ background:var(--aqua); color:#04141f; }

/* ── ambient water canvas + particles (fixed, behind everything) ── */
#diveBg{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;width:100%;height:100%}
#diveVeil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, rgba(40,120,160,.12), rgba(4,16,26,0) 55%),
    linear-gradient(180deg, rgba(4,16,26,.10) 0%, rgba(3,9,15,.45) 60%, rgba(2,7,12,.78) 100%);}
#diveBubbles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#diveBubbles .bub{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(35% 30% at 38% 32%,rgba(255,255,255,.85),rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 70%);
  border:1px solid rgba(159,220,255,.14);will-change:transform,opacity}
@keyframes diveRise{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  8%{opacity:.6}90%{opacity:.45}100%{transform:translateY(-112vh) translateX(var(--drift,18px)) scale(1);opacity:0}}

/* page sections become translucent so the water shows through */
.page{ background:transparent !important; }
body{ background:var(--abyss) !important; }

/* ── nav: deep-water glass ── */
nav.top{
  background:linear-gradient(180deg, rgba(4,18,28,.92), rgba(4,18,28,.55) 70%, rgba(4,18,28,0)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
}
nav.top a.navlink:hover{ color:var(--aqua); background:rgba(159,220,255,.06); }
nav.top a.navlink.current{ color:var(--aqua); }
nav.top a.navlink.current::after{ background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
nav.top .mark{ color:#eaf6ff; text-shadow:0 0 22px rgba(60,150,200,.5); }

/* brand / display headers get an aqueous glow */
.home-title, .h-display, .italiana{ text-shadow:0 6px 50px rgba(20,80,120,.55); }
.eyebrow, .micro{ color:var(--aqua) !important; }

/* ── HOME: tint the photo underwater, deepen the vignette ── */
.page-home .bg{ filter:saturate(.78) brightness(.62) hue-rotate(8deg) contrast(1.02); }
.page-home .bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(40,130,170,.22), rgba(3,12,20,0) 50%),
    linear-gradient(180deg, rgba(3,14,24,.30), rgba(2,8,14,.72));}
.page-home .vignette{ background:radial-gradient(120% 100% at 50% 35%, rgba(3,9,15,0) 40%, rgba(2,7,12,.82) 100%) !important; }
.home-cta, .home-arrow{ border-color:rgba(159,220,255,.4) !important; }
.home-cta:hover{ background:var(--aqua) !important; color:#04141f !important; border-color:var(--aqua) !important; }
.home-dots .dot.active{ background:var(--aqua) !important; box-shadow:0 0 10px var(--aqua); }

/* depth caption that floats under the home title */
.dive-depthline{font-family:var(--font-sans);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--aqua);opacity:.7;margin-top:14px}

/* ── translucent card / panel surfaces ── */
.work-card, .folder-card, .concept-card,
.about-portrait, .about-facts, .bio-stats,
.awards-list .award, .timeline-list .tl-row,
.cf-form, .contact-side, .mailtag, .adm-section, .write-post,
.write-folder, .wp-card, .post-card{
  background:linear-gradient(180deg, rgba(10,32,46,.5), rgba(6,20,30,.42)) !important;
  border-color:rgba(159,220,255,.16) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.work-card:hover, .folder-card:hover{
  border-color:rgba(159,220,255,.4) !important;
  box-shadow:0 18px 50px rgba(0,30,55,.6) !important;
}
hr, .line, .rule{ border-color:var(--line) !important; }

/* buttons / pills / accents that were gold → aqua */
.btn, .btn-ghost, .btn-ghost-sm, .home-cta, .cf-send, .again,
.work-tabs button, .filter-pill, .r-pill, .tag-pill{
  border-color:rgba(159,220,255,.35) !important;
}
.btn:hover, .btn-ghost:hover, .btn-ghost-sm:hover,
.work-tabs button.active, .filter-pill.active{
  color:#04141f !important; background:var(--aqua) !important; border-color:var(--aqua) !important;
}
.cf-send{ background:var(--aqua) !important; color:#04141f !important; }
.cf-send:hover{ filter:brightness(1.08); }

/* image media keep a cool cast for cohesion */
.work-img img, .concept-card img, .folder-card img, .about-portrait img{
  filter:saturate(.9) brightness(.92);
}

/* ── footer: sink it into the seabed ── */
footer.bottom{
  background:linear-gradient(180deg, rgba(3,12,20,0), rgba(4,18,28,.6) 40%, rgba(6,24,34,.95)) !important;
  border-top:1px solid var(--line);
}
.foot-mark{ text-shadow:0 0 22px rgba(60,150,200,.5); }
.font-scale-btn{ border-color:var(--line-2) !important; color:var(--ivory-dim); }
.font-scale-btn.active{ color:var(--aqua) !important; border-color:var(--aqua) !important; }

/* lightbox / modal backdrops → deep water */
.lightbox, .yt-modal{ background:rgba(2,9,16,.93) !important; }

/* selection rail / scrollbar accents */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#04101a}
::-webkit-scrollbar-thumb{background:#14323f;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#1e495d}

/* ── dive chrome: drop the horizontal header, add a right depth rail ── */
nav.top{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:18px 26px !important; pointer-events:none;
  display:flex !important; justify-content:flex-end !important; align-items:center !important; }
nav.top .left, nav.top .mark{ display:none !important; }
nav.top .right{ pointer-events:auto; gap:10px; }
/* hide the redundant text "Contact" link (the rail carries it); keep admin/notif/member/lang */
nav.top .right > a.navlink:not(.admin-icon):not(.notif-bell){ display:none !important; }

#diveBrand{position:fixed;left:26px;top:18px;z-index:90;
  font-family:var(--font-display);font-size:17px;letter-spacing:.2em;color:#dff2ff;
  text-shadow:0 0 20px rgba(60,150,200,.5);text-decoration:none;pointer-events:auto;transition:color .3s}
#diveBrand:hover{color:var(--aqua)}

#diveRail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:auto}
.drail-tick{display:grid;grid-template-columns:auto 16px;column-gap:11px;align-items:center;justify-items:end;
  height:58px;text-decoration:none;cursor:pointer}
.drail-name{grid-column:1;font-family:var(--font-sans);font-size:9px;letter-spacing:.3em;writing-mode:vertical-rl;
  white-space:nowrap;color:rgba(159,220,255,.4);transition:color .3s}
.drail-dot{grid-column:2;justify-self:center;width:7px;height:7px;border-radius:50%;background:rgba(159,220,255,.32);
  transition:background .3s,box-shadow .3s,transform .3s}
.drail-tick:hover .drail-name,.drail-tick.on .drail-name{color:var(--aqua)}
.drail-tick:hover .drail-dot{background:var(--aqua)}
.drail-tick.on .drail-dot{background:var(--aqua);box-shadow:0 0 12px var(--aqua);transform:scale(1.5)}
@media (max-width:760px){ #diveRail{right:10px} .drail-tick{height:46px} }

@media (prefers-reduced-motion: reduce){ #diveBubbles .bub{animation:none !important} }

/* ── HOME as the clean dive "surface" landing (single-page, no reload) ── */
.page-home .bg, .page-home .vignette, .page-home .grain,
.page-home .home-dots, .page-home .home-arrow, .page-home .home-recent{ display:none !important; }
.page-home.active{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:100vh; }
.page-home .content{ text-align:center; max-width:none; }
.page-home .home-top{ display:none !important; }
.page-home .home-title{ text-shadow:0 8px 60px rgba(20,80,120,.6); }
.page-home .dive-depthline{ text-align:center; }
.page-home .home-bottom{ flex-direction:column; gap:22px; align-items:center; margin-top:18px; }
.page-home .quote{ text-align:center; }
.page-home .home-cta{ border-color:rgba(159,220,255,.45) !important; }