/* =========================================================
   PITCH. / DEVLOG
   ========================================================= */

.devlog-page { min-height: 100vh; }
.devlog-shell { min-height: calc(100vh - 80px); padding: 116px 0 88px; }
.devlog-container { width: min(1180px, calc(100% - 40px)); }

.devlog-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 12px 0 38px;
}
.devlog-hero__copy { max-width: 790px; }
.devlog-kicker,
.devlog-entry__tag,
.devlog-aside-label {
  display: block;
  color: #00ff66;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.devlog-kicker { margin-bottom: 14px; }
.devlog-hero h1 {
  margin: 0;
  color: #f4f7f8;
  font-size: clamp(48px, 6vw, 82px);
  line-height: .94;
  font-weight: 760;
  letter-spacing: -.055em;
}
.devlog-hero h1 span { color: #00ff66; }
.devlog-hero p {
  max-width: 700px;
  margin: 20px 0 0;
  color: rgba(222,229,233,.58);
  font-size: 15px;
  line-height: 1.7;
}
.devlog-hero__status {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(0,255,102,.15);
  border-radius: 16px;
  background: rgba(0,255,102,.035);
}
.devlog-live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #00ff66; box-shadow: 0 0 16px rgba(0,255,102,.6); }
.devlog-hero__status small { display:block; margin-bottom: 2px; color: rgba(222,229,233,.36); font-size: 11px; font-weight: 760; letter-spacing: .14em; }
.devlog-hero__status strong { color: #e9edef; font-size: 12px; font-weight: 650; }

.devlog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  margin-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,.065);
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.devlog-filters { display:flex; flex-wrap:wrap; gap:8px; }
.devlog-filter {
  appearance:none;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  background:rgba(255,255,255,.022);
  color:rgba(226,232,236,.48);
  padding:8px 12px;
  font:inherit;
  font-size: 12px;
  font-weight:650;
  cursor:pointer;
  transition:.18s ease;
}
.devlog-filter:hover { color:#edf1f3; border-color:rgba(255,255,255,.13); }
.devlog-filter.is-active { color:#00ff66; border-color:rgba(0,255,102,.28); background:rgba(0,255,102,.055); }
.devlog-count { color:rgba(226,232,236,.3); font-size: 12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

.devlog-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; align-items:start; }
.devlog-list { display:grid; gap:12px; }
.devlog-entry {
  position:relative;
  overflow:hidden;
  padding:28px 30px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.devlog-entry::before { content:""; position:absolute; left:0; top:24px; bottom:24px; width:2px; border-radius:2px; background:rgba(255,255,255,.08); }
.devlog-entry--latest { border-color:rgba(0,255,102,.16); background:radial-gradient(circle at 85% 0,rgba(0,255,102,.065),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012)); }
.devlog-entry--latest::before { background:#00ff66; box-shadow:0 0 20px rgba(0,255,102,.45); }
.devlog-entry.is-hidden { display:none; }
.devlog-entry__meta { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:17px; }
.devlog-entry__meta time,.devlog-entry__number { color:rgba(225,232,236,.35); font-size: 12px; font-weight:650; letter-spacing:.08em; }
.devlog-entry__tag { margin-bottom:10px; }
.devlog-entry h2 { margin:0; color:#f0f4f5; font-size:clamp(24px,3.2vw,36px); line-height:1.04; font-weight:690; letter-spacing:-.035em; }
.devlog-entry > p { max-width:790px; margin:14px 0 0; color:rgba(224,230,234,.57); font-size:14px; line-height:1.72; }

.devlog-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:24px; }
.devlog-feature { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:15px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(0,0,0,.12); }
.devlog-feature > span { color:#00ff66; font-size: 12px; font-weight:760; letter-spacing:.1em; }
.devlog-feature strong { display:block; margin-bottom:5px; color:#dce2e5; font-size:12px; font-weight:650; }
.devlog-feature p { margin:0; color:rgba(221,228,232,.45); font-size:13px; line-height:1.6; }
.devlog-points { display:grid; gap:8px; margin:21px 0 0; padding:0; list-style:none; }
.devlog-points li { position:relative; padding-left:17px; color:rgba(224,230,234,.56); font-size:13px; line-height:1.6; }
.devlog-points li::before { content:""; position:absolute; left:1px; top:.65em; width:5px; height:5px; border-radius:50%; background:#00ff66; box-shadow:0 0 9px rgba(0,255,102,.35); }
.devlog-entry__footer { display:flex; flex-wrap:wrap; gap:7px; margin-top:23px; padding-top:17px; border-top:1px solid rgba(255,255,255,.055); }
.devlog-entry__footer span { padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.035); color:rgba(229,235,238,.38); font-size: 11px; font-weight:690; letter-spacing:.08em; }

.devlog-aside { position:sticky; top:96px; display:grid; gap:12px; }
.devlog-aside-card { padding:22px; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:rgba(255,255,255,.018); }
.devlog-aside-card--accent { border-color:rgba(0,255,102,.13); background:rgba(0,255,102,.025); }
.devlog-aside-label { margin-bottom:10px; }
.devlog-aside-card h2 { margin:0; color:#e8edef; font-size:20px; font-weight:680; letter-spacing:-.025em; }
.devlog-aside-card p { margin:11px 0 0; color:rgba(221,228,232,.49); font-size:13px; line-height:1.65; }
.devlog-aside-card a { display:inline-flex; gap:8px; margin-top:17px; color:#cfd6d9; font-size:12px; font-weight:680; text-decoration:none; }
.devlog-aside-card a:hover { color:#00ff66; }
.devlog-roadmap { display:grid; gap:12px; margin-top:17px; }
.devlog-roadmap > div { display:grid; grid-template-columns:9px 1fr; gap:10px; align-items:start; }
.devlog-roadmap i { width:6px; height:6px; margin-top:5px; border-radius:50%; background:rgba(255,255,255,.15); }
.devlog-roadmap .is-done i,.devlog-roadmap .is-current i { background:#00ff66; box-shadow:0 0 9px rgba(0,255,102,.35); }
.devlog-roadmap strong,.devlog-roadmap small { display:block; }
.devlog-roadmap strong { color:rgba(233,238,240,.72); font-size:12px; font-weight:680; }
.devlog-roadmap small { margin-top:2px; color:rgba(223,230,234,.3); font-size: 12px; }
.devlog-roadmap .is-current strong { color:#00ff66; }
.devlog-empty { padding:42px; text-align:center; color:rgba(225,232,236,.4); border:1px dashed rgba(255,255,255,.08); border-radius:18px; }

@media (max-width: 900px) {
  .devlog-hero { align-items:flex-start; flex-direction:column; }
  .devlog-hero__status { min-width:0; }
  .devlog-layout { grid-template-columns:1fr; }
  .devlog-aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .devlog-shell { padding:96px 0 64px; }
  .devlog-container { width:min(100% - 24px,1180px); }
  .devlog-hero { gap:24px; padding-bottom:28px; }
  .devlog-hero h1 { font-size:clamp(42px,14vw,62px); }
  .devlog-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }
  .devlog-count { display:none; }
  .devlog-entry { padding:22px 20px; border-radius:17px; }
  .devlog-feature-grid { grid-template-columns:1fr; }
  .devlog-aside { grid-template-columns:1fr; }
}