/* ==========================================================
   Kai Mana — Character Page Base Styles (Cleanup Audit)
   --------------------------------------------------
   Shared by all 5 character pages: Kaimana, Lehua, Makani,
   Makua Nui, and ʻAukai. Originally duplicated as 5×576-line
   styles.css files. Consolidated during M2G cleanup.

   Per-character overrides (e.g. ʻAukai's image-cluster) live
   in each character's local styles.css if needed.

   Loaded by: kai-mana/about/character-XYZ/index.html
   See: kai-mana/_shared/NOTES-character.md (TODO if added)
   ========================================================== */

:root {
  --bg: #07191b;
  --bg-soft: #102724;
  --panel: rgba(255, 246, 230, 0.08);
  --panel-strong: rgba(255, 246, 230, 0.13);
  --ink: #fff7e8;
  --muted: #dcc8aa;
  --gold: #d6a85f;
  --red: #aa2423;
  --green: #6f7a42;
  --line: rgba(255, 246, 230, 0.18);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Body font-family — character pages don't load main.css so we declare it here. */
html {
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(7, 25, 27, 0.96), rgba(6, 22, 25, 1) 42%, rgba(20, 35, 30, 1));
  line-height: 1.65;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgba(170, 36, 35, 0.12), transparent 34%),
    linear-gradient(250deg, rgba(214, 168, 95, 0.12), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.015) 42px 43px);
  pointer-events: none;
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding: 0.75rem clamp(1rem, 4vw, 3.5rem);
  background: rgba(4, 18, 20, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.top-nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.top-nav a {
  border-radius: 999px;
  padding: 0.55rem 0.72rem;
  color: var(--muted);
  text-decoration: none;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--ink);
  background: rgba(255, 246, 230, 0.1);
  outline: none;
}

.km-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(100vh - 68px);
  overflow: hidden;
}

.km-hero__bg,
.km-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.km-hero__bg {
  /* Show the subject. Subject tends to be center vertically;
     for character pages we bias upward so the face sits in the
     upper-center, leaving the lower portion for text. */
  object-fit: cover;
  object-position: center 28%;
}

.km-hero__overlay {
  /* Strong full-overlay with vertical gradient so text reads clearly
     regardless of where the face lands in the photo. Bottom is darkest
     to anchor the text. */
  background:
    linear-gradient(180deg, rgba(3, 13, 15, 0.25) 0%, rgba(3, 13, 15, 0.45) 38%, rgba(3, 13, 15, 0.85) 78%, var(--bg) 100%);
}

/* Character pages: override hero.css's centered hero.
   hero.css loads AFTER character-base.css and uses single-class
   specificity. Use `body .km-hero` (0,1,1) to beat `.km-hero` (0,1,0).

   Per user feedback: anchor text block to the LEFT edge of the page,
   aligned with the Kai Mana wordmark in the nav (which sits at 64px
   from the page edge). Drop the centering from hero.css. */
body .km-hero {
  justify-content: flex-start;
  text-align: left;
}

.km-hero .km-hero__content {
  position: relative;
  z-index: 1;
  max-width: 790px;
  /* Padding keeps breathing room from the edges but no longer
     needs to be centered; the block now sits flush-left. */
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}

.km-hero .km-hero__content p:last-child {
  max-width: 660px;
  margin: 1.15rem 0 0;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(4.5rem, 14vw, 10.5rem);
}

h2 {
  font-size: clamp(2.25rem, 5.8vw, 5rem);
  text-wrap: balance;
}

.km-hero__content p:last-child,
.section-copy p,
.origin-flow p,
.text-panel p {
  color: var(--muted);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}

.km-hero__content p:last-child {
  max-width: 660px;
  margin: 1.15rem 0 0;
}

.section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 7vw, 6rem);
}

.section.discography {
  grid-template-columns: 1fr;
}

.section.reverse {
  grid-template-columns: minmax(320px, 1.08fr) minmax(0, 0.92fr);
  background: rgba(255, 246, 230, 0.035);
  border-block: 1px solid var(--line);
}

.section-copy {
  max-width: 700px;
}

.section-copy p {
  margin: 1.1rem 0 0;
}

.portrait-frame,
.wide-frame,
.image-cluster,
.detail-grid figure,
.text-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.portrait-frame,
.wide-frame {
  margin: 0;
}

/* Resetting img widths inside their containers.
   Exclude .small-detail via :not() so the absolute overlay keeps its own width. */
.portrait-frame img,
.wide-frame img,
.image-cluster img:not(.small-detail),
.detail-grid img {
  display: block;
  width: 100%;
}

.portrait-frame img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

.wide-frame img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

/* Two-image cluster: large image with smaller detail overlaid in corner.
   Used in "The Instrument" sections across all 5 character pages. */
.image-cluster {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
}

.wide-detail {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.small-detail {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: clamp(120px, 34%, 230px);
  aspect-ratio: 1 / 1;
  /* Stronger frame so the detail reads as a deliberate inset, not a crop. */
  border: 2px solid rgba(255, 246, 230, 0.55);
  border-radius: 10px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 6px rgba(7, 25, 27, 0.55);   /* halo so the border breathes against busy backgrounds */
  z-index: 1;
  object-fit: cover;
  transition: transform 240ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.small-detail:hover {
  transform: scale(1.04);
}

.member-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 clamp(1rem, 7vw, 6rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  overflow: hidden;
}

.member-band article {
  min-height: 154px;
  padding: 1.25rem;
  background: rgba(255, 246, 230, 0.065);
}

.member-band span,
.detail-grid figcaption {
  display: block;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.member-band strong {
  display: block;
  max-width: 14ch;
  margin-top: 0.55rem;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  line-height: 1.1;
}

/* (image-cluster styles unified at the top of the file) */

.detail-section {
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 7vw, 6rem);
}

.section-heading {
  max-width: 840px;
  margin-bottom: 1.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 0.9fr);
  gap: 1rem;
}

.detail-grid figure {
  margin: 0;
}

.detail-grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.detail-grid figcaption {
  padding: 1rem;
  background: rgba(4, 18, 20, 0.58);
}

/* Album block: cover + details */

.album-block {
  display: grid;
  width: 100%;
  max-width: 1320px;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.km-card.km-card--compact {
  display: grid;
  gap: 1rem;
  background: rgba(255, 246, 230, 0.03);
  padding: 1rem;
  border: 1px solid rgba(255, 246, 230, 0.08);
  border-radius: 8px;
}

.km-card__body {
  display: grid;
  gap: 1rem;
}

.km-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 1px solid rgba(255, 246, 230, 0.06);
}

.km-card__body .section-heading {
  margin: 0;
}

.album-details {
  min-width: 0;
}

.album-details p {
  margin: 0 0 0.5rem 0;
  color: var(--muted);
}

.album-details ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

@media (min-width: 1100px) {
  .album-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .km-card.km-card--compact {
    min-height: 1px;
  }
}

@media (max-width: 1099px) {
  .album-block {
    grid-template-columns: 1fr;
  }
}

.album-details p {
  margin: 0 0 0.5rem 0;
  color: var(--muted);
}

.album-details ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.album-details li {
  margin: 0.35rem 0;
}

.album-details a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}

.album-details a:hover,
.album-details a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}

@media (max-width: 920px) {
  .album-block {
    grid-template-columns: 1fr;
  }
  .album-link {
    width: 100%;
    max-width: 100%;
  }
  .album-details ul {
    padding-left: 0;
    list-style: none;
  }
  /* Mobile hero: reduce title size + padding so it fits viewport */
  .km-hero {
    min-height: auto;
  }
  .km-hero__content {
    padding: 4.5rem 1.25rem 2rem;
  }
  .km-hero__content h1,
  .km-hero__content .km-hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .eyebrow {
    font-size: 0.68rem;
    margin-bottom: 0.5rem;
  }
}

.text-panel {
  display: flex;
  align-items: end;
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background:
    linear-gradient(145deg, rgba(170, 36, 35, 0.18), rgba(111, 122, 66, 0.16)),
    var(--panel-strong);
}

.text-panel p {
  margin: 0;
}

.origin-flow {
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 13vw, 13rem);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 246, 230, 0.05), rgba(255, 246, 230, 0.015));
  border-top: 1px solid var(--line);
}

.origin-flow p {
  max-width: 850px;
  margin: 1.2rem auto 0;
}

.story-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 2rem;
  border: 1px solid rgba(214, 168, 95, 0.55);
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  color: var(--ink);
  background: rgba(214, 168, 95, 0.18);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1080px) {
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .top-nav {
    justify-content: flex-start;
  }

  .km-hero {
    min-height: 86vh;
  }

  .section,
  .section.reverse,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .member-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .site-header {
    min-height: 0;
  }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    font-size: 0.74rem;
  }

  .top-nav a {
    padding: 0.5rem 0.38rem;
    text-align: center;
  }

  .km-hero__bg {
    object-position: 58% center;
  }

  .km-hero__overlay {
    background:
      linear-gradient(90deg, rgba(3, 13, 15, 0.74), rgba(3, 13, 15, 0.28)),
      linear-gradient(0deg, var(--bg) 0%, transparent 58%);
  }

  .km-hero__content {
    padding-top: 8rem;
  }

  .member-band article {
    min-height: 118px;
  }

  .small-detail {
    width: 34%;
  }
}