/* Newsletter · cadence and the issue explorer (ink band) — every issue by month, the next one due, and a row per topic
   whose marks link to the story that led on it; then the three kinds of email, never, and the editorial rules. */

/* ---------- the explorer ---------- */
.nwl-x{--nwl-x-lab:132px;--nwl-x-col:216px;--nwl-x-fade:64px;--nwl-x-fade-r:72px;padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(16px,2vw,22px);border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:var(--ink-2)}
.nwl-x__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-bottom:22px}
.nwl-x__lbl{margin-right:auto;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)}
.nwl-x__key{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}
.nwl-x__key span{display:inline-flex;align-items:center;gap:8px}
.nwl-x__key i{display:inline-block;width:10px;height:10px;border-radius:50%}
.nwl-x__key i.is-led{background:var(--blue)}
.nwl-x__key i.is-cov{box-shadow:inset 0 0 0 1.5px var(--on-ink-2)}
.nwl-x__key i.is-due{border:1.5px dashed var(--on-ink-3)}
.nwl-x__nav{display:flex;gap:8px}
.nwl-x__nav[hidden]{display:none}
.nwl-x__btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--on-ink-line);border-radius:50%;background:none;color:var(--on-ink);font-family:var(--f);font-size:1.125rem;cursor:pointer;
  transition:border-color var(--d1) var(--e-io),background var(--d1) var(--e-io)}
.nwl-x__btn:hover:not(:disabled){border-color:var(--on-ink-2);background:var(--on-ink-card)}
.nwl-x__btn:disabled{opacity:.35;cursor:default}

.nwl-x__scroll{position:relative}
/* edge fades while there is more to scroll to (rhythm.js): on the right, and on the left just after the sticky topic
   names, so a month half under them fades in rather than showing cut-off words */
.nwl-x__scroll.is-more{-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - var(--nwl-x-fade-r)),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - var(--nwl-x-fade-r)),transparent)}
.nwl-x__scroll.is-back{-webkit-mask-image:linear-gradient(90deg,var(--ink) var(--nwl-x-lab),transparent var(--nwl-x-lab),var(--ink) calc(var(--nwl-x-lab) + var(--nwl-x-fade)));
  mask-image:linear-gradient(90deg,var(--ink) var(--nwl-x-lab),transparent var(--nwl-x-lab),var(--ink) calc(var(--nwl-x-lab) + var(--nwl-x-fade)))}
.nwl-x__scroll.is-back.is-more{-webkit-mask-image:linear-gradient(90deg,var(--ink) var(--nwl-x-lab),transparent var(--nwl-x-lab),var(--ink) calc(var(--nwl-x-lab) + var(--nwl-x-fade)),var(--ink) calc(100% - var(--nwl-x-fade-r)),transparent);
  mask-image:linear-gradient(90deg,var(--ink) var(--nwl-x-lab),transparent var(--nwl-x-lab),var(--ink) calc(var(--nwl-x-lab) + var(--nwl-x-fade)),var(--ink) calc(100% - var(--nwl-x-fade-r)),transparent)}
.nwl-x__grid{display:grid;grid-template-columns:var(--nwl-x-lab) repeat(var(--nwl-x-n),minmax(var(--nwl-x-col),1fr));min-width:min-content}
.nwl-x__months,.nwl-x__topics,.nwl-x__topic{display:grid;grid-template-columns:subgrid}
.nwl-x__months{grid-column:2 / -1;grid-row:1}
.nwl-x__topics{grid-column:1 / -1;grid-row:2;margin-top:18px;border-top:1px solid var(--on-ink-line)}
.nwl-x__topic{grid-column:1 / -1}
.nwl-x__corner{grid-column:1;grid-row:1;align-self:stretch;display:flex;align-items:flex-end;position:sticky;left:0;z-index:2;padding:0 12px 4px 0;background:var(--ink-2);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3)}

/* a month: its name (a link to the archive for that month), then its issue */
.nwl-x__mo{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:0 9px;border-left:1px solid var(--on-ink-line);transition:background var(--d2) var(--e)}
.nwl-x__month{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-family:var(--f);font-size:var(--t-xs);letter-spacing:.06em;color:var(--on-ink-2)}
.nwl-x__month small{margin-left:6px;font-size:var(--t-lbl);color:var(--on-ink-3)}
a.nwl-x__month{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--d1) var(--e-io),text-decoration-color var(--d1) var(--e-io)}
a.nwl-x__month:hover{color:var(--on-ink);text-decoration-color:var(--on-ink-3)}
.nwl-x__issue{display:flex;flex-direction:column;gap:7px;padding:8px;margin:-8px;border-radius:var(--r);color:inherit;transition:background var(--d2) var(--e)}
.nwl-x__issue:hover{background:var(--on-ink-card)}
.nwl-x__cover{position:relative;display:block;aspect-ratio:4 / 3;margin-bottom:6px;border-radius:var(--r-sm);overflow:hidden;background:var(--ink)}
.nwl-x__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);transition:transform .8s var(--e)}
.nwl-x__issue:hover .nwl-x__cover img{transform:scale(1.04)}
.nwl-x__no{position:absolute;left:8px;bottom:8px;display:grid;place-items:center;min-width:34px;height:28px;padding:0 7px;border-radius:var(--r-xs);background:var(--blue);color:var(--on-ink);
  font-family:var(--f);font-size:var(--t-sm);font-weight:500;letter-spacing:-.02em}
/* an issue without a cover: its number, set large, in the same frame */
.nwl-x__cover.is-plain{display:grid;place-items:center;border:1px solid var(--on-ink-line)}
.nwl-x__cover.is-plain .nwl-x__no{position:static;min-width:0;height:auto;padding:0;background:none;font-size:clamp(2.6rem,4vw,3.4rem);letter-spacing:-.05em;color:var(--on-ink-3)}
.nwl-x__meta{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}
.nwl-x__t{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;line-height:1.28;letter-spacing:-.01em;color:var(--on-ink)}
.nwl-x__stat{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.04em;color:var(--on-ink-3)}
/* the issue that is due: an open slot */
.nwl-x__due{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:200px;padding:16px;border:1.5px dashed var(--on-ink-line);border-radius:var(--r);color:var(--on-ink-2);transition:border-color var(--d2) var(--e)}
.nwl-x__due:hover{border-color:var(--on-ink-3)}
.nwl-x__due-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)}
.nwl-x__due-t{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;line-height:1.3;color:var(--on-ink)}
.nwl-x__due-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:var(--t-sm);font-weight:500;color:var(--on-ink)}
.nwl-x__due-cta .i{color:var(--blue)}
.nwl-x__gap{display:flex;align-items:center;justify-content:center;min-height:120px;border-radius:var(--r);border:1px solid var(--on-ink-line);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}

/* a topic row: its name (a link to the archive filtered to it), then a mark per month */
.nwl-x__tl,.nwl-x__cell{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--on-ink-line)}
.nwl-x__tl{position:sticky;left:0;z-index:2;padding:0 12px 0 0;background:var(--ink-2);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2);transition:color var(--d1) var(--e-io)}
.nwl-x__tl:hover{color:var(--on-ink)}
.nwl-x__topic.is-quiet .nwl-x__tl{color:var(--on-ink-3)}
.nwl-x__cell{position:relative;justify-content:center;gap:4px;border-left:1px solid var(--on-ink-line);transition:background var(--d2) var(--e)}
.nwl-x__dot{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.nwl-x__dot::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--blue);transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.nwl-x__dot.is-cov::before{width:12px;height:12px;background:none;box-shadow:inset 0 0 0 1.5px var(--on-ink-2)}
.nwl-x__dot:hover::before,.nwl-x__dot:focus-visible::before{transform:scale(1.25);box-shadow:0 0 0 5px var(--blue-wash-2)}
.nwl-x__dot.is-cov:hover::before,.nwl-x__dot.is-cov:focus-visible::before{box-shadow:inset 0 0 0 1.5px var(--on-ink),0 0 0 5px var(--on-ink-card)}
.nwl-x__dot:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.nwl-x__none{display:block;width:10px;height:2px;border-radius:2px;background:var(--on-ink-line)}
/* the story behind a mark: hidden until the mark is pointed at or focused (the link text for assistive tech) */
.nwl-x__tip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nwl-x__dot:hover .nwl-x__tip,.nwl-x__dot:focus-visible .nwl-x__tip{z-index:4;left:50%;bottom:calc(100% + 2px);width:max-content;max-width:220px;height:auto;margin:0;padding:8px 11px;overflow:visible;clip:auto;clip-path:none;white-space:normal;
  transform:translateX(-50%);border-radius:var(--r-sm);background:var(--paper);box-shadow:var(--sh-2);font-family:var(--f-b);font-size:var(--t-xs);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--ink);pointer-events:none}
.nwl-x__topic .nwl-x__cell:last-child .nwl-x__dot:hover .nwl-x__tip,.nwl-x__topic .nwl-x__cell:last-child .nwl-x__dot:focus-visible .nwl-x__tip{left:auto;right:0;transform:none}

/* an issue pointed at or focused lights its column (rhythm.js) */
.nwl-x__mo.is-col,.nwl-x__cell.is-col{background:var(--on-ink-card)}

.nwl-x__hint{display:none;margin-top:12px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}
.nwl-x.is-fits .nwl-x__hint{display:none}

/* ---------- streams, never, rules ---------- */
.nwl-rhythm__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,88px);margin-top:clamp(48px,6vw,88px);align-items:start}
.nwl-rhythm__h{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--on-ink-line);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}
.nwl-streams__row{display:grid;grid-template-columns:52px minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--on-ink-line)}
.nwl-streams__glyph{display:flex;gap:5px;align-self:center}
.nwl-streams__glyph i{display:block;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.nwl-streams__row.is-topic .nwl-streams__glyph i,.nwl-streams__row.is-roles .nwl-streams__glyph i{background:none;box-shadow:inset 0 0 0 1.5px var(--on-ink-line)}
.nwl-streams__row.is-topic .nwl-streams__glyph i:nth-child(2){background:var(--blue);box-shadow:none}
.nwl-streams__row.is-roles .nwl-streams__glyph i:nth-child(4){background:var(--on-ink-2);box-shadow:none}
.nwl-streams__t{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;color:var(--on-ink)}
.nwl-streams__when{font-size:var(--t-sm);line-height:1.5;color:var(--on-ink-2)}
.nwl-streams__who{font-family:var(--f);font-size:var(--t-xs);line-height:1.5;color:var(--on-ink-3)}
.nwl-never{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.nwl-never__t{margin-right:6px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}
.nwl-never__i{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 14px 0 34px;border:1px solid var(--on-ink-line);border-radius:var(--r-pill);font-size:var(--t-xs);color:var(--on-ink-2)}
.nwl-never__i::before,.nwl-never__i::after{content:"";position:absolute;left:14px;top:50%;width:11px;height:1.5px;margin-top:-.75px;border-radius:1px;background:var(--on-ink-3)}
.nwl-never__i::before{transform:rotate(45deg)}
.nwl-never__i::after{transform:rotate(-45deg)}
.nwl-rules__list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--on-ink-line)}
.nwl-rules__n{font-family:var(--f);font-size:var(--t-xs);color:var(--blue);padding-top:2px}
.nwl-rules__list p{font-size:var(--t-sm);line-height:1.6;color:var(--on-ink-2)}
.nwl-rules__list b{display:block;margin-bottom:4px;font-family:var(--f-h);font-size:1rem;font-weight:500;color:var(--on-ink)}

@media (max-width:1180px){
  .nwl-x{--nwl-x-lab:118px;--nwl-x-col:184px}
}
@media (max-width:960px){
  .nwl-rhythm__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .nwl-x__hint{display:block}
}
@media (max-width:760px){
  .nwl-streams__row{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .nwl-streams__when,.nwl-streams__who{grid-column:2}
}
@media (max-width:600px){
  .nwl-x{--nwl-x-lab:96px;--nwl-x-col:188px;--nwl-x-fade:20px;--nwl-x-fade-r:28px;padding:18px 16px 14px}
  .nwl-x__key{width:100%}
  .nwl-x__t{font-size:1rem}
  .nwl-x__due{min-height:160px}
}
@media (prefers-reduced-motion:reduce){
  .nwl-x__cover img,.nwl-x__dot::before,.nwl-x__mo,.nwl-x__cell,.nwl-x__issue{transition:none}
  .nwl-x__issue:hover .nwl-x__cover img{transform:none}
}