/* The Marked Chart Wire: an old-style newspaper front page. Colors come only from tokens.css. */

/* ---------- newsprint ---------- */
body.wire{
  background-color:var(--news-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.075'/%3E%3C/svg%3E");
  color:var(--news-ink);
}
.wire .bar{background:var(--news-paper);border-bottom-color:var(--news-rule-2)}
.wire .paper{width:min(1240px,100% - 32px);margin:0 auto;padding:14px 0 36px;font:400 17px/1.5 var(--news-body);color:var(--news-ink)}
@media (min-width:768px){.wire .paper{width:min(1240px,100% - 48px)}}
.wire .paper a{color:inherit}
.wire .paper p{margin:0}
.wire .paper h1,.wire .paper h2,.wire .paper h3{color:var(--news-ink);margin:0;letter-spacing:0;font-variation-settings:normal}

/* thick-thin double rule */
.wire .tt{height:2px;border-top:3px solid var(--news-rule);border-bottom:1px solid var(--news-rule);box-sizing:content-box}

/* ---------- masthead ---------- */
.wire .mast{display:grid;grid-template-columns:1fr;grid-template-areas:"title" "motto" "ears";justify-items:center;gap:6px;padding:6px 0 10px}
.wire .mast-title{grid-area:title;font:400 clamp(30px,8.4vw,84px)/1.05 var(--news-black);color:var(--news-ink);text-decoration:none;text-align:center;white-space:nowrap;letter-spacing:.005em}
.wire .mast-title:hover{text-decoration:none}
.wire .motto{grid-area:motto;font:italic 400 15px/1.3 var(--news-body);color:var(--news-ink-2);text-align:center}
.wire .motto::before,.wire .motto::after{content:"\2726";font-style:normal;font-size:10px;vertical-align:2px;margin:0 10px;color:var(--news-ink-3)}
.wire .ear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--news-rule);outline:1px solid var(--news-rule);outline-offset:2px;padding:6px 10px;min-width:150px;font:400 14px/1.25 var(--news-body)}
.wire .ear-k{font:700 11px/1.3 var(--news-body);letter-spacing:.14em;text-transform:uppercase;color:var(--news-ink-2)}
.wire .ear-v{font:700 18px/1.25 var(--news-head);text-decoration:none}
.wire .ear-v b{font-weight:900}
.wire .ear-v span{font:600 15px/1.2 var(--mono)}
.wire .ears{grid-area:ears}
@media (max-width:899px){
  .wire .mast{grid-template-areas:"title title" "motto motto" "l r";grid-template-columns:1fr 1fr;column-gap:12px}
  .wire .ear{min-width:0;width:100%;padding:5px 6px}
  .wire .ear-l{grid-area:l}.wire .ear-r{grid-area:r}
  .wire .ear-v{font-size:16px}
}
@media (min-width:900px){
  .wire .mast{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"l title r" "l motto r";align-items:center;column-gap:20px;padding:10px 0 12px}
  .wire .ear-l{grid-area:l;justify-self:start}.wire .ear-r{grid-area:r;justify-self:end}
  .wire .mast-title{font-size:clamp(40px,calc(10vw - 40px),84px)}   /* leaves room for both ears from 900px up */
}
.wire .mast-sm{padding:4px 0 6px}
.wire .mast-sm .mast-title{font-size:clamp(28px,5.2vw,52px)}

/* dateline */
.wire .dateline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 10px;padding:6px 0 5px;border-bottom:1px solid var(--news-rule);
  font:700 12px/1.4 var(--news-body);letter-spacing:.13em;text-transform:uppercase;text-align:center}
.wire .dateline i{font-style:normal;color:var(--news-ink-3)}
.wire .ed-live{display:inline-flex;align-items:center;gap:6px}
.wire .pulse{width:7px;height:7px;border-radius:50%;background:var(--news-dn);animation:wire-pulse 2s ease-in-out infinite}
@keyframes wire-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.wire .pulse{animation:none}}
.wire .paused{margin:8px 0 0;padding:6px 10px;border:1px dashed var(--news-rule);text-align:center;font:italic 700 15px/1.4 var(--news-head)}

/* section nav: scrolls sideways on a phone, never the page */
.wire .secnav{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;padding:2px 0;border-bottom:1px solid var(--news-rule)}
.wire .secnav::-webkit-scrollbar{display:none}
.wire .secnav a{flex:none;padding:8px 12px;font:700 13px/1.2 var(--news-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--news-ink);border-left:1px solid var(--news-rule-2)}
.wire .secnav a:first-child{border-left:0;margin-left:auto}
.wire .secnav a:last-child{margin-right:auto}
.wire .secnav a:hover{text-decoration:underline;text-underline-offset:4px}
.wire .secnav a[aria-current="page"]{background:var(--news-ink);color:var(--news-paper)}

/* ---------- shared story parts ---------- */
.wire .kicker{display:block;margin:0 0 6px;font:700 11.5px/1.3 var(--news-body);letter-spacing:.16em;text-transform:uppercase;color:var(--news-ink-2)}
.wire .kicker::before{content:"";display:inline-block;width:7px;height:7px;background:var(--news-ink);margin-right:7px;vertical-align:1px}
.wire h2 a,.wire h3 a{text-decoration:none}
.wire h2 a:hover,.wire h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.wire .byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font:italic 400 13.5px/1.3 var(--news-body);color:var(--news-ink-3)}
.wire .chips{display:inline-flex;flex-wrap:wrap;gap:5px;font-style:normal}
.wire .chip{display:inline-flex;align-items:baseline;gap:5px;padding:1px 6px;border:1px solid var(--news-rule);border-radius:2px;font:600 12px/1.45 var(--mono);color:var(--news-ink);text-decoration:none;background:var(--news-paper)}
.wire .chip:hover{background:var(--news-ink);color:var(--news-paper)}
.wire .chip:hover span{color:inherit}
.wire .up{color:var(--news-up)}.wire .dn{color:var(--news-dn)}.wire .flat{color:var(--news-ink-3)}
/* a stock moving 4% or more today prints in solid ink so it pops */
.wire .chip.big{border-color:transparent;color:var(--news-paper)}
.wire .chip.big-up{background:var(--news-up)}.wire .chip.big-dn{background:var(--news-dn)}
.wire .chip.big span{color:inherit}
.wire .chip.big:hover{background:var(--news-ink)}
/* HOT: the red stamp (mc.css) takes the place of the kicker's square */
.wire .kicker.is-hot::before{content:none}
.wire .kicker .news-stamp{vertical-align:0}

/* illustrations print as ink on newsprint; full colour on hover */
.wire .cut{margin:0 0 10px}
.wire .cut .ink{position:relative;display:block;overflow:hidden;background:var(--news-paper-2)}
.wire .cut img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) sepia(.32) contrast(1.18) brightness(.97);mix-blend-mode:multiply;transition:filter .35s ease-out}
.wire .cut .ink::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(21,18,13,.22) .7px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply;transition:opacity .35s ease-out}
.wire .cut:hover img{filter:none;mix-blend-mode:normal}
.wire .cut:hover .ink::after{opacity:0}
.wire .cut.ph img{filter:none}
.wire .cut figcaption{padding:5px 0 0;font:italic 400 12.5px/1.3 var(--news-body);color:var(--news-ink-3)}

/* ---------- Hot right now: a bulletin between thin red double rules, one line per story ---------- */
.wire .hotbox{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 22px;margin:12px 0 0;padding:6px 0 5px;border-top:3px double var(--news-dn);border-bottom:3px double var(--news-dn)}
@media (min-width:900px){.wire .hotbox{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.wire .paper .hot-h{display:flex;align-items:center;gap:8px;padding:4px 0;font:700 12.5px/1.5 var(--news-body);letter-spacing:.2em;text-transform:uppercase;color:var(--news-dn);white-space:nowrap}
.wire .hot-h::before{content:"";width:7px;height:7px;background:var(--news-dn)}
.wire .hotbox ol{list-style:none;margin:0;padding:0}
.wire .hotbox li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:baseline;gap:0 12px;padding:4px 0;border-top:1px dotted var(--news-rule-2)}
.wire .hotbox li:first-child{border-top:0}
.wire .hotbox time{font:700 10.5px/1.4 var(--news-body);letter-spacing:.1em;text-transform:uppercase;color:var(--news-ink-3);white-space:nowrap}
.wire .hot-a{font:700 16.5px/1.3 var(--news-head);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wire .hot-a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:640px){
  .wire .hotbox li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "a a";padding:5px 0}
  .wire .hotbox time{grid-area:t}.wire .hotbox .chips{grid-area:c}
  .wire .hot-a{grid-area:a;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15.5px}
}
.wire .sec-title + .hotbox{margin-top:14px}

/* ---------- front page top: banner lead and the rail ---------- */
.wire .front-top{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:18px 0 22px}
@media (min-width:1000px){
  .wire .front-top{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:0}
  .wire .rail{border-left:1px solid var(--news-rule);margin-left:24px;padding-left:24px}
}
.wire .lead .kicker{font-size:13px}
.wire .lead-h{font:900 clamp(30px,4.6vw,58px)/1.02 var(--news-head);letter-spacing:-.012em;text-wrap:balance;margin:0 0 16px}
.wire .lead-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:700px){
  .wire .lead-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0}
  .wire .lead-text{border-left:1px solid var(--news-rule-2);margin-left:20px;padding-left:20px}
}
.wire .dek{font:400 19px/1.52 var(--news-body);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.wire .dropcap::first-letter{float:left;font:900 5.1em/.78 var(--news-head);margin:.07em .09em 0 0;color:var(--news-ink)}
@supports (initial-letter:3){.wire .dropcap::first-letter{float:none;initial-letter:3;font-size:1em;line-height:1;margin:0 .12em 0 0}}
.wire .lead .byline{margin-top:12px}
.wire .lead .cut{margin:0}

/* the row of second stories under the banner */
.wire .seconds{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid var(--news-rule)}
@media (min-width:700px){
  .wire .seconds{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .wire .second+.second{border-left:1px solid var(--news-rule-2);margin-left:18px;padding-left:18px}
}
@media (max-width:699px){.wire .second+.second{border-top:1px solid var(--news-rule-2);padding-top:12px}}
.wire .second-h{font:700 21px/1.14 var(--news-head);margin:0 0 6px;text-wrap:pretty}
.wire .second-p{font:400 15.5px/1.48 var(--news-body);text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* rail boxes */
.wire .rail{display:flex;flex-direction:column;gap:18px}
.wire .focus{border:3px double var(--news-rule);padding:12px 14px 10px;background:var(--news-paper)}
.wire .focus-k{font:700 11.5px/1.3 var(--news-body);letter-spacing:.2em;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--news-rule);padding-bottom:5px}
.wire .focus-h{font:italic 900 30px/1.08 var(--news-head);text-align:center;margin:8px 0 2px}
.wire .focus-n{font:italic 400 13.5px/1.3 var(--news-body);text-align:center;color:var(--news-ink-3);margin-bottom:6px}
.wire .focus ol{list-style:none;margin:0;padding:0;counter-reset:f}
.wire .focus li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;padding:7px 0;border-top:1px dotted var(--news-rule-2);counter-increment:f}
.wire .focus li::before{content:counter(f);grid-row:1/3;font:900 22px/1 var(--news-head);color:var(--news-ink-3);min-width:16px}
.wire .focus li time{font:700 10.5px/1.4 var(--news-body);letter-spacing:.12em;text-transform:uppercase;color:var(--news-ink-3)}
.wire .focus li a{font:700 16px/1.22 var(--news-head);text-decoration:none}
.wire .focus li a:hover{text-decoration:underline;text-underline-offset:3px}
.wire .inside{border-top:3px solid var(--news-rule);padding-top:2px}
.wire .inside-h{border-top:1px solid var(--news-rule);padding:6px 0 4px;font:700 12px/1.3 var(--news-body);letter-spacing:.18em;text-transform:uppercase;text-align:center}
.wire .inside ul{list-style:none;margin:0;padding:0}
.wire .inside a{display:flex;align-items:baseline;gap:6px;padding:3px 0;text-decoration:none;font:400 16px/1.35 var(--news-body)}
.wire .inside a span{font-variant-caps:small-caps;letter-spacing:.04em}
.wire .inside a i{flex:1;border-bottom:1px dotted var(--news-ink-3);transform:translateY(-4px);min-width:16px}
.wire .inside a b{font:700 15px/1 var(--news-head)}
.wire .inside a:hover span,.wire .inside a[aria-current="page"] span{text-decoration:underline;text-underline-offset:3px}
.wire .classified{background:var(--news-paper-2);border:1px solid var(--news-rule);outline:1px solid var(--news-rule);outline-offset:-5px;padding:14px 16px 13px;text-align:center}
.wire .cl-h{font:900 22px/1 var(--news-head);letter-spacing:.24em;text-transform:uppercase;padding:2px 0 8px;margin:0 6px 8px;border-bottom:1px solid var(--news-rule)}
.wire .cl-body{font:700 17px/1.35 var(--news-body)}
.wire .cl-cta{display:inline-block;margin-top:9px;font:italic 700 15px/1.3 var(--news-head);text-decoration:underline;text-underline-offset:3px}
.wire .cl-cta:hover{background:var(--news-ink);color:var(--news-paper);text-decoration:none}

/* ---------- band headings ---------- */
.wire .band{display:flex;align-items:center;gap:14px;margin:6px 0 16px;font:700 13px/1.3 var(--news-body);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.wire .band::before,.wire .band::after{content:"";flex:1;height:2px;border-top:3px solid var(--news-rule);border-bottom:1px solid var(--news-rule);box-sizing:content-box}
.wire .band span{flex:none;max-width:80%}

/* ---------- sections: one boxed block per section, in rows like a newspaper's section page ---------- */
/* Rows line up (no column flow), a thin rule runs between blocks and each row's "More" lines sit level.
   A short last row is widened so the page never ends on empty cells. */
.wire .sections{display:grid;grid-template-columns:minmax(0,1fr);row-gap:26px;padding-bottom:6px;overflow:hidden}
.wire .sec-block{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.wire .sec-block .more{margin-top:auto}
@media (min-width:700px){
  .wire .sections{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -13px}
  .wire .sec-block{padding:0 13px;border-left:1px solid var(--news-rule-2);margin-left:-1px}   /* the first column's rule is clipped */
}
@media (min-width:1000px){.wire .sections{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.wire .sections{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:999px){
  .wire .sec-block:nth-child(2n+1):last-child{grid-column:1/-1}
}
@media (min-width:1000px) and (max-width:1199px){
  .wire .sec-block:nth-child(3n+1):last-child{grid-column:1/-1}
  .wire .sec-block:nth-child(3n+2):last-child{grid-column:span 2}
}
@media (min-width:1200px){
  .wire .sec-block:nth-child(4n+1):last-child{grid-column:1/-1}
  .wire .sec-block:nth-child(4n+1):nth-last-child(2),.wire .sec-block:nth-child(4n+2):last-child,
  .wire .sec-block:nth-child(4n+3):last-child{grid-column:span 2}
}
/* a widened block: the cut sits beside its top story and the briefs run side by side */
@media (min-width:700px){
  @container (min-width:520px){
    .wire .sec-block .top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto auto auto 1fr;column-gap:22px;align-items:start}
    .wire .sec-block .top>.cut{grid-column:1;grid-row:1/-1;margin:0}
    .wire .sec-block .top>:not(.cut){grid-column:2}
    .wire .sec-block .top-h{font-size:27px}
    .wire .briefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
    .wire .briefs>.brief:only-child{grid-column:1/-1}
  }
  @container (min-width:900px){
    .wire .sec-block .top{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
    .wire .briefs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  }
}
.wire .sec-h{border-top:3px solid var(--news-rule);padding-top:2px;margin-bottom:10px}
.wire .sec-h h2{border-top:1px solid var(--news-rule);border-bottom:1px solid var(--news-rule);padding:5px 0 4px;font:700 15px/1.2 var(--news-body);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.wire .top{padding-bottom:10px}
.wire .top-h{font:700 23px/1.12 var(--news-head);margin:0 0 6px;text-wrap:pretty}
.wire .top-p{font:400 16px/1.5 var(--news-body);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.wire .brief{padding:9px 0;border-top:1px solid var(--news-rule-2)}
.wire .brief-h{font:700 17px/1.18 var(--news-head);margin:0 0 3px}
.wire .brief-p{font:400 14.5px/1.42 var(--news-body);color:var(--news-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wire .brief .byline{margin-top:4px;font-size:12.5px}
.wire .more{display:block;padding:7px 0 0;border-top:1px solid var(--news-rule);font:italic 700 15px/1.3 var(--news-head);text-align:right;text-decoration:none}
.wire .more::after{content:" \2192"}
.wire .more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- section page ---------- */
.wire .sec-title{text-align:center;padding:16px 0 4px}
.wire .sec-title h1{font:900 clamp(40px,8vw,88px)/1 var(--news-head);letter-spacing:.06em;text-transform:uppercase}
.wire .sec-title p{margin-top:8px;font:italic 400 17px/1.4 var(--news-body);color:var(--news-ink-2)}
.wire .sec-title p span{white-space:nowrap}
.wire .sec-title + .front-top{border-top:1px solid var(--news-rule);margin-top:12px}
.wire .day{padding-top:4px}
.wire h2.band{font:700 13px/1.3 var(--news-body);letter-spacing:.2em;text-transform:uppercase;margin:10px 0 16px}
.wire .columns{columns:1;column-gap:26px;column-rule:1px solid var(--news-rule-2);padding-bottom:10px}
@media (min-width:700px){.wire .columns{columns:2}}
@media (min-width:1000px){.wire .columns{columns:3}}
.wire .story{break-inside:avoid;page-break-inside:avoid;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--news-rule-2)}
.wire .story-h{font:700 21px/1.15 var(--news-head);margin:0 0 6px;text-wrap:pretty}
.wire .story-p{font:400 16px/1.5 var(--news-body);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.wire .story:target,.wire .lead:target{animation:wire-ink 2.4s ease-out}
@keyframes wire-ink{0%{background:var(--news-paper-2)}100%{background:transparent}}

/* ---------- empty edition ---------- */
.wire .empty-ed{align-items:start}
.wire .empty-box{border:3px double var(--news-rule);padding:24px 22px;text-align:left}
.wire .empty-box .lead-h{font-size:clamp(30px,4vw,48px)}
.wire .empty-links{margin-top:14px;font:italic 400 17px/1.5 var(--news-body)}
.wire .empty-links a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:1000px){.wire .empty-side{border-left:1px solid var(--news-rule);margin-left:24px;padding-left:24px;display:flex;flex-direction:column;gap:18px}}

/* ---------- footer line and the late-edition notice ---------- */
.wire .wire-foot{padding:10px 0 0;font:italic 400 15px/1.45 var(--news-body);text-align:center;color:var(--news-ink-2)}
.wire .late{position:fixed;z-index:30;left:50%;top:calc(var(--bar-h) + 12px);transform:translateX(-50%);padding:9px 18px;border:1px solid var(--news-paper);outline:2px solid var(--news-ink);
  background:var(--news-ink);color:var(--news-paper);font:italic 700 16px/1.2 var(--news-head);letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px rgba(21,18,13,.28);white-space:nowrap}
.wire .late[hidden]{display:none}
.wire .late:hover{background:var(--news-ink-2)}

@media (max-width:999px){.wire .rail .inside{display:none}}

/* phones: one column, still a newspaper; section thumbnails sit beside the headline */
@media (max-width:699px){
  .wire .sec-block .top .cut{float:right;width:40%;margin:2px 0 8px 12px}
  .wire .top-h{font-size:21px}
  .wire .sec-block .top::after{content:"";display:block;clear:both}
  .wire .story .cut{float:right;width:40%;margin:2px 0 8px 12px}
  .wire .story::after{content:"";display:block;clear:both}
}
@media (max-width:640px){
  .wire .dek{text-align:left}
  .wire .paper{font-size:16px}
  .wire .dateline{font-size:11px;letter-spacing:.1em}
  .wire .secnav a{padding:8px 10px;font-size:12px}
  .wire .dek{font-size:17.5px}
  .wire .focus-h{font-size:26px}
  .wire .sec-title h1{letter-spacing:.03em}
}
