/* ============================================================
   Gia Ancone — Between Sea & Sky
   Aesthetic: California ocean + sunshine. Blue & white,
   elegant-minimal, feminine. You descend as you scroll.
   ============================================================ */

:root {
  /* ---- type ---- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* ---- palette: DAYLIGHT (default) ---- */
  --sun:      #ffd9a0;
  --sun-core: #fff2d6;
  --ink:      #16384d;          /* deep teal-ink text on light */
  --ink-soft: #2e5b73;
  --line:     rgba(22,56,77,.16);
  --paper:    #f3f9fb;

  /* dive gradient stops (top color of viewport as you go deep) */
  --c0: #61e0f2;   /* sunny aqua-blue   */
  --c1: #5fa6dc;   /* daytime sky blue  */
  --c2: #9c7bb0;   /* dusk lavender     */
  --c3: #b85f86;   /* sunset rose-pink  */
  --c4: #54467e;   /* indigo dusk       */
  --c5: #14224d;   /* dark blue night   */

  --accent: #2f7fab;
  --white: #f7fbfd;
  --nav-fg: #f7fbfd;

  /* runtime: set by JS as you scroll */
  --bg-top: var(--c0);
  --bg-bot: var(--c1);
  --sun-opacity: 1;
}

/* SUNRISE */
[data-theme="sunrise"] {
  --sun:      #ffc9a3;
  --sun-core: #ffe9d6;
  --ink:      #3a2f46;
  --ink-soft: #6a5570;
  --line:     rgba(58,47,70,.16);
  --paper:    #fdf3ee;
  --c0: #ffeede;
  --c1: #ffd9cf;
  --c2: #9c5a86;
  --c3: #6b4a86;
  --c4: #3c3f72;
  --c5: #1f2547;
  --accent: #c97b86;
}

/* DUSK */
[data-theme="dusk"] {
  --sun:      #f6c98a;
  --sun-core: #ffe6c2;
  --ink:      #1b2440;
  --ink-soft: #3a456b;
  --line:     rgba(27,36,64,.18);
  --paper:    #eef0fb;
  --c0: #dfe4f6;
  --c1: #c3cbe8;
  --c2: #515f9e;
  --c3: #39427a;
  --c4: #232a55;
  --c5: #0e1230;
  --accent: #6f7fc0;
}

/* ---- alt font pairings (tweak) ---- */
[data-font="modern"] {
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   The sea — fixed background that dives as you scroll
   ============================================================ */
#sea {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  transition: background .25s linear;
}

/* sun glow, fades as you descend */
#sun {
  position: fixed;
  top: 12vh; left: 50%;
  width: 62vw; height: 62vw;
  max-width: 760px; max-height: 760px;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
  opacity: var(--sun-opacity);
  background: radial-gradient(circle at center,
      var(--sun-core) 0%,
      var(--sun) 26%,
      color-mix(in oklab, var(--sun) 40%, transparent) 46%,
      transparent 68%);
  filter: blur(2px);
  transition: opacity .3s linear;
}

/* caustic shimmer canvas near the surface */
#shimmer {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .55;
}

/* marine particles deeper down */
#motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* stars that come out at night (Connect) */
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s linear; }

/* ============================================================
   Layout shell
   ============================================================ */
main { position: relative; z-index: 1; }

.section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14vh clamp(24px, 7vw, 120px);
  position: relative;
}
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; }

/* light vs deep text schemes */
.section--light { color: var(--ink); }
.section--deep  { color: var(--white); }
.section--deep .eyebrow { color: color-mix(in oklab, var(--white) 78%, transparent); }
.section--deep .lead { color: color-mix(in oklab, var(--white) 86%, transparent); }
.section--deep .dive-cue { color: color-mix(in oklab, var(--white) 80%, transparent); }
.section--deep .dive-cue .arrow { border-color: color-mix(in oklab, var(--white) 36%, transparent); }
.section--deep .fact { border-top-color: color-mix(in oklab, var(--white) 20%, transparent); }
.section--deep .fact dt { color: color-mix(in oklab, var(--white) 62%, transparent); }
.section--deep .fact dd { color: color-mix(in oklab, var(--white) 92%, transparent); }
.section--deep .portrait-cap { color: color-mix(in oklab, var(--white) 62%, transparent); }
.section--deep .portrait-frame::after { border-color: color-mix(in oklab, var(--white) 22%, transparent); }

/* shared type bits */
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .5;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; }

.lead {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.55;
  font-weight: 350;
  color: var(--ink-soft);
  max-width: 30ch;
  text-wrap: pretty;
}

/* ============================================================
   HERO
   ============================================================ */
#intro { justify-content: flex-end; padding-bottom: clamp(48px, 10vh, 110px); }
.intro-grid {
  display: block;
}
.intro-text { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 28px); }
.intro-bio {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: color-mix(in oklab, var(--white) 88%, transparent);
  max-width: 44ch;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(6, 42, 54, .28);
}
.intro-facts { margin-top: 4px; }
.intro-facts .fact { grid-template-columns: 150px 1fr; }
.intro-facts .fact dd { line-height: 1.55; }
.intro-portrait { padding-bottom: 6px; }

.hero-name {
  font-size: clamp(54px, 9.5vw, 156px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .9;
  color: var(--white);
  text-shadow: 0 2px 40px rgba(4, 34, 50, .28);
}
.hero-name .amp { font-style: italic; font-weight: 300; }

.hero-sub {
  font-size: clamp(19px, 2.1vw, 29px);
  font-family: var(--font-display);
  font-weight: 350;
  line-height: 1.3;
  color: color-mix(in oklab, var(--white) 92%, transparent);
  max-width: 22ch;
  text-wrap: balance;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hero-meta span { display: inline-flex; align-items: center; gap: .6em; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.dive-cue {
  margin-top: clamp(10px, 4vh, 48px);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  padding: 0;
}
.dive-cue .arrow {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }
@media (prefers-reduced-motion: reduce){ .dive-cue .arrow{ animation: none; } }

/* horizon line under hero */
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ============================================================
   ABOUT
   ============================================================ */
#about .grid {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.about-h { font-size: clamp(34px, 5vw, 64px); margin-bottom: .5em; }
.about-h em { font-style: italic; color: var(--accent); }
.about-body { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; }
.about-body p + p { margin-top: 1em; }

.facts { margin-top: 2.2em; display: grid; gap: 14px; }
.fact {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.45;
}
.fact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.fact dd { color: var(--ink); }

.portrait-frame { position: relative; }
.portrait-frame image-slot {
  display: block; width: 100%; height: clamp(360px, 54vh, 520px);
  box-shadow: 0 30px 70px -30px rgba(4, 34, 50, .55);
}
.portrait-frame::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 1px solid var(--line); border-radius: 6px;
}
.portrait-cap {
  margin-top: 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; justify-content: space-between;
}

/* ============================================================
   MISSION
   ============================================================ */
#mission .wrap { max-width: 980px; }
.mission-statement {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.mission-statement em { font-style: italic; color: var(--sun); }
.mission-statement .u {
  position: relative; white-space: nowrap;
}
.mission-statement .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 2px;
  background: color-mix(in oklab, var(--sun) 80%, transparent);
}

.beliefs {
  margin-top: clamp(40px, 7vh, 86px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.belief { display: flex; flex-direction: column; gap: 10px; }
.belief .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: color-mix(in oklab, var(--white) 60%, transparent); }
.belief h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.belief p { font-size: 14.5px; line-height: 1.6; color: color-mix(in oklab, var(--white) 80%, transparent); }
.belief .bar { width: 38px; height: 2px; background: var(--sun); margin-bottom: 4px; }

/* ============================================================
   PROJECTS
   ============================================================ */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 64px); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(34px, 5vw, 66px); font-weight: 500; }
.section-head .count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: color-mix(in oklab, var(--white) 60%, transparent); }

.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }

.project {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid color-mix(in oklab, var(--white) 22%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--white) 6%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s;
  text-decoration: none; color: inherit;
}
.project:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--sun) 70%, transparent);
  background: color-mix(in oklab, var(--white) 11%, transparent);
}
.project .pj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: clamp(40px, 9vh, 96px); }
.project .pj-id { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--sun); }
.project .pj-year { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: color-mix(in oklab, var(--white) 55%, transparent); }
.project h3 { font-size: clamp(24px, 2.6vw, 33px); font-weight: 500; line-height: 1.04; margin-bottom: 12px; }
#research .project h3 { margin-bottom: 4px; }
.pj-loc {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400; font-style: italic;
  line-height: 1.15;
  color: color-mix(in oklab, var(--white) 80%, transparent);
  margin: 0 0 13px;
}
.project .pj-venue { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in oklab, var(--white) 66%, transparent); margin-bottom: 14px; }
.project p { font-size: 14.5px; line-height: 1.62; color: color-mix(in oklab, var(--white) 84%, transparent); max-width: 42ch; }
.project .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--white) 26%, transparent);
  color: color-mix(in oklab, var(--white) 80%, transparent);
}
.project .pj-arrow {
  position: absolute; top: clamp(24px,2.4vw,34px); right: clamp(24px,2.4vw,34px);
  opacity: 0; transform: translate(-4px,4px);
  transition: opacity .4s, transform .4s; color: var(--sun);
}
.project:hover .pj-arrow { opacity: 1; transform: translate(0,0); }

/* static cards (no whole-card link) + inline link buttons */
.project.pj-static { cursor: default; }
.pj-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pj-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--white) 34%, transparent);
  color: color-mix(in oklab, var(--white) 92%, transparent);
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.pj-btn:hover { background: #ffd9a0; border-color: #ffd9a0; color: #14224d; transform: translateY(-2px); }
.pj-btn svg { width: 11px; height: 11px; }

/* ============================================================
   CONNECT / footer
   ============================================================ */
#connect .wrap { max-width: 1000px; }
.connect-portrait { margin-bottom: clamp(20px, 3vh, 30px); }
.connect-portrait image-slot {
  display: block;
  width: clamp(124px, 13vw, 168px);
  height: clamp(124px, 13vw, 168px);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--white) 12%, transparent),
              0 20px 46px -18px rgba(0, 0, 0, .55);
}
.connect-portrait .portrait-img {
  display: block;
  width: clamp(124px, 13vw, 168px);
  height: clamp(124px, 13vw, 168px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--white) 12%, transparent),
              0 20px 46px -18px rgba(0, 0, 0, .55);
}
.connect-h { font-size: clamp(40px, 7vw, 104px); font-weight: 400; letter-spacing: -.015em; line-height: .96; margin-bottom: .35em; }
.connect-h em { font-style: italic; font-weight: 300; }
.connect-sub { font-family: var(--font-display); font-size: clamp(19px, 2vw, 27px); font-weight: 350; color: color-mix(in oklab, var(--white) 82%, transparent); max-width: 28ch; margin-bottom: clamp(36px, 6vh, 64px); }

.links { display: flex; flex-wrap: wrap; gap: 26px 34px; max-width: 720px; }
.link-row {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-decoration: none; color: var(--white);
}
.lk-bubble {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white);
  padding: 13px 22px;
  border: 1px solid color-mix(in oklab, var(--white) 26%, transparent);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.lk-bubble svg { width: 12px; height: 12px; }
.link-row:hover .lk-bubble { background: var(--sun); border-color: var(--sun); color: #14224d; transform: translateY(-2px); }
.link-row .lk-handle { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: color-mix(in oklab, var(--white) 60%, transparent); padding-left: 4px; transition: color .4s; }
.link-row:hover .lk-handle { color: var(--sun); }

.footer-line {
  margin-top: clamp(48px, 9vh, 96px);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--white) 52%, transparent);
}

/* ============================================================
   Top chrome + depth rail nav
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.6vh, 30px) clamp(20px, 5vw, 60px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.wordmark {
  font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; color: var(--nav-fg, var(--ink));
  transition: color .4s;
}
.wordmark .tiny { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; display: block; margin-top: 2px; opacity: .6; }

.resume-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--nav-fg, var(--ink));
  padding: 11px 18px; border: 1px solid currentColor; border-radius: 100px;
  transition: color .4s, background .35s, transform .35s;
}
.resume-btn:hover { background: var(--nav-fg, var(--ink)); color: var(--bg-top); transform: translateY(-2px); }
.resume-btn svg { width: 13px; height: 13px; }

/* depth rail */
.rail {
  position: fixed; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 22px;
}
.rail a {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  text-decoration: none; color: var(--nav-fg, var(--ink)); cursor: pointer;
}
.rail .rl-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .35s;
  white-space: nowrap;
}
.rail .rl-depth { font-family: var(--font-mono); font-size: 9px; opacity: .5; }
.rail a:hover .rl-label, .rail a.active .rl-label { opacity: .85; transform: translateX(0); }
.rail .rl-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .45;
  transition: opacity .35s, background .35s, transform .35s;
}
.rail a.active .rl-dot { opacity: 1; background: var(--sun); border-color: var(--sun); transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sun) 30%, transparent); }

/* progress depth readout bottom-left */
.depth-readout {
  position: fixed; left: clamp(20px, 5vw, 60px); bottom: clamp(18px, 3vh, 30px); z-index: 40;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--nav-fg, var(--ink)); opacity: .7; transition: color .4s;
  display: flex; align-items: center; gap: 10px;
}
.depth-readout .meter { width: 60px; height: 1px; background: currentColor; opacity: .35; position: relative; }
.depth-readout .meter::after { content:""; position:absolute; left:0; top:-1px; height:3px; width: calc(var(--depth,0)*100%); background: var(--sun); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .intro-portrait { order: -1; }
  #about .grid { grid-template-columns: 1fr; gap: 36px; }
  .portrait-frame { max-width: 320px; }
  .beliefs { grid-template-columns: 1fr; gap: 26px; }
  .projects { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .rail { display: none; }
  .fact { grid-template-columns: 96px 1fr; }
}
@media (max-width: 560px) {
  .resume-btn .rb-text { display: none; }
  .resume-btn { padding: 11px; }
  .hero-sub { max-width: none; }
}