/* ============================================================
   PAGE — JOURNAL
   ============================================================ */

/* ---------------- Featured entry ---------------- */
.jfeat{
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(1.4rem,4vw,3.6rem); align-items:center;
  padding-bottom: clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--line);
  margin-bottom: clamp(2rem,5vw,4rem);
}
@media (max-width:900px){ .jfeat{ grid-template-columns:1fr; } }
.jfeat__media{ position:relative; overflow:hidden; border-radius: var(--r-lg); }
.jfeat__media .frame{ aspect-ratio:16/11; border-radius: var(--r-lg); }
.jfeat__tag{
  position:absolute; top:1rem; left:1rem; z-index:3;
  padding:.45em .95em; border-radius: var(--r-pill);
  background-image: var(--grad-hot); color:#fff;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  box-shadow: var(--shadow-glow);
}
.jfeat__body{ display:grid; gap:1rem; }
.jfeat h2{ font-size: clamp(1.7rem,3.6vw,2.9rem); }

/* ---------------- Filter row ---------------- */
.jbar{
  display:flex; flex-wrap:wrap; gap:.7rem 1rem;
  align-items:center; justify-content:space-between;
  margin-bottom: clamp(1.6rem,3.5vw,2.6rem);
}

/* ---------------- Entry grid ---------------- */
.jlist{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.2rem,2.6vw,2.4rem); }
@media (max-width:940px){ .jlist{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .jlist{ grid-template-columns:1fr; } }

.jitem{
  display:grid; gap:1rem; align-content:start; cursor:pointer;
  height:100%; border-radius: var(--r-md);
  transition: transform .5s var(--e-out);
}
.jitem:hover{ transform: translateY(-6px); }
.jitem.is-hidden{ display:none; }
.jitem .frame{ aspect-ratio:4/3; border-radius: var(--r-md); }
.jitem__meta{
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center;
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-mut);
}
.jitem__meta .cat{ color:var(--accent-hi); font-weight:500; }
.jitem h3{ font-size: var(--t-md); transition: color .35s var(--e-out); }
.jitem:hover h3{ color: var(--accent); }
.jitem p{ font-size:var(--t-sm); color:var(--text-mut); }

/* ---------------- Reader overlay ---------------- */
.reader{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background: var(--bg);
  opacity:0; visibility:hidden;
  transition: opacity .45s var(--e-out), visibility .45s;
  overflow-y:auto; overscroll-behavior:contain;
}
.reader.is-on{ opacity:1; visibility:visible; }

.reader__bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem clamp(1.25rem,5vw,3rem);
  background: var(--glass); border-bottom:1px solid var(--glass-line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.reader__bar .meta{ letter-spacing:.2em; }
.reader__x{
  width:44px; height:44px; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid var(--line); background:transparent; color:var(--text);
  display:grid; place-items:center;
  transition: background-image .4s, border-color .4s, color .4s;
}
.reader__x:hover{ background-image: var(--grad-hot); border-color:transparent; color:#fff; }
.reader__x svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.5; }

.reader__prog{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background-image: var(--grad-hot); transform:scaleX(0); transform-origin:0 50%;
}

.reader__hero{ width:var(--wrap); margin:clamp(1.6rem,4vw,3rem) auto 0; }
.reader__hero .frame{ aspect-ratio:21/9; border-radius: var(--r-lg); }
@media (max-width:700px){ .reader__hero .frame{ aspect-ratio:4/3; } }

.reader__body{
  width: min(720px, 100% - 2.5rem); margin-inline:auto;
  padding-block: clamp(2rem,5vw,4rem) clamp(3rem,8vw,6rem);
}
.reader__body h1{ font-size: clamp(1.9rem,4.4vw,3.2rem); margin-bottom:1rem; }
.reader__kicker{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mut); margin-bottom:1.4rem;
}
.reader__kicker .cat{ color:var(--accent-hi); }
.reader__body p{
  font-size: var(--t-md); line-height:1.78; color:var(--text-soft);
  margin-top:1.5rem;
}
.reader__body p:first-of-type{
  font-family: var(--f-display); font-weight:300;
  font-size: clamp(1.2rem,2.4vw,1.6rem); line-height:1.5; color:var(--text);
}
.reader__foot{
  margin-top: clamp(2.4rem,5vw,3.6rem); padding-top: 1.8rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}

/* ---------------- Newsletter ---------------- */
.news{
  display:grid; gap:1.4rem; justify-items:center; text-align:center;
  padding: clamp(2rem,4.5vw,3.6rem);
  border-radius: var(--r-lg); position:relative; overflow:hidden;
  background: var(--bg-elev); border:1px solid var(--line);
}
.news__halo{
  position:absolute; inset:-40%;
  background:
    radial-gradient(30% 44% at 22% 30%, var(--halo-1), transparent 66%),
    radial-gradient(28% 40% at 78% 70%, var(--halo-2), transparent 66%);
  filter: blur(30px); pointer-events:none;
  animation: haloDrift 19s ease-in-out infinite;
}
.news > *{ position:relative; z-index:2; }
.news__form{
  display:flex; flex-wrap:wrap; gap:.7rem; width:min(520px,100%);
}
.news__form input{
  flex:1 1 220px; padding: 1rem 1.3rem;
  border:1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg); color:var(--text);
  font-family: var(--f-body); font-size: var(--t-sm);
  transition: border-color .35s, box-shadow .35s;
}
.news__form input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }