/* --------------------------------------------------
LASTHOUSE.LA
AI CONSOLE STYLE
mobile-first • IBM Plex Mono + Fabriga
-------------------------------------------------- */

/* ---------- Fonts ---------- */
/* Assumes these files exist:
   /public_html/lasthouse.la/fonts/Fabriga-Regular.woff2
   /public_html/lasthouse.la/fonts/Fabriga-Regular.woff
*/
@font-face{
  font-family:"Fabriga";
  src:url("../fonts/Fabriga-Regular.woff2") format("woff2"),
      url("../fonts/Fabriga-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0c0c0c;
  --panel:#121212;
  --soft:#1a1a1a;
  --line:#2a2a2a;

  --text:#f2f2f2;
  --muted:#9a9a9a;

  --accent:#ff7a18;
  --accent2:#ffb347;

  --radius:14px;
}

/* ---------- Reset ---------- */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Mono", monospace;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:var(--accent2);
  text-decoration:none;
}

a:hover{ text-decoration:underline; }

.link{
  color:var(--accent2);
  text-decoration:none;
}

.link:hover{ text-decoration:underline; }

/* ---------- Layout ---------- */

.wrap{
  max-width:760px;
  margin:auto;
  padding:22px 16px 60px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
}

/* ---------- Topbar ---------- */

.topbar{
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  background:#0a0a0a;
}

.topbar__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.brand__mark{ width:24px; }

.brand__text{
  font-size:13px;
  letter-spacing:.05em;
}

.nav{
  display:flex;
  gap:12px;
}

.nav__link{
  font-size:12px;
  opacity:.8;
}

.nav__link:hover{ opacity:1; }

.topbar__meta{ margin-top:6px; }

/* ---------- Hero ---------- */

.hero__kicker{
  font-size:11px;
  color:var(--muted);
  margin-bottom:8px;
}

.hero__title{
  font-family:"Fabriga", sans-serif;
  font-size:30px;
  line-height:1.2;
  margin:0 0 10px;
}

.glow{ color:var(--accent2); }

.hero__sub{
  color:var(--muted);
  font-size:14px;
}

/* ---------- Video ---------- */

.mediaframe{
  margin-top:14px;
  position:relative;
}

.mediaframe__video{
  width:100%;
  border-radius:10px;
}

.mediaframe__caption{
  position:absolute;
  bottom:6px;
  right:10px;
  font-size:10px;
  color:#fff;
  opacity:.85;
}

/* ---------- Buttons ---------- */

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

.btn{
  background:var(--accent);
  color:#000;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  display:inline-block;
}

/* ---------- Chips ---------- */

.chips{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  font-size:11px;
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:999px;
}

/* ---------- Chat ---------- */

.chat__row{ margin-bottom:12px; }

.bubble{
  border-radius:12px;
  padding:12px;
  border:1px solid var(--line);
}

.bubble__label{
  font-size:10px;
  color:var(--muted);
  margin-bottom:4px;
}

.bubble--user{ background:#1c1c1c; }
.bubble--ai{ background:#161616; }

.bubble__text{ font-size:14px; }

.chat__footer{ margin-top:8px; }

/* ---------- Section Head ---------- */

.sectionhead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

.sectionhead__title{
  font-family:"Fabriga", sans-serif;
  font-size:18px;
  margin:0;
}

.sectionhead__sub{ margin:0; }

/* ---------- Carousel ---------- */

.carousel{
  position:relative;
  overflow:hidden;
  margin-top:10px;
  border-radius:10px;
}

.carousel__track{
  display:flex;
  transition:transform .35s ease;
  will-change:transform;
}

.carousel__slide{
  min-width:100%;
  padding:0;          /* important: prevents “partial” peeking */
  margin:0;
}

.carousel__slide img{
  width:100%;
  border-radius:10px;
}

.carousel__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-size:20px;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.carousel__btn:active{ transform:translateY(-50%) scale(.98); }

.carousel__btn--prev{ left:6px; }
.carousel__btn--next{ right:6px; }

.carousel__dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

.carousel__dots button{
  width:6px;
  height:6px;
  border-radius:50%;
  border:none;
  background:#444;
  cursor:pointer;
}

.carousel__dots button.active{ background:var(--accent); }

/* ---------- Grid ---------- */

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.tile{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:var(--soft);
}

.tile__title{
  font-family:"Fabriga", sans-serif;
  font-size:16px;
  margin-bottom:4px;
}

.tile__sub{ color:var(--muted); }

/* ---------- Prompt box ---------- */

.prompt{ margin-top:10px; }

.prompt__label{ margin-bottom:4px; }

.prompt__box{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#0f0f0f;
}

.prompt__lead{
  color:var(--accent);
  margin-right:6px;
}

/* ---------- Footer ---------- */

.footer{
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:16px;
}

.footer__grid{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.footer__title{
  font-family:"Fabriga", sans-serif;
  font-size:16px;
}

.tiny{
  font-size:11px;
  color:var(--muted);
}

/* ---------- Mobile tweaks ---------- */

@media (max-width:480px){
  .hero__title{ font-size:26px; }
  .grid2{ grid-template-columns:1fr; }
  .nav{ display:none; }
}