@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --bg: #A9DEE3;
  --bg-card: #F3FAF9;
  --navy: #142B3D;
  --pink: #E8397A;
  --orange: #DD8A3D;
  --line: rgba(20,43,61,0.18);
  --radius: 2px;
  --max-w: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--navy);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.5;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
header.site-header{
  padding: 28px 0 0;
  border-bottom: 1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom: 18px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.logo-slot{
  width:52px; height:52px; border-radius:50%;
  background: var(--bg-card);
  border: 2px dashed var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; text-align:center; color: var(--navy); opacity:.65;
  overflow:hidden; flex-shrink:0;
}
.logo-slot img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.brand-title{
  font-family:'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform:uppercase;
}
.brand-tagline{ font-size: 12px; opacity:.75; margin-top:2px; }

nav.tabs{ display:flex; gap: 26px; flex-wrap:wrap; }
nav.tabs a{
  font-family:'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding: 6px 0;
  border-bottom: 3px solid transparent;
}
nav.tabs a:hover, nav.tabs a.active{ border-bottom-color: var(--pink); }

.rule{ height:5px; background: var(--pink); border:none; margin: 0; }
.dots{
  height:14px;
  background-image: radial-gradient(var(--navy) 1.6px, transparent 1.6px);
  background-size: 10px 10px;
  opacity:.35;
  margin: 10px 0 26px;
}

/* ---------- Hero / page title ---------- */
.page-hero{ padding: 34px 0 6px; }
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color: var(--pink);
}
h1.page-title{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  text-transform:uppercase;
  margin: 6px 0 18px;
}
.lede{ font-size:16px; max-width: 640px; opacity:.85; margin-bottom: 8px; }

/* ---------- Sections ---------- */
section{ padding: 34px 0; }
h2.section-title{
  font-family:'Archivo Black', sans-serif;
  font-size: 22px;
  text-transform:uppercase;
  margin: 0 0 18px;
}

/* ---------- Cards / grid ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  display:flex; flex-direction:column;
  transition: transform .15s ease;
}
.card:hover{ transform: translateY(-3px); }
.card-media{
  aspect-ratio: 16/10;
  background: repeating-linear-gradient(135deg, rgba(20,43,61,.08) 0 10px, rgba(20,43,61,.02) 10px 20px);
  overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding: 16px 18px 20px; flex:1; display:flex; flex-direction:column; }
.card-meta{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--pink); margin-bottom:6px; }
.card-title{ font-family:'Archivo Black', sans-serif; font-size:17px; text-transform:uppercase; margin:0 0 8px; line-height:1.15; }
.card-summary{ font-size:14px; opacity:.85; flex:1; }
.card-link{ margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.card-link::after{ content:" \2192"; }

.badge{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding: 3px 8px; border:1px solid var(--navy); border-radius: 20px; margin-left:8px;
}
.badge.pinned{ background: var(--pink); border-color: var(--pink); color:#fff; }
.badge.past{ opacity:.5; }

.empty-state{
  border:1px dashed var(--line); padding: 26px; font-size:14px; opacity:.7;
}

/* ---------- Detail / item page ---------- */
.item-hero-media{
  width:100%; aspect-ratio: 16/7; background: repeating-linear-gradient(135deg, rgba(20,43,61,.08) 0 10px, rgba(20,43,61,.02) 10px 20px);
  overflow:hidden; margin-bottom: 20px;
}
.item-hero-media img{ width:100%; height:100%; object-fit:cover; }
.item-meta-row{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; opacity:.8; margin-bottom: 20px; }
.item-body{ font-size:16px; max-width: 720px; white-space: pre-line; }
.back-link{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; display:inline-block; margin-bottom:22px; }
.back-link::before{ content:"\2190 "; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding: 26px 0 40px; margin-top: 30px; font-size:12px; opacity:.7; }
footer a{ text-decoration:underline; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:'Archivo Black', sans-serif; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  background: var(--navy); color:#fff; padding: 12px 20px; border:none; cursor:pointer;
}
.btn.secondary{ background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn.pink{ background: var(--pink); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

@media (max-width: 640px){
  .header-row{ flex-direction:column; align-items:flex-start; }
  nav.tabs{ gap: 16px; }
}