@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #111210;
  --panel-soft: #151614;
  --line: #252622;
  --line-bright: #343530;
  --text: #f4f1ea;
  --muted: #a8a196;
  --dim: #c8c2b8;
  --font-main: "Oxanium", Arial, Helvetica, sans-serif;
  --audio-accent: #9a3b2f;
  --audio-dark: #4f1e19;
  --audio-soft: #2d1816;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
}

a {
  color: inherit;
}

.site-shell {
  min-height: 100vh;
  background: var(--bg);
}

.top {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.45rem;
  background: #090909;
  border-bottom: 1px solid #181818;
}

.nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  color: #928e86;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 500;
}

.nav-link {
  text-decoration: none;
}

.nav-link.is-active {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.42rem;
}

.brand {
  text-align: right;
  min-width: 22rem;
  text-decoration: none;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 28px;
  font-weight: 700;
  line-height: 0.95;
}

.brand span {
  margin-top: 0.35rem;
  color: #a09b92;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 500;
}

.collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(78px, 4.6875vw, 104px);
  background: var(--bg);
  grid-template-areas:
    "ionia ionia ionia eolia eolia eolia eolia healer healer healer healer healer"
    "ionia ionia ionia eolia eolia eolia eolia healer healer healer healer healer"
    "ionia ionia ionia eolia eolia eolia eolia healer healer healer healer healer"
    "sol sol sol eolia eolia eolia eolia healer healer healer healer healer"
    "sol sol sol h3vr h3vr h3vr h3vr healer healer healer healer healer"
    "sol sol sol h3vr h3vr h3vr h3vr romance romance romance romance romance"
    "ascendant ascendant ascendant h3vr h3vr h3vr h3vr romance romance romance romance romance"
    "ascendant ascendant ascendant h3vr h3vr h3vr h3vr romance romance romance romance romance"
    "ascendant ascendant ascendant overlord overlord overlord overlord romance romance romance romance romance"
    ". . . overlord overlord overlord overlord romance romance romance romance romance"
    ". . . overlord overlord overlord overlord . . . . ."
    ". . . overlord overlord overlord overlord . . . . .";
}

.area-rhythm-of-the-universe-ionia {
  grid-area: ionia;
}

.area-rhythm-of-the-universe-eolia {
  grid-area: eolia;
}

.area-rhythm-of-the-universe-healer {
  grid-area: healer;
}

.area-sol-contingency-proving-grounds {
  grid-area: sol;
}

.area-hot-dogs-horseshoes-hand-grenades {
  grid-area: h3vr;
}

.area-romancelvania {
  grid-area: romance;
}

.area-underworld-ascendant {
  grid-area: ascendant;
}

.area-underworld-overlord {
  grid-area: overlord;
}

.tile {
  position: relative;
  background: #111;
  color: var(--text);
  overflow: hidden;
  border-right: 1px solid var(--bg);
  border-bottom: 1px solid var(--bg);
  text-decoration: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: var(--bg);
  filter: brightness(0.92) saturate(0.96) contrast(1.04);
  transform: scale(1.001);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.55s ease;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.tile span {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  opacity: 0;
  transform: translateY(0.2rem);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  text-align: center;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
}

.tile strong {
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  font-weight: 400;
  line-height: 1.08;
}

.tile em {
  font-style: normal;
  letter-spacing: 0.08em;
  color: #e8e4da;
  font-weight: 500;
}

.tile:hover img,
.tile:focus-visible img {
  filter: brightness(0.74) saturate(1.05) contrast(1.1);
  transform: scale(1.035);
}

.tile:hover::after,
.tile:focus-visible::after,
.tile:hover span,
.tile:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.detail-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 88px);
  background: var(--panel);
}

.more-projects {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.collage-embedded {
  min-height: min(84vh, 820px);
}

.side {
  padding: 1.5rem 1.35rem;
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
}

.back,
.email-button {
  display: inline-flex;
  border: 1px solid var(--line-bright);
  background: #20211e;
  color: var(--text);
  padding: 0.7rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
}

.side h1 {
  margin: 1.15rem 0 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.32vw, 1.45rem);
  line-height: 1.12;
  overflow-wrap: break-word;
}

.fact {
  margin: 0.75rem 0;
  color: var(--dim);
  line-height: 1.35;
}

.fact strong {
  color: var(--text);
  font-weight: 500;
}

.stage {
  padding: 1.5rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
}

.viewer {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.viewer img {
  width: 100%;
  height: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  background: var(--bg);
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.7rem;
  height: 3.2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.44);
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

.caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: #e8e4da;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.45rem 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 1rem;
}

.media-panel,
.blog-post {
  border: 1px solid var(--line);
  background: #0b0c0b;
  padding: 1rem;
}

.media-panel h2,
.blog-post h2,
.reel-copy h2,
.contact-side h2 {
  margin: 0 0 0.65rem;
  color: var(--text);
  font-size: clamp(1.25rem, 1.8vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
}

.media-panel p,
.blog-post p,
.reel-copy p,
.contact-side p {
  margin: 0;
  color: var(--dim);
  line-height: 1.45;
}

.video-frame,
.reel-player {
  aspect-ratio: 16 / 9;
  min-height: 145px;
  background: var(--bg);
  border: 1px solid #2f302b;
  position: relative;
  color: #d8d1c4;
  text-align: center;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
}

.video-frame iframe,
.reel-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}

.video-frame::before,
.reel-player::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(216, 209, 196, 0.15), transparent 34%);
  pointer-events: none;
}

.video-stack {
  display: grid;
  gap: 1rem;
  margin: 0 0 0.85rem;
}

.reel-stack {
  margin: 0;
}

.video-item {
  margin: 0;
}

.video-item .reel-player {
  margin-bottom: 0;
}

.video-item figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-top: 0;
  background: #11120f;
  color: var(--dim);
  padding: 0.62rem 0.75rem;
}

.video-item span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.video-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 500;
}

.play-dot {
  position: relative;
  z-index: 1;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: 1.35rem;
}

.reel-player span {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.8rem;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.audio-player {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.audio-panel {
  background:
    linear-gradient(180deg, var(--audio-accent) 0%, var(--audio-dark) 48%, #090909 100%);
  border-color: color-mix(in srgb, var(--audio-accent) 62%, #000);
  color: #fff;
}

.audio-panel h2 {
  color: #fff;
}

.audio-panel .audio-player {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1rem;
}

.transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}

.transport button {
  width: 2.65rem;
  height: 2.65rem;
  border: 0;
  border-radius: 999px;
  background: #f4f1ea;
  color: var(--audio-dark);
  font-weight: 700;
}

.transport strong,
.transport span {
  display: block;
}

.transport strong {
  font-weight: 500;
}

.transport span,
.transport em,
.audio-player li em {
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.meter {
  height: 0.35rem;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: #fff;
}

.audio-player ol {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.audio-player li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.real-audio-player {
  gap: 0.75rem;
}

.audio-track {
  margin: 0;
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.audio-track:first-child {
  padding-top: 0;
}

.audio-track:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.audio-track figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}

.audio-track figcaption span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}

.audio-track figcaption strong {
  font-weight: 500;
  color: #fff;
}

.audio-track audio {
  display: none;
}

.waveform-track {
  gap: 0.8rem;
}

.waveform-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.waveform-play {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.waveform-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
  border-left: 0.58rem solid currentColor;
  margin-left: 0.13rem;
}

.waveform-play.is-playing::before {
  width: 0.18rem;
  height: 0.75rem;
  border: 0;
  background: currentColor;
  box-shadow: 0.36rem 0 0 currentColor;
  margin-left: -0.36rem;
}

.waveform-time {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: end;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.waveform-surface {
  position: relative;
  width: 100%;
  min-height: 4.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14)),
    color-mix(in srgb, var(--audio-dark) 72%, #000);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.waveform-surface canvas {
  display: block;
  width: 100%;
  height: 4.75rem;
}

.waveform-surface span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.waveform-surface span[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .waveform-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .waveform-time {
    grid-column: 2;
    justify-content: start;
  }
}

.page-view {
  min-height: calc(100vh - 88px);
  background: var(--panel);
  border-top: 1px solid #181818;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 7vw, 8rem);
}

.bio-shell,
.blog-shell,
.contact-simple {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.reels-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.reels-kicker {
  margin-bottom: 1.3rem;
}

.kicker,
.type {
  margin: 0 0 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}

.type {
  font-size: 0.76rem;
}

.bio-photo-frame,
.contact-photo {
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: 300px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.bio-photo,
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.bio-copy {
  border-left: 1px solid var(--line-bright);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  color: #d8d1c4;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.62;
}

.bio-copy p {
  margin: 0 0 1.15rem;
}

.blog-intro h1,
.reels-intro h1,
.contact-simple h1 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.95;
}

.blog-intro p,
.contact-lede {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 28rem;
}

.blog-list,
.reel-sections {
  display: grid;
  gap: 1.25rem;
}

.blog-post.featured {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(135deg, rgba(216, 209, 196, 0.08), rgba(5, 5, 5, 0) 52%),
    #0b0c0b;
}

.reel-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.35fr) minmax(0, 0.65fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.reel-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-simple {
  grid-template-columns: minmax(0, 0.6fr) minmax(260px, 0.4fr);
}

.email-button {
  margin-top: 1.2rem;
}

.email-copy {
  margin-top: 1rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.contact-side a {
  color: var(--text);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.45rem;
  background: #090909;
  border-top: 1px solid #181818;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: #121310;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  border-color: #d8d1c4;
  background: #20211e;
}

.social-links svg {
  width: 1.18rem;
  height: 1.18rem;
  display: block;
}

.social-links path,
.social-links rect,
.social-links circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a[aria-label="Facebook"] path {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 900px) {
  .top,
  .detail-layout,
  .bio-shell,
  .blog-shell,
  .reels-shell,
  .reel-section,
  .contact-simple {
    grid-template-columns: 1fr;
  }

  .brand {
    text-align: left;
    min-width: 0;
  }

  .collage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(78px, 10.5vw, 112px);
    grid-template-areas:
      "ionia ionia ionia eolia eolia eolia"
      "ionia ionia ionia eolia eolia eolia"
      "healer healer healer sol sol sol"
      "healer healer healer sol sol sol"
      "h3vr h3vr h3vr romance romance romance"
      "h3vr h3vr h3vr romance romance romance"
      "ascendant ascendant ascendant overlord overlord overlord"
      "ascendant ascendant ascendant overlord overlord overlord";
  }

  .side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .media-row {
    grid-template-columns: 1fr;
  }

  .site-footer {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .top,
  .side,
  .stage,
  .page-view {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .collage {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(160px, 56vw);
    grid-template-areas:
      "ionia"
      "eolia"
      "healer"
      "sol"
      "h3vr"
      "romance"
      "ascendant"
      "overlord";
  }

  .viewer {
    min-height: 260px;
  }

  .media-panel {
    min-height: 190px;
  }

  .transport {
    grid-template-columns: auto minmax(0, 1fr);
  }
}