@font-face{font-family:"Courier Prime";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/courier-prime-italic.woff2") format("woff2");}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/courier-prime.woff2") format("woff2");}

/* The Understory — one desk. the tape, read twice. */
:root{
  --paper:#faf7f1; --ink:#2b2a28; --red:#b3342b; --rule:#3a3936; --dim:#6b6862;
  --mono:"Courier Prime","Courier New",Courier,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:#efe9df}
body{
  margin:0 auto; max-width:44rem; padding:2.2rem 1.4rem 3rem;
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:1.02rem; line-height:1.62;
  background-image:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.012) 2px 3px);
}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(179,52,43,.55)}
a:hover{background:rgba(179,52,43,.07)}

.masthead{text-align:center; border-bottom:3px double var(--rule); padding-bottom:.9rem; margin-bottom:1.6rem}
.masthead h1{font-size:1.9rem; letter-spacing:.28em; margin:0 0 .35rem; font-weight:700}
.masthead .tag{font-size:.74rem; letter-spacing:.18em; text-transform:lowercase; color:var(--dim)}
.masthead .dateline{margin-top:.55rem; font-size:.85rem; color:var(--dim)}

.story h2{font-size:1.06rem; margin:1.9rem 0 .6rem; letter-spacing:.02em}
.story h2 .no{color:var(--red)}
.story p{margin:0 0 1.05rem}
.story .lede{border-left:3px solid var(--red); padding-left:1rem; color:#403f3d}
em{font-style:italic}

.watchbox{
  margin:2rem 0 1rem; padding:1.05rem 1.15rem 1.15rem;
  border:2px dashed var(--red); position:relative; transform:rotate(-.4deg);
}
.watchbox .stamp{
  display:inline-block; color:var(--red); border:2px solid var(--red);
  padding:.08rem .6rem; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  transform:rotate(-2deg); margin-bottom:.7rem;
}
.watchbox p{margin:0; font-size:.95rem}
.watchbox .due{color:var(--dim); font-size:.8rem; margin-top:.55rem}

.sig{text-align:right; color:var(--red); font-weight:700; margin:1.4rem 0 0}

.ledger{margin-top:2.4rem; border-top:1px solid var(--dim); padding-top:1.1rem}
.ledger h3{font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin:0 0 .7rem}
.ledger ol{margin:0; padding-left:1.4rem}
.ledger li{margin-bottom:.6rem; font-size:.92rem}
.ledger .st{color:var(--red); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.ledger .tally{font-size:.85rem; color:var(--dim); margin-top:.9rem}

.archive-item{margin-bottom:1.35rem}
.archive-item .d{color:var(--red); font-size:.85rem}
.archive-item .h{font-size:.95rem}

footer{margin-top:2.6rem; border-top:3px double var(--rule); padding-top:.9rem; font-size:.78rem; color:var(--dim)}
footer a{color:var(--dim)}
.backlink{display:inline-block; margin-bottom:1.4rem; font-size:.85rem; color:var(--dim); border:none}

@media (max-width:480px){
  body{font-size:.96rem; padding:1.4rem 1rem 2.2rem}
  .masthead h1{font-size:1.45rem; letter-spacing:.2em}
}