/* =============================================================================
   AMORIELLI — The Wire story layout (2026-10-04)
   Loaded after main.css + magazine.css on the Worker-rendered pages
   (templates/news_shell.html). Everything is scoped to .wire-story / .wire-shell,
   so the news hub, live issues and the Sketchbook (same shell) are untouched.

   Dan, 2026-10-04: the body column sat at ~690px with a ~370px void on the right
   at 1440, and the contents box took twice the room it needed. Now: a slim rail
   pushed to the left gutter, ONE centred reading measure, and studio figures that
   break out wider than the text inside the story, so the page reads as a single
   magazine flow (no right-hand column, no parked images).
   ========================================================================== */

.wire-shell{
  --wr-pad:clamp(18px,4vw,40px);          /* near-zero side gutter */
  --wr-railw:176px;                        /* was 216px + a 22px-padded card */
  --wr-gap:clamp(28px,3vw,48px);
  --wr-measure:680px;                      /* the reading column (~68ch at 18px) */
  --wr-mid:920px;                          /* 3:2 figures */
  --wr-wide:1120px;                        /* 16:9 figures */
}
.article-shell.wire-shell{padding-left:var(--wr-pad);padding-right:var(--wr-pad)}

/* ---------- one centred measure inside the main track --------------------- */
.wire-story .article-main>*{max-width:var(--wr-measure);margin-left:auto;margin-right:auto}
.wire-story .article-main>.prose{max-width:none}
.wire-story .prose--feature>*{max-width:var(--wr-measure);margin-left:auto;margin-right:auto}
.wire-story .prose--feature>.pull-quote{max-width:24ch}
.wire-story .prose--feature>.aside{max-width:calc(var(--wr-measure) + 80px)}
.wire-story .prose--feature>.endmark{max-width:none;margin-right:0;
  margin-left:max(0px,calc((100% - var(--wr-measure)) / 2))}
/* inter-word justification (magazine.css asks for inter-character, which spaces out letters) */
.wire-story .prose--feature>p{text-justify:auto}
@media(min-width:1180px){
  .wire-shell{--wr-measure:760px}                /* ~68ch at 20.5px */
  .wire-story .prose{font-size:clamp(19.5px,1.42vw,21.5px);line-height:1.62}
}

/* ---------- the rail: slim, unboxed, at the left gutter -------------------- */
@media(min-width:1180px){
  .article-shell.wire-shell{
    --railw:var(--wr-railw);--railgap:var(--wr-gap);--bleedoff:0px;
    grid-template-columns:var(--railw) minmax(0,1fr);column-gap:var(--railgap);
  }
  .wire-shell .article-rail__inner{
    top:96px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none;
    background:none;border:0;border-radius:0;box-shadow:none;padding:4px 0 0;
  }
  .wire-shell .article-rail__inner::-webkit-scrollbar{display:none}
  .wire-shell .article-rail .crumb{margin:0 0 10px}
  .wire-shell .article-rail__meta{margin:0 0 16px;line-height:1.6}
  .wire-shell .onpage{margin:0 0 20px}
  .wire-shell .onpage a{padding:6px 0 6px 12px;font-size:12.5px;line-height:1.32}
  .wire-shell .rail-cta{padding-top:14px}
  .wire-shell .rail-cta b{font-size:14.5px}
}

/* ---------- studio figures ------------------------------------------------- */
.wire-story .prose--feature>.wire-fig{
  max-width:none;width:min(100%,var(--wr-wide));
  margin:clamp(40px,4.6vw,68px) auto clamp(40px,4.6vw,64px);
}
.wire-story .prose--feature>.wire-fig--mid{width:min(100%,var(--wr-mid))}
.wire-fig img{display:block;width:100%;height:auto;border-radius:2px;background:var(--bone-2)}
.wire-story .wire-fig figcaption{
  display:block;max-width:72ch;margin:12px 0 0;
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted);letter-spacing:.005em;
}
.wire-fig__cap{color:var(--ink-2,#22282a)}
.wire-fig__credit{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* the opener's own caption, first line of the article column */
.wire-herocap{margin:0 auto clamp(26px,3vw,40px);padding-bottom:14px;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-2,#22282a)}
.wire-herocap__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:8px}
.wire-herocap .wire-fig__credit{margin-left:4px}

/* ---------- tablet + phone ------------------------------------------------- */
@media(max-width:1179px){
  .wire-story .crumb--mobile{margin-bottom:22px!important}
}
/* phones: figures run edge to edge, captions stay on the text edge */
@media(max-width:760px){
  .wire-story .prose--feature>.wire-fig,
  .wire-story .prose--feature>.wire-fig--mid{
    width:calc(100% + 2 * var(--wr-pad));max-width:none;
    margin-left:calc(-1 * var(--wr-pad));margin-right:calc(-1 * var(--wr-pad));
  }
  .wire-fig img{border-radius:0}
  .wire-story .wire-fig figcaption{padding:0 var(--wr-pad);font-size:13px}
  .wire-story .prose--feature>.aside{max-width:none}
}