/* ==============================================================
   Konevych FDC — Articles (Read mode)

   The category standard, played straight: a centred blog post at the
   craft level of Ghost/Substack, wearing the .bull world's palette
   and faces. No invention around the words — the deliverable is the
   prose itself: measure, leading, and the rhythm of admin-typed HTML.
   Depends on bulls-home.css for tokens; loads after it.
   ============================================================== */

.bull-art {
  --measure: 68ch;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 2.5rem);
  display: block;
  padding-top: clamp(var(--s24), 3vw, var(--s48));
}

/* the way back out, before the story rather than under its picture */
.bull-art-crumb {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: var(--s16);
}

/* the reading column, used by every block that is not full-bleed */
.bull-art-head,
.bull-art-body {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==============================================================
   HERO
   ============================================================== */
/* .bull's reset sets `figure { margin: 0 }` at equal-or-higher specificity,
   so the centring has to out-specify it or the hero ranges left */
.bull .bull-art-hero {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* wide, but never so tall that the headline starts below the fold —
   a reader arriving from search must see what they clicked */
.bull-art-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 520px);
  object-fit: cover;
  border-radius: var(--r);
  background: var(--canvas-2);
}

/* ==============================================================
   TITLE BLOCK
   ============================================================== */
.bull-art-head {
  text-align: center;
  margin-top: clamp(var(--s32), 3.5vw, var(--s48));
  margin-bottom: clamp(var(--s32), 3.5vw, var(--s48));
}

.bull-art-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t1) var(--ease);
}
.bull-art-back svg { width: 14px; height: 14px; }
.bull-art-back:hover { color: var(--orange); }

.bull-art-title {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.bull-art-standfirst {
  margin-top: var(--s24);
  font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.bull-art-meta {
  margin-top: var(--s24);
  padding-top: var(--s24);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bull-art-meta-dot { color: var(--line); }

/* ==============================================================
   PROSE — admin-typed HTML, given a real reading rhythm.
   Every element an editor can paste is accounted for here.
   ============================================================== */
.bull-prose {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--ink);
}
.bull-prose > * { margin-block: 0 1.35em; }
.bull-prose > *:last-child { margin-bottom: 0; }

/* the opening paragraph carries a touch more weight, as a lede should */
.bull-prose > p:first-child { font-size: 1.26rem; line-height: 1.65; color: var(--ink); }

.bull-prose p { text-wrap: pretty; }

/* more space above a heading than below it */
.bull-prose h2,
.bull-prose h3,
.bull-prose h4 { color: var(--ink); text-wrap: balance; }

.bull-prose h2 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin-top: 2.1em;
  margin-bottom: 0.55em;
}
.bull-prose h3 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.bull-prose h4 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 1.8em;
  margin-bottom: 0.45em;
}
.bull-prose > :is(h2, h3, h4):first-child { margin-top: 0; }

.bull-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--t1) var(--ease);
}
.bull-prose a:hover { color: var(--orange-2); }

.bull-prose strong { font-weight: 700; }
.bull-prose em { font-style: italic; }

.bull-prose ul,
.bull-prose ol { padding-left: 1.4em; }
.bull-prose li { margin-bottom: 0.55em; }
.bull-prose li::marker { color: var(--orange); font-weight: 700; }
.bull-prose ul ul,
.bull-prose ol ol,
.bull-prose ul ol,
.bull-prose ol ul { margin-block: 0.55em 0; }

/* a quote reads as a statement, in the world's own display face */
.bull-prose blockquote {
  margin-block: 2em;
  padding-left: 0;
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  line-height: 1.18;
  color: var(--ink);
  text-transform: none;
}
.bull-prose blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--fd);
  font-size: 3.2rem;
  line-height: 0.6;
  color: var(--orange);
  margin-bottom: var(--s16);
}
.bull-prose blockquote p { margin-bottom: 0.4em; }
.bull-prose blockquote p:last-child { margin-bottom: 0; }
.bull-prose blockquote cite {
  display: block;
  margin-top: var(--s16);
  font-family: var(--fb);
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* images break the measure — the column is for words */
.bull-prose :is(img, figure, video) {
  width: 100%;
  margin-block: 2em;
}
.bull-prose img {
  height: auto;
  border-radius: var(--r);
  background: var(--canvas-2);
}
.bull-prose figure img { margin-block: 0; }
.bull-prose figcaption {
  margin-top: var(--s12);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

.bull-prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: 2.6em;
}

.bull-prose :is(code, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--canvas-2);
  padding: 0.15em 0.4em;
  border-radius: var(--r);
}
.bull-prose pre {
  background: var(--canvas-2);
  padding: var(--s24);
  border-radius: var(--r);
  overflow-x: auto;
  font-size: 0.95rem;
  line-height: 1.6;
}
.bull-prose pre code { background: none; padding: 0; }

/* an editor pasting a table should not break the page */
.bull-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  display: block;
  overflow-x: auto;
}
.bull-prose :is(th, td) {
  border-bottom: 1px solid var(--line);
  padding: var(--s12);
  text-align: left;
  vertical-align: top;
}
.bull-prose th { font-weight: 700; }

/* ==============================================================
   SHARE
   ============================================================== */
.bull-art-share {
  margin-top: clamp(var(--s40), 5vw, var(--s64));
  padding-top: var(--s32);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s16);
  flex-wrap: wrap;
}
.bull-art-share-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-art-share-links { display: flex; gap: var(--s12); flex-wrap: wrap; }
.bull-art-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.bull-art-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.bull-art-share-btn:hover { border-color: var(--ink); color: var(--ink); }
.bull-art-share-btn.is-copied { border-color: var(--orange); color: var(--orange-2); }

/* ==============================================================
   MORE STORIES / CARDS
   ============================================================== */
.bull-art-more { background: var(--canvas); padding-block: var(--band); }
.bull-art-more-head { margin-bottom: clamp(var(--s32), 4vw, var(--s48)); }
.bull-art-more-h {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h2c);
  line-height: 1.02;
  text-transform: uppercase;
  margin-top: var(--s16);
}


/* ==============================================================
   INDEX — the latest story leads, the rest are a ruled list
   ============================================================== */
/* first section on its page: the nav is right above it, so the top band
   is trimmed rather than left at full section spacing */
.bull-news {
  background: var(--canvas);
  padding-top: clamp(var(--s32), 4vw, var(--s64));
  padding-bottom: var(--band);
}
.bull-news-head { max-width: 60ch; margin-bottom: clamp(var(--s40), 5vw, var(--s64)); }
.bull-news-h {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h2b);
  line-height: 1.0;
  text-transform: uppercase;
  margin-top: var(--s16);
}
.bull-news-intro {
  margin-top: var(--s16);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 50ch;
}

.bull-news-lead {
  display: grid;
  gap: clamp(var(--s24), 3vw, var(--s48));
  align-items: center;
  padding-bottom: clamp(var(--s40), 4vw, var(--s64));
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .bull-news-lead { grid-template-columns: 1.1fr 1fr; } }

.bull-news-lead-media { display: block; overflow: hidden; border-radius: var(--r); background: var(--canvas-2); }
.bull-news-lead-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform var(--t3) var(--ease);
}
.bull-news-lead:hover .bull-news-lead-media img { transform: scale(1.03); }

.bull-news-lead-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s12); }
.bull-news-lead-flag {
  display: inline-block;
  padding: 5px 11px;
  background: var(--orange);
  color: var(--on-orange);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r);
}
.bull-news-lead-date {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-news-lead-title {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.bull-news-lead-sub { font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.bull-news-lead-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s8);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.bull-news-lead-go svg { width: 14px; height: 14px; transition: transform var(--t2) var(--ease); }
.bull-news-lead:hover .bull-news-lead-go svg { transform: translate(3px, -3px); }

.bull-news-list { list-style: none; margin: 0; padding: 0; }
.bull-news-row { border-bottom: 1px solid var(--line); }
.bull-news-rowlink {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s16);
  padding-block: clamp(var(--s24), 2.5vw, var(--s32));
  transition: background var(--t1) var(--ease);
}
@media (min-width: 760px) {
  .bull-news-rowlink { grid-template-columns: 128px 1fr 132px 26px; gap: var(--s32); }
}
.bull-news-row-date {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.bull-news-row-main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.bull-news-row-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t1) var(--ease);
}
.bull-news-rowlink:hover .bull-news-row-title { color: var(--orange-2); }
.bull-news-row-sub { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.bull-news-row-media { display: none; }
@media (min-width: 760px) {
  .bull-news-row-media { display: block; overflow: hidden; border-radius: var(--r); background: var(--canvas-2); }
  .bull-news-row-media img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
}
.bull-news-row-arrow {
  width: 26px; height: 26px;
  color: var(--ink-3);
  justify-self: end;
  transition: transform var(--t2) var(--ease), color var(--t1) var(--ease);
}
.bull-news-rowlink:hover .bull-news-row-arrow { color: var(--orange); transform: translate(3px, -3px); }

.bull-news-empty {
  padding-block: clamp(var(--s48), 6vw, var(--s96));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s16);
  border-top: 1px solid var(--line);
}
.bull-news-empty-mark { font-family: var(--fd); font-size: 3rem; line-height: 1; color: var(--orange); }
.bull-news-empty h2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h3);
  text-transform: uppercase;
  color: var(--ink);
}
.bull-news-empty p { color: var(--ink-2); max-width: 52ch; line-height: 1.6; }
.bull-news-empty .bull-btn { margin-top: var(--s8); }

.bull-news-pager {
  margin-top: clamp(var(--s32), 4vw, var(--s48));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  flex-wrap: wrap;
}
.bull-news-pager-status { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .bull-news-lead-media img,
  .bull-news-lead-go svg,
  .bull-news-row-arrow,
  .bull-art-share-btn,
  .bull-art-back,
  .bull-news-row-title { transition: none; }
  .bull-news-lead:hover .bull-news-lead-media img { transform: none; }
}