/* ==========================================================================
   Mortain — style.css
   Design tokens per docs/mortain-website-spec.md §4
   ========================================================================== */

:root {
  --bg: #0a0908;
  --bg2: #111010;
  --line: rgba(255, 255, 255, 0.1);
  --text: #e9e6e1;
  --muted: #8a8580;
  --iron: #c9c3b8;
  --blood: #7a0a0a;
  --blood-bright: #b3121a;
  /* Brighter accessible-contrast variant of --blood-bright, used only where
     the red sits as literal text foreground on a dark/photo background
     (--blood-bright itself stays deep/dark for button fills & borders,
     where it needs to work as a bg color under white text instead). */
  --blood-text: #ff1a1a;

  --font-head: "Cinzel", "Georgia", serif;
  --font-body: "Oswald", "Arial Narrow", sans-serif;

  --header-h: 84px;
  --container: 1280px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Disable mobile Safari/Chrome's automatic "text inflation" (it silently
     boosts font-size in narrow text columns for readability) — without
     this, .hero__tagline's cqw-computed size gets overridden upward on
     real phones even though it renders correctly at the same computed
     size in desktop devtools, causing it to overflow its gap next to the
     logo's sword. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus ring everywhere, only for keyboard users */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--blood-bright);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--blood-bright);
  color: #fff;
  padding: 10px 18px;
  z-index: 300;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* Noise texture overlay, spec §4 */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background: url("assets/img/noise.svg");
  background-size: 200px 200px;
}

/* Sharp cut-corner button geometry, spec §4 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.9em 1.8em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--blood-bright);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-filled {
  background: var(--blood-bright);
  color: #fff;
}
.btn-filled:hover {
  background: #d31820;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  /* Outline button has no fill, so on the hero it sits directly on the
     photo — same halo treatment as the hero heading, see .hero__tagline. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.85);
}
.btn-outline:hover {
  background: rgba(179, 18, 26, 0.12);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(10, 9, 8, 0.75), rgba(10, 9, 8, 0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-link {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.logo-link img {
  height: 34px;
  width: auto;
}

.nav-desktop {
  display: none;
}

@media (min-width: 861px) {
  .nav-desktop {
    display: flex;
    gap: clamp(20px, 3vw, 44px);
  }
  .nav-desktop a {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--iron);
    padding: 14px 2px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    position: relative;
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 4px;
    height: 1px;
    background: var(--blood-bright);
    transition: right 0.2s ease;
  }
  .nav-desktop a:hover::after,
  .nav-desktop a:focus-visible::after {
    right: 0;
  }
}

/* Burger control — mobile only */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}

.burger-lines,
.burger-lines::before,
.burger-lines::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger-lines::before,
.burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.burger-lines::before {
  top: -6px;
}
.burger-lines::after {
  top: 6px;
}

@media (min-width: 861px) {
  .burger {
    display: none;
  }
}

/* Full-screen mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-menu__panel {
  position: relative;
  width: min(360px, 86vw);
  height: 100%;
  background: var(--bg2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(24px, 6vw, 40px);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.is-open {
  visibility: visible;
}
.mobile-menu.is-open .mobile-menu__backdrop {
  opacity: 1;
}
.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

.mobile-menu__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__nav {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible {
  color: var(--blood-text);
}

@media (min-width: 861px) {
  .mobile-menu {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 780px;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(6px, 1.2vh, 18px);
  overflow: hidden;
  isolation: isolate;
}

/* Background pinned to the viewport while the page scrolls over it (the
   box itself still scrolls normally with .hero — background-attachment
   just stops the image inside that box from moving until the box scrolls
   out of view). Falls back to a plain scrolling background where the
   browser lacks image-set() support. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/img/hero-1256.jpg");
  background-image: image-set(
    url("assets/img/hero-1256.avif") type("image/avif"),
    url("assets/img/hero-1256.webp") type("image/webp"),
    url("assets/img/hero-1256.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 640px) {
  /* background-attachment: fixed is janky on some mobile browsers (address
     bar show/hide resizes the viewport against a "fixed" image) — scroll
     normally below the breakpoint where that mostly shows up. */
  .hero__media {
    background-attachment: scroll;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(10, 9, 8, 0.95) 0%,
    rgba(10, 9, 8, 0.8) 38%,
    rgba(10, 9, 8, 0.15) 68%,
    rgba(10, 9, 8, 0.35) 100%
  );
}

.hero__content {
  text-align: center;
  max-width: 780px;
  width: 100%;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* The logo art already draws a sword through "MORTAIN" (pommel at the very
   top, blade down through the letters, tip below them) — the tagline,
   CTAs and the blood drop all key off that same artwork instead of a
   separately-drawn blade, positioned as percentages of the logo's own box
   so they track it at any size. Measured from the source PNG (960x480):
   the sword sits at x=56.25% of the logo's width; the letter bodies run
   from y=12.5% to y=84% of its height, with the bare tip (no letters
   behind it) continuing from ~84% down to the bottom edge. */
.hero__logo-wrap {
  position: relative;
  width: min(720px, 88vw);
  /* Lets .hero__tagline size itself in cqw (below) — a percentage of this
     box's own rendered width — instead of viewport vw. The logo-wrap's
     width formula changes at the ~480px breakpoint (vw coefficient
     88 -> 84), so a plain vw-based font-size drifts out of proportion
     with the actual gap between the letters and the sword right at that
     jump; cqw always tracks the real box, at every width. */
  container-type: inline-size;
}

.hero__logo-wrap .hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero__tagline-row {
  margin: 0;
}

.hero__tagline {
  position: absolute;
  top: 80%;
  width: 42%;
  /* Proportional to the logo box itself (see container-type on
     .hero__logo-wrap) so it keeps fitting the letter-to-blade gap at
     any screen width, including well below the old rem-based floor
     this used to hit on small phones. */
  font-size: 2.4cqw;
  line-height: 1.25;
  /* The gradient scrim (see .hero::after) doesn't fully flatten the photo —
     bright patches (skin, cloud, metal) can sit directly behind letters.
     A solid dark halo keeps text readable regardless of what's behind it;
     verified against sampled worst-case photo pixels, see PR description. */
  text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.95), 0 4px 32px rgba(0, 0, 0, 0.9);
}

.hero__tagline--left {
  right: 53%;
  text-align: right;
}

.hero__tagline--right {
  /* Mirrors --left's gap from the blade (blade sits at 56.25%, --left's
     box-edge is at 47% -> 9.25% gap; 56.25 + 9.25 = 65.5%). */
  left: 65.5%;
  text-align: left;
}

@media (min-width: 861px) {
  /* Pull each half in toward the blade (~3 characters) instead of the
     previous outward nudge — one should end and the other begin right
     at it, not float off to either side. Desktop only. */
  .hero__tagline--left {
    margin-right: -2.4em;
  }
  .hero__tagline--right {
    margin-left: -2.4em;
  }
}

.hero__tagline .accent {
  color: var(--blood-text);
}

/* Bigger than a mere pixel now that it's tracing the logo's own blade
   rather than a separate hairline — travels from the bare tip (~84%,
   where the letters end) down past the logo's own bottom edge, into the
   empty space above the CTAs. */
.hero__blood-drop {
  position: absolute;
  left: 56.25%;
  width: 11px;
  height: 15px;
  background: var(--blood-bright);
  /* Round bulb at the bottom, tapering to a point at the top (an actual
     drop shape, not a ball): flatten one corner to a point, then rotate
     the flattened corner from top-left up to dead-center-top. */
  border-radius: 50%;
  border-top-left-radius: 0;
  transform-origin: center;
  box-shadow: 0 2px 6px rgba(179, 18, 26, 0.9);
  animation: bloodDrop 2.6s ease-in infinite;
}

@keyframes bloodDrop {
  0% {
    top: 50%;
    transform: translateX(-50%) rotate(45deg) scale(0.4);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) scale(1);
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    transform: translateX(-50%) rotate(45deg) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blood-drop {
    animation: none;
    top: 75%;
    opacity: 1;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* ==========================================================================
   Section shell
   ========================================================================== */

.section {
  padding-block: clamp(64px, 10vw, 120px);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--header-h);
}

#merch,
#press,
#contact {
  scroll-margin-top: var(--header-h);
}

.section__head {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 640px;
}

.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blood-text);
  margin-bottom: 14px;
}

.section__title {
  font-size: clamp(1.75rem, 1.4vw + 1.4rem, 2.625rem);
  font-weight: 800;
}

/* ==========================================================================
   Debut single (Crown of Nails)
   ========================================================================== */

.single__video {
  position: relative;
  width: 90%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg2);
}

.single__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.single {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  grid-template-areas:
    "photo lyrics"
    "blurb blurb"
    "links links";
  gap: clamp(32px, 5vw, 72px) clamp(32px, 4vw, 64px);
  align-items: stretch;
}

.single .single__photo {
  grid-area: photo;
  position: relative;
  /* Overrides the fixed 7/6 ratio inherited from .about__photo (reused
     here for the border/crop/picture styling) — in this row the photo
     should grow to match the lyrics column's height instead, so its
     bottom edge lines up with the lyrics' bottom edge. */
  aspect-ratio: unset;
  align-self: stretch;
}

/* Dark scrim behind the logo so it stays legible against the photo,
   regardless of what's directly behind it. */
.single__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.92), transparent);
  pointer-events: none;
}

.single__logo-overlay {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 56%;
  height: auto;
}

.single__blurb {
  grid-area: blurb;
  color: var(--iron);
}

.single__blurb p {
  margin: 0 0 20px;
}

.single__blurb p:last-child {
  margin-bottom: 0;
}

.single__links {
  grid-area: links;
}

.lyrics {
  grid-area: lyrics;
  columns: 2;
  column-gap: clamp(32px, 4vw, 64px);
}

.lyrics__stanza {
  break-inside: avoid;
  margin: 0 0 16px;
  color: var(--iron);
  line-height: 1.5;
}

.lyrics__label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blood-text);
  margin-bottom: 8px;
}

@media (max-width: 860px) {
  .single {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "lyrics"
      "blurb"
      "links";
  }
  .single .single__photo {
    max-width: 360px;
    margin-inline: auto;
    /* Stacked layout: nothing to stretch-match anymore, so the photo
       needs its own sensible height back. */
    aspect-ratio: 7 / 6;
  }
  .lyrics {
    columns: 1;
  }
}

/* ==========================================================================
   The Band (lineup + collage)
   ========================================================================== */

.band {
  display: grid;
  /* Håkon's photo only exists in landscape, so the row is split into 5
     equal lanes: the three portrait shots take one lane each, his takes
     two — see .band__member--span2. */
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.band__member {
  margin: 0;
  border: 1px solid var(--line);
}

.band__member--span1 {
  grid-column: span 1;
}

.band__member--span2 {
  grid-column: span 2;
}

.band__photo {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.band__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.band__member--span2 .band__photo img {
  object-position: center;
}

.band__member figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.band__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.band__role {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 640px) {
  .band {
    grid-template-columns: repeat(2, 1fr);
  }
  .band__photo {
    height: 220px;
  }
}

/* ==========================================================================
   About / portrait (MOR-5)
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about__photo {
  border: 1px solid var(--line);
  /* Wider-than-the-source-photo on purpose: the source file (portrait-*.webp)
     has a solid black band baked into its bottom ~6% (not a CSS bug — see
     PR discussion). A squarer/wider frame + object-position:top crops that
     sliver away from the bottom instead of squeezing the whole photo
     (band included) down to fit a taller frame. */
  aspect-ratio: 7 / 6;
  overflow: hidden;
}

.about__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about__photo picture img {
  /* Scoped to picture > img specifically (not a bare ".about__photo img")
     because .single__photo reuses this class alongside a sibling overlay
     <img> (.single__logo-overlay) that must NOT be stretched to cover —
     a bare descendant selector here would win over that class on
     specificity and force the logo to 100%/100% object-fit: cover. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about__body p {
  color: var(--iron);
  margin: 0 0 20px;
  max-width: 62ch;
}

.about__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.about__links a {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.about__links a:hover,
.about__links a:focus-visible {
  color: var(--blood-text);
  border-color: var(--blood-bright);
}

@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
  }
  .about__photo {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Footer (MOR-6)
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 56px;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  height: 28px;
  width: auto;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-social a {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iron);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--blood-text);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}

.site-footer__bottom a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

/* ==========================================================================
   Small-phone breakpoint (spec §7 — ~480px)
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --header-h: 68px;
  }

  .logo-link img {
    height: 26px;
  }

  .hero__logo-wrap {
    width: min(360px, 84vw);
  }

  .section__title {
    font-size: clamp(1.5rem, 6vw, 1.85rem);
  }
}