/* The Signal - hub + article pages.
 *
 * Loads AFTER styles.css, which owns all the shared chrome: nav, .brand/.markb/.word,
 * .nav-r/.nrate/.dl, the .band.bone.signal newsletter block, .h2/.eyebrow2, and the footer.
 * Nothing in here redefines those. If the chrome looks wrong on a Signal page, fix it in
 * styles.css so the homepage moves with it, never here.
 *
 * NOTE: styles.css already claims `.hero` (the homepage's two-column grid), which is why the
 * article's lead image is `.artimg` and not `.hero`.
 */

:root{
  --dim:#8A8574;              /* warm neutral on ink */
  --inkdim:#6B6759;           /* warm neutral on bone */
  --rule:#332F22;             /* hairline on ink */
  --ruleb:rgba(19,18,9,.15);  /* hairline on bone */
  --bone2:#E7E1D4;
  --measure:46rem;            /* article reading measure, ~85 chars at 17px */
  --measure-wide:56rem;       /* tables and other scanned blocks break out to this */
}

/* Article prose needs a smaller base than the marketing pages. */
body{font-size:17px;line-height:1.65}
img{max-width:100%;height:auto;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--volt);color:var(--ink);padding:10px 16px;font-weight:800}
a:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* Matches the nav/footer measure in styles.css so the hub lines up with the homepage. */
/* Anything that also carries .wrap must set padding-top/-bottom, never the `padding`
 * shorthand, or it silently wipes this horizontal padding and the content stops
 * lining up with the nav. */
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.col{max-width:var(--measure);margin:0 auto}

.eyebrow{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--volt);margin:0 0 14px}

/* ---------- hub ---------- */
.hubhead{padding-top:44px;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.hubhead .eyebrow2{color:var(--volt)}   /* mirrors .band.ink .eyebrow2 in styles.css */
.hubhead h1{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(42px,8vw,92px);line-height:.9;margin:10px 0 18px;text-wrap:balance;
  letter-spacing:.004em;color:var(--bone)}
.hubhead h1 .o{color:var(--orange)}
.hubhead p{max-width:40rem;color:#CFC9BB;font-size:19px;margin:0}

.list{list-style:none;padding:0;margin:0}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:118px 1fr;gap:26px;align-items:start;padding:28px 0}
.list a:hover .lt{color:var(--volt)}
.lmeta{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--dim);padding-top:5px;line-height:1.7}
.lmeta .lk{color:var(--orange);display:block}
.lt{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(21px,3vw,29px);
  line-height:1.06;margin:0 0 8px;text-wrap:balance;letter-spacing:.004em;color:var(--bone)}
.ld{display:block;color:#B8B2A4;font-size:16px;margin:0;max-width:44rem}
@media(max-width:680px){
  .list a{grid-template-columns:1fr;gap:10px}
  .lmeta{padding-top:0}
  .lmeta .lk{display:inline;margin-right:8px}
}

/* ---------- article ---------- */
.arthead{padding-top:30px;padding-bottom:34px}
.crumb{font-size:12px;font-weight:700;color:var(--dim);margin:0 0 22px}
.crumb a:hover{color:var(--bone)}
.arthead h1{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(29px,4.1vw,52px);line-height:1.0;margin:0 0 20px;text-wrap:balance;
  letter-spacing:.004em;max-width:26ch;text-transform:none;color:var(--bone)}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--dim)}
.artmeta .k{color:var(--orange)}
.artimg{margin:8px 0 0;border:1px solid var(--rule)}

/* article body sits on bone */
/* The reading column is LEFT-ALIGNED with the article header and the nav above it, not
 * centred in the viewport. Centring it made the H1 and the body start at different x, and
 * on a wide monitor it split the empty space into two symmetric slabs that read as a
 * mistake. All the slack now sits on one side, where it reads as a margin. */
.sheet{background:var(--bone);color:var(--ink);padding:60px 0 68px;margin:34px 0 0}
.sheet .col{margin:0}
.sheet p,.sheet ul,.sheet ol{margin:0 0 19px}
.sheet .lede{font-size:20px;line-height:1.5;margin:0 0 8px}
.sheet h2{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,3vw,30px);line-height:1.04;margin:46px 0 15px;text-wrap:balance;
  letter-spacing:.006em;scroll-margin-top:20px}
.sheet h2:first-of-type{margin-top:38px}
.sheet h3{font-size:18px;font-weight:800;margin:30px 0 10px}
.sheet strong{font-weight:800}
.sheet em{font-style:italic}
.sheet a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:2px;text-underline-offset:3px}
.sheet a:hover{color:var(--orange)}
.sheet code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86em;
  background:var(--bone2);padding:2px 6px}
.sheet ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:15px}
.sheet ul li{padding-left:19px;border-left:2px solid var(--ruleb)}
.sheet ol{padding-left:22px}
.sheet ol li{margin:0 0 10px}
.sheet blockquote{margin:0 0 22px;padding:3px 0 3px 19px;border-left:4px solid var(--orange);font-size:19px}
.sheet blockquote p{margin:0}
.sheet hr{border:0;border-top:2px solid var(--ink);margin:44px 0 30px}

/* Tables break OUT of the reading measure: they are scanned, not read linearly, and a
 * three-column table at prose width is cramped. Centred on .col without markup changes.
 * Capped by the viewport so it can never cause a horizontal page scroll. */
.tablewrap{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch;
  width:min(var(--measure-wide),100vw - 2*clamp(20px,5vw,40px))}
/* 300, not 340: at a 360px phone the column is 320 wide, so 340 forced a 20px sideways
 * scroll on every table for no benefit. Below 300 the columns start colliding, so it
 * keeps the scroll for genuinely tiny screens where that is the honest treatment. */
.sheet table{border-collapse:collapse;width:100%;min-width:300px;font-size:15px;
  font-variant-numeric:tabular-nums}
.sheet th,.sheet td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--ruleb)}
.sheet th{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--inkdim);border-bottom-width:2px;border-bottom-color:rgba(19,18,9,.3)}
.sheet td:not(:first-child),.sheet th:not(:first-child){text-align:right;padding-right:0}
.sheet tbody tr:first-child td{font-weight:700}

.endnote{background:var(--ink);color:var(--bone);padding:28px 26px;margin:38px 0 30px}
.endnote p{margin:0 0 16px;font-size:17px}
.endnote p:last-child{margin:0}
/* The CTA is the homepage's `.appstore` badge, styled in styles.css. These two lines only
 * stop `.sheet a`'s article-link treatment leaking onto it: without them the badge renders
 * with an orange underline struck through the wordmark, and turns orange on hover. */
.endnote .appstore{text-decoration:none;margin-top:4px}
.endnote .appstore:hover{color:var(--ink)}

.srcs{font-size:14.5px;color:var(--inkdim);line-height:1.65}
.srcs li{border-left-color:rgba(19,18,9,.1)}
.srcs a{color:var(--inkdim);text-decoration-color:rgba(19,18,9,.25)}

/* ---------- next up ---------- */
.nextup{padding-top:44px;padding-bottom:10px}
.nextup h2{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:22px;margin:0 0 4px;letter-spacing:.006em;color:var(--bone)}

@media(max-width:620px){
  .sheet{padding:42px 20px 50px}
  body{font-size:16.5px}
  .tablewrap{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}