/* The Federal Chronicle - styles.css
   Early-republic broadsheet. Caslon on aged paper, federal-blue accents. */

:root{
  --ink:#14110d;
  --paper:#faf6ec;
  --blue:#2a3c5f;
  --muted:#5a5140;
  --ink-soft:#2a251a;
  --faint:rgba(20,17,13,.16);
  --fainter:rgba(20,17,13,.08);
  --display:"Libre Caslon Display","Times New Roman",Georgia,serif;
  --body:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --wrap:1180px;
  --measure:44rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(1200px 620px at 50% -10%, rgba(42,60,95,.06), transparent 70%),
    linear-gradient(180deg, rgba(20,17,13,.025), transparent 240px);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}
h1,h2,h3{font-weight:400;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.sc{font-variant:small-caps;letter-spacing:.08em;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Masthead ---------- */
.masthead{padding:24px 0 0;text-align:center;}
.volume-line{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-variant:small-caps;letter-spacing:.16em;
  font-size:.72rem;color:var(--muted);
}
.volume-line::before,.volume-line::after{
  content:"";height:1px;background:var(--ink);flex:1 1 auto;max-width:230px;opacity:.55;
}
.crest-link{display:inline-block;line-height:0;}
.crest{width:78px;height:auto;display:block;margin:14px auto 8px;}
.title{
  font-family:var(--display);
  font-size:clamp(2.4rem,7.2vw,4.6rem);
  line-height:.98;
  margin:.06em 0 .12em;
  letter-spacing:.012em;
}
.motto{font-style:italic;font-size:1.02rem;color:var(--muted);margin:0 auto;}
.rule-double{
  height:5px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);
  margin:16px 0 0;
}

/* ---------- Navigation ---------- */
.mainnav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;
  padding:11px 24px;border-bottom:1px solid var(--ink);
  font-variant:small-caps;letter-spacing:.13em;font-size:.88rem;
}
.mainnav a{color:var(--ink);}
.mainnav a:hover{color:var(--blue);text-decoration:none;}

/* ---------- Front page grid ---------- */
.paper{
  display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:0;
  margin:30px auto 0;
}
.lead-column{padding-right:36px;border-right:1px solid var(--faint);}
.latest{padding-left:28px;}

.kicker{
  display:block;font-variant:small-caps;letter-spacing:.17em;
  font-size:.78rem;color:var(--blue);margin-bottom:7px;
}

/* Lead story */
.lead-head{
  font-family:var(--display);line-height:1.02;
  font-size:clamp(2rem,4.6vw,3.15rem);margin:0 0 .2em;
}
.lead-head a{color:var(--ink);}
.dek{font-style:italic;font-size:1.16rem;color:var(--ink-soft);margin:.2em 0 .55em;line-height:1.42;}
.byline{
  font-variant:small-caps;letter-spacing:.09em;font-size:.8rem;color:var(--muted);
  margin:.2em 0 1em;padding-bottom:.9em;border-bottom:1px solid var(--fainter);
}
.dateline{font-variant:small-caps;letter-spacing:.06em;font-weight:700;color:var(--ink);}
.body p{margin:0 0 1.05em;}
.lead .body>p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:3.5em;line-height:.72;
  padding:.05em .09em 0 0;color:var(--ink);
}

/* Section blocks on front page */
.section-block{margin-top:30px;}
.section-rule{
  display:flex;align-items:center;gap:14px;margin:0 0 15px;
  font-variant:small-caps;letter-spacing:.19em;font-size:.94rem;color:var(--ink);
}
.section-rule::before{content:"";width:16px;flex:0 0 auto;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.section-rule::after{content:"";flex:1 1 auto;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.section-rule a{color:var(--ink);}

.teasers{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.teaser{padding:15px 0;border-top:1px solid var(--faint);}
.teaser.top{border-top:0;padding-top:0;}
.teaser h3{font-family:var(--display);line-height:1.08;font-size:1.3rem;margin:0 0 .18em;}
.teaser h3 a{color:var(--ink);}
.teaser p{margin:.1em 0 .4em;font-size:.98rem;color:var(--ink-soft);}
.teaser .meta{font-variant:small-caps;letter-spacing:.08em;font-size:.72rem;color:var(--muted);}

/* The Latest */
.latest h2{font-family:var(--display);font-size:1.55rem;margin:0 0 3px;text-align:center;}
.latest .subhead{
  text-align:center;font-variant:small-caps;letter-spacing:.15em;font-size:.7rem;
  color:var(--muted);margin:0 0 14px;padding-bottom:12px;border-bottom:1.5px solid var(--ink);
}
.latest ol{list-style:none;margin:0;padding:0;}
.latest li{padding:13px 0;border-top:1px solid var(--faint);}
.latest li:first-child{border-top:0;padding-top:0;}
.latest li a{color:var(--ink);font-family:var(--display);font-size:1.07rem;line-height:1.16;display:block;}
.latest li a:hover{color:var(--blue);text-decoration:none;}
.latest li .meta{font-variant:small-caps;letter-spacing:.08em;font-size:.7rem;color:var(--muted);margin-top:4px;}

/* ---------- Article page ---------- */
.article{max-width:var(--measure);margin:32px auto 0;}
.article .kicker{text-align:left;}
.article h1{font-family:var(--display);line-height:1.04;font-size:clamp(2rem,5vw,3rem);margin:.08em 0 .22em;}
.article .dek{font-size:1.2rem;margin-bottom:.6em;}
.article .meta-line{
  font-variant:small-caps;letter-spacing:.09em;font-size:.8rem;color:var(--muted);
  padding:10px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);
  margin:8px 0 24px;display:flex;flex-wrap:wrap;gap:4px 18px;
}
.article .body{font-size:1.06rem;}
.article .body>p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:3.3em;line-height:.72;padding:.05em .09em 0 0;color:var(--ink);
}
.article .body p{margin:0 0 1.12em;}
.article .body h2{font-family:var(--display);font-size:1.5rem;margin:1.5em 0 .4em;}
.article-foot{margin:28px 0 0;padding-top:16px;border-top:1.5px solid var(--ink);font-variant:small-caps;letter-spacing:.09em;font-size:.82rem;}
.article-foot a{color:var(--blue);}

/* ---------- Section page ---------- */
.section-page{max-width:var(--wrap);margin:28px auto 0;}
.section-title{font-family:var(--display);font-size:clamp(2rem,5vw,2.9rem);text-align:center;margin:.2em 0 .12em;}
.section-standfirst{text-align:center;font-style:italic;color:var(--muted);max-width:40rem;margin:0 auto 4px;}
.section-list{max-width:52rem;margin:24px auto 0;list-style:none;padding:0;}
.section-list li{padding:22px 0;border-top:1px solid var(--faint);}
.section-list li:first-child{border-top:1.5px solid var(--ink);}
.section-list .kicker{margin-bottom:5px;}
.section-list h3{font-family:var(--display);font-size:1.55rem;margin:0 0 .18em;}
.section-list h3 a{color:var(--ink);}
.section-list p{margin:.1em 0 .45em;color:var(--ink-soft);}
.section-list .meta{font-variant:small-caps;letter-spacing:.08em;font-size:.72rem;color:var(--muted);}

/* ---------- Footer ---------- */
.site-foot{margin-top:48px;border-top:1.5px solid var(--ink);}
.foot-inner{max-width:var(--wrap);margin:0 auto;padding:24px 24px 44px;text-align:center;}
.foot-crest{width:44px;height:auto;margin:2px auto 10px;display:block;}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;font-variant:small-caps;letter-spacing:.13em;font-size:.8rem;margin-bottom:10px;}
.foot-nav a{color:var(--ink);}
.foot-motto{font-style:italic;color:var(--muted);margin:8px 0;}
.foot-fine{font-variant:small-caps;letter-spacing:.09em;font-size:.72rem;color:var(--muted);line-height:1.7;}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .paper{grid-template-columns:1fr;}
  .lead-column{padding-right:0;border-right:0;}
  .latest{padding-left:0;margin-top:30px;padding-top:24px;border-top:1.5px solid var(--ink);}
  .teasers{grid-template-columns:1fr;}
  .teaser.top{border-top:1px solid var(--faint);padding-top:15px;}
  .teaser.top:first-child{border-top:0;padding-top:0;}
}
@media (max-width:520px){
  body{font-size:17px;}
  .wrap{padding:0 16px;}
  .mainnav{gap:2px 18px;letter-spacing:.1em;}
  .volume-line{gap:10px;letter-spacing:.12em;}
  .volume-line::before,.volume-line::after{max-width:48px;}
  .foot-inner{padding:22px 16px 40px;}
}