/* PRESS — the one page printed on paper. Same palette, roles
   inverted: warm newsprint ground, ink type, red for the masthead
   rules. Entries are newspaper items, never cards. */

.paper{
  --paper:#E9E3DA;
  --paper-ink:#14100E;      /* paper ink */
  --paper-2:#6B635C;   /* paper secondary */
  --paper-rule:#C6BCB1;
  background:var(--paper);
  color:var(--paper-ink);
  padding-top:calc(var(--nav-h) + clamp(34px,6vw,76px));
  padding-bottom:clamp(56px,8vw,120px);
}

/* the nav becomes a solid masthead bar over the paper */
.nav{ background:var(--ink); border-bottom-color:#000; }

.paper .eyebrow{ color:var(--paper-2); }
.paper .meta{ color:var(--paper-2); }
.paper .btn{ --btn-bg:var(--paper-ink); --btn-fg:var(--paper); }
.paper .btn--ghost{ background:transparent; color:var(--paper-ink); border-color:var(--paper-rule); }
.paper .btn--ghost:hover{ border-color:var(--paper-ink); background:rgba(20,16,14,.06); }
.paper .tlink:hover{ color:#A81419; }
.paper .tlink{ background-image:linear-gradient(#A81419,#A81419); }

/* ---------- masthead ---------- */

.masthead{ border-bottom:3px solid var(--paper-ink); padding-bottom:clamp(14px,2vw,22px); }
.masthead__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;
  color:var(--paper-2);
  border-bottom:1px solid var(--paper-rule);
  padding-bottom:12px;
  margin-bottom:clamp(14px,2vw,22px);
}
.masthead h1{
  font-variation-settings:"wdth" 62,"wght" 880;
  text-transform:uppercase;
  font-size:clamp(3.4rem,18vw,16rem);
  line-height:.76;
  letter-spacing:-.025em;
  margin:0;
}
.masthead h1 em{ font-style:normal; color:#C41219; }

.lede-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(22px,4vw,64px);
  padding-block:clamp(24px,4vw,48px);
  border-bottom:1px solid var(--paper-rule);
  align-items:start;
}
.press-lede{
  font-family:var(--serif);
  font-size:clamp(1.35rem,3.1vw,2.5rem);
  line-height:1.24;
  margin:0;
  max-width:30ch;
}
.press-lede::first-letter{
  float:left;
  font-size:3.1em;
  line-height:.78;
  padding:.06em .1em 0 0;
  color:#C41219;
}
.press-stats{ display:grid; gap:12px; }
.press-stats div{
  display:flex; justify-content:space-between; gap:16px;
  border-top:1px solid var(--paper-rule);
  padding-top:9px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-2);
}
.press-stats b{
  color:var(--paper-ink);
  font-variation-settings:"wdth" 100,"wght" 750;
  font-variant-numeric:tabular-nums;
}

/* ---------- outlet strip ---------- */
/* set as type, not a row of mismatched favicons — this is a paper,
   so the outlets read as a masthead credit line. */

.outlets{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:10px clamp(14px,2.2vw,28px);
  padding-block:clamp(22px,3.4vw,40px);
  border-bottom:1px solid var(--paper-rule);
}
.outlets span{
  font-variation-settings:"wdth" 78,"wght" 720;
  text-transform:uppercase;
  font-size:clamp(.95rem,1.9vw,1.4rem);
  letter-spacing:.02em;
  line-height:1;
  color:var(--paper-ink);
  white-space:nowrap;
}
.outlets span + span::before{
  content:"\2605";
  color:#C41219;
  font-size:.52em;
  margin-right:clamp(14px,2.2vw,28px);
  vertical-align:.32em;
}

/* ---------- items ---------- */

.items{ margin-top:clamp(8px,1.6vw,20px); }

.item{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 130px;
  gap:clamp(16px,3vw,48px);
  padding-block:clamp(26px,4vw,52px);
  border-bottom:1px solid var(--paper-rule);
  align-items:start;
  text-decoration:none;
  color:inherit;
  transition:background .3s ease;
}
.item:hover{ background:rgba(20,16,14,.045); }

.item__outlet{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
  color:#C41219;
  padding-top:.5em;
  border-top:2px solid #C41219;
}
.item__outlet span{
  display:block; margin-top:8px;
  letter-spacing:.14em; color:var(--paper-2);
  font-variation-settings:"wdth" 100,"wght" 500;
}
.item__head{
  font-family:var(--serif);
  font-size:clamp(1.45rem,3.6vw,2.9rem);
  line-height:1.08;
  margin:0;
  text-wrap:pretty;
}
.item:hover .item__head{ color:#A81419; }
.item__excerpt{
  margin:14px 0 0;
  font-size:1rem; line-height:1.68;
  color:#3D3733;
  max-width:60ch;
}
.item__go{
  align-self:end;
  justify-self:end;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;
  color:var(--paper-2);
  white-space:nowrap;
}
.item:hover .item__go{ color:#C41219; }
.item__thumb{ display:none; }

/* compact block for the remaining features */
.briefs{
  columns:2;
  column-gap:clamp(28px,4vw,64px);
  margin-top:clamp(28px,4vw,48px);
}
.brief{
  break-inside:avoid;
  display:block;
  border-top:1px solid var(--paper-rule);
  padding-block:16px;
  text-decoration:none;
  color:inherit;
}
.brief:hover .brief__head{ color:#A81419; }
.brief__outlet{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#C41219;
  font-variation-settings:"wdth" 100,"wght" 700;
}
.brief__head{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.2;
  margin:8px 0 0;
}
.brief__by{
  margin:7px 0 0;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-2);
}

/* ---------- enquiry strip at the foot of the paper ---------- */

.presskit{
  margin-top:clamp(40px,6vw,88px);
  border-top:3px solid var(--paper-ink);
  padding-top:clamp(24px,3.4vw,40px);
  display:flex; flex-wrap:wrap; gap:20px 40px;
  align-items:center; justify-content:space-between;
}
.presskit h2{
  font-variation-settings:"wdth" 70,"wght" 800;
  text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,3.2rem);
  line-height:.94;
  margin:0;
  max-width:16ch;
}

@media (max-width:1000px){
  .lede-row{ grid-template-columns:1fr; }
  .item{ grid-template-columns:150px minmax(0,1fr); }
  .item__go{ grid-column:2; justify-self:start; }
  .briefs{ columns:1; }
}
@media (max-width:620px){
  .item{ grid-template-columns:1fr; gap:14px; }
  .item__go{ grid-column:1; }
  .outlets{ gap:16px 24px; }
}
