/* ===============================
   RiverBEAST base styles (site.css)
   Primary: November Rain
   Palette: black/white, aged/distressed
   =============================== */

/* --- Font face: prefer local, fall back to webfont --- */
@font-face {
  font-family: "November Rain";
  src:
    local("November Rain"),
    url("/fonts/November_Rain.ttf") format("truetype"),
    url("/fonts/November%20Rain.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Theme tokens --- */
:root{
  --bg: #0b0f14;     /* deep charcoal */
  --fg: #e5edf5;     /* off-white */
  --muted: #93a0ad;  /* smoky gray */
  --ink: #dfe7ef;    /* light ink */
  --panel: #121821;  /* card bg */
  --line: #1e2732;   /* hairline */
  --accent: #cfcfcf; /* keep b/w vibe */
}

/* --- Resets & base --- */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: "November Rain", system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  letter-spacing: 0.012em;
  text-rendering: optimizeLegibility;
}

/* --- Layout helpers --- */
.container{
  max-width: 980px;
  margin: 24px auto;
  padding: 16px;
}
.grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.tile{
  flex: 1 1 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* --- Header / hero --- */
.header {
  text-align: center;
  padding: 1.25rem 1rem 0.75rem;
  margin-bottom: 1rem;

  display: flex;
  flex-direction: column;   /* stack hero-title, tagline, subtitle vertically */
  align-items: center;      /* keep them centered */
  gap: 0.5rem;              /* spacing between lines */
}

/* big page title */
.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  display: block;
}

/* tagline sits under title */
.tagline {
  margin: 0.35rem 0 0;       /* space below the title */
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--muted);
  letter-spacing: .05em;
  display: block;
}

.subtitle {
  margin: 0.5rem 0 0;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: #f2b8b5;             /* soft warning red/pink */
  font-style: italic;
  letter-spacing: .04em;
}


/* --- Links / buttons (keep it monochrome) --- */
a{ color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink); }
a:hover{ opacity:.85; }

.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  background:#121821;
  color:var(--fg);
  border:1px solid var(--line);
  cursor:pointer;
}
.btn:hover{ border-color:#c7c7c7; }

/* --- Imagery: default desaturation for the aged look --- */
img, .poster-like{
  filter: grayscale(100%) contrast(1.05);
}
@media (hover:hover){
  img:hover, .poster-like:hover{
    filter: grayscale(15%) contrast(1.08);
    transition: filter .25s ease;
  }
}

/* --- HLS Player integration ---
   player.css draws the frame; we add final sizing + fix for square clips */
.player-wrap{
  position: relative;
  aspect-ratio: 1 / 1;     /* you asked to force square */
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.player-wrap video{
  width:100%;
  height:100%;
  object-fit: cover;       /* kill inner black borders in 1:1 */
  background:#000;
  display:block;
}

/* --- Optional: ratio utilities (use later if you want per-video control) --- */
.ratio-16-9 .player-wrap{ aspect-ratio: 16 / 9; }
.ratio-1-1  .player-wrap{ aspect-ratio: 1  / 1; }
.ratio-4-5  .player-wrap{ aspect-ratio: 4  / 5; }
.ratio-9-16 .player-wrap{ aspect-ratio: 9  /16; }

/* --- Footer / meta --- */
.meta{ color: var(--muted); font-size:.95rem; }

/* --- Small screens --- */
@media (max-width: 480px){
  .container{ padding:.75rem; }
  .header{ padding:1rem .75rem .5rem; }
}