:root { --ink:#161616; --muted:#61615b; --paper:#f8f4ec; --line:#29251f; --red:#b9281f; --yellow:#f3c742; --blue:#213f8f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family: "Times New Roman", Georgia, serif;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.18em; }
header { border-bottom:5px double var(--line); }
nav {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:.65rem clamp(1rem,4vw,3rem);
  border-bottom:1px solid var(--line);
  background:rgba(248,244,236,.95);
  font:800 .72rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  flex-wrap:wrap;
}
nav::before { content:none; }
nav .brand { margin-right:auto; background:var(--line); color:var(--paper); }
nav a { display:inline-flex; align-items:center; min-height:36px; padding:.5rem .7rem; border:1px solid var(--line); background:#fffaf0; text-decoration:none; }
.masthead {
  min-height:88vh;
  display:grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap:2rem;
  align-items:stretch;
  padding:clamp(1rem,4vw,3rem);
}
.masthead > div:first-child {
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--line);
  padding-right:clamp(1rem,4vw,3rem);
}
.eyebrow {
  margin:0 0 1rem;
  color:var(--red);
  font:900 .74rem/1 Inter, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1 {
  margin:0;
  max-width:11ch;
  font-size:clamp(3.4rem,8vw,8.5rem);
  line-height:.84;
  letter-spacing:0;
}
.masthead p {
  max-width:680px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.78;
}
.timeline { min-height:0; display:block; padding:2rem; background:#111; border:1px solid var(--line); color:#fff; align-self:end; }
.timeline::before { content:"ISSUE 01"; display:block; color:var(--yellow); font:900 4rem/.85 Inter, sans-serif; letter-spacing:0; margin-bottom:1rem; }
.timeline::after { content:"A newspaper-style edit desk: cinema editors, creator educators and motion-led video profiles, ordered as an editorial watchlist rather than a template grid."; color:#d9d0c2; line-height:1.65; }
.timeline i { display:none; }
@keyframes trim { to { transform:scaleX(.72); transform-origin:left center; } }
main { max-width:1180px; margin:0 auto; padding:3rem clamp(1rem,4vw,3rem) 5rem; }
.list {
  column-count:2;
  column-gap:2.2rem;
}
.list article {
  break-inside:avoid;
  display:block;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.list b {
  float:left;
  margin:.1rem .75rem .25rem 0;
  color:var(--red);
  font:900 1.25rem/1 Inter, sans-serif;
}
.list h2 {
  margin:0 0 .35rem;
  font-size:1.45rem;
  line-height:1.05;
}
.list h2 a { text-decoration:none; }
.list h2 a:hover { text-decoration:underline; text-decoration-color:var(--red); }
.list p { margin:0; color:var(--muted); line-height:1.68; }
.list span {
  display:inline;
  color:var(--ink);
  font-weight:800;
  background:linear-gradient(transparent 58%, rgba(243,199,66,.55) 58%);
}
.criteria {
  margin-top:3.5rem;
  padding:1.4rem 0 0;
  border-top:4px double var(--line);
}
.criteria h2 { margin:0 0 .5rem; font-size:2.4rem; }
.criteria p { color:var(--muted); line-height:1.75; max-width:760px; }
code { background:#e8decd; padding:.12rem .35rem; }
@media (max-width:840px){
  nav{justify-content:flex-start; gap:.5rem;}
  nav .brand{width:100%; margin-right:0;}
  nav a{flex:1 1 auto; justify-content:center; min-width:min(100%,130px);}
  .masthead{grid-template-columns:1fr; min-height:auto;}
  .masthead > div:first-child{border-right:0; padding-right:0;}
  .timeline{min-height:0;}
  .list{column-count:1;}
  h1{font-size:clamp(2.8rem,15vw,3.4rem);}
}
@media (max-width:520px){ main{padding-inline:.85rem;} }