/* ============================================================
   I'LL GO FOR A RUN — Brand effects & recipes
   Requires colors_and_type.css to be loaded first.
   ============================================================ */

/* ---- Distressed / grunge display type ----------------------
   Approximation of the thumbnail's eroded headline texture
   using a layered noise mask. Use ONLY on big Bebas display
   words (thumbnails, hero). For production thumbnails, a real
   grain PNG mask gives a crisper result; swap --grain-url.
   ------------------------------------------------------------ */
:root {
  --grain-url: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.05'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/></svg>"); /* @kind other */
}

.distress {
  position: relative;
  display: inline-block;
  -webkit-mask-image: var(--grain-url);
          mask-image: var(--grain-url);
  -webkit-mask-size: 180px 180px;
          mask-size: 180px 180px;
}

/* Hero headline = orange + distressed + soft drop for photo legibility */
.headline-stamp {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--orange);
  line-height: .86;
  letter-spacing: .015em;
  text-shadow: 0 3px 18px rgba(8,11,15,.55);
}
.headline-stamp.on-photo { text-shadow: 0 2px 2px rgba(8,11,15,.5), 0 6px 28px rgba(8,11,15,.6); }
.headline-white { color: var(--white); }

/* ---- Episode badge (ep. 1) --------------------------------- */
.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--white);
  padding: .5em .8em;
  border-radius: 12px;
  background: rgba(14,17,22,.78);
  border: 2px solid var(--summit-gold);
  box-shadow: 0 4px 14px rgba(8,11,15,.5);
  letter-spacing: .01em;
  backdrop-filter: blur(2px);
}
.ep-badge .n { color: var(--summit-gold); }

/* ---- Wordmark lockups (rendered from type, not bitmap) ----- */
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .9;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}
.wordmark .go { color: var(--orange); }

.series-lockup { display: inline-flex; flex-direction: column; gap: .1em; }
.series-lockup .title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--orange);
  line-height: .85;
  letter-spacing: .02em;
}
.series-lockup .twice {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--white);
  line-height: .85;
  letter-spacing: .06em;
}
/* the brand's dotted framing is written literally in the markup: "..Twice." */

/* ---- Photo protection gradient ----------------------------- */
.photo-scrim { position: relative; overflow: hidden; }
.photo-scrim > img,
.photo-scrim > .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.photo-scrim::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
    rgba(13,15,18,.92) 0%, rgba(13,15,18,.55) 30%, rgba(13,15,18,0) 62%);
}
.photo-scrim > .content { position: relative; z-index: 2; }

/* ============================================================
   COMPONENT RECIPES
   ============================================================ */

/* Buttons -------------------------------------------------- */
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.25em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  text-decoration: none;
}
.btn-primary { background: var(--orange); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow-orange); }
.btn-primary:active { background: var(--accent-press); transform: scale(.98); }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-500); }
.btn-ghost:active { transform: scale(.98); }

.btn-subscribe { /* YouTube-style solid pill */
  background: var(--orange); color: var(--on-accent);
  border-radius: var(--r-pill); padding: .7em 1.3em; font-weight: 700;
}
.btn-subscribe:hover { background: var(--accent-hover); }

/* Cards ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-light {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Tag / chip ----------------------------------------------- */
.chip {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .45em .8em; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--fg-muted);
  border: 1px solid var(--border);
}
.chip-accent { background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }

/* Focus ring ----------------------------------------------- */
:where(a,button,input,[tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}