/* The Peptide Gazette — a trade newspaper.
   Navy ink, cream stock, one gold accent. Column rules instead of cards, hairlines instead of
   boxes, serif headlines at newspaper proportions. No gradients, no shadows, no rounded corners,
   no animation, no client JS. Multi-column well at 64rem and above; one column below it. */

:root {
  --ink: #141b2e;
  --ink-soft: #4a5368;
  --ink-faint: #6c7489;
  --paper: #f7f3e8;
  --paper-well: #fbf8f0;
  --rule: #cbc1a9;
  --rule-faint: #ded5c1;
  --gold: #8a6314;
  --link: #1c3a6e;
  --measure: 36rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.55 Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}

.wrap { max-width: 72rem; margin-inline: auto; }

a { color: var(--link); }
a:focus-visible, .skip-link:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; display: inline-block; padding: 0.5rem 0; }

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

.masthead { padding: 1.5rem 0 0; text-align: center; }

.nameplate {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.nameplate a { color: inherit; text-decoration: none; }

.strapline {
  margin: 0.55rem 0 0.75rem;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--ink-soft);
}

/* The rule beneath the masthead: a heavy line over a hairline, the way a broadsheet sets it. */
.masthead-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 3px; }

.datebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.datebar span { white-space: nowrap; }

.sections { border-bottom: 1px solid var(--ink); }
.sections ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 2rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
}
.sections a {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
  text-decoration: none;
}
.sections a:hover { color: var(--gold); text-decoration: underline; }

/* ---------------------------------------------------------------- standing notice */

#ruo-notice {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-well);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
#ruo-notice p { margin: 0; }
#ruo-notice .ruo-headline {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
#ruo-notice strong { color: var(--ink); }

nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
nav[aria-label="Breadcrumb"] li + li::before { content: "/ "; color: var(--rule); }

/* ---------------------------------------------------------------- headings and type */

main { padding-top: 1.25rem; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.012em; }

h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.06; margin: 0 0 0.6rem; }
h2 { font-size: 1.3rem; line-height: 1.15; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.1rem; line-height: 1.18; margin: 1.5rem 0 0.35rem; }
h4 { font-size: 1rem; line-height: 1.2; margin: 1.1rem 0 0.25rem; }

p { margin: 0 0 0.85rem; }

.eyebrow {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 0.35rem;
}

.standfirst {
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

.dateline {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
}

.meta {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 0.95rem; }

/* ---------------------------------------------------------------- front page */

.front { display: block; }

.lead { padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); }
.lead h2 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.02;
  margin: 0 0 0.55rem;
}
.lead h2 a { color: inherit; text-decoration: none; }
.lead h2 a:hover { text-decoration: underline; }
.lead .standfirst { font-size: 1.2rem; max-width: 40rem; }
.lead-body { max-width: 34rem; }

.secondaries { margin-top: 1.1rem; }
.secondary { padding-bottom: 1rem; }
.secondary + .secondary { padding-top: 1rem; border-top: 1px solid var(--rule-faint); }
.secondary h3 { font-size: 1.35rem; line-height: 1.1; margin: 0 0 0.4rem; }
.secondary h3 a { color: inherit; text-decoration: none; }
.secondary h3 a:hover { text-decoration: underline; }
.secondary p { margin: 0 0 0.4rem; font-size: 0.98rem; }

.briefs { margin-top: 1.75rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.briefs h2 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.briefs ul { margin: 0; padding: 0; list-style: none; }
.briefs li { padding: 0.55rem 0; border-top: 1px solid var(--rule-faint); font-size: 0.95rem; line-height: 1.3; }
.briefs li:first-child { border-top: 0; padding-top: 0; }
.briefs .dateline { display: block; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.1rem; }
/* A brief is a headline, not a hyperlink: ink, no rule under it until it is pointed at. */
.briefs a { color: var(--ink); text-decoration: none; font-weight: 700; }
.briefs a:hover { text-decoration: underline; }

.front-foot { margin-top: 1.75rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- story page */

.story { max-width: 44rem; }
.story-body { max-width: var(--measure); }
.story-body p:first-of-type { font-size: 1.1rem; }

.sources-block { margin-top: 2.25rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.sources-block h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.sources-block ol { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.sources-block > ol > li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule-faint);
  overflow-wrap: anywhere;
}
.sources-block > ol > li:first-child { border-top: 0; }
.sources-block cite { font-style: normal; font-weight: 700; }
.sources-block .meta { display: block; margin-top: 0.2rem; }
.sources-block dl { margin: 0.45rem 0 0; font-size: 0.88rem; }
.sources-block dt {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}
.sources-block dd { margin: 0; }

.story-foot {
  margin-top: 1.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
.story-foot p { margin: 0 0 0.3rem; }

/* ---------------------------------------------------------------- listings */

.listing { margin: 0; padding: 0; list-style: none; }
.listing > li { padding: 0.95rem 0; border-top: 1px solid var(--rule-faint); }
.listing > li:first-child { border-top: 1px solid var(--ink); }
.listing .listing-date { margin: 0 0 0.3rem; }
.listing h2 { margin: 0.15rem 0 0.3rem; font-size: 1.2rem; line-height: 1.15; }
.listing h2 a { color: inherit; text-decoration: none; }
.listing h2 a:hover { text-decoration: underline; }
.listing p { margin: 0 0 0.25rem; font-size: 0.97rem; color: var(--ink-soft); }

.monthlist { margin: 0; padding: 0; list-style: none; }
.monthlist li { padding: 0.55rem 0; border-top: 1px solid var(--rule-faint); }
.monthlist li:first-child { border-top: 1px solid var(--ink); }

.section-note { max-width: var(--measure); color: var(--ink-soft); }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------- footer */

#site-disclaimer {
  margin-top: 3rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--ink);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
#site-disclaimer p { margin: 0 0 0.6rem; max-width: 46rem; }
#site-disclaimer strong { color: var(--ink); }
#site-disclaimer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin: 0.9rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
}
#site-disclaimer .colophon { font-size: 0.78rem; color: var(--ink-faint); }

/* Narrow stock: the dateline strip reads as a centred strip rather than two ragged lines, and
   the standing notice is set a size down so it does not own the first screen. */
@media (max-width: 47.99rem) {
  .datebar { justify-content: center; gap: 0.2rem 1rem; }
  #ruo-notice { font-size: 0.8rem; padding: 0.65rem 0.75rem; }
}

/* ---------------------------------------------------------------- the grid */

@media (min-width: 64rem) {
  body { padding-inline: 2rem; }

  .front {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(16rem, 1fr);
    column-gap: 2.25rem;
  }
  .front-well { grid-column: 1; }
  .briefs {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-top: 0;
    padding-left: 2.25rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .front-foot { grid-column: 1 / -1; }

  /* Secondary stories sit in three columns divided by rules, not cards. */
  .secondaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .secondary + .secondary {
    padding-top: 0;
    padding-left: 1.25rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .lead-body { column-count: 2; column-gap: 2.5rem; column-rule: 1px solid var(--rule); max-width: none; }
  .lead-body p { margin-top: 0; }

  /* An inside page is set the same way as the front: headline across the measure, body in two
     columns under it. One long column against half a page of empty stock is not a newspaper. */
  .story { max-width: 58rem; }
  .story-body {
    column-count: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--rule);
    max-width: none;
  }
  .story-body p { margin-top: 0; }
  .sources-block, .story-foot { max-width: 46rem; }

  /* Date in its own column, the way a wire file is set. */
  .listing > li {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }
  .listing .listing-date { margin: 0; padding-top: 0.25rem; }
  .listing .listing-text { max-width: 44rem; }
}