/* ============================================================
   MELISSA'S PEAKS — Black Lodge / Red Room theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Libre+Franklin:wght@400;500;600;700&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600&family=Archivo:ital,wght@0,900;1,900&display=swap');
/* Archivo is used for the brand and the landing headline. The design
   file referenced it without loading it, so it is added here. */

:root{
  --lodge-red: #7a0c0c;
  --lodge-red-bright: #b3121a;
  --curtain-red: #5a0a0a;
  --black-lodge: #0a0505;
  --off-white: #efe6d8;
  --gold: #c9a24b;
  --owl-green: #1f2b1f;
  --shadow: rgba(0,0,0,0.6);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--black-lodge);
  color: var(--off-white);
  /* Libre Franklin is the open-source Franklin Gothic revival; ITC
     Franklin Gothic itself is licensed and not distributable here. */
  font-family: 'Libre Franklin', 'Franklin Gothic Medium', 'ITC Franklin Gothic', Arial, sans-serif;
  /* clip, not hidden. `overflow-x: hidden` forces overflow-y to compute
     as auto, which makes html and body scroll containers, and a scroll
     container ancestor silently disables position:sticky on everything
     inside it. That is why the nav declared sticky but never stuck.
     `clip` suppresses the same sideways overflow without creating a
     scroll container, so the nav pins as intended. */
  overflow-x: clip;
}

h1, h2, h3, .display{
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}

a{ color: var(--gold); }

/* ---------- Chevron floor (Red Room) ---------- */
.chevron-floor{
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%);
  background-position: 40px 0, 40px 0, 0 0, 0 0;
  background-size: 80px 80px;
  background-color: var(--off-white);
}

.red-room-bg{
  position: relative;
  background: var(--lodge-red);
}
.red-room-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(45deg, rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,0.85) 25%, transparent 25%);
  background-position: 40px 0, 40px 0, 0 0, 0 0;
  background-size: 80px 80px;
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Velvet curtain ---------- */
.curtain{
  background: repeating-linear-gradient(
    90deg,
    var(--curtain-red) 0px,
    var(--lodge-red-bright) 18px,
    var(--curtain-red) 36px
  );
  box-shadow: inset 0 0 120px rgba(0,0,0,0.8);
}

/* ---------- Layout helpers ---------- */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 5vw;
  background: linear-gradient(180deg, rgba(10,5,5,0.92), rgba(10,5,5,0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,60,60,0.25);
}
.site-nav .brand{
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--off-white);
  text-decoration: none;
}
.site-nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0;
  padding: 0;
}
.site-nav a{
  color: #e3b23c;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}
.site-nav a:hover{
  color: #f3d089;
}

/* At phone widths the two links were wrapping a word at a time. Stacking
   the brand above them keeps each link on one line. */
@media (max-width: 560px){
  .site-nav{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
  }
  .site-nav ul{ gap: 24px; }
}

/* ---------- Buttons ---------- */
/* Every button on the site wears the landing page's "Enter the Lodge"
   treatment. Defined once and shared with .landing-cta so the two cannot
   drift apart; the landing selector is scoped to outrank the plain `a`
   colour rule, which is why it is spelled out rather than folded in. */
.btn,
.landing-hero .landing-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 38px;
  background: #8f0f16;
  color: #f6e9d8;
  border: 1px solid rgba(240,200,140,0.4);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(150,15,20,0.5);
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.btn:hover,
.landing-hero .landing-cta:hover{
  background: #b3121a;
  color: #fff;
  box-shadow: 0 0 44px rgba(200,30,35,0.7);
}
.btn:focus-visible,
.landing-hero .landing-cta:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* `primary` no longer distinguishes anything, but it stays valid so the
   existing markup keeps working. */
.btn.primary{ }

/* ---------- Flicker text ---------- */
.flicker{
  animation: flicker 6s infinite;
}
@keyframes flicker{
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.55; }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 40px 20px;
}
.hero .owl-eyes{
  font-size: 2.4rem;
  letter-spacing: 0.5em;
  margin-bottom: 18px;
  color: var(--gold);
}
.hero h1{
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  margin: 0 0 12px;
  color: var(--off-white);
  text-shadow: 0 0 30px rgba(179,18,26,0.6);
}
.hero .subtitle{
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 40px;
  font-style: italic;
}
.hero .quote{
  max-width: 560px;
  margin: 40px auto 0;
  font-size: 0.9rem;
  color: #b8a894;
  font-style: italic;
  line-height: 1.6;
}

/* ---------- Cards / grid ---------- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.card{
  background: #150a0a;
  border: 1px solid #3a1a1a;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
}
.card img, .card video{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: #000;
}

/* ---------- Modal / Lightbox ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(5,2,2,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.open{ display: flex; }
.modal-box{
  background: #120808;
  border: 1px solid var(--gold);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}
.modal-box img, .modal-box video{
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #000;
}
.modal-close{
  /* Its own row above the content, rather than floating over the top of
     the picture. margin-left:auto pushes it to the right of that row. */
  position: static;
  display: grid;
  place-items: center;
  margin: 0 0 10px auto;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--gold);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s;
}
.modal-close:hover{ color: var(--off-white); }
.modal-close:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Forms ---------- */
form.panel{
  background: #150a0a;
  border: 1px solid #3a1a1a;
  padding: 24px;
  margin: 24px 0;
}
label{
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
input[type=text], input[type=password], textarea, input[type=file]{
  width: 100%;
  padding: 10px 12px;
  background: #0a0505;
  border: 1px solid #3a1a1a;
  color: var(--off-white);
  font-family: 'Libre Franklin', 'Franklin Gothic Medium', 'ITC Franklin Gothic', Arial, sans-serif;
  margin-bottom: 16px;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, textarea:focus{
  outline: none;
  border-color: var(--gold);
}

/* ---------- Comments ---------- */
.comment-list{ margin-top: 18px; }
.comment{
  border-left: 2px solid var(--lodge-red-bright);
  padding: 8px 14px;
  margin-bottom: 12px;
  background: rgba(122,12,12,0.08);
}
.comment .who{
  color: var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.comment .when{
  color: #7a6a5a;
  font-size: 0.7rem;
  margin-left: 8px;
}
.comment .body{
  margin-top: 4px;
  font-size: 0.9rem;
  color: #e6dccc;
}

/* ---------- Password gate ---------- */
.gate{
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 40px 20px;
}
.gate .lock-line{
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #7a6a5a;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.gate form{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.gate input[type=password]{
  width: auto;
  min-width: 220px;
  margin-bottom: 0;
}
.error-msg{
  color: var(--lodge-red-bright);
  font-size: 0.85rem;
  margin-top: 14px;
  min-height: 1.2em;
}

/* ---------- Misc ---------- */
.hidden{ display: none !important; }
.center{ text-align: center; }
.muted{ color: #8a7a6a; }
.section{ padding: 60px 0; }
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  /* auto, not 0. This rule sits after .container and carries the same
     specificity, so `margin: 40px 0` was overriding that rule's
     `margin: 0 auto` and dragging any `divider container` element to the
     left edge. */
  margin: 40px auto;
}

/* ---------- landing page music toggle ---------- */
.music-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  /* Circular and icon only. 52px keeps it comfortably past the 44px
     minimum target even without a text label to enlarge it. */
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  color: #e8d9b0;
  background: rgba(12, 5, 5, 0.92);
  border: 1px solid var(--gold, #c9a24b);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
/* `display: grid` on the class above outranks the browser's built-in
   [hidden] { display: none }, so without this the button stays visible
   even when JS has hidden it. Any class that sets display has to opt
   back out of hidden explicitly. */
.music-toggle[hidden] { display: none; }

.music-toggle:hover {
  background: var(--lodge-red-bright, #b3121a);
  border-color: var(--gold, #c9a24b);
  color: #fff;
}
.music-toggle:focus-visible {
  outline: 2px solid var(--gold, #c9a24b);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle { transition: none; }
}

/* ---------- landing page: poster gate ---------- */
.poster-stage{
  position: relative;
  display: inline-block;
  line-height: 0;
  /* The spacing below the poster lives here, not on the image. Left on
     the image it becomes part of this box, and the centred play button
     ends up sitting half that margin too low. */
  margin-bottom: 6px;
}
.poster-stage .hero-photo{ margin-bottom: 0; }

.play-gate{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Far past the 44px minimum, and the main affordance on the page. */
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: rgba(10, 5, 5, 0.55);
  border: 2px solid var(--gold);
  box-shadow: 0 0 34px rgba(179, 18, 26, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  animation: gate-pulse 2.8s ease-in-out infinite;
}
.play-gate:hover{
  background: rgba(179, 18, 26, 0.75);
  box-shadow: 0 0 46px rgba(201, 162, 75, 0.75), inset 0 0 22px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(1.06);
}
.play-gate:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

/* Triangle drawn from borders so there is no icon file to load. Nudged
   right because a triangle looks off-centre when it is truly centred. */
.play-gate__icon{
  width: 0;
  height: 0;
  margin-left: 7px;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 28px solid var(--gold);
  transition: border-left-color 0.25s ease;
}
.play-gate:hover .play-gate__icon{ border-left-color: var(--off-white); }

.play-gate.is-gone{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: none;
}

@keyframes gate-pulse{
  0%, 100% { box-shadow: 0 0 30px rgba(179, 18, 26, 0.45), inset 0 0 22px rgba(0,0,0,0.55); }
  50%      { box-shadow: 0 0 52px rgba(179, 18, 26, 0.85), inset 0 0 22px rgba(0,0,0,0.55); }
}

/* ---------- landing page: revealed content ---------- */
/* The page does not glide in, it strikes on like the poster did. The
   rise was dropped with the fade: electric things do not slide. */
.reveal{ opacity: 0; }
.reveal.is-in{ animation: reveal-flicker 0.95s steps(1, end) both; }

/* The ON windows here are the source of the haptic pattern in
   index.html. Change one and change the other, or the buzz drifts out
   of step with the picture. */
@keyframes reveal-flicker{
  0%   { opacity: 0; }
  8%   { opacity: 0.85; }
  12%  { opacity: 0.1; }
  20%  { opacity: 1; }
  26%  { opacity: 0.15; }
  34%  { opacity: 0.95; }
  40%  { opacity: 0.3; }
  50%  { opacity: 1; }
  58%  { opacity: 0.55; }
  66%  { opacity: 1; }
  74%  { opacity: 0.8; }
  100% { opacity: 1; }
}

/* The poster shrinks on phones, so the button does too, or it swallows a
   third of the artwork. Still far above the 44px minimum target. */
@media (max-width: 600px){
  .play-gate{ width: 84px; height: 84px; }
  .play-gate__icon{
    margin-left: 6px;
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 23px;
  }
}

@media (prefers-reduced-motion: reduce){
  .play-gate,
  .play-gate:hover,
  .play-gate.is-gone{ animation: none; transition: none; transform: translate(-50%, -50%); }
  .reveal{ transition: none; transform: none; }
}

/* ---------- lightbox browsing arrows ---------- */
.lightbox-stage{
  position: relative;
}
/* An inline image leaves a few pixels of baseline gap beneath it, which
   makes this box taller than the picture and drops the arrows slightly
   below its true centre. */
#lightboxMedia img,
#lightboxMedia video{ display: block; }
.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* 52px square: a comfortable target on a phone, where these get the
     most use, without covering much of the photo. */
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--off-white);
  background: rgba(10, 5, 5, 0.6);
  border: 1px solid var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
/* A class that sets display outranks the browser's [hidden] rule, so
   opt back out explicitly or the arrows show with a single photo. */
.lightbox-nav[hidden]{ display: none; }
.lightbox-nav:hover{
  background: var(--lodge-red-bright);
  color: #fff;
}
.lightbox-nav:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.lightbox-nav--prev{ left: 8px; }
.lightbox-nav--next{ right: 8px; }

@media (max-width: 600px){
  .lightbox-nav{ width: 46px; height: 46px; font-size: 1.7rem; }
  .lightbox-nav--prev{ left: 2px; }
  .lightbox-nav--next{ right: 2px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox-nav{ transition: none; }
}

/* ============================================================
   Landing page, from the Claude Design pass.
   Applies to the content revealed after the play button.
   ============================================================ */
/* The lodge floor is the page, not a band inside it. Fixed attachment
   keeps it steady while the revealed content scrolls over it. */
body.landing-page{
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(120,15,20,0.55), transparent 70%),
    linear-gradient(180deg, #170606 0%, #260808 40%, #3d0a0c 75%, #170606 100%);
  background-attachment: fixed;
}

.landing-hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px 80px;
  background: none;
}

/* The chevron floor, sitting behind everything. */
.landing-chevrons{
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(0,0,0,0.85) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,0.85) 25%, transparent 25%);
  background-position: 40px 0, 40px 0, 0 0, 0 0;
  background-size: 80px 80px;
}

.landing-hero > *:not(.landing-chevrons):not(.landing-zigzag){ position: relative; z-index: 1; }
/* The sawtooth stays absolutely positioned at the foot of the section;
   it only needs to sit above the chevrons. */
.landing-zigzag{ z-index: 2; }

/* The poster is the whole entry screen, then settles to the size the
   design gives it once the rest of the page arrives around it. */
.poster-stage{
  transition: width 0.9s ease;
  width: min(88vw, 560px);
  /* `both` holds it at opacity 0 through the delay, so the herringbone
     is alone on screen before the poster arrives.
     steps(1,end) is what makes it read as electric rather than as a
     fade: each keyframe snaps to the next instead of easing between
     them, so the poster cuts in and out like a failing tube. */
  animation: poster-flicker-in 2.4s steps(1, end) 1.5s both;
}
@keyframes poster-flicker-in{
  /* Dead, then a couple of failed strikes. */
  0%, 5%    { opacity: 0;    filter: brightness(3) contrast(0.4); }
  6%        { opacity: 0.9;  filter: brightness(4) contrast(0.3); }
  7%        { opacity: 0;    filter: brightness(3) contrast(0.4); }
  13%       { opacity: 0.55; filter: brightness(3.4) contrast(0.5); }
  14%       { opacity: 0;    filter: none; }
  /* Catching, stuttering hard. */
  21%       { opacity: 1;    filter: brightness(2.6) contrast(0.6); }
  23%       { opacity: 0.1;  filter: brightness(1.6); }
  25%       { opacity: 0.95; filter: brightness(2.2) contrast(0.7); }
  26%       { opacity: 0.05; filter: none; }
  31%       { opacity: 1;    filter: brightness(1.9) contrast(0.8); }
  33%       { opacity: 0.3;  filter: brightness(1.2); }
  35%       { opacity: 1;    filter: brightness(1.6); }
  38%       { opacity: 0.6;  filter: none; }
  /* Mostly alight now, with the odd drop-out. */
  44%       { opacity: 1;    filter: brightness(1.35); }
  47%       { opacity: 0.25; filter: none; }
  51%       { opacity: 1;    filter: brightness(1.5) contrast(0.85); }
  55%       { opacity: 0.8;  filter: none; }
  61%       { opacity: 1;    filter: brightness(1.15); }
  66%       { opacity: 0.45; filter: none; }
  71%       { opacity: 1;    filter: brightness(1.25); }
  78%       { opacity: 0.9;  filter: none; }
  84%       { opacity: 1;    filter: brightness(1.08); }
  88%       { opacity: 0.75; filter: none; }
  92%, 100% { opacity: 1;    filter: none; }
}
@media (min-width: 900px){ .poster-stage{ width: min(46vw, 620px); } }
.poster-stage.is-compact{ width: min(70vw, 320px); }
.poster-stage .hero-photo{
  width: 100%;
  height: auto;
  border: 1px solid rgba(230,190,120,0.25);
  filter: drop-shadow(0 0 55px rgba(179,18,26,0.55));
}

.landing-hero .landing-title{
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  margin: 24px 0 0;
  color: #ff3b3b;
  animation: landing-flicker 7s infinite;
}
@keyframes landing-flicker{
  0%, 92%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(220,30,40,0.85), 0 0 46px rgba(220,30,40,0.5), 0 0 90px rgba(180,20,30,0.35); }
  93% { opacity: 0.55; text-shadow: 0 0 6px rgba(220,30,40,0.4); }
  94% { opacity: 1; }
  96% { opacity: 0.7; text-shadow: 0 0 8px rgba(220,30,40,0.5); }
  97% { opacity: 1; }
}

.landing-hero .landing-kicker{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  /* Was bottoming out at its 12px floor on a normal screen. */
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: 0.04em;
  color: #e9c98f;
  /* Pinyon Script's ink stops barely below the baseline, so with
     line-height 1 the bottom of the title's line box is mostly empty
     air. The negative top margin closes that gap optically rather than
     by the numbers, and scales with the title, which is itself sized
     from the viewport. */
  margin: clamp(-18px, -1.4vw, -8px) 0 32px;
}

.landing-hero .landing-headline{
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.01em;
  /* The lede's 1.8 line-height already contributes about 6px of
     half-leading above its first line, so the visible gap runs larger
     than this number. 10px lands near 16px on screen. */
  margin: 0 0 10px;
  color: var(--off-white);
  text-wrap: pretty;
}

.landing-hero .landing-lede{
  font-family: 'Inter', sans-serif;
  max-width: 620px;
  margin: 0 auto 44px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(242,230,216,0.72);
}

.landing-hero .landing-quote{
  max-width: 520px;
  margin: 44px auto 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(242,230,216,0.7);
}
.landing-hero .landing-quote .attribution{
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(242,230,216,0.45);
  text-transform: uppercase;
}

/* The sawtooth strip that closes the section. */
.landing-zigzag{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  opacity: 0.9;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, #0a0505 0 17px, #f2e6d8 17px 34px);
}

@media (prefers-reduced-motion: reduce){
  /* No flicker; the poster is simply there. The haptic pulse is skipped
     alongside it, in index.html. */
  .poster-stage{ animation: none; opacity: 1; }
  .reveal.is-in{ animation: none; opacity: 1; }
  .landing-hero .landing-title{ animation: none; text-shadow: 0 0 18px rgba(220,30,40,0.85); }
  .poster-stage, .landing-cta{ transition: none; }
}

/* ---------- music toggle in the header ---------- */
/* The slot is empty until the button is mounted; an empty list item would
   otherwise contribute the row's 32px gap and push the links leftward. */
.nav-music:empty{ display: none; }
.nav-music{ display: flex; align-items: center; }

.site-nav .music-toggle{
  position: static;
  width: 40px;
  height: 40px;
  /* Sits beside 13px links, so it is scaled to the bar rather than the
     52px it was as a floating control. */
  font-size: 0.95rem;
  margin: -6px 0;
}

/* ---------- a photo that carries a recording ---------- */
.card{ position: relative; }
.card-audio{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--black-lodge);
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  pointer-events: none;
}

.lightbox-audio{
  margin-top: 14px;
  padding: 12px 14px;
  background: #150a0a;
  border: 1px solid #3a1a1a;
}
.lightbox-audio[hidden]{ display: none; }
.lightbox-audio .audio-label{
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.lightbox-audio audio{ width: 100%; display: block; }

/* ---------- borderless button, reads as a link ---------- */
/* Keeps .btn's Inter, uppercase and tracking so it stays in the family,
   and drops everything that makes it look like a slab. */
.btn.btn-plain{
  padding: 6px 2px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--gold);
  gap: 8px;
}
.btn.btn-plain:hover{
  background: none;
  box-shadow: none;
  color: #f3d089;
}
.btn.btn-plain:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.btn-plain .btn-plus{
  font-size: 1.25em;
  line-height: 0;
  /* Optical nudge: the glyph sits high against uppercase text. */
  transform: translateY(1px);
}

/* ---------- breathing room at the foot of the content pages ---------- */
/* The footers are gone, so the grid and the wish list otherwise stop
   dead against the bottom edge. The landing page is excluded: it sizes
   itself to the viewport and does not want the extra scroll. */
body:not(.landing-page){
  padding-bottom: 96px;
}
@media (max-width: 600px){
  body:not(.landing-page){ padding-bottom: 64px; }
}