*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:#f4f0df;
  background:
    linear-gradient(180deg,rgba(6,16,15,.88),rgba(2,8,13,.96)),
    url("../assets/hero-integrated.jpg") center top/cover no-repeat,
    #06100f;
  font-family:Inter,system-ui,sans-serif;
}
.long-page{
  min-height:100vh;
  padding:34px clamp(20px,4.8vw,76px) 76px;
}
.long-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:clamp(58px,8vw,94px);
}
.long-header a,
.long-header span{
  color:rgba(226,213,182,.74);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
}
.long-intro{
  width:min(1120px,100%);
  margin:0 auto 34px;
}
.long-intro p{
  margin:0 0 16px;
  color:rgba(156,168,162,.76);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.long-intro h1{
  margin:0;
  max-width:880px;
  color:rgba(238,228,185,.92);
  font:400 clamp(34px,4.8vw,66px)/1.04 "Cormorant Garamond",serif;
  letter-spacing:.012em;
}
.insight-grid{
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}
.insight-block{
  min-height:640px;
  display:flex;
  flex-direction:column;
  --insight-accent:rgba(216,202,152,.58);
  --insight-accent-soft:rgba(216,202,152,.14);
  --insight-panel:rgba(216,202,152,.055);
  border:1px solid var(--insight-accent);
  border-top:5px solid var(--insight-accent);
  background:
    linear-gradient(180deg,var(--insight-panel),rgba(2,10,14,.88)),
    linear-gradient(180deg,rgba(7,20,19,.84),rgba(2,10,14,.92));
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.insight-block[data-topic="memory"]{
  --insight-accent:rgba(226,213,182,.74);
  --insight-accent-soft:rgba(226,213,182,.18);
  --insight-panel:rgba(226,213,182,.075);
}
.insight-block[data-topic="machines"]{
  --insight-accent:rgba(111,176,172,.78);
  --insight-accent-soft:rgba(111,176,172,.18);
  --insight-panel:rgba(111,176,172,.075);
}
.insight-block[data-topic="life"]{
  --insight-accent:rgba(184,157,109,.80);
  --insight-accent-soft:rgba(184,157,109,.20);
  --insight-panel:rgba(184,157,109,.08);
}
.insight-block > header{
  min-height:196px;
  padding:24px 24px 20px;
  border-bottom:1px solid var(--insight-accent);
  background:linear-gradient(180deg,var(--insight-accent-soft),rgba(2,10,14,.08));
}
.insight-block > header span{
  color:var(--insight-accent);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.18em;
}
.insight-block h2{
  margin:14px 0 12px;
  color:rgba(238,228,185,.90);
  font:400 31px/1 "Cinzel",serif;
  letter-spacing:.025em;
}
.insight-block header p{
  margin:0;
  color:rgba(207,203,192,.74);
  font:300 14px/1.55 Inter,system-ui,sans-serif;
}
.insight-block header small{
  display:block;
  margin-top:16px;
  color:var(--insight-accent);
  font:600 9px Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.insight-form{
  display:grid;
  gap:12px;
  padding:20px 22px;
  border-bottom:1px solid var(--insight-accent-soft);
  background:rgba(1,8,11,.26);
}
.insight-form label{
  display:grid;
  gap:7px;
}
.insight-form label span{
  color:rgba(226,213,182,.72);
  font:600 9px Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.insight-form input,
.insight-form textarea{
  width:100%;
  border:1px solid rgba(216,202,152,.16);
  background:rgba(3,12,16,.66);
  color:rgba(244,240,223,.88);
  font:300 14px/1.55 Inter,system-ui,sans-serif;
}
.insight-form input{
  min-height:42px;
  padding:0 12px;
}
.insight-form textarea{
  min-height:104px;
  padding:12px;
  resize:vertical;
}
.insight-form button{
  min-height:38px;
  border:1px solid var(--insight-accent);
  background:rgba(6,16,15,.48);
  color:rgba(238,228,185,.88);
  font:600 10px Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.insight-thread{
  flex:1;
  display:grid;
  align-content:start;
  gap:16px;
  max-height:420px;
  overflow:auto;
  padding:20px 18px 22px;
  scrollbar-color:rgba(184,157,109,.46) rgba(3,12,16,.42);
}
.empty-thread{
  margin:0;
  color:rgba(156,168,162,.70);
  font:300 14px/1.6 Inter,system-ui,sans-serif;
}
.insight-comment{
  border:1px solid var(--insight-accent-soft);
  border-left:6px solid var(--insight-accent);
  padding:16px 16px 16px 18px;
  background:
    linear-gradient(90deg,var(--insight-accent-soft),rgba(2,10,14,.62) 42%),
    rgba(2,10,14,.62);
  display:grid;
  gap:9px;
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.insight-comment strong{
  color:rgba(238,228,185,.86);
  font:400 19px/1 "Cormorant Garamond",serif;
}
.insight-comment time{
  color:rgba(156,168,162,.62);
  font:500 9px Inter,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:block;
}
.insight-comment p{
  margin:0;
  color:rgba(207,203,192,.78);
  font:300 14px/1.6 Inter,system-ui,sans-serif;
}
@media(max-width:1100px){
  .insight-grid{grid-template-columns:1fr}
  .insight-block{min-height:auto}
  .insight-thread{max-height:360px}
}