/* SHAPE: Broadsheet Feed.
   A masthead, a status bar, a domain index, and the week's reading as
   collapsible domain sections with tight article rows, then an editions
   archive. No other v2 page may use this shape.

   Fixes from the v1 signal-fire page: it rendered every section inline in
   one column that ran 824% of viewport height (~940 links, ~8,400px) with
   no way to jump or collapse. The index skips to a section; each section
   collapses; the article row is tightened. Structure before styling, as
   the critique asked. */

/* ---------- Masthead ---------- */
.sf-head { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-5), 4vw, var(--sp-6)); }
.sf-head h1 { font-size: var(--fs-hero); max-width: 16ch; }
.sf-head .lead { margin-top: var(--sp-5); max-width: 64ch; }
.sf-back { margin-bottom: var(--sp-4); }

/* Edition detail: download / all-editions actions under the reading list. */
.sf-ed-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-8); }

/* ---------- Status bar ---------- */
.sf-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.sf-bar-label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-right: var(--sp-3); }
.sf-bar-date a { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: var(--tr-display); }
.sf-bar-date a:hover { color: var(--clay-deep); }
.sf-bar-meta { font-size: var(--fs-small); color: var(--muted); }
.sf-kindle { margin-left: var(--sp-3); font-weight: 500; }

/* ---------- Domain index ---------- */
.sf-index { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-6); }
.sf-index-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding: 7px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.sf-index-link:hover { border-color: var(--field); color: var(--field); text-decoration: none; }
.sf-index-n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); }

/* ---------- Sections ---------- */
.sf-section { border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.sf-section:first-of-type { border-top: 1px solid var(--line-strong); }
.sf-section > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600;
  color: var(--ink); letter-spacing: var(--tr-display);
}
.sf-section > summary::-webkit-details-marker { display: none; }
.sf-section > summary:hover { color: var(--field); }
.sf-section > summary:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.sf-sec-n { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; color: var(--faint); }
.sf-sec-mark { margin-left: auto; flex: none; width: 24px; height: 24px; position: relative; border: 1px solid var(--line-strong); border-radius: 50%; }
.sf-sec-mark::before, .sf-sec-mark::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--field); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.sf-sec-mark::before { width: 10px; height: 1.5px; }
.sf-sec-mark::after { width: 1.5px; height: 10px; }
.sf-section[open] > summary .sf-sec-mark { background: var(--field); border-color: var(--field); }
.sf-section[open] > summary .sf-sec-mark::before, .sf-section[open] > summary .sf-sec-mark::after { background: var(--paper); }
.sf-section[open] > summary .sf-sec-mark::after { transform: translate(-50%, -50%) scaleY(0); }

/* ---------- Articles ---------- */
.sf-articles { list-style: none; padding-bottom: var(--sp-5); }
.sf-article { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.sf-article:first-child { border-top: none; }
.sf-article-title { display: inline-block; max-width: 52ch; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: var(--tr-display); }
.sf-article-title:hover { color: var(--clay-deep); text-decoration: underline; }
.sf-article-meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); margin-top: 5px; }
.sf-article-desc { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; max-width: var(--measure); }

.sf-note { margin: var(--sp-6) 0; font-size: var(--fs-small); color: var(--faint); max-width: var(--measure); }

/* ---------- Archive ---------- */
.sf-archive { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line-strong); }
.sf-archive h2 { margin-bottom: var(--sp-4); }
.sf-editions { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.sf-editions a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none;
}
.sf-editions a:hover { border-color: var(--field); }
.sf-ed-date { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.sf-ed-meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); }

.sf-empty { padding: var(--sp-8) 0; color: var(--muted); max-width: 52ch; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .sf-section > summary { font-size: var(--fs-h3); }
}