@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&display=swap');
@font-face{
  font-family:'Almarena';
  src:url('AlmarenaDisplayBold.otf') format('opentype');
  font-weight:700;font-style:normal;
}
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#080808;
  --white:#f0ede6;
  --dim:rgba(240,237,230,0.45);
  --dimmer:rgba(240,237,230,0.18);
  --border:rgba(240,237,230,0.1);
  --font-display:'Almarena',sans-serif;
  --font-body:'DM Mono',monospace;
}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:var(--font-body);min-height:100vh;}
nav{
  display:flex;justify-content:center;align-items:center;
  padding:1.8rem 2rem 1.4rem;
  border-bottom:0.5px solid var(--border);
  gap:2rem;flex-wrap:wrap;
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,0.92);
  backdrop-filter:blur(8px);
}
nav a{
  font-family:var(--font-body);font-size:10px;
  letter-spacing:0.18em;color:var(--dim);
  text-decoration:none;text-transform:uppercase;
  transition:color 0.2s;
}
nav a:hover,nav a.active{color:var(--white);}
.page-header{
  padding:4rem 3rem 2.5rem;
  border-bottom:0.5px solid var(--border);
}
.page-title{
  font-family:var(--font-display);
  font-size:clamp(56px,10vw,120px);
  line-height:0.9;letter-spacing:0.02em;
  color:var(--white);
  opacity:0;animation:fadeUp 0.7s 0.1s forwards;
}
.content{padding:3rem;max-width:900px;}
.row{
  display:flex;align-items:center;
  padding:1.1rem 0;
  border-bottom:0.5px solid var(--border);
  gap:1.5rem;
  opacity:0;animation:fadeUp 0.5s forwards;
}
.row:last-child{border-bottom:none;}
.col-date{font-size:11px;color:var(--dim);min-width:120px;letter-spacing:0.06em;}
.col-main{font-size:14px;font-weight:400;flex:1;letter-spacing:0.04em;}
.col-sub{font-size:11px;color:var(--dim);letter-spacing:0.04em;}
.social-footer{
  display:flex;justify-content:center;gap:2rem;
  padding:2.5rem;border-top:0.5px solid var(--border);
  margin-top:2rem;flex-wrap:wrap;
}
.social-footer a{
  font-size:10px;letter-spacing:0.16em;
  color:var(--dimmer);text-decoration:none;
  text-transform:uppercase;transition:color 0.2s;
}
.social-footer a:hover{color:var(--white);}
.footer-copy{
  text-align:center;padding:1.2rem;
  font-size:10px;color:var(--dimmer);
  letter-spacing:0.1em;
  border-top:0.5px solid var(--border);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}