/* =========================================================================
   Theme: MONSOON — dark, cinematic, photography-led.
   Only tokens and a handful of signature rules; structure lives in core.css.
   ========================================================================= */

:root {
  /* palette */
  --bg:            #07110E;
  --surface:       #0E1A16;
  --surface-alt:   #0B1512;
  --border:        #1F332C;
  --border-strong: #2E4A40;
  --text:          #EAF2EC;
  --text-soft:     #C3D3CA;
  --text-muted:    #8CA69A;
  --text-faint:    #5D7268;
  --accent:        #E9A13B;
  --accent-hover:  #F5B75E;
  --on-accent:     #10190F;
  --success:       #6FC3A0;
  --danger:        #FF7A6B;
  --code-bg:       #0B1714;
  --input-bg:      #0B1512;
  --header-bg:       rgba(11,21,18,.68);  /* translucent, once scrolled */
  --header-bg-solid: #0B1512;             /* the strip at rest */

  /* type — the family, weight and size ramp come from the typeface preset in
     config ('fonts' => …), applied after this file. Only the theme-specific
     bits live here. */
  --lh-display: 1.0;
  --quote-style: normal;
  --eyebrow-tracking: .2em;

  /* shape */
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-btn: 999px;
  --radius-chip: 999px;
  --radius-mark: 50%;
  --chip-bg: transparent;
  --chip-border: #23392F;
}

/* Literata ships old-style figures by default; headings want lining figures. */
.display, .h1, .h2, .stat__value { font-variant-numeric: lining-nums; }

/* --- the home hero: full-bleed photograph with the header over it --------- */
.hero--monsoon { position: relative; min-height: min(88vh, 820px); display: flex; flex-direction: column; overflow: hidden; }
.hero--monsoon .hero__media { position: absolute; inset: 0; }
.hero--monsoon .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.hero--monsoon .hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(175deg, rgba(7,17,14,.66) 0%, rgba(7,17,14,.34) 32%, rgba(7,17,14,.96) 88%);
}
.hero--monsoon .hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 80% 8%, rgba(233,161,59,.18), transparent 58%);
}
.hero--monsoon .hero__inner { position: relative; z-index: 2; flex: 1; display: block; align-content: center; padding-block: clamp(64px, 10vw, 120px) clamp(48px, 7vw, 88px); }
.hero--monsoon .hero__text { max-width: 44rem; }
.hero--monsoon .hero__role { color: var(--accent); letter-spacing: .01em; }
.hero--monsoon .hero__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; padding-bottom: var(--s5); }
.hero--monsoon .hero__scroll {
  display: inline-flex; align-items: center; gap: .45em;
  color: rgba(234,242,236,.6);
  transition: color 200ms var(--ease);
}
.hero--monsoon .hero__scroll:hover,
.hero--monsoon .hero__scroll:focus-visible { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .hero--monsoon .hero__scroll svg { animation: scroll-cue 2.4s var(--ease) infinite; }
  @keyframes scroll-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}
.badge--glass { background: rgba(7,17,14,.55); backdrop-filter: blur(8px); }

/* The header keeps its own strip above the hero; frosting on scroll is handled
   in core.css by .is-scrolled. */
.site-header .site-nav__link { color: var(--text); }

/* --- cinematic imagery ---------------------------------------------------- */
.frame img { filter: saturate(.88); }
.post-card__media, .album-card__media, .project-card__media { border-radius: var(--radius-lg); }
.album-card__media::after,
.post-card--featured .post-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7,17,14,.72));
  pointer-events: none;
}

/* --- section rhythm ------------------------------------------------------- */
.section--alt { background: var(--surface-alt); }
.section-head .h2 { max-width: 22ch; }
.eyebrow__num { font-weight: 500; }

/* --- buttons -------------------------------------------------------------- */
.btn--accent { box-shadow: 0 6px 22px -10px rgba(233,161,59,.8); }
.btn--ghost { border-color: rgba(234,242,236,.26); }

/* --- prose ---------------------------------------------------------------- */
.prose blockquote, .pull-quote { font-style: normal; }

/* The hero text sits on a bright photograph — give it its own floor. */
.hero--monsoon .hero__scrim {
  background:
    linear-gradient(100deg, rgba(7,17,14,.92) 0%, rgba(7,17,14,.62) 38%, rgba(7,17,14,.22) 68%),
    linear-gradient(178deg, rgba(7,17,14,.58) 0%, rgba(7,17,14,.18) 30%, rgba(7,17,14,.94) 92%);
}
.hero--monsoon .hero__text > .badge { align-self: flex-start; }
.hero--monsoon .lead { color: #DCE8E1; }
.hero--monsoon .hero__foot .eyebrow { color: rgba(234,242,236,.62); }