/* ============================================================
   blog.css - editorial / magazine redesign
   ============================================================ */

.blog-page{
  --ink:#fff;
  --ink-2:rgba(255,255,255,.84);
  --ink-3:rgba(255,255,255,.6);
  --ink-4:rgba(255,255,255,.4);
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.26);
  --glass:rgba(6,12,20,.42);
  --glass-2:rgba(6,12,20,.6);
  --accent:#a8d8ff;
  --amber:#f5c26b;
  --frost:blur(14px) saturate(140%);
  max-width:1060px; padding-top:96px;
}
.dark .blog-page{ --glass:rgba(3,7,13,.56); --glass-2:rgba(3,7,13,.72); }

/* ---------------- hero ---------------- */
.blog-hero{
  position:relative;
  margin-bottom:52px;
  padding-bottom:34px;
  border-bottom:1px solid var(--hair);
}
.blog-hero-title{
  font-family:var(--font-sonx);
  font-size:clamp(64px, 13vw, 128px);
  font-weight:700; line-height:.95;
  letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:
    0 0 14px rgba(168,216,255,.4),
    0 0 40px rgba(168,216,255,.16),
    2px 2px 0 rgba(42,110,168,.5),
    5px 5px 0 rgba(20,60,100,.32);
}
.blog-hero-sub{
  margin-top:14px;
  font-family:var(--font-postdate);
  font-size:clamp(17px, 3vw, 21px);
  font-style:italic;
  color:var(--ink-3);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* ---------------- magazine layout ---------------- */
.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:48px;
  align-items:start;
}
.blog-main{ min-width:0; }
.blog-side{
  display:flex; flex-direction:column; gap:20px;
  position:sticky; top:88px;
}

/* ---------------- editorial rows ---------------- */
.e-post + .e-post{ border-top:1px solid var(--hair); }

.e-post{ position:relative; }
.e-post-link{
  display:block; padding:30px 8px 26px;
  color:var(--ink); text-decoration:none;
}
.e-post-meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.e-post-date{
  font-family:var(--font-onest);
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  text-shadow:0 0 10px rgba(168,216,255,.3);
}
.e-post-title{
  font-family:var(--font-onest);
  font-size:clamp(22px, 3.4vw, 30px);
  font-weight:600; line-height:1.18;
  transition:transform .25s ease, color .25s;
}
.e-post-link:hover .e-post-title,
.e-post-link:focus-visible .e-post-title{
  transform:translateX(6px);
  color:var(--accent);
  text-shadow:0 0 18px rgba(168,216,255,.35);
}
.e-post-excerpt{
  margin-top:10px;
  font-size:15.5px; line-height:1.7; color:var(--ink-3);
}
.e-post-read{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  transition:color .2s, gap .2s;
}
.e-post-read-arrow{display:inline-flex; align-items:center; transform:translateY(1px)}
.e-post-read-arrow svg{width:1em; height:1em; flex-shrink:0}
.e-post-link:hover .e-post-read,
.e-post-link:focus-visible .e-post-read{
  color:var(--amber); gap:12px;
}
.e-post-link:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }

/* ---------------- sidebar cards ---------------- */
.side-card{
  padding:20px;
  border-radius:16px;
  border:1px solid var(--hair);
  background:var(--glass);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 2px 0 rgba(0,0,0,.26);
}
.side-title{
  font-family:var(--font-postdate);
  font-size:12px; font-weight:400; font-style:italic;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:14px;
}

.side-search .search-input{ padding:12px 14px 12px 40px; font-size:14.5px; border-radius:12px; }
.side-search .search-icon{ left:13px; }
.side-search .search-count{ margin-top:10px; font-size:11.5px; }
.side-search .search-clear{ width:24px; height:24px; font-size:12px; }
.side-search .search-kbd{ right:12px; padding:4px 7px; font-size:10.5px; }

.side-list{ list-style:none; margin:0; padding:0; }
.side-list li + li{ border-top:1px solid var(--hair); }
.side-link{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 2px;
  color:var(--ink); text-decoration:none;
  transition:padding-left .2s;
}
.side-link:hover,.side-link:focus-visible{ padding-left:8px; outline:none; }
.side-link:hover .side-link-title,.side-link:focus-visible .side-link-title{ color:var(--accent); }
.side-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.side-link-date{
  font-family:var(--font-onest);
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
}
.side-link-title{ font-size:14px; font-weight:600; line-height:1.4; transition:color .2s; }

.side-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.side-tag{
  font-size:11px; letter-spacing:.05em;
  padding:3px 11px; border-radius:999px;
  border:1px solid rgba(168,216,255,.26);
  background:rgba(168,216,255,.08);
  color:var(--accent);
  white-space:nowrap;
}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .blog-layout{ grid-template-columns:1fr; gap:34px; }
  .blog-side{ position:static; order:2; }
  .blog-main{ order:1; }
}
@media (max-width:768px){
  .blog-page{ padding-top:88px; }
  .blog-hero{ margin-bottom:34px; padding-bottom:24px; }
  .e-post-link{ padding:22px 2px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .e-post-title,.e-post-read,.e-post-link,.side-link{ transition:none !important; }
  .e-post-link:hover .e-post-title{ transform:none; }
}

/* backdrop-filter is dropped on touch/small screens (see base.css); bump the
   glass a little so the sidebar cards stay readable without the frost. */
@media (max-width:768px), (hover:none){
  .blog-page{ --glass:rgba(6,12,20,.72); --glass-2:rgba(6,12,20,.82); }
  .dark .blog-page{ --glass:rgba(3,7,13,.82); --glass-2:rgba(3,7,13,.9); }
}