/* First Notice — shared issue stylesheet.
   One column, one accent, hairline rules. The writing carries the page.
   Nameplate-scale masthead; everything below stays quiet.

   Canonical structure, shared by every issue:
     .wrap
       p.masthead     FIRST NOTICE
       p.subhead      standing tagline
       p.issueline    Issue #N · date · coverage window
       p.dek          standfirst
       hr.rule
       p.para         lede paragraph(s)
       h3.sect        section kicker
       div.item
         p.lead       <strong>headline.</strong> body, with source links
         p.insight    <span class="arrow">→</span> the read
       div.take       closing analysis  (p.tag label inside)
       div.foot       signup + navigation
   Also styled: h2.take heading form (Issue #4), div.section-body (inert). */

:root{
  --ink:#1b1b19;
  --ink-soft:#57554f;
  --ink-faint:#8a877f;
  --accent:#a8791f;
  --rule:#e4e1d9;
  --page:#fdfcf9;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Iowan Old Style',Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:648px;margin:0 auto;padding:0 24px 72px}

/* ---------- masthead ---------- */
/* Nameplate scale. Tracking stays; timidity goes.
   text-indent compensates the trailing letter-space so centering is true. */

.masthead{
  margin:64px 0 0;
  text-align:center;
  font-size:clamp(33px,7vw,52px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
  color:var(--ink);
}
.masthead a{color:inherit;text-decoration:none;border-bottom:0}
.masthead a:hover{color:var(--accent)}

.subhead{
  margin:24px 0 0;
  text-align:center;
  font-size:16px;
  font-style:italic;
  color:var(--ink-soft);
}
.subhead::before{
  content:"";
  display:block;
  width:44px;height:1px;
  background:var(--accent);
  margin:0 auto 22px;
}

.issue-title{
  margin:52px 0 0;
  text-align:center;
  font-size:28px;
  line-height:1.28;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--ink);
}

.issueline{
  margin:16px 0 0;
  text-align:center;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.issueline strong{font-weight:400;color:var(--ink-soft)}

/* ---------- opening ---------- */

.dek{
  margin:40px 0 0;
  font-size:17px;
  line-height:1.66;
  font-style:italic;
  color:var(--ink-soft);
}

hr.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:36px 0;
}

.para{margin:0 0 24px}

/* ---------- sections and items ---------- */

.sect{
  margin:54px 0 26px;
  padding-top:22px;
  border-top:1px solid var(--rule);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.section-body{margin:0}

.item{margin:0 0 36px}
.item:last-child{margin-bottom:0}

.lead{margin:0 0 12px}
.lead strong{font-weight:700}

.insight{
  margin:0;
  padding-left:22px;
  text-indent:-22px;
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink-soft);
}
.arrow{
  color:var(--accent);
  font-style:normal;
  padding-right:8px;
}

/* ---------- the take ---------- */
/* Block form (spec): div.take with p.tag inside. */

div.take{
  margin:54px 0 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--accent);
}
.take .tag,
.take .take-label{
  margin:0 0 12px;
  font-size:12.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  border:0;padding:0;
}
div.take p{margin:0 0 14px;color:var(--ink-soft);font-size:17px}
div.take p:last-child{margin-bottom:0}

/* Heading form (Issue #4): h2.section.take followed by div.section-body.
   Renders as a gold section kicker, matching .sect rhythm. */
h2.take{
  margin:54px 0 26px;
  padding:22px 0 0;
  border:0;
  border-top:1px solid var(--rule);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- links ---------- */

a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
a:focus-visible,
button:focus-visible,
input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

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

.entry{
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
.entry:last-of-type{border-bottom:0}

/* The newest issue carries more weight. */
.entry:first-of-type{padding:6px 0 32px}
.entry:first-of-type .entry-date{color:var(--accent)}
.entry:first-of-type .entry-title{font-size:27px;line-height:1.26}
.entry:first-of-type .entry-blurb{font-size:17px}

.entry-date{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.entry-title{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.32;
  font-weight:400;
}
.entry-title a{border-bottom:0;color:var(--ink)}
.entry-title a:hover{color:var(--accent)}

.entry-blurb{
  margin:0;
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink-soft);
}

.subscribe--top{
  margin-top:40px;
}

/* ---------- author's closing notes ---------- */

.colophon{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
}
.colophon:first-of-type{
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid var(--rule);
}
.colophon em{font-style:italic}
.colophon strong{font-weight:700;color:var(--ink)}

/* ---------- signup + footer ---------- */
/* More presence: bracketed by hairlines, larger invitation, no banner. */

.subscribe{
  margin:64px 0 0;
  padding:36px 0 34px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
}
.subscribe .sub-title{
  margin:0 0 8px;
  font-size:21px;
  color:var(--ink);
}
.subscribe .sub-blurb{margin:0 0 22px;font-size:15px;color:var(--ink-faint)}
.subscribe form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.subscribe input[type=email]{
  flex:0 1 272px;min-width:0;
  padding:12px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:0;
}
.subscribe input[type=email]::placeholder{color:var(--ink-faint)}
.subscribe input[type=email]:focus{outline:none;border-color:var(--accent)}
.subscribe button{
  padding:12px 26px;
  font-family:inherit;
  font-size:16px;
  letter-spacing:.02em;
  color:var(--page);
  background:var(--ink);
  border:0;border-radius:0;cursor:pointer;
}
.subscribe button:hover{background:var(--accent)}

.foot{
  margin:36px 0 0;
  padding:24px 0 0;
  text-align:center;
  font-size:14px;
  color:var(--ink-faint);
}
.foot p{margin:0 0 8px}
.foot a{border-bottom-color:var(--rule)}

/* ---------- small screens ---------- */

@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 20px 56px}
  .masthead{margin-top:44px}
  .subhead{font-size:15px}
  .issue-title{margin-top:40px;font-size:24px}
  .sect{margin-top:44px}
  .entry:first-of-type .entry-title{font-size:24px}
  .subscribe input[type=email]{flex:1 1 100%}
  .subscribe button{flex:1 1 100%}
}

/* On the archive page the top signup sits directly above the ISSUES kicker,
   so its bottom border and the kicker's top border stack into a double rule.
   The kicker supplies the rule; the signup drops its own. */
.subscribe--top{border-bottom:0}