/* assets/css/styles.css */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.12);
  --max:1100px;
  --pad:clamp(16px,2.6vw,28px);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.01em;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.bg{
  background:
    radial-gradient(1200px 600px at 30% 10%, rgba(255,255,255,.07), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 70% 30%, rgba(255,255,255,.05), rgba(0,0,0,0)),
    var(--bg);
}

/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:30;
  background: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.topbar__inner{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.92;
}
.nav{display:flex; gap:16px; align-items:center}
.nav__link{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.75;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav__link:hover{opacity:.95; border-color:var(--line)}
.nav__link.is-active{opacity:.98; border-color:var(--line)}

/* Page */
.page{
  padding-top:72px;
  min-height:100vh;
}
.page__intro{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:calc(var(--pad) + 14px) var(--pad) var(--pad);
}
.page__title{
  margin:0 0 10px;
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing:.04em;
}
.page__lead{
  margin:0;
  color:var(--muted);
  max-width:70ch;
  line-height:1.55;
}

/* Controls */
.controls{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.input{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--fg);
  border-radius:999px;
  padding:10px 14px;
  min-width:min(380px, 92vw);
  outline:none;
}
.input::placeholder{color:rgba(255,255,255,.35)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.chip:hover{color:rgba(255,255,255,.9)}
.chip.is-active{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.96);
}

/* Stack */
.stack{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:0 var(--pad) calc(var(--pad)*2);
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Card */
.card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.card__row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: clamp(280px, 42vw, 420px);
}
.card.is-right .card__row{
  grid-template-columns: 1fr 1.35fr;
}

/* Media */
.card__media{
  position:relative;
  display:flex;
  overflow:hidden;
  background:
    radial-gradient(600px 300px at 30% 30%, rgba(255,255,255,.18), rgba(0,0,0,0)),
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(0,0,0,0)),
    #000;
}

.card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}

/* Fade lives INSIDE media so it never dims the text
   Values tuned in DevTools */
.card__media .card__fade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.012) 30%,
    rgba(0, 0, 0, 0.035) 48%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Optional: mirrored cards (only relevant if you add .card.is-right in HTML/JS) */
.card.is-right .card__media .card__fade{
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.012) 30%,
    rgba(0, 0, 0, 0.035) 48%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Content */
.card__content{
  position:relative;
  z-index:3;
  padding: clamp(18px, 3vw, 26px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;

  /* tuned in DevTools */
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 1) 100%);
}

.card__kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted2);
}
.card__title{
  margin:0;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing:.04em;
  line-height:1.2;
}
.card__title a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.28);
}
.card__title a:hover{
  text-decoration-color: rgba(255,255,255,.6);
}
.card__summary{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:65ch;
}
.card__meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.45);
  font-size:12px;
}
.tag{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px 10px;
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px var(--pad) 26px;
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:rgba(255,255,255,.45);
  font-size:12px;
}
.footer__link{opacity:.8}
.footer__link:hover{opacity:1}
.sep{opacity:.25}

/* Utility */
.h2{margin:24px 0 10px; font-size:16px; letter-spacing:.12em; text-transform:uppercase; opacity:.9}
.p{margin:0; color:var(--muted); line-height:1.6; max-width:75ch}
.ul{margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.7}
.code{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  padding:2px 6px;
}

.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Mobile */
@media (max-width: 860px){

  .card__row{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .card__media{
    height: min(46vh, 380px);
  }

  .card__img{
    object-position: center 35%;
  }

  /* Vertical fade on mobile */
  .card__media .card__fade{
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.18) 32%,
      rgba(0, 0, 0, 0.62) 62%,
      rgba(0, 0, 0, 1) 78%,
      rgba(0, 0, 0, 1) 100%
    );
  }

  .card__content{
    padding-top:22px;
  }

  .controls{gap:10px}
  .chips{row-gap:8px}
  .input{min-width:100%}
}

/* Landing */
.landing{
  position:relative;
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.landing__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.landing__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));
  pointer-events:none;
}
.landing__copy{
  position:relative;
  z-index:10;
  text-align:center;
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.landing__title{
  margin:0 0 14px;
  font-size:clamp(32px, 5vw, 56px);
  letter-spacing:.04em;
}
.landing__subtitle{
  margin:0 auto 28px;
  color:var(--muted);
  font-size:clamp(14px, 2vw, 18px);
  line-height:1.6;
  max-width:60ch;
}
.landing__cta{
  margin-top:24px;
}
.btn{
  display:inline-block;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:var(--fg);
  border-radius:999px;
  padding:12px 24px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:all .2s;
}
.btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
  opacity:1;
}
.landing__hint{
  position:absolute;
  bottom:var(--pad);
  left:50%;
  transform:translateX(-50%);
  z-index:10;
}
.hint{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted2);
  opacity:.6;
}
.is-hidden{display:none}
.is-visible{display:flex}