/* Handheld Herald — weekly digest stylesheet
   Single sheet, no framework, no fetched fonts, no third-party anything. */

:root{
  /* paper + ink */
  --paper-base:#faf8f3;
  --paper-raised:#ffffff;
  --paper-tint:#f2efe7;
  --ink-strong:#191817;
  --ink-body:#33312e;
  --ink-quiet:#6b6862;
  --ink-faint:#918d85;

  /* rules */
  --rule-hair:#e2ded3;
  --rule-firm:#c9c3b4;
  --rule-heavy:#191817;

  /* accents */
  --accent-press:#8e2b26;
  --accent-press-deep:#6d1f1b;
  --accent-slate:#3d5061;

  /* metrics */
  --measure-text:38rem;
  --measure-wide:60rem;
  --step-tight:.35rem;
  --step:1rem;
  --step-loose:2.25rem;
  --corner:3px;

  /* faces — system stacks only, nothing fetched */
  --face-head:Charter,"Bitstream Charter","Sitka Text",Cambria,"Hoefler Text",serif;
  --face-body:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --face-meta:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper-base);
  color:var(--ink-body);
  font-family:var(--face-body);
  font-size:17px;
  line-height:1.62;
}

a{ color:var(--accent-press); }
a:hover{ color:var(--accent-press-deep); }

img,svg{ max-width:100%; height:auto; }

/* ---------- masthead ---------- */

.masthead{
  background:var(--paper-raised);
  border-bottom:3px double var(--rule-heavy);
  padding:1.6rem 1.25rem 0;
  text-align:center;
}

.masthead__strap{
  margin:0 0 .55rem;
  font-family:var(--face-meta);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.masthead__name{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--face-head);
  font-size:clamp(2rem,6vw,2.9rem);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--ink-strong);
  text-decoration:none;
}
.masthead__name:hover{ color:var(--ink-strong); }

.masthead__mark{ width:34px; height:34px; flex:none; }

.masthead__motto{
  margin:.5rem auto 1.1rem;
  max-width:34rem;
  font-size:.93rem;
  color:var(--ink-quiet);
}

.masthead__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 1.5rem;
  border-top:1px solid var(--rule-hair);
  padding:.7rem 0;
  font-size:.86rem;
}
.masthead__nav a{
  color:var(--ink-body);
  text-decoration:none;
  padding:.2rem 0;
  border-bottom:2px solid transparent;
}
.masthead__nav a:hover{ border-bottom-color:var(--accent-press); }

/* ---------- edition body ---------- */

.edition{
  max-width:var(--measure-wide);
  margin:0 auto;
  padding:2.4rem 1.25rem 3rem;
}

.dateline{
  margin:0 0 .7rem;
  font-family:var(--face-meta);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-press);
}

.headline{
  margin:0 0 .8rem;
  max-width:var(--measure-text);
  font-family:var(--face-head);
  font-size:clamp(1.6rem,4.2vw,2.25rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink-strong);
}

.lede{
  margin:0 0 var(--step-loose);
  max-width:var(--measure-text);
  font-size:1.06rem;
  color:var(--ink-body);
}

.signed{
  margin:0 0 var(--step-loose);
  font-size:.84rem;
  color:var(--ink-faint);
}

/* ---------- dispatches ---------- */

.dispatch{
  border-top:1px solid var(--rule-hair);
  padding:1.4rem 0 .4rem;
}

.dispatch__title{
  margin:0 0 .15rem;
  font-family:var(--face-head);
  font-size:1.18rem;
  font-weight:700;
  color:var(--ink-strong);
}

.dispatch__tag{
  display:block;
  margin-bottom:.6rem;
  font-family:var(--face-meta);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.dispatch p{
  margin:0 0 .8rem;
  max-width:var(--measure-text);
}

/* ---------- pick-of-the-week panel ---------- */

.pick{
  margin:var(--step-loose) 0 0;
  background:var(--paper-raised);
  border:1px solid var(--rule-firm);
  border-left:4px solid var(--accent-slate);
  border-radius:var(--corner);
  padding:1.2rem 1.3rem;
  max-width:var(--measure-text);
}

.pick__label{
  margin:0 0 .3rem;
  font-family:var(--face-meta);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-slate);
}

.pick h3{
  margin:0 0 .5rem;
  font-family:var(--face-head);
  font-size:1.1rem;
  color:var(--ink-strong);
}

.pick p{ margin:0; font-size:.95rem; }

/* ---------- archive ---------- */

.archive{
  margin-top:3rem;
  border-top:3px double var(--rule-heavy);
  padding-top:1.5rem;
}

.archive__head{
  margin:0 0 1rem;
  font-family:var(--face-head);
  font-size:1.25rem;
  color:var(--ink-strong);
}

.archive__list{
  list-style:none;
  margin:0;
  padding:0;
}

.archive__list li{
  border-bottom:1px solid var(--rule-hair);
}

.archive__list a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .9rem;
  padding:.85rem .2rem;
  text-decoration:none;
  color:var(--ink-body);
}
.archive__list a:hover{ background:var(--paper-tint); }

.archive__no{
  font-family:var(--face-meta);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--accent-press);
  flex:none;
  min-width:5.5rem;
}

.archive__what strong{
  display:block;
  font-family:var(--face-head);
  font-size:1.02rem;
  color:var(--ink-strong);
  font-weight:700;
}
.archive__what span{
  font-size:.88rem;
  color:var(--ink-quiet);
}

/* ---------- prose pages (about / legal / contact) ---------- */

.prose{ max-width:var(--measure-text); }

.prose h2{
  margin:2rem 0 .6rem;
  font-family:var(--face-head);
  font-size:1.2rem;
  color:var(--ink-strong);
}

.prose p{ margin:0 0 .9rem; }

.prose ul{ margin:0 0 1rem; padding-left:1.15rem; }
.prose li{ margin-bottom:.45rem; }

.stamp{
  margin-top:2rem;
  padding-top:.9rem;
  border-top:1px solid var(--rule-hair);
  font-size:.82rem;
  color:var(--ink-faint);
}

/* ---------- pager ---------- */

.pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.8rem;
  margin-top:2.6rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule-hair);
  font-size:.9rem;
}

/* ---------- imprint ---------- */

.imprint{
  border-top:3px double var(--rule-heavy);
  background:var(--paper-raised);
  padding:1.8rem 1.25rem 2.4rem;
}

.imprint__inner{
  max-width:var(--measure-wide);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem 3rem;
  justify-content:space-between;
}

.imprint__note{
  max-width:26rem;
  margin:0;
  font-size:.86rem;
  color:var(--ink-quiet);
}

.imprint__links{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.3rem;
  font-size:.86rem;
}
.imprint__links a{ color:var(--ink-body); text-decoration:none; }
.imprint__links a:hover{ text-decoration:underline; }

.imprint__fine{
  max-width:var(--measure-wide);
  margin:1.4rem auto 0;
  padding-top:1rem;
  border-top:1px solid var(--rule-hair);
  font-size:.78rem;
  color:var(--ink-faint);
}

/* ---------- notice (404) ---------- */

.notice{
  max-width:var(--measure-text);
  margin:0 auto;
  padding:4rem 1.25rem 5rem;
  text-align:center;
}
.notice h1{
  font-family:var(--face-head);
  font-size:1.8rem;
  color:var(--ink-strong);
  margin:0 0 .7rem;
}
.notice p{ margin:0 0 1.1rem; }

/* ---------- narrow screens ---------- */

@media (max-width:640px){
  body{ font-size:16px; }
  .edition{ padding:1.9rem 1.05rem 2.4rem; }
  .archive__no{ min-width:auto; }
}


/* ---------- plates ---------- */

.dispatch__plate{
  margin:0 0 .95rem;
  max-width:var(--measure-text);
}

.dispatch__plate img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule-firm);
  border-radius:var(--corner);
  background:var(--paper-tint);
}

.dispatch__plate--upright{
  max-width:16.5rem;
}

.dispatch__plate figcaption{
  margin-top:.38rem;
  font-family:var(--face-meta);
  font-size:.62rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

@media (max-width:36rem){
  .dispatch__plate--upright{max-width:11.5rem;}
}

.dispatch__where{
  margin:0 0 .2rem;
  font-family:var(--face-meta);
  font-size:.68rem;
  letter-spacing:.04em;
}

.dispatch__where a{
  color:var(--accent-slate);
  text-underline-offset:.18em;
}

.dispatch__where a:hover{
  color:var(--accent-press);
}