/* ==========================================================
   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-pair) 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-pair,
.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. */
.portrait-frame img,
.wide-frame img,
.image-pair img,
.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 pair: wide instrument shot + small close-up detail,
   shown side by side as an editorial composition.

   Used in "The Instrument" sections across all 5 character pages.
   The previous `.image-cluster` variant used an absolute-positioned
   overlay that broke when HTML width/height attributes overrode CSS
   aspect-ratio. This layout puts both images in the flow so each
   respects its own aspect ratio (16:9 and 1:1) without overlap. */
.image-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wide-detail {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  object-fit: cover;
}

.small-detail {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 246, 230, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.small-detail:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.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-pair 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;
  }

  .image-pair {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.6rem;
  }

  .small-detail {
    max-width: 60%;
    margin: 0 auto;
  }

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