/* ============================================================================
   Perspectives: the shared stylesheet.

   One file for every page under /perspectives/ : the index and each article.
   It is linked, not inlined, so a reader who opens a second article gets it
   from cache instead of another 8 KB in the HTML.

   The article pages are built to match the reader overlay inside index.html:
   same text column, same heading sizes, same coral rules, measured rather than
   eyeballed (reference/README.md holds the numbers). If you change a size here,
   change it there too, or the two stop agreeing.
   ========================================================================== */

:root{
  --field:#000000;--ink:#f2f5f7;--ink-2:#a9acaf;
  --coral:#eb3d23;--coral-rgb:235,61,35;--coral-2:#f59f92;--mark:#f06d59;
  --txt-2:rgba(243,245,247,.7);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#050505;color:var(--txt-2);
  font-family:'Open Sans',system-ui,sans-serif;font-size:16.5px;line-height:1.72;
  min-height:100vh;overflow-x:hidden}
@media(max-width:480px){body{font-size:16px}}
/* the reader's panel light, held to the viewport the way the panel holds it */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 40% at 50% 0%,rgba(var(--coral-rgb),.10),transparent 70%)}
::selection{background:rgba(240,109,89,.32);color:#f3f5f7}

/* The reader's panel is inset from the viewport by clamp(0px,2vw,28px) and has a
   1px border. The column width has to match it, so the page carries the same
   inset: at 1440 and at 390 the text column then lands on the reader's, exactly. */
.np-doc{padding-inline:calc(clamp(0px,2vw,28px) + 1px);max-width:100%}

.np-doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(20px,3vw,40px);border-bottom:1px solid rgba(255,255,255,.12)}
.np-doc-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Open Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-2);text-decoration:none}
.np-doc-eyebrow:hover{color:var(--coral)}
.np-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 12px rgba(var(--coral-rgb),.75)}
.np-doc-home{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 9px;text-decoration:none;
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:14px;letter-spacing:-.02em;
  color:var(--mark);min-height:40px}
.np-doc-home small{font-family:'Open Sans',sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.02em;color:rgba(242,245,247,.46)}
.np-doc-home:hover{color:var(--coral-2)}
@media(max-width:560px){.np-doc-home small{display:none}}

.np-main{padding:clamp(32px,4.2vw,64px) clamp(24px,4.4vw,72px)}
.np-main-inner{max-width:660px;margin:0 auto}
.np-main-kicker{font-family:'Open Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral-2);margin-bottom:18px}
/* Only one thing can be the brightest. The quotation holds full white, so the headline
   above it sits a step back: it is still the largest thing, it just stops competing. */
.np-main-title{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(24px,3vw,40px);line-height:1.12;letter-spacing:-.025em;
  color:rgba(242,245,247,.74);
  margin:0 0 clamp(18px,2.2vw,26px);text-wrap:balance}
.np-main-title .np-tbc{font-family:'Open Sans',sans-serif;font-size:.5em}
.np-main-meta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.np-main-date{font-family:'Open Sans',sans-serif;font-size:12px;letter-spacing:.05em;color:rgba(242,245,247,.46)}
.np-main-src{font-family:'Open Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--coral-2)}
.np-main-src.tbc{color:rgba(242,245,247,.34);text-transform:none;letter-spacing:.01em;
  font-style:italic;font-weight:400}
/* the byline, only ever present when a dispatch names an author. It leads the
   meta row, sits at the date's size, and holds the name a step brighter than
   the word "By" so the eye lands on the person rather than the preposition. */
.np-main-by{font-family:'Open Sans',sans-serif;font-size:12px;letter-spacing:.05em;
  color:rgba(242,245,247,.5)}
.np-main-by span{font-weight:600;color:rgba(242,245,247,.78)}
/* the standfirst: the reader shows this line on the card rather than in the pane,
   and a page that opens cold needs it under the headline */
.np-doc-stand{font-family:'Open Sans',sans-serif;font-size:clamp(16px,1.45vw,19px);line-height:1.62;
  color:rgba(242,245,247,.80);margin:0 0 clamp(30px,3.6vw,44px);max-width:54ch;text-wrap:pretty}

.np-block-label{display:flex;align-items:center;gap:10px;font-family:'Open Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-2);margin-bottom:14px}
/* the rule runs on BOTH sides of the label, so it frames the word rather than
   tagging its left edge. Applies to Summary and Our perspective alike. */
.np-block-label::before,.np-block-label::after{content:'';flex:none;width:24px;height:2px;background:var(--coral)}

.np-what{
  background:
    radial-gradient(120% 96% at 2% -8%,rgba(240,109,89,.17),transparent 56%),
    radial-gradient(110% 100% at 100% 104%,rgba(78,84,158,.20),transparent 62%),
    linear-gradient(156deg,#2a2130 0%,#211b27 52%,#191520 100%);
  /* the coral rule runs down BOTH sides: it frames the summary rather than just
     tagging its left edge */
  border:1px solid rgba(255,255,255,.15);
  border-left:2px solid var(--coral);border-right:2px solid var(--coral);
  border-radius:4px;padding:22px 26px;margin-bottom:36px;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -26px rgba(0,0,0,.8)}
.np-what p{font-family:'Open Sans',sans-serif;font-size:15px;line-height:1.66;
  color:rgba(242,245,247,.82);text-wrap:pretty}
.np-what .np-src{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:15px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.12)}
.np-what .np-src a{font-family:'Open Sans',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--coral-2);text-decoration:none;border-bottom:1px solid rgba(245,159,146,.4)}
.np-what .np-src a:hover{color:var(--coral);border-bottom-color:var(--coral)}
/* a named source with no link: same line, no underline, no pointer */
.np-what .np-src .np-src-plain{font-family:'Open Sans',sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;color:rgba(242,245,247,.55)}
.np-what .np-src .np-tbc{font-size:11.5px}

.np-stand{margin-bottom:clamp(30px,3.6vw,44px)}
.np-stand p{font-family:'Open Sans',sans-serif;font-size:clamp(15.5px,1.3vw,18px);line-height:1.7;
  color:rgba(242,245,247,.88);margin-bottom:18px;max-width:58ch;text-wrap:pretty}
.np-stand p:last-child{margin-bottom:0}

/* the source's own words, after ours here: the page leads with the development
   and our position, and closes on the quotation it rests on */
.np-quote{position:relative;margin:0 0 clamp(30px,3.6vw,44px)}
.np-quote p{font-family:'Open Sans',sans-serif;font-weight:400;
  font-size:clamp(17px,1.65vw,22px);line-height:1.52;color:var(--ink);margin:0 0 16px;
  max-width:none;text-wrap:pretty}
.np-qm{color:var(--coral);font-size:1.45em;line-height:0;vertical-align:-.2em;font-weight:600}
.np-quote cite{display:block;font-style:normal;font-family:'Open Sans',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:rgba(242,245,247,.62)}
.np-quote cite .np-q-src{color:var(--coral-2);letter-spacing:.12em;text-transform:uppercase}
.np-quote cite .np-q-credit{display:inline-block;white-space:nowrap}
.np-quote cite a{color:var(--coral-2);text-decoration:none;border-bottom:1px solid rgba(245,159,146,.4)}
.np-quote cite a:hover{color:var(--coral);border-bottom-color:var(--coral)}
.np-quote.tbc p{color:rgba(242,245,247,.38);font-style:italic}
.np-quote.tbc .np-qm{color:rgba(242,245,247,.3)}

/* one appearance for every unfilled slot, so a gap always reads the same way */
.np-tbc{color:rgba(242,245,247,.38);font-style:italic;font-weight:400}

/* ---- the index at /perspectives/ ------------------------------------------
   The list holds the same four things a feed row holds: kicker, headline, date,
   standfirst. It runs down the same 660px column the article pages use, so the
   two read as one section rather than two designs. */
.np-index-title{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(21px,2.4vw,32px);line-height:1.2;letter-spacing:-.025em;color:var(--ink);
  margin:0 0 clamp(28px,3.2vw,40px);text-wrap:balance;max-width:22ch}
/* the second clause is coral and on its own line, the way the feed masthead
   sets the same sentence */
.np-index-title em{font-style:normal;display:block;color:var(--coral-2)}

.np-list{list-style:none;margin:0;padding:0}
.np-list-item{border-top:1px solid rgba(255,255,255,.12)}
/* the whole entry is the link, so the target is the entry and not a word in it */
.np-list-link{display:block;text-decoration:none;color:inherit;
  padding:clamp(20px,2.3vw,26px) 0;transition:color .3s var(--ease)}
.np-list-link:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.np-list-kick{display:block;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--coral-2);margin-bottom:10px}
.np-list-head{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(17px,1.5vw,21px);line-height:1.24;letter-spacing:-.02em;
  color:rgba(242,245,247,.86);margin:0 0 9px;text-wrap:balance;
  transition:color .3s var(--ease)}
.np-list-link:hover .np-list-head{color:var(--coral-2)}
.np-list-date{display:block;font-family:'Open Sans',sans-serif;font-size:12px;
  letter-spacing:.05em;color:rgba(242,245,247,.46);margin-bottom:11px}
.np-list-stand{font-family:'Open Sans',sans-serif;font-size:15.5px;line-height:1.62;
  color:rgba(242,245,247,.72);margin:0;max-width:62ch;text-wrap:pretty}
/* the footer's own top rule closes the list, so the last entry carries none of
   its own: two hairlines with a gap between them read as a stray empty band */
.np-list + .np-doc-foot,.np-main-inner > .np-tbc + .np-doc-foot{margin-top:clamp(30px,3.6vw,44px)}

.np-doc-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(22px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.np-doc-back{display:inline-flex;align-items:center;gap:9px;font-family:'Open Sans',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink);text-decoration:none;
  min-height:44px;transition:gap .3s var(--ease),color .3s var(--ease)}
.np-doc-back svg{width:15px;height:15px;color:var(--coral)}
.np-doc-back:hover{gap:13px;color:var(--coral-2)}
.np-doc-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:auto}
.np-doc-legal a{font-family:'Open Sans',sans-serif;font-size:11.5px;letter-spacing:.04em;
  color:rgba(242,245,247,.46);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.np-doc-legal a:hover{color:var(--coral-2)}

@media (max-width:640px){
  /* on a narrow column text-wrap:pretty shortens several trailing lines at once,
     which reads as an accidental indent. The rag is better left alone there. */
  .np-stand p,.np-what p,.np-doc-stand,.np-list-stand{text-wrap:normal}
  .np-doc-legal{margin-left:0}
}