/* =========================================================
   Lumenstory ISE UI Kit (Apple-like clean)
   - Brand: #FCD604
   - Dark:  #161616
   - Text:  #3F3F3F
   - Base:  #F5F5F5
========================================================= */

:root{
  /* Colors */
  --brand: #FCD604;
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --ink: #161616;
  --text: #3F3F3F;
  --muted: #6B6B6B;
  --line: rgba(22,22,22,0.10);

  /* Accent behavior */
  --brand-ink: #161616; /* text on brand */
  --focus: rgba(252,214,4,0.38);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-0: 0.875rem; /* 14 */
  --fs-1: 1rem;     /* 16 */
  --fs-2: 1.125rem; /* 18 */
  --fs-3: 1.25rem;  /* 20 */
  --fs-4: 1.5rem;   /* 24 */
  --fs-5: 2rem;     /* 32 */
  --fs-6: 2.5rem;   /* 40 */
  --lh: 1.55;

  /* Spacing */
  --r-1: 12px;
  --r-2: 16px;
  --r-3: 20px;
  --r-4: 24px;

  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 20px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;

  /* Shadows (very subtle) */
  --shadow-1: 0 1px 2px rgba(22,22,22,0.06), 0 8px 24px rgba(22,22,22,0.06);
  --shadow-2: 0 2px 6px rgba(22,22,22,0.08), 0 16px 40px rgba(22,22,22,0.08);

  /* Layout */
  --container: 1100px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
}

/* Base reset */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }
::selection{ background: rgba(252,214,4,0.35); }

.container{
  width: min(var(--container), calc(100% - 2*var(--s-6)));
  margin-inline: auto;
}

.section{
  padding: var(--s-9) 0;
}
.section--tight{ padding: var(--s-8) 0; }
.section--top{ padding-top: var(--s-9); padding-bottom: var(--s-7); }
.section--bottom{ padding-top: var(--s-7); padding-bottom: var(--s-9); }

.surface{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}

.divider{
  height: 1px;
  background: var(--line);
  width: 100%;
}

.eyebrow{
  font-size: var(--fs-0);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

h1,h2,h3,h4{
  margin: 0 0 var(--s-3);
  color: var(--ink);
  letter-spacing: -0.02em;
}
p{ margin: 0 0 var(--s-4); }
.lead{
  font-size: var(--fs-2);
  color: var(--text);
  max-width: 68ch;
}
.small{ font-size: var(--fs-0); color: var(--muted); }
.muted{ color: var(--muted); }

.kicker{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-0);
  color: var(--ink);
  background: rgba(252,214,4,0.18);
  border: 1px solid rgba(252,214,4,0.45);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Type scale (responsive) */
.h1{
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  line-height: 1.08;
}
.h2{
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.14;
}
.h3{
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.2;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  user-select: none;
  white-space: nowrap;
}
.btn:hover{ box-shadow: var(--shadow-1); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(0.99); }
.btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

.btn--brand{
  background: var(--brand);
  border-color: rgba(0,0,0,0.12);
  color: var(--brand-ink);
}
.btn--ghost{
  background: transparent;
}
.btn--dark{
  background: var(--ink);
  border-color: rgba(22,22,22,0.4);
  color: #fff;
}
.btn--sm{ padding: 9px 12px; font-size: var(--fs-0); }
.btn--block{ width: 100%; }

/* Pill links / tags */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.card--tight{ padding: var(--s-5); }
.card--flat{ box-shadow: none; }
.card__title{ margin: 0 0 var(--s-2); color: var(--ink); font-weight: 700; }
.card__meta{ color: var(--muted); font-size: var(--fs-0); margin-bottom: var(--s-3); }
.card__actions{ display:flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }

/* Layout helpers */
.grid{
  display: grid;
  gap: var(--s-5);
}
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 920px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

.stack{ display:flex; flex-direction: column; gap: var(--s-4); }
.cluster{ display:flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.hero{
  padding: var(--s-9) 0 var(--s-7);
}
.hero__wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 920px){
  .hero__wrap{ grid-template-columns: 1fr; }
}
.hero__panel{
  padding: var(--s-6);
  border-radius: var(--r-4);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
}
.hero__poster{
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.hero__poster img{
  width: 100%;
  height: auto;
}

/* Media embed */
.embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow-1);
}
.embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* Header / Nav */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(245,245,245,0.72);
  border-bottom: 1px solid rgba(22,22,22,0.08);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
  gap: var(--s-4);
}
.brand{
  display:flex; align-items:center; gap: 12px;
  font-weight: 700;
  color: var(--ink);
}
.brand__mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--brand);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.brand__name{ letter-spacing: -0.02em; }

.nav{
  display:flex;
  align-items:center;
  gap: var(--s-2);
}
.nav a{
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav a:hover{
  background: rgba(255,255,255,0.75);
  border-color: rgba(22,22,22,0.10);
}
.nav a[aria-current="page"]{
  background: rgba(252,214,4,0.18);
  border-color: rgba(252,214,4,0.45);
}

.nav__cta{ display:flex; gap: var(--s-2); align-items:center; }
.nav__toggle{
  display:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.75);
  border-radius: 999px;
  padding: 10px 12px;
}
@media (max-width: 920px){
  .nav{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

/* Mobile drawer */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
  z-index: 60;
}
.drawer{
  position: fixed;
  top: 14px;
  right: 14px;
  width: min(360px, calc(100% - 28px));
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(22,22,22,0.12);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-2);
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  z-index: 70;
}
.drawer__inner{ padding: var(--s-5); }
.drawer__top{ display:flex; justify-content: space-between; align-items:center; margin-bottom: var(--s-4); }
.drawer__links{ display:flex; flex-direction: column; gap: 8px; }
.drawer__links a{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(22,22,22,0.10);
  background: rgba(245,245,245,0.65);
}
.drawer__links a:hover{ background: rgba(252,214,4,0.16); border-color: rgba(252,214,4,0.35); }
.drawer__cta{ margin-top: var(--s-4); display:flex; flex-direction: column; gap: var(--s-2); }

body.is-drawer-open .drawer-backdrop{ opacity: 1; pointer-events: auto; }
body.is-drawer-open .drawer{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

/* Footer */
.site-footer{
  padding: var(--s-8) 0;
  border-top: 1px solid rgba(22,22,22,0.10);
  background: rgba(245,245,245,0.92);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--s-7);
}
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer-links a{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,22,22,0.10);
  background: rgba(255,255,255,0.7);
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Utilities */
.sr-only, .visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.max-ch{ max-width: 70ch; }
.center{ text-align:center; }
.spacer{ height: var(--s-6); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .btn{ transition: none; }
  .drawer, .drawer-backdrop{ transition: none; }
}