*{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;
}
.archive-page{
  min-height:100vh;
  padding:34px clamp(20px,4.8vw,76px) 76px;
}
.archive-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:clamp(62px,8vw,104px);
}
.archive-header a,
.archive-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;
}
.archive-intro{
  width:min(1040px,100%);
  margin:0 auto 42px;
}
.archive-intro p{
  margin:0 0 18px;
  color:rgba(156,168,162,.76);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.archive-intro h1{
  margin:0;
  color:rgba(238,228,185,.92);
  font:400 clamp(30px,4.4vw,58px)/1.08 "Cormorant Garamond",serif;
  letter-spacing:.012em;
}
.archive-subtitle{
  margin:18px 0 0;
  color:rgba(184,157,109,.82);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.archive-board{
  width:min(1180px,100%);
  margin:0 auto;
  border:1px solid rgba(216,202,152,.16);
  background:
    linear-gradient(180deg,rgba(7,20,19,.72),rgba(2,10,14,.84)),
    radial-gradient(circle at 70% 0%,rgba(216,202,152,.08),transparent 24rem);
}
.archive-row{
  display:grid;
  grid-template-columns:minmax(160px,.78fr) minmax(320px,1.8fr) minmax(170px,.72fr);
  gap:22px;
  align-items:center;
  min-height:82px;
  padding:18px clamp(18px,2.6vw,34px);
  border-top:1px solid rgba(216,202,152,.10);
}
.archive-row:first-child{border-top:0}
.archive-row-head{
  min-height:52px;
  color:rgba(156,168,162,.72);
  font:600 9px Inter,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.archive-row:not(.archive-row-head) > span:first-child{
  color:rgba(238,228,185,.86);
  font:400 20px/1.05 "Cinzel",serif;
  letter-spacing:.04em;
}
.archive-row p{
  margin:0;
  color:rgba(207,203,192,.76);
  font:300 14px/1.55 Inter,system-ui,sans-serif;
}
.archive-row a,
.archive-url-placeholder{
  color:rgba(184,157,109,.88);
  font:500 10px Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
}
.archive-feedback{
  width:min(1180px,100%);
  margin:28px auto 0;
  min-height:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:26px clamp(22px,3vw,38px);
  border:1px solid rgba(216,202,152,.18);
  background:
    linear-gradient(90deg,rgba(8,24,23,.76),rgba(3,12,16,.84)),
    radial-gradient(circle at 100% 0%,rgba(184,157,109,.11),transparent 20rem);
}
.archive-feedback p{
  margin:0 0 10px;
  color:rgba(156,168,162,.72);
  font:600 9px Inter,system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.archive-feedback h2{
  margin:0;
  max-width:620px;
  color:rgba(238,228,185,.86);
  font:300 clamp(20px,2.2vw,28px)/1.16 "Cormorant Garamond",serif;
  letter-spacing:.01em;
}
.archive-feedback a{
  flex:0 0 auto;
  min-width:168px;
  min-height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(184,157,109,.42);
  color:rgba(238,228,185,.88);
  font:600 10px Inter,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
}

@media(max-width:820px){
  .archive-row,
  .archive-row-head{
    grid-template-columns:1fr;
    gap:10px;
  }
  .archive-row-head{display:none}
  .archive-row{align-items:start}
  .archive-feedback{
    align-items:flex-start;
    flex-direction:column;
  }
  .archive-feedback a{width:100%}
}