/* ============================================================
   THE READING HERALD — house style
   Palette:  Old Glory Red #B31942 · Navy #0A3161 · paper white #FBFBF9
             gold star #B08D2B · hairline #D7D3CB
   Type:     Display  — "Playfair Display" (masthead, headlines)
             Body     — "Source Serif 4" (article copy)
             Utility  — "IBM Plex Mono" (datelines, bylines)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#FBFBF9;
  --paper-dim:#F2F1EC;
  --ink:#0A3161;
  --ink-soft:#3B4A63;
  --red:#B31942;
  --amber:#B08D2B;
  --slate:#0A3161;
  --green:#3F6B4A;
  --plum:#6B4557;
  --hair:#D7D3CB;

  --display: 'Playfair Display', Georgia, serif;
  --body: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --measure: 68ch;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:#201D19;
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--slate);
  outline-offset:3px;
}

img{ max-width:100%; display:block; }

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

/* ---------------- Stars & stripes ---------------- */
.old-glory-bar{
  height:8px;
  background:repeating-linear-gradient(
    90deg,
    var(--red) 0, var(--red) 14.28%,
    #fff 14.28%, #fff 28.56%
  );
}
.stars-divider{
  text-align:center;
  color:var(--ink);
  font-size:11px;
  letter-spacing:.5em;
  padding:10px 0;
  background:var(--ink);
  color:#fff;
}
.stars-divider span{ color:#fff; }

/* ---------------- Masthead ---------------- */
.masthead-top{
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.masthead-top .wrap{
  display:flex;
  justify-content:space-between;
  padding-top:8px;
  padding-bottom:8px;
}

.masthead{
  text-align:center;
  padding:34px 24px 18px;
  border-bottom:3px double var(--ink);
}
.masthead__eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 10px;
}
.masthead__title{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  letter-spacing:.01em;
  margin:0;
  line-height:.95;
}
.masthead__title a{ color:var(--ink); }
.masthead__tag{
  font-family:var(--body);
  font-style:italic;
  color:var(--ink-soft);
  margin:10px 0 0;
  font-size:1rem;
}

/* ---------------- Nav ---------------- */
nav.primary{
  border-bottom:1px solid var(--ink);
  background:var(--paper);
}
nav.primary .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px;
}
nav.primary a{
  display:block;
  padding:13px 18px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  border-right:1px solid var(--hair);
}
nav.primary li:last-child a{ border-right:none; }
nav.primary ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:0; padding:0;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
}

/* ---------------- Front page grid ---------------- */
main{ padding:36px 0 60px; }

.section-label{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  border-top:1px solid var(--ink);
  padding-top:6px;
  margin:0 0 18px;
}
.section-label::before{
  content:"★ ";
  color:var(--amber);
}

.front-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:40px;
}
@media (max-width:820px){
  .front-grid{ grid-template-columns:1fr; }
}

.lead-story h2{
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,2.7rem);
  line-height:1.05;
  margin:0 0 12px;
}
.lead-story .dek{
  font-size:1.1rem;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.byline{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.rule{
  border:none;
  border-top:1px solid var(--hair);
  margin:26px 0;
}

.side-list{ display:flex; flex-direction:column; }
.side-story{
  padding:18px 0;
  border-top:1px solid var(--hair);
}
.side-story:first-child{ border-top:none; padding-top:0; }
.side-story h3{
  font-family:var(--display);
  font-size:1.2rem;
  margin:0 0 6px;
  line-height:1.15;
}
.side-story p{ margin:0 0 6px; color:var(--ink-soft); font-size:.96rem; }

/* ---------------- Category tiles (home) ---------------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:1px;
  background:var(--ink);
  border:1px solid var(--ink);
  margin:34px 0;
}
.cat-tile{
  background:var(--paper);
  padding:22px 20px;
  position:relative;
}
.cat-tile .tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tile-accent, var(--red));
}
.cat-tile h3{
  font-family:var(--display);
  font-size:1.35rem;
  margin:8px 0 8px;
}
.cat-tile h3 a{ color:var(--ink); }
.cat-tile p{ font-size:.92rem; color:var(--ink-soft); margin:0 0 10px; }
.cat-tile .more{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------------- Category / article listing page ---------------- */
.cat-header{
  padding:10px 0 26px;
  border-bottom:1px solid var(--ink);
  margin-bottom:30px;
}
.cat-header .accent-bar{
  height:6px;
  width:64px;
  background:var(--tile-accent, var(--red));
  margin-bottom:14px;
}
.cat-header h1{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.2rem);
  margin:0 0 10px;
}
.cat-header p{ color:var(--ink-soft); max-width:60ch; margin:0; }

.breadcrumb{
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.breadcrumb a{ color:var(--slate); }

.article-list{ display:flex; flex-direction:column; }
.article-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:22px;
  padding:24px 0;
  border-top:1px solid var(--hair);
}
.article-row:first-child{ border-top:none; padding-top:0; }
.article-row .date{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
  padding-top:4px;
}
.article-row h2{
  font-family:var(--display);
  font-size:1.4rem;
  margin:0 0 8px;
  line-height:1.15;
}
.article-row h2 a{ color:var(--ink); }
.article-row p{ margin:0 0 8px; color:var(--ink-soft); }
@media (max-width:600px){
  .article-row{ grid-template-columns:1fr; gap:6px; }
}

/* ---------------- Mandate page ---------------- */
.mandate{
  max-width:var(--measure);
  margin:0 auto;
}
.mandate .kicker{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red);
}
.mandate h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5vw,3rem);
  margin:8px 0 24px;
}
.mandate .lede{
  font-size:1.15rem;
  font-style:italic;
  color:var(--ink-soft);
  border-left:3px solid var(--red);
  padding-left:18px;
  margin:0 0 34px;
}
.tenets{
  list-style:none;
  margin:0; padding:0;
  counter-reset:tenet;
}
.tenets li{
  counter-increment:tenet;
  position:relative;
  padding:20px 0 20px 54px;
  border-top:1px solid var(--hair);
}
.tenets li:first-child{ border-top:none; }
.tenets li::before{
  content:counter(tenet, decimal-leading-zero);
  position:absolute;
  left:0; top:20px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--red);
}
.tenets h3{
  font-family:var(--display);
  font-size:1.15rem;
  margin:0 0 6px;
}
.tenets p{ margin:0; color:var(--ink-soft); }

/* ---------------- Feature article w/ collapsible body ---------------- */
.feature{
  max-width:var(--measure);
  margin:0 auto;
}
.feature .kicker{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red);
}
.feature h1{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.5vw,2.9rem);
  line-height:1.08;
  margin:8px 0 12px;
}
.feature .byline{ margin-bottom:22px; }
.feature__image{
  margin:0 0 26px;
  border:1px solid var(--hair);
}
.feature__image img{ width:100%; height:auto; }
.feature p{ margin:0 0 18px; }
.feature h3{
  font-family:var(--display);
  font-size:1.3rem;
  margin:30px 0 10px;
}

.read-more{ margin-top:4px; }
.read-more summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  padding:8px 0;
  border-top:1px solid var(--hair);
  width:100%;
}
.read-more summary::-webkit-details-marker{ display:none; }
.read-more summary::marker{ content:""; }
.read-more summary::after{
  content:"▾";
  font-size:11px;
  transition:transform .15s ease;
}
.read-more[open] summary::after{ transform:rotate(180deg); }
.read-more[open] summary::before{ content:"Show Less"; }
.read-more summary::before{ content:"Continue Reading"; }
.read-more .body-copy{ padding-top:6px; }

/* ---------------- Card Catalog: search + archive cards ---------------- */
.archive-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin:0 0 30px;
}
.catalog-search{ flex:1; min-width:240px; max-width:460px; }
.drawer-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:6px 14px;
  position:relative;
}
.drawer-label::before, .drawer-label::after{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--amber);
  flex:none;
}
.catalog-search-input{
  display:block;
  width:100%;
  font-family:var(--mono);
  font-size:14.5px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--ink);
  border-top:none;
  padding:12px 14px;
  margin:0;
}
.catalog-search-input::placeholder{ color:var(--ink-soft); opacity:.7; }
.catalog-search-input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--red);
}
.catalog-results{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--ink-soft);
  margin:8px 2px 0;
}
.catalog-results .star{ color:var(--amber); }

.pull-card-btn{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:var(--red);
  border:none;
  padding:13px 18px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s ease, background .15s ease;
}
.pull-card-btn::before{ content:"★ "; color:var(--amber); }
.pull-card-btn:hover{ background:var(--ink); transform:translateY(-1px); }

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:26px;
  margin:0 0 40px;
}
.catalog-card{
  --tile-accent:var(--red);
  position:relative;
  background:#fff;
  border:1px solid var(--hair);
  padding:30px 22px 22px;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 0 var(--hair);
}
.catalog-card::before{
  content:"";
  position:absolute;
  top:-7px; left:22px;
  width:48px; height:8px;
  background:var(--tile-accent);
}
.catalog-card:hover{
  transform:translateY(-5px) rotate(-0.3deg);
  box-shadow:0 10px 18px -12px rgba(10,49,97,.35);
}
.catalog-card.is-hidden{ display:none; }
.catalog-card.card-pulled{
  animation:card-pulse 1.1s ease;
}
@keyframes card-pulse{
  0%{ box-shadow:0 0 0 0 rgba(176,141,43,.7); }
  60%{ box-shadow:0 0 0 8px rgba(176,141,43,0); }
  100%{ box-shadow:0 1px 0 var(--hair); }
}
.catalog-card .call-number{
  position:absolute;
  top:10px; right:14px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink-soft);
  letter-spacing:.03em;
}
.catalog-card .card-kicker{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tile-accent);
  margin:0 0 8px;
}
.catalog-card h3{
  font-family:var(--display);
  font-size:1.28rem;
  line-height:1.15;
  margin:0 0 10px;
}
.catalog-card h3 a{ color:var(--ink); }
.catalog-card .card-excerpt{
  font-size:.94rem;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.catalog-card .card-link{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-top:1px solid var(--hair);
  padding-top:12px;
  display:block;
}
.no-results{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  padding:30px 0;
  text-align:center;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}

/* ---------------- Footer ---------------- */
footer{
  border-top:3px double var(--ink);
  background:var(--paper-dim);
  padding:36px 0 28px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
}
footer .foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
}
footer h4{
  font-family:var(--body);
  font-style:italic;
  font-size:13px;
  color:var(--ink);
  margin:0 0 10px;
  text-transform:none;
  letter-spacing:0;
}
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:6px; }
footer a{ color:var(--ink-soft); }
.foot-bottom{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--hair);
  text-align:center;
  letter-spacing:.05em;
}
@media (max-width:700px){
  footer .foot-grid{ grid-template-columns:1fr; }
}