/* =========================================================================
   Wyre OpEd. Loaded after style.css, which supplies the tokens, topbar, nav,
   section heads and footer.

   DELIBERATELY DOES NOT LOAD desk.css. That file styles a `.lead` class as a
   block-level anchor for a desk's lead headline, and the essay bodies here
   carry `<p class="lead">` standfirst paragraphs of their own. Loading both
   would let the desk rule capture the essay's opening paragraphs. Everything
   this desk needs is defined below instead, and the body rules are scoped
   under .opbody so imported markup can never reach out of the article.
   ========================================================================= */


/* Same opt-out as style.css: furniture takes the sans, copy keeps the serif. */
.optop__cat,
.optop__time,
.optop__read,
.optop__go,
.opcard__cat,
.opcard__time,
.opcard__read,
.oparticle__cat,
.oparticle__time,
.oparticle__read,
.oparticle__byline,
.opempty__head,
.opempty__links a {
  font-family: var(--sans);
}

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

.opedhead {
  padding: clamp(24px, 3.4vw, 40px) 0 clamp(22px, 3vw, 34px);
  background: var(--paper);
  text-align: center;
}

.opedhead__parent { display: inline-block; text-decoration: none; }
.opedhead__parent img {
  width: clamp(120px, 15vw, 168px);
  height: auto;
  margin-inline: auto;
}

.opedhead__rule {
  margin: clamp(16px, 2.2vw, 24px) 0 clamp(18px, 2.4vw, 26px);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 5px;
  position: relative;
}
.opedhead__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 86px;
  height: 4px;
  background: var(--red);
  transform: translateX(-50%);
}

.opedhead__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.opedhead__blurb {
  margin: clamp(14px, 1.8vw, 20px) auto 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17.5px);
  line-height: 1.62;
  color: #3d3d3d;
}

.opedhead__domain {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--red);
}

.nav__list a.is-current { color: #fff; }
.nav__list a.is-current::after { transform: scaleX(1); }

.opedwire { padding: clamp(44px, 5.5vw, 76px) 0 clamp(40px, 5vw, 68px); }

/* ------------------------------------------------------- the top story */

/* Full page width, per Derek 2026-08-20. Not a flagged feature: it is
   whichever essay was released most recently, so it cannot go stale. */
.optop {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(26px, 3.4vw, 44px) 0 clamp(28px, 3.6vw, 46px);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.optop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.optop__cat { color: var(--red); }
.optop__time,
.optop__read { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.14em; }

.optop__title {
  font-family: var(--display);
  font-weight: 800;
  /* Runs to the full measure rather than the reading measure: this is a
     poster headline, and it is the only one on the page. */
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.optop__title em { font-style: italic; color: var(--red); }

.optop:hover .optop__title { color: var(--red); }
.optop:hover .optop__title em { color: var(--ink); }

.optop__stand {
  margin-top: clamp(14px, 1.8vw, 22px);
  max-width: 74ch;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.optop__go {
  display: inline-block;
  margin-top: clamp(16px, 2vw, 24px);
  padding-bottom: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
}
.optop:hover .optop__go { color: var(--red); }

/* ------------------------------------------------- the three-column run */

.opgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hairline gutters rather than gaps: the rules between columns are what
     make this read as a newspaper page rather than a card deck. */
  gap: 0;
  margin-top: clamp(6px, 1vw, 12px);
}

.opcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 26px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
/* Close the right edge of every row without a per-row class. */
.opcard:nth-child(3n) { border-right: 0; }

.opcard:hover { background: var(--paper-warm); }
.opcard:hover .opcard__title { color: var(--red); }

.opcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.opcard__cat { color: var(--red); }
.opcard__time { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.12em; }

.opcard__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.opcard__title em { font-style: italic; color: var(--red); }

.opcard__stand {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4a4a;
  /* The standfirsts run to 1,200 characters. Three columns of that is a wall,
     so the card shows the opening and the article page carries the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.opcard__read {
  margin-top: auto;
  padding-top: 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------- article page */

.oparticle__head {
  padding: clamp(34px, 4.4vw, 60px) 0 clamp(22px, 2.8vw, 34px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.oparticle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.oparticle__cat { color: var(--red); }
.oparticle__time,
.oparticle__read { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.14em; }

.oparticle__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 22ch;
}
.oparticle__title em { font-style: italic; color: var(--red); }

.oparticle__stand {
  margin-top: clamp(14px, 1.8vw, 22px);
  max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
  color: #3d3d3d;
}

.oparticle__byline {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.oparticle__byline strong { color: var(--ink); font-weight: 800; }

/* ------------------------------------------------------- the essay body

   Everything here is scoped under .opbody. The markup inside is imported
   from another repo, so it is styled as a guest: it can be given a look, and
   it cannot reach out and restyle the page around it. */

.opbody {
  max-width: 68ch;
  margin: clamp(30px, 3.6vw, 48px) auto clamp(20px, 2.4vw, 30px);
}

.opbody p {
  margin-top: 1.05em;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.74;
  color: var(--ink-soft);
}

/* The essays open with two or three of these. They carry the argument's
   setup, so they are set larger than the body and lighter than a heading. */
.opbody .lead {
  font-size: clamp(17.5px, 1.55vw, 21px);
  line-height: 1.6;
  color: var(--ink);
}
.opbody .lead:first-child { margin-top: 0; }

.opbody h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: clamp(36px, 4.2vw, 52px) 0 0;
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--rule);
}

.opbody h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
  margin: clamp(26px, 3vw, 34px) 0 0;
}

.opbody ul,
.opbody ol { margin: 1.05em 0 0; padding-inline-start: 0; list-style: none; }
.opbody ol { counter-reset: opitem; }

.opbody li {
  position: relative;
  margin-top: 0.8em;
  padding-inline-start: 22px;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.opbody ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 11px;
  height: 2px;
  background: var(--red);
}
.opbody ol > li::before {
  counter-increment: opitem;
  content: counter(opitem);
  position: absolute;
  left: 0;
  top: 0.08em;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--red);
}

.opbody strong { font-weight: 700; color: var(--ink); }
.opbody em { font-style: italic; }

.opbody a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.opbody a:hover { color: var(--red); }

.opbody blockquote {
  margin: clamp(24px, 2.8vw, 34px) 0 0;
  padding-inline-start: clamp(18px, 2vw, 26px);
  border-inline-start: 3px solid var(--red);
}
.opbody blockquote p { font-size: clamp(17px, 1.5vw, 20px); font-style: italic; }

.opbody code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-warm);
  padding: 2px 5px;
  border: 1px solid var(--rule);
}
.opbody pre {
  margin-top: 1.05em;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}
.opbody pre code { background: none; border: 0; padding: 0; }

.opbody hr {
  margin: clamp(30px, 3.4vw, 42px) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Carried over from the source essays. Every link in it points at another
   essay on this desk, so it is internal navigation and worth keeping. */
.opbody .related-reading {
  margin-top: clamp(36px, 4.2vw, 52px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 4px solid var(--ink);
}
.opbody .related-reading h2 {
  margin: 0 0 4px;
  padding-top: 0;
  border-top: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- origin */

.oparticle__origin {
  max-width: 68ch;
  margin: clamp(28px, 3.2vw, 40px) auto clamp(40px, 5vw, 64px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  background: var(--paper-warm);
  border-inline-start: 3px solid var(--red);
}
.oparticle__origin p {
  font-size: 14.5px;
  line-height: 1.62;
  color: #4a4a4a;
}
.oparticle__origin a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.oparticle__origin a:hover { color: var(--red); }

.opmore {
  padding: clamp(40px, 5vw, 68px) 0 clamp(44px, 5.5vw, 72px);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
.opmore .opcard { background: var(--paper); }

/* -------------------------------------------------------------- empty */

.opempty { padding: clamp(40px, 5vw, 64px) 0; max-width: 60ch; }
.opempty__head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.opempty p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.opempty__links { display: flex; gap: 20px; margin-top: 18px; }
.opempty__links a {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
  text-decoration: none;
}
.opempty__links a:hover { color: var(--red); }

/* --------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  /* Two columns before one: three columns of a 1,200-character standfirst
     stop being readable well before the viewport gets narrow. */
  .opgrid { grid-template-columns: repeat(2, 1fr); }
  .opcard:nth-child(3n) { border-right: 1px solid var(--rule); }
  .opcard:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
  .opgrid { grid-template-columns: 1fr; }
  .opcard { border-right: 0; padding-inline: 0; }
  .opcard:nth-child(3n),
  .opcard:nth-child(2n) { border-right: 0; }
  .optop__title { max-width: none; }
  .opcard__stand { -webkit-line-clamp: 4; line-clamp: 4; }
}