:root {
  --night: #041c2a;
  --forest: #07364b;
  --forest-light: #145d79;
  --ivory: #f5fbfd;
  --mist: rgba(232, 247, 252, .75);
  --gold: #8ecce2;
  --gold-light: #e6f6fb;
  --green: #74c8e5;
  --line: rgba(218, 241, 249, .2);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ivory);
  background: var(--night);
  font-family: var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

.background {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 9%, rgba(212, 239, 249, .52), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(146, 202, 224, .34), transparent 28%),
    radial-gradient(circle at 22% 86%, rgba(218, 192, 151, .16), transparent 23%),
    linear-gradient(145deg, #6e9eb4 0%, #1b607d 38%, #082f45 70%, #041c2a 100%);
}
.background-photo {
  position: absolute;
  z-index: 0;
  inset: -10%;
  background-image: url('images/hallelujah-anyway.png');
  background-position: 58% 39%;
  background-size: cover;
  filter: blur(22px) saturate(.94) brightness(.64);
  opacity: .54;
  transform: scale(1.14);
  animation: coastal-breathe 24s ease-in-out infinite alternate;
}
.background::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 38, 55, .28), rgba(4, 31, 47, .74) 54%, rgba(2, 23, 36, .91)),
    linear-gradient(180deg, rgba(211, 235, 244, .12), rgba(3, 29, 44, .32) 45%, rgba(2, 19, 30, .76));
}
.cloud-drift,
.ocean-drift {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-image: url('images/hallelujah-anyway.png');
  background-repeat: no-repeat;
}
.cloud-drift {
  top: -4%;
  right: -8%;
  width: 118%;
  height: 58%;
  background-size: 150% auto;
  background-position: right 8%;
  filter: blur(4px) brightness(1.18) saturate(.74);
  opacity: .17;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0 46%, transparent 98%);
  animation: cloud-drift 31s ease-in-out infinite alternate;
}
.ocean-drift {
  right: -8%;
  width: 118%;
  height: 42%;
  background-size: 185% auto;
  background-position: right 73%;
  filter: saturate(1.15) contrast(1.05) brightness(.86);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mix-blend-mode: screen;
}
.ocean-back {
  bottom: 0;
  opacity: .09;
  animation: ocean-glide 23s ease-in-out infinite alternate-reverse;
}
.ocean-front {
  bottom: -9%;
  opacity: .18;
  animation: ocean-glide 16s ease-in-out infinite alternate;
}
.grain {
  position: absolute;
  inset: -50%;
  z-index: 4;
  opacity: .042;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain 9s steps(8) infinite;
}
.aurora {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .20;
  mix-blend-mode: screen;
}
.aurora-one {
  width: 42vw;
  height: 42vw;
  top: -18vw;
  right: 2vw;
  background: #b7e5f5;
  animation: float-one 13s ease-in-out infinite alternate;
}
.aurora-two {
  width: 34vw;
  height: 34vw;
  left: -11vw;
  bottom: -14vw;
  background: #458fac;
  animation: float-two 16s ease-in-out infinite alternate;
}
.orbit {
  position: absolute;
  z-index: 5;
  aspect-ratio: 1;
  border: 1px solid rgba(205, 235, 246, .18);
  border-radius: 50%;
}
.orbit-one { width: 42vw; right: -14vw; top: -12vw; }
.orbit-two { width: 28vw; left: -14vw; bottom: 5vh; }

.profile-shell {
  width: min(1500px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(460px, .94fr) minmax(520px, 1.06fr);
}

.identity-pane {
  height: 100svh;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  gap: 24px;
  padding: clamp(24px, 3vw, 48px);
  overflow: hidden;
  border-right: 1px solid rgba(218, 241, 249, .24);
}
.portrait-stage {
  position: relative;
  align-self: stretch;
  min-height: 430px;
  isolation: isolate;
}
.portrait-frame {
  position: absolute;
  inset: 0 9% 0 0;
  margin: 0;
  overflow: hidden;
  background: #b9d7e3;
  box-shadow: 0 30px 90px rgba(1, 24, 38, .46);
  clip-path: polygon(0 0, 100% 0, 100% 91%, 89% 100%, 0 100%);
}
.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, rgba(3, 35, 52, .4)),
    linear-gradient(112deg, rgba(223, 243, 250, .09), transparent 54%);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: saturate(.77) contrast(1.04);
  transform: scale(1.005);
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1), filter .6s ease;
}
.portrait-stage:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1.02); }
.portrait-ring {
  position: absolute;
  z-index: -1;
  width: 72%;
  aspect-ratio: 1;
  right: 0;
  top: 8%;
  border: 1px solid rgba(206, 238, 248, .54);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(163, 218, 239, .18), inset 0 0 90px rgba(226, 246, 252, .06);
}
.identity-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0;
  color: #a9dff0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.5;
  text-transform: uppercase;
}
.identity-copy h1 {
  margin: 13px 0 17px;
  font-family: var(--serif);
  font-size: clamp(58px, 6.4vw, 104px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .76;
}
.identity-copy h1 em { color: #d4eff8; font-weight: 400; }
.intro {
  max-width: 470px;
  margin: 0;
  color: var(--mist);
  font-family: var(--serif);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
}

.links-pane {
  min-height: 100svh;
  padding: clamp(42px, 6vw, 98px) clamp(28px, 6vw, 96px) 42px;
  background: linear-gradient(180deg, rgba(4, 36, 54, .58), rgba(2, 24, 38, .72));
  backdrop-filter: blur(22px) saturate(1.12);
}
.mobile-identity { display: none; }
.links-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(243, 239, 230, .55);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #83d6ef;
  box-shadow: 0 0 0 5px rgba(131, 214, 239, .1), 0 0 15px rgba(131, 214, 239, .3);
}

.featured-link {
  position: relative;
  min-height: 148px;
  display: grid;
  grid-template-columns: 124px 1fr auto;
  align-items: center;
  gap: 25px;
  padding: 12px 22px 12px 12px;
  overflow: hidden;
  color: #082b3c;
  background:
    linear-gradient(110deg, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(135deg, #e9d8ba, #b9ddeb 58%, #77b7d0);
  box-shadow: 0 28px 65px rgba(1,24,38,.36);
  transition: transform .32s ease, box-shadow .32s ease;
}
.featured-link::after,
.link-card::after {
  content: '';
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -65%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(13deg);
  transition: left .75s cubic-bezier(.2,.8,.2,1);
}
.featured-link:hover { transform: translateY(-3px); box-shadow: 0 34px 85px rgba(1,24,38,.5); }
.featured-link:hover::after, .link-card:hover::after { left: 135%; }
.featured-link img { width: 124px; height: 124px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 12px 28px rgba(16,29,20,.22); }
.featured-copy { min-width: 0; display: grid; gap: 7px; }
.featured-copy small,
.link-copy small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.featured-copy strong {
  font-family: var(--serif);
  font-size: clamp(25px, 2.2vw, 35px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}
.featured-copy > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.featured-arrow { align-self: start; padding-top: 7px; font-size: 25px; }

.link-list { display: grid; gap: 10px; margin-top: 16px; }
.link-card {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  overflow: hidden;
  border: 1px solid rgba(210, 239, 248, .2);
  background: linear-gradient(110deg, rgba(190, 229, 242, .075), rgba(92, 165, 194, .035));
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.link-card:hover {
  transform: translateX(5px);
  border-color: rgba(158, 219, 239, .64);
  background: rgba(112, 190, 218, .13);
}
.link-number {
  color: #a9dff0;
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
}
.link-copy { display: grid; gap: 5px; min-width: 0; }
.link-copy small { color: rgba(243, 239, 230, .39); }
.link-copy strong { font-size: 13px; letter-spacing: .01em; }
.link-arrow { color: rgba(243, 239, 230, .62); font-size: 17px; transition: color .25s ease, transform .25s ease; }
.link-card:hover .link-arrow { color: #ccecf7; transform: translate(2px, -2px); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: rgba(243, 239, 230, .38);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}
footer a { transition: color .2s ease; }
footer a:hover { color: #ccecf7; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .72s ease, transform .72s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.link-list .reveal:nth-child(2) { transition-delay: .04s; }
.link-list .reveal:nth-child(3) { transition-delay: .08s; }
.link-list .reveal:nth-child(4) { transition-delay: .12s; }
.link-list .reveal:nth-child(5) { transition-delay: .16s; }
.link-list .reveal:nth-child(6) { transition-delay: .20s; }
.link-list .reveal:nth-child(7) { transition-delay: .24s; }
.link-list .reveal:nth-child(8) { transition-delay: .28s; }

@keyframes float-one { to { transform: translate(-4vw, 4vw) scale(1.08); opacity: .29; } }
@keyframes float-two { to { transform: translate(6vw, -3vw) scale(.94); opacity: .27; } }
@keyframes coastal-breathe { to { transform: scale(1.19) translate3d(-1.2%, .8%, 0); filter: blur(24px) saturate(1.03) brightness(.7); } }
@keyframes cloud-drift { to { transform: translate3d(-2.4%, 1.2%, 0) scale(1.025); background-position: 96% 11%; } }
@keyframes ocean-glide { to { transform: translate3d(-1.6%, 1.2%, 0) scale(1.04); background-position: 96% 75%; } }
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(3%,-4%); }
  50% { transform: translate(-5%,3%); }
  75% { transform: translate(4%,6%); }
}

@media (max-width: 1040px) {
  .profile-shell { grid-template-columns: minmax(390px, .88fr) minmax(480px, 1.12fr); }
  .identity-pane { padding: 34px; }
  .links-pane { padding: 50px 34px 34px; }
}

@media (max-width: 820px) {
  .background-photo { inset: -5%; background-position: 58% 35%; opacity: .54; filter: blur(22px) saturate(.94) brightness(.6); }
  .background::after { background: linear-gradient(180deg, rgba(91, 154, 181, .22), rgba(4, 39, 58, .83) 42%, rgba(2, 22, 35, .96)); }
  .cloud-drift { width: 155%; right: -35%; opacity: .14; }
  .ocean-drift { width: 160%; right: -35%; background-size: 205% auto; }
  .orbit-one { width: 86vw; right: -48vw; top: -20vw; }
  .orbit-two { width: 70vw; left: -42vw; bottom: 10vh; }
  .profile-shell { display: block; width: 100%; }
  .identity-pane { display: none; }
  .links-pane {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 24px 18px 28px;
    background: transparent;
    backdrop-filter: none;
  }
  .mobile-identity {
    display: grid;
    justify-items: center;
    padding: 16px 16px 30px;
    text-align: center;
  }
  .mobile-portrait {
    position: relative;
    width: 126px;
    aspect-ratio: 1;
    margin: 0 0 23px;
    padding: 5px;
    border: 1px solid rgba(197,232,244,.68);
    border-radius: 50%;
    box-shadow: 0 0 0 9px rgba(166,218,237,.055), 0 18px 55px rgba(1,24,38,.45);
  }
  .mobile-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
  .mobile-identity h1 { margin: 9px 0 13px; font-family: var(--serif); font-size: clamp(48px, 15vw, 70px); font-weight: 400; letter-spacing: -.06em; line-height: .92; }
  .mobile-identity > p:last-child { max-width: 400px; margin: 0; color: var(--mist); font-family: var(--serif); font-size: 16px; line-height: 1.5; }
  .links-header { margin-bottom: 16px; }
  .featured-link { min-height: 120px; grid-template-columns: 96px 1fr auto; gap: 17px; padding: 10px 15px 10px 10px; }
  .featured-link img { width: 96px; height: 96px; }
  .featured-copy strong { font-size: 25px; }
  .featured-arrow { font-size: 20px; }
  .link-card { min-height: 72px; }
}

@media (max-width: 430px) {
  .links-pane { padding-left: 13px; padding-right: 13px; }
  .mobile-identity { padding-top: 12px; }
  .featured-link { grid-template-columns: 82px minmax(0, 1fr) 17px; gap: 13px; }
  .featured-link img { width: 82px; height: 82px; }
  .featured-copy small { font-size: 7px; letter-spacing: .14em; }
  .featured-copy strong { overflow-wrap: anywhere; font-size: 22px; }
  .featured-copy > span { font-size: 9px; }
  .link-card { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 11px 14px; }
  .link-copy strong { font-size: 12px; }
  footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}