/* ----------------------------------------------------------
   LMG Soundworks — v1.0
   Full page assembled. One continuous color world from the
   hero's oxblood through to the connect section's ink floor.
   ---------------------------------------------------------- */

@font-face {
  font-family: "Daft";
  src: url("assets/fonts/DaftFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #f4ead8;
  --ink-quiet: rgba(244, 234, 216, 0.62);
  --ink-faint: rgba(244, 234, 216, 0.35);
  --ink-line: rgba(244, 234, 216, 0.12);

  /* Anchor colors used across the page. */
  --hero-warm: #f2974a;
  --hero-mid:  #c83a14;
  --hero-deep: #2a0606;

  --thesis-warm: #6a4a9a;
  --thesis-mid:  #2a1a55;

  --bridge: #110614;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* -------- Body holds the page-long ombré --------
   Seven sections at ~14.3% each. The body is one continuous gradient
   running from warm oxblood at the top, through violet, indigo, a
   second oxblood in the news section (the news is fire), into deep
   teal, a warm amber-brown moment around about, and finally ink. */
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    linear-gradient(180deg,
      #110307  0%,     /* hero ceiling */
      #2a0606  8%,     /* hero peak (oxblood) */
      #220812 13%,     /* hero descending */
      #18091e 17%,     /* hero/thesis bridge */
      #1c1030 21%,     /* smoothing into violet */
      #221545 25%,     /* thesis peak (violet) */
      #1d1240 30%,     /* violet middle */
      #15083a 34%,     /* thesis/listen bridge */
      #170a40 37%,     /* indigo approaching */
      #1a0a48 41%,     /* listen peak (deeper indigo) */
      #170836 46%,     /* deepening */
      #1c0825 50%,     /* listen/news bridge — neutral middle */
      #260a20 54%,     /* warming */
      #320c1c 58%,     /* news peak (deep oxblood — the news is fire) */
      #260810 63%,     /* deepening */
      #1a0510 67%,     /* news/projects bridge */
      #140714 70%,     /* cooling neutral */
      #0c0e20 73%,     /* more cool */
      #08152a 76%,     /* projects peak (deep teal-blue) */
      #0a1124 80%,     /* dimming */
      #0c0814 84%,     /* projects/about bridge */
      #181210 88%,     /* warming neutral */
      #2a1c14 92%,     /* about peak (warm amber-brown intimate) */
      #1a0e0c 96%,     /* descending */
      #060305 100%);   /* about floor */
}

/* -------- Top navigation -------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2.5rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Transparent at the top of the page; gains a blurred dark bar once
     the user starts scrolling, so the nav never overlays prose. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease, padding 320ms ease;
}

.topnav--scrolled {
  background: rgba(8, 5, 12, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(244, 234, 216, 0.08);
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.topnav a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.62;
  transition: opacity 280ms ease;
}
.topnav a:hover { opacity: 1; }

.topnav .wordmark {
  font-family: "Cinzel", "Newsreader", serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  opacity: 0.82;
  text-transform: uppercase;
}

.topnav ul {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 820px) {
  .topnav { padding: 1.25rem 1.25rem; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
  .topnav ul { gap: 0.9rem; font-size: 0.55rem; flex-wrap: wrap; }
  .topnav .wordmark { font-size: 0.68rem; letter-spacing: 0.22em; }
}

/* -------- Panels — transparent containers on the body gradient -------- */
.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  padding: 6rem 0;
}

.panel__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 2rem;
  max-width: 60rem;
  width: 100%;
}

.panel__content--prose { max-width: 44rem; text-align: left; }
.panel__content--wide  { max-width: 64rem; text-align: left; }
.panel__content--about { max-width: 68rem; text-align: left; }
.panel__content--connect { max-width: 56rem; text-align: center; }

/* Each panel adds its own radial glow — a soft spotlight in its color.
   The glow fades to transparent at the panel's edges, so the body
   gradient flows through uninterrupted across boundaries. */
.panel--hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Concentrated higher and tighter so the glow doesn't bleed into the
     bottom half of the panel and create a visible band before the thesis. */
  background: radial-gradient(ellipse 105% 42% at 50% 22%,
    rgba(200, 58, 20, 0.65) 0%, rgba(140, 26, 10, 0.30) 30%, transparent 62%);
}

.panel--thesis::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 50% at 50% 50%,
    rgba(106, 74, 154, 0.52) 0%, rgba(42, 26, 85, 0.22) 35%, transparent 72%);
}

.panel--listen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 95% 55% at 50% 40%,
    rgba(82, 60, 180, 0.45) 0%, rgba(40, 24, 100, 0.22) 35%, transparent 72%);
}

.panel--news::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 58% at 50% 42%,
    rgba(178, 50, 50, 0.42) 0%, rgba(100, 20, 30, 0.22) 35%, transparent 72%);
}

.panel--projects::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 95% 55% at 50% 42%,
    rgba(40, 110, 150, 0.40) 0%, rgba(20, 60, 90, 0.20) 35%, transparent 72%);
}

.panel--about::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Glow centered on the bio area, fading toward the contact block at
     the bottom of the section so contact reads quieter. */
  background: radial-gradient(ellipse 100% 60% at 50% 32%,
    rgba(180, 130, 80, 0.34) 0%, rgba(110, 70, 40, 0.18) 35%, transparent 72%);
}

.panel--connect::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 50% 48%,
    rgba(80, 60, 50, 0.28) 0%, rgba(40, 30, 25, 0.16) 35%, transparent 72%);
}

/* -------- The field — image + overlays in the hero -------- */
.field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Hero image. Pre-flipped at the file level. Object-position shifted
   down so the bright nebula sits below the title rather than behind it. */
.field--hero .field__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  filter: saturate(1.12) contrast(1.04) hue-rotate(-6deg);
  /* Tighter mask: center higher, smaller vertical radius, full transparency
     reached by 88%. The bottom 12%+ of the panel has no image at all,
     so the only thing sealing into the thesis is the body gradient. */
  -webkit-mask-image: radial-gradient(ellipse 110% 60% at 50% 30%, #000 14%, rgba(0,0,0,0.75) 44%, rgba(0,0,0,0.20) 72%, transparent 88%);
          mask-image: radial-gradient(ellipse 110% 60% at 50% 30%, #000 14%, rgba(0,0,0,0.75) 44%, rgba(0,0,0,0.20) 72%, transparent 88%);
  z-index: 0;
}

.field--hero .field__watermark-mask {
  position: absolute;
  top: 0; right: 0;
  width: 26%;
  height: 14%;
  background: radial-gradient(ellipse at top right,
    rgba(4, 2, 8, 1) 0%, rgba(4, 2, 8, 0.92) 30%, rgba(4, 2, 8, 0.55) 65%, transparent 100%);
  z-index: 1;
}

.field--hero .field__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 40% at 50% 32%, rgba(242, 151, 74, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 110% 50% at 50% 95%, rgba(18, 4, 8, 0.50) 0%, transparent 75%);
  mix-blend-mode: multiply;
  z-index: 2;
}

.field--hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50vh;
  z-index: 3;
  pointer-events: none;
  /* Taller sealant with a gentler ramp. The bottom half of the hero is
     given over to the body gradient transitioning into the thesis violet. */
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(20, 10, 26, 0.20) 25%,
    rgba(22, 12, 32, 0.55) 55%,
    rgba(18, 10, 28, 0.88) 80%,
    transparent 100%);
}

.field__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.42;
  z-index: 4;
  pointer-events: none;
}

.field--thesis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 35%, rgba(5, 3, 8, 0.55) 100%);
}

/* ---- Starfield ----
   Two layered fields of tiny dots scattered across the panel. Each
   layer twinkles at its own rate so the field never reads as
   uniformly pulsing. CSS-only, no JS, no DOM weight. */
.starfield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.starfield--a {
  background-image:
    radial-gradient(1.5px 1.5px at 6%  18%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px   1px   at 14% 42%, rgba(255,255,255,0.78), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 12%, rgba(255,255,255,0.90), transparent 60%),
    radial-gradient(1px   1px   at 28% 58%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(2px   2px   at 38% 30%, rgba(255,255,255,1.00), transparent 60%),
    radial-gradient(1px   1px   at 44% 80%, rgba(255,255,255,0.70), transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 16%, rgba(255,235,210,0.88), transparent 60%),
    radial-gradient(1px   1px   at 60% 64%, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 42%, rgba(255,255,255,0.92), transparent 60%),
    radial-gradient(1px   1px   at 76% 24%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.7px 1.7px at 84% 58%, rgba(255,255,255,0.96), transparent 60%),
    radial-gradient(1px   1px   at 90% 30%, rgba(255,235,210,0.82), transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 74%, rgba(255,255,255,0.85), transparent 60%);
  animation: twinkle-a 6.5s ease-in-out infinite;
}

.starfield--b {
  background-image:
    radial-gradient(0.9px 0.9px at  4% 12%, rgba(255,255,255,0.62), transparent 60%),
    radial-gradient(1px   1px   at 18% 84%, rgba(255,235,210,0.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 88%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(0.9px 0.9px at 42% 50%, rgba(255,255,255,0.70), transparent 60%),
    radial-gradient(1px   1px   at 50% 92%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(1.5px 1.5px at 64%  8%, rgba(255,255,255,0.90), transparent 60%),
    radial-gradient(0.8px 0.8px at 72% 76%, rgba(255,235,210,0.66), transparent 60%),
    radial-gradient(1px   1px   at 86% 10%, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1.3px 1.3px at 98% 88%, rgba(255,255,255,0.90), transparent 60%);
  animation: twinkle-b 9.5s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes twinkle-a {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.92; }
}

@keyframes twinkle-b {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .starfield--a, .starfield--b { animation: none; opacity: 0.6; }
}

/* ---- Ghost river at the bottom of the page ----
   A band of particles (like Jupiter's rings, or a galactic dust band)
   anchored to the bottom of the About section. Three layers of points
   concentrated in a horizontal band: top edge sparse + small, middle
   dense + bright, bottom edge sparse + small. Each layer slowly drifts
   horizontally at its own speed and direction so the band flows.
   The whole thing pulses opacity over ~32s so it "reveals itself" the
   longer you look. */
.ghost-river-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  animation: river-reveal 32s ease-in-out infinite;
}

.ghost-river-bottom__layer {
  position: absolute;
  inset: 0;
}

/* Layer A — upper edge of band, smaller and dimmer particles */
.ghost-river-bottom__layer--a {
  background-image:
    radial-gradient(1px 1px      at  4% 34%, rgba(255,235,210,0.80), transparent 60%),
    radial-gradient(1.2px 1.2px  at 11% 28%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(0.9px 0.9px  at 18% 42%, rgba(255,235,210,0.75), transparent 60%),
    radial-gradient(1.1px 1.1px  at 26% 30%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px      at 34% 38%, rgba(255,255,255,0.68), transparent 60%),
    radial-gradient(1.3px 1.3px  at 42% 26%, rgba(255,235,210,0.90), transparent 60%),
    radial-gradient(0.9px 0.9px  at 50% 40%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.1px 1.1px  at 58% 34%, rgba(255,255,255,0.78), transparent 60%),
    radial-gradient(1px 1px      at 66% 28%, rgba(255,235,210,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px  at 74% 42%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(0.9px 0.9px  at 82% 30%, rgba(255,255,255,0.68), transparent 60%),
    radial-gradient(1.1px 1.1px  at 90% 38%, rgba(255,235,210,0.88), transparent 60%),
    radial-gradient(1px 1px      at 97% 32%, rgba(255,255,255,0.75), transparent 60%);
  animation: river-drift-right 72s linear infinite, river-twinkle-a 7.5s ease-in-out infinite;
}

/* Layer B — the bright middle of the band */
.ghost-river-bottom__layer--b {
  background-image:
    radial-gradient(1.4px 1.4px  at  3% 52%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px      at  9% 48%, rgba(255,235,210,0.85), transparent 60%),
    radial-gradient(1.6px 1.6px  at 15% 56%, rgba(255,255,255,1.00), transparent 60%),
    radial-gradient(1.1px 1.1px  at 21% 50%, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1.3px 1.3px  at 28% 54%, rgba(255,235,210,0.90), transparent 60%),
    radial-gradient(1.5px 1.5px  at 35% 48%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px      at 42% 56%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(1.4px 1.4px  at 50% 50%, rgba(255,235,210,0.92), transparent 60%),
    radial-gradient(1.2px 1.2px  at 57% 54%, rgba(255,255,255,0.82), transparent 60%),
    radial-gradient(1.6px 1.6px  at 64% 48%, rgba(255,255,255,1.00), transparent 60%),
    radial-gradient(1px 1px      at 72% 56%, rgba(255,235,210,0.78), transparent 60%),
    radial-gradient(1.3px 1.3px  at 79% 50%, rgba(255,255,255,0.88), transparent 60%),
    radial-gradient(1.4px 1.4px  at 87% 54%, rgba(255,255,255,0.92), transparent 60%),
    radial-gradient(1.1px 1.1px  at 94% 48%, rgba(255,235,210,0.85), transparent 60%);
  animation: river-drift-left 96s linear infinite, river-twinkle-b 9s ease-in-out infinite;
}

/* Layer C — lower edge of band, smaller and dimmer */
.ghost-river-bottom__layer--c {
  background-image:
    radial-gradient(0.9px 0.9px  at  6% 66%, rgba(255,235,210,0.70), transparent 60%),
    radial-gradient(1.2px 1.2px  at 13% 72%, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1px 1px      at 20% 64%, rgba(255,235,210,0.75), transparent 60%),
    radial-gradient(1.1px 1.1px  at 28% 70%, rgba(255,255,255,0.82), transparent 60%),
    radial-gradient(0.9px 0.9px  at 36% 62%, rgba(255,255,255,0.68), transparent 60%),
    radial-gradient(1.3px 1.3px  at 44% 68%, rgba(255,235,210,0.88), transparent 60%),
    radial-gradient(1px 1px      at 52% 74%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.1px 1.1px  at 60% 64%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(0.9px 0.9px  at 68% 70%, rgba(255,235,210,0.70), transparent 60%),
    radial-gradient(1.2px 1.2px  at 76% 66%, rgba(255,255,255,0.72), transparent 60%),
    radial-gradient(1px 1px      at 84% 72%, rgba(255,255,255,0.68), transparent 60%),
    radial-gradient(1.1px 1.1px  at 92% 64%, rgba(255,235,210,0.85), transparent 60%),
    radial-gradient(0.9px 0.9px  at 98% 70%, rgba(255,255,255,0.70), transparent 60%);
  animation: river-drift-right 84s linear infinite, river-twinkle-c 10.5s ease-in-out infinite;
}

@keyframes river-drift-right {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}

@keyframes river-drift-left {
  from { transform: translateX(3%); }
  to   { transform: translateX(-3%); }
}

@keyframes river-twinkle-a {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 1.00; }
}

@keyframes river-twinkle-b {
  0%, 100% { opacity: 0.80; }
  50%      { opacity: 1.00; }
}

@keyframes river-twinkle-c {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 0.95; }
}

@keyframes river-reveal {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1.00; }
}

/* ---- Stars flanking "say hello." ----
   Small star clusters left and right of the brushed lead, echoing the
   thesis section's starfield. Twinkle on offset timers so they never
   pulse together. */
.say-hello-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto 1.5rem;
  flex-wrap: nowrap;
}

.say-hello-stars {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px   1px   at 52% 48%, rgba(255,255,255,0.82), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 32%, rgba(255,235,210,0.90), transparent 60%),
    radial-gradient(0.9px 0.9px at 30% 68%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 76%, rgba(255,255,255,0.90), transparent 60%),
    radial-gradient(0.8px 0.8px at 12% 58%, rgba(255,235,210,0.70), transparent 60%);
  animation: twinkle-a 6.5s ease-in-out infinite;
}

.say-hello-stars--right { animation-delay: -2.8s; animation-duration: 8.2s; }

@media (max-width: 600px) {
  .say-hello-row { gap: 0.75rem; }
  .say-hello-stars { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-river-bottom,
  .ghost-river-bottom__layer,
  .say-hello-stars { animation: none; }
  .ghost-river-bottom { opacity: 0.7; }
}

/* -------- Hero typography -------- */
.hero__credit {
  margin: 0 0 2.75rem;
  font-family: "Cinzel", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 1.45vw, 1.15rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero__credit-by {
  font-size: 0.78em;
  letter-spacing: 0.4em;
  opacity: 0.85;
  display: inline-block;
  transform: translateY(-0.05em);
}

.hero__title {
  font-family: "Daft", "Mansalva", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: clamp(3.8rem, 14vw, 11rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin: 0;
  color: var(--ink);
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;
  text-shadow:
    0 0 90px rgba(248, 220, 160, 0.20),
    0 4px 28px rgba(0, 0, 0, 0.7);
}

/* -------- Thesis typography -------- */
.panel__content--prose p {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.48;
  margin: 0 0 1.5em;
  color: var(--ink);
  text-wrap: balance;
}

.panel__content--prose p:last-child {
  color: var(--ink-quiet);
  margin-bottom: 0;
}

/* -------- Shared section typography --------
   Used across Listen, News, Projects, About, Connect. */
/* Section labels read as quiet chapter marks: same Cinzel family as
   the nav, but with a leading rule and a warm peach-cream tint so
   they can't be confused with navigation links or body text. */
.section__label {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(248, 215, 175, 0.88);
  margin: 0 0 1.6rem;
}
.section__label::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.section__title {
  font-family: "Daft", "Mansalva", cursive;
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: var(--ink);
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  margin: 0 0 2rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.section__intro {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 2.5rem;
  max-width: 50rem;
  text-wrap: balance;
}

/* CTAs use the same warm peach as section labels so they read as
   distinct from body text and from nav (which is pure cream). The
   underline is brighter and thicker than the label rule. */
.section__cta {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(248, 215, 175, 0.95);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(248, 215, 175, 0.55);
  padding-bottom: 0.5rem;
  transition: color 280ms ease, border-color 280ms ease;
}
.section__cta:hover {
  color: rgba(252, 225, 190, 1);
  border-color: rgba(252, 225, 190, 1);
}

/* -------- Featured callouts (e.g. ISC Semi-finalist) -------- */
.featured {
  margin: 2.5rem 0 1rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--ink-line);
}
.featured__mark {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 0.6rem;
}
.featured__title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
  color: var(--ink);
}

/* -------- Embeds (SoundCloud + YouTube) -------- */
.embed {
  margin: 1.5rem 0 1.5rem;
  border: 1px solid var(--ink-line);
  background: rgba(0, 0, 0, 0.45);
  padding: 0.5rem;
  border-radius: 4px;
  position: relative;
}
.embed iframe { display: block; width: 100%; border: 0; }
.embed--track iframe { height: 166px; }      /* compact single-track player */
.embed--profile iframe { height: 305px; }    /* compact list of latest tracks */
.embed--audio iframe { height: 450px; }      /* visual mode, deprecated */
.embed--video { padding: 0; }
.embed--video iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

/* "Latest tracks" small caption below the featured track. */
.featured__caption {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 3rem 0 0.8rem;
}

/* Connect block: the contact half of the merged About section.
   Flows directly out of the bio, no rule between them. The Daft Font
   lead carries the personality the email itself can't. */
.connect-block {
  margin-top: 4.5rem;
  text-align: center;
}

.connect-block__lead {
  font-family: "Daft", "Mansalva", cursive;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: var(--ink);
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

@media (max-width: 820px) {
  .connect-block__lead {
    -webkit-text-stroke: 2px #000;
  }
}

.connect-block__invite {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-quiet);
  margin: 0 0 2rem;
  text-wrap: balance;
}

/* -------- News list -------- */
.news-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 2.2rem;
  margin: 2rem 0 0.5rem;
}
.news-list li {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-quiet);
  padding-left: 1rem;
  position: relative;
}
.news-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.news-list a {
  color: inherit;
  text-decoration: none;
  display: inline;
  transition: color 280ms ease;
}
.news-list a:hover { color: var(--ink); }
.news-list__title {
  color: var(--ink);
  font-style: italic;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 1px;
  transition: border-color 280ms ease;
}
.news-list a:hover .news-list__title { border-bottom-color: rgba(248, 215, 175, 0.85); }

/* -------- Projects grid -------- */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 1.5rem 0;
}
.project {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--ink-line);
  padding: 2.5rem 2rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.project__role {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* Same warm peach family as section labels but slightly quieter, so
     the card subtitle is readable against the darker project card bg. */
  color: rgba(248, 215, 175, 0.72);
  margin: 0 0 0.6rem;
}
.project__title {
  font-family: "Daft", "Mansalva", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.0;
  text-transform: lowercase;
  color: var(--ink);
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  margin: 0 0 1.2rem;
}
.project__desc {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.project__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(248, 215, 175, 0.95);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(248, 215, 175, 0.5);
  padding-bottom: 0.4rem;
  transition: color 280ms, border-color 280ms;
}
.project__link:hover {
  color: rgba(252, 225, 190, 1);
  border-color: rgba(252, 225, 190, 1);
}

/* -------- About -------- */
.about-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
.about__portrait {
  margin: 0;
}
.about__portrait img {
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--ink-line);
  filter: contrast(1.04) brightness(0.96);
}
.about__text p {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.75vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.4em;
}
.about__location {
  font-family: "Cinzel", serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
  color: var(--ink-quiet) !important;
  margin-top: 2rem !important;
}

/* -------- Connect -------- */
.connect__email {
  margin: 2rem 0 3rem;
  text-align: center;
}
/* Email rendered in Newsreader, mixed case — the same voice as the bio
   above it. Reads as a signature, not a credit. Less formal than the
   Cinzel CTAs because writing to someone is its own kind of action. */
.connect__email a {
  display: inline-block;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  letter-spacing: 0;
  color: rgba(248, 215, 175, 0.95);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(248, 215, 175, 0.45);
  padding-bottom: 0.45rem;
  transition: color 280ms, border-color 280ms;
}
.connect__email a:hover {
  color: rgba(252, 225, 190, 1);
  border-color: rgba(252, 225, 190, 1);
}

.connect__socials {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem 2.4rem;
}
.connect__socials a {
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25rem;
  transition: opacity 280ms, border-color 280ms;
}
.connect__socials a:hover {
  opacity: 1;
  color: rgba(252, 225, 190, 1);
  border-bottom-color: rgba(248, 215, 175, 0.7);
}

/* -------- Footer -------- */
.footer {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--ink-line);
  text-align: center;
}
.footer__logo {
  height: 90px;
  width: auto;
  opacity: 0.78;
  /* The logo is gold linework on transparent — let it glow softly. */
  filter: brightness(1.05);
}
.footer__line {
  margin: 1.25rem 0 0;
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* -------- Mobile -------- */
@media (max-width: 820px) {
  .panel { padding: 5rem 0; }
  .panel__content { padding: 0 1.4rem; }

  .hero__title { -webkit-text-stroke: 4px #000; }
  .section__title { -webkit-text-stroke: 2.5px #000; }
  .project__title { -webkit-text-stroke: 2px #000; }

  .news-list { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about__portrait { max-width: 260px; }
  .embed--audio iframe { height: 360px; }
}

/* -------- Accessibility / niceties -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection {
  background: rgba(248, 220, 160, 0.35);
  color: var(--ink);
}

/* Marker for content I left as a placeholder — quiet visual hint
   (but only in dev — Lucas can remove the attribute or this rule). */
[data-todo] {
  position: relative;
}